Farih.co.id
Home Programming 10 Properti Penataan Teks di CSS

10 Properti Penataan Teks di CSS

Cascading Style Sheets (CSS) menjelaskan bagaimana HTML menampilkan elemen di layar. CSS dapat mengontrol tata letak beberapa halaman web dengan beberapa baris kode.


CSS memiliki properti pemformatan yang memengaruhi spasi, tampilan, dan perataan teks. Berikut adalah beberapa properti yang dapat Anda gunakan untuk mengatur gaya teks pada halaman aplikasi Anda.


1. Warna Teks

Itu warna properti menentukan warna latar depan utama teks Anda. Anda dapat menggunakan nama warna yang telah ditentukan seperti merah, putihatau hijau. Anda juga dapat menggunakan nilai hex atau unit lain seperti RGB, HSL, dan RGBA.

Framework CSS seperti Tailwind CSS memiliki fitur warna bawaan yang menampilkan beragam corak. Ini memudahkan Anda untuk memilih warna yang Anda sukai. Mari ubah warna judul berikut menggunakan beberapa properti ini:

 <body>
    <h1>Change My Color</h1>

    <h2>Change My Color</h2>

    <h3>Change My Color</h3>

    <h4>Change My Color</h4>
</body>

CSS akan terlihat seperti ini:

 h1 {
    color: orange;
}

h2 {
    color: #ff6600;
}

h3 {
    color: rgb(255, 102, 0);
}

h4 {
    color: hsl(24, 100%, 50%);
}

Dan teks yang diberi gaya akan muncul seperti ini:

Properti CSS mengubah warna teks

2. Warna Latar Belakang

Anda dapat menggunakan warna latar belakang properti untuk menciptakan latar belakang yang menarik. Gunakan untuk mengatur latar belakang yang berbeda untuk judul berikut:

 <body>
    <h1>Change My Background Color</h1>

    <h2>Change My Background Color</h2>

    <h3>Change My Background Color</h3>

    <h4>Change My Background Color</h4>
</body>

Dengan CSS berikut:

 h1 {
    background-color: orange;
}

h2 {
    background-color: #009900;
}

h3 {
    background-color: rgb(204, 0, 0);
}

h4 {
    background-color: hsl(60, 100%, 50%);
}

Saat browser Anda merender halaman ini, tampilannya akan seperti ini:

CSS mengatur warna latar belakang teks

3. Perataan Teks

Itu perataan teks properti mengatur perataan horizontal teks. Nilai ini bisa kiri, Kanan, tengahatau membenarkan.

Nilai pembenaran meregangkan setiap baris teks, sehingga semuanya memiliki lebar yang sama di margin kanan dan kiri. Gunakan kode contoh berikut untuk menjelajahi keempat nilai ini:

 <body>
    <h1>Align Me Left</h1>

    <h2> Align Me Right</h2>

    <h3>Align Me center</h3>

    <p class="ex4"><strong>Align me justified</strong>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>

    <p><strong>No alignment </strong>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>

</body>

Gunakan CSS berikut untuk menerapkan perataan yang berbeda:

 h1 {
   text-align: left;
}

h2 {
   text-align: right;
}

h3 {
   text-align: center;
}

.ex4{
   text-align: justify;
}

Di browser akan muncul seperti ini:

properti perataan teks pada teks

4. Arah Teks

Itu teks-arah properti mendefinisikan arah teks. Tentukan arah menggunakan properti rtl (kanan ke kiri) atau ltr (kiri ke kanan). Keduanya menentukan ke arah mana Anda ingin teks mengalir.

Misalnya, gunakan rtl ketika bekerja dengan bahasa yang ditulis dari kanan ke kiri seperti bahasa Ibrani atau Arab. Kau gunakan ltr untuk bahasa yang ditulis dari kiri ke kanan seperti bahasa Inggris.

Mari kita ilustrasikan ini dengan kode di bawah ini:

 <body>
    <div>
         <p class='ex1'>This paragraph goes from right to left. The cursor
        moves from right to left when you type more information on the
        page.</p>

         <p id="ex2">This paragraph goes from left to right. The cursor moves
         from left to write when you type more information on the page!</p>
    </div>
</body>

Dengan CSS yang menyertai ini:

 .ex1 {
    direction: rtl;
}

#ex2 {
    direction: ltr;
}

Hasil akhirnya akan terlihat seperti ini:

text-direction menyelaraskan teks dalam arah yang berbeda

5. Teks Dekorasi

Itu dekorasi teks properti mengatur tampilan garis dekoratif pada teks. Ini singkatan dari teks-dekorasi-garis, teks-dekorasi-warna, teks-dekorasi-gayaDan ketebalan dekorasi teks Properti. Jika Anda tidak ingin memiliki properti pada elemen yang memiliki tautan, gunakan dekorasi teks: tidak ada;

Anda harus menghindari menggarisbawahi teks normal karena gaya tersebut biasanya menunjukkan tautan. Ilustrasi berikut menunjukkan beberapa contoh dalam kode:

 <body>
    <h1>Overline text decoration</h1>

    <h2>Line-through text decoration</h2>

    <h3>Underline text decoration</h3>

    <p class="ex">Overline and underline text decoration.</p>

    <p><a href="default.asp">This is a link</a></p>
</body>

Anda dapat menerapkan berbagai efek dekorasi dengan CSS ini:

 h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

p.ex {
    text-decoration: overline underline;
}

a {
    text-decoration: none;
}

Dan mereka akan menampilkan sesuatu seperti ini:

efek dekorasi teks pada teks

6. Transformasi Teks

Itu transformasi teks properti menentukan jenis huruf yang muncul. Ini bisa dalam huruf besar atau kecil. Anda juga dapat menggunakannya untuk mengkapitalisasi huruf pertama dari setiap kata:

Contoh berikut menunjukkan cara melakukannya dalam kode:

 <body>
    <h1>Examples of text-transform property</h1>

    <p class="uppercase">This sentence is in uppercase.</p>

    <p class="lowercase">This sentence is in lower case.</p>

    <p class="capitalize">Capitalize this text.</p>
</body>

File CSSnya:

 p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

Dengan hasil sebagai berikut:

transformasi teks mengubah teks menjadi kasus yang berbeda

7. Spasi Huruf

Itu spasi huruf properti menentukan ruang antara huruf dalam teks. Contoh berikut mengilustrasikan cara menentukan gaya penspasian yang berbeda.

 <body>
    <h1>Examples of Letter-spacing</h1>

    <h2>This is heading 1</h2>

    <h3>This is heading 2</h3>
</body>

Gunakan piksel, atau satuan ukuran lainnya, dalam file CSS Anda:

 h2 {
    letter-spacing: 7px;
}

h3 {
    letter-spacing: -2px;
}

Dan teks yang dihasilkan akan diregangkan atau diperas:

spasi huruf memungkinkan spasi yang berbeda dalam teks

8. Spasi Kata

Itu spasi kata properti menentukan ruang antara kata-kata dalam teks. Browser memiliki panjang standar untuk ruang antar kata, tetapi Anda dapat mengaturnya sendiri. Contoh berikut mengilustrasikan cara menambah atau mengurangi spasi di antara kata-kata:

 <body>
    <h1>Examples of the Word-spacing Property</h1>

    <p>Normal word spacing.</p>

    <p class="ex1">Large word spacing.</p>

    <p class="ex2">Small word spacing.</p>
</body>

Menggunakan CSS ini:

 p.ex1 {
    word-spacing: 1rem;
}

p.ex2 {
    word-spacing: -0.3rem;
}

Anda dapat dengan jelas melihat efek spasi kata:

efek spasi kata pada teks9. Garis Tinggi

Itu tinggi garis properti menentukan jarak antar baris dalam paragraf. Tinggi baris standar dan default di sebagian besar browser adalah sekitar 110% hingga 120%. Kode berikut mengilustrasikan cara mengubahnya:

 <body>
    <h1>Using line-height</h1>

    <p>
        Standard line-height.

        Standard line-height.

    </p>

    <p class="small">
        Small small line-height.

        Small line-height

    </p>

    <p class="big">
        Bigger line-height.

        Bigger line-height.

    </p>
</body>

Menggunakan CSS berikut:

 p.small {
    line-height: 0.7;
}

p.big {
    line-height: 1.8;
}

Anda dapat melihat hasil antara setiap baris di setiap paragraf:

efek properti lineheight pada teks10. Bayangan Teks

Itu bayangan teks properti menerapkan bayangan ke teks. Anda harus menentukan bayangan horizontal dan bayangan vertikal. Text-shadow dapat menyertakan radius warna dan blur. Mari kita ilustrasikan dengan kode berikut:

 <body>
    <h1>Examples of Text-shadow effect.</h1>

    <h1 class="ex1">Text-shadow with color</h1>

    <h1 class="ex2">Text-shadow with blur effect.</h1>
</body>

Dengan CSS ini:

 h1 {
    text-shadow: 2px 2px;
}

.ex1 {
    text-shadow: 2px 2px orange;
}

.ex2 {
    text-shadow: 2px 2px 10px red;
}

Akan menghasilkan beberapa efek yang tidak biasa dan menarik:

efek bayangan teks pada teks

Mengapa Mempelajari Properti Penataan Teks CSS?

CSS adalah tulang punggung desain web modern. Baik dalam bentuk vanilla atau dalam kerangka kerja, fungsi dasar properti CSS adalah sama. Menguasai properti pemformatan teks memungkinkan Anda membuat antarmuka pengguna yang menarik dan mudah dibaca.

Versi terbaru CSS, CSS3, memperkenalkan konsep baru dari animasi hingga tata letak banyak kolom. Konsep-konsep ini mempermudah pembuatan aplikasi dan dokumen profesional.

Comment
Share:

Leave a Reply

Your email address will not be published. Required fields are marked *

https://167.71.217.241/ https://188.166.210.27/ https://103.253.147.8/ https://139.59.194.132/ https://152.42.192.54/ https://152.42.187.123/ https://188.166.196.248/ https://163.47.9.78/ https://157.230.245.144/ http://68.183.96.87/ http://147.182.210.122/ http://147.182.128.234/ http://167.172.1.184/ http://157.245.5.74/ http://139.59.217.59/ http://163.47.9.16/ http://144.126.251.215/ http://139.59.217.128/ http://103.186.0.254/ http://161.35.251.176/ http://157.245.29.71/ https://170.64.254.102/ https://www.markas303.ac.id/ https://www.markas303.or.id/ https://www.markas303.sch.id/ http://103.172.205.75/ http://103.245.38.119/ http://138.197.224.231/ http://138.197.224.231/

Ad