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, putih, atau hijau. Anda juga dapat menggunakan nilai hex atau unit lain seperti RGB, HSL, dan RGBA.

Kerangka kerja CSS seperti CSS penarik memiliki fitur warna bawaan yang menampilkan berbagai corak. Ini memudahkan Anda untuk memilih warna yang Anda sukai. Mari ubah warna judul berikut menggunakan beberapa properti ini:

<tubuh>
<h1>Ubah Warna Sayah1>
<h2>Ubah Warna Sayah2>
<h3>Ubah Warna Sayah3>
<h4>Ubah Warna Sayah4>
tubuh>

CSS akan terlihat seperti ini:

h1 {
warna: oranye;
}
h2 {
warna: #ff6600;
}
h3 {
warna: rgb(255, 102, 0);
}
h4 {
warna: hsl(24, 100%, 50%);
}

Dan teks yang diberi gaya akan muncul seperti ini:

2. Warna latar belakang

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

<tubuh>
<h1>Ubah Warna Latar Belakang Sayah1>
<h2>Ubah Warna Latar Belakang Sayah2>
<h3>Ubah Warna Latar Belakang Sayah3>
<h4>Ubah Warna Latar Belakang Sayah4>
tubuh>

Dengan CSS berikut:

h1 {
warna latar belakang: oranye;
}
h2 {
warna latar belakang: #009900;
}
h3 {
warna latar belakang: rgb(204, 0, 0);
}
h4 {
warna latar belakang: hsl(60, 100%, 50%);
}

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

3. Perataan Teks

Itu perataan teks properti mengatur perataan horizontal teks. Nilai ini bisa kiri, Kanan, tengah, atau 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:

<tubuh>
<h1>Sejajarkan Saya Kirih1>
<h2> Sejajarkan Saya dengan Benarh2>
<h3>Sejajarkan saya di tengahh3>
<Pkelas="ex4"><kuat>Sejajarkan saya dibenarkankuat>:Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.P>
<P><kuat>Tidak ada penyelarasan kuat>:Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.P>
tubuh>

Gunakan CSS berikut untuk menerapkan perataan yang berbeda:

h1 {
perataan teks: kiri;
}
h2 {
perataan teks: Kanan;
}
h3 {
perataan teks: tengah;
}
.ex4{
perataan teks: membenarkan;
}

Di browser akan muncul seperti ini:

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:

<tubuh>
<div>
<Pkelas='ex1'>Paragraf ini dimulai dari kanan ke kiri. Kursor
 bergerak dari kanan ke kiri saat Anda mengetik lebih banyak informasi di
 halaman.P>
<Ppengenal="ex2">Paragraf ini dimulai dari kiri ke kanan. Kursor bergerak
 dari kiri untuk menulis saat Anda mengetik lebih banyak informasi di halaman!P>
div>
tubuh>

Dengan CSS yang menyertai ini:

.ex1 {
arah: rtl;
}
#ex2 {
arah: ltr;
}

Hasil akhirnya akan terlihat seperti ini:

5. Dekorasi Teks

Itu dekorasi teks properti mengatur tampilan garis dekoratif pada teks. Ini singkatan dari teks-dekorasi-garis,teks-dekorasi-warna,teks-dekorasi-gaya, Dan 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:

<tubuh>
<h1>Overline dekorasi teksh1>
<h2>Dekorasi teks baris-melaluih2>
<h3>Garis bawah dekorasi teksh3>
<Pkelas="mantan">Overline dan underline dekorasi teks.P>
<P><Ahref="default.asp">Ini tautanA>P>
tubuh>

Anda dapat menerapkan berbagai efek dekorasi dengan CSS ini:

h1 {
dekorasi teks: garis besar;
}
h2 {
dekorasi teks: line-through;
}
h3 {
dekorasi teks: menggarisbawahi;
}
P.mantan {
dekorasi teks: garis besarmenggarisbawahi;
}
A {
dekorasi teks: tidak ada;
}

Dan mereka akan menampilkan sesuatu seperti ini:

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:

<tubuh>
<h1>Contoh properti transformasi teksh1>
<Pkelas="huruf besar">Kalimat ini menggunakan huruf besar.P>
<Pkelas="huruf kecil">Kalimat ini dalam huruf kecil.P>
<Pkelas="memanfaatkan">Gunakan huruf besar untuk teks ini.P>
tubuh>

File CSSnya:

P.huruf besar {
transformasi teks: huruf besar;
}
P.huruf kecil {
transformasi teks: huruf kecil;
}
P.memanfaatkan {
transformasi teks: memanfaatkan;
}

Dengan hasil sebagai berikut:

7. Spasi Huruf

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

<tubuh>
<h1>Contoh spasi hurufh1>
<h2>Ini judul 1h2>
<h3>Ini judul 2h3>
tubuh>

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

h2 {
spasi huruf: 7px;
}
h3 {
spasi huruf: -2px;
}

Dan teks yang dihasilkan akan diregangkan atau diperas:

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:

<tubuh>
<h1>Contoh Properti Word-spacingh1>
<P>Spasi kata normal.P>
<Pkelas="ex1">Spasi kata besar.P>
<Pkelas="ex2">Spasi kata kecil.P>
tubuh>

Menggunakan CSS ini:

P.ex1 {
spasi kata: 1rem;
}
P.ex2 {
spasi kata: -0.3rem;
}

Anda dapat dengan jelas melihat efek spasi kata:

9. Tinggi garis

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:

<tubuh>
<h1>Menggunakan garis-tinggih1>
<P>
 Tinggi garis standar.
 Tinggi garis standar.
P>
<Pkelas="kecil">
 Tinggi garis kecil kecil.
 Tinggi garis kecil
P>
<Pkelas="besar">
 Tinggi garis lebih besar.
 Tinggi garis lebih besar.
P>
tubuh>

Menggunakan CSS berikut:

P.kecil {
tinggi garis: 0.7;
}
P.besar {
tinggi garis: 1.8;
}

Anda dapat melihat hasil antara setiap baris di setiap paragraf:

10. Bayangan teks

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

<tubuh>
 <h1>ContohdariBayangan teksmemengaruhi.h1>
 <h1kelas="ex1">Bayangan teksdenganwarnah1>
 <h1kelas="ex2">Bayangan teksdenganmengaburkanmemengaruhi.h1>
tubuh>

Dengan CSS ini:

h1 {
 teks-bayangan: 2px 2px;
}
.ex1 {
 teks-bayangan: 2px 2px oranye;
}
.ex2 {
 teks-bayangan: 2px 2px 10px merah;
}

Akan menghasilkan beberapa efek yang tidak biasa dan menarik:

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.