Teks ini adalah bergaya dengan beberapa format teks properti. Judul menggunakan text-align, text-transform, dan sifat warna. ayat yang menjorok, sejajar, dan ruang antara karakter yang ditentukan. Garis bawah dihapus dari "Coba sendiri" link.
Warna Teks
Properti warna digunakan untuk mengatur warna teks. Warna dapat ditentukan oleh:
* Nama - nama warna, seperti "merah"
* RGB - nilai RGB, seperti "rgb (255,0,0)"
* Hex - nilai hex, seperti "# FF0000"
Warna default untuk halaman didefinisikan di tubuh pemilih.
Contoh
body (warna: biru;)
h1 (color: # 00ff00;)
h2 (color: rgb (255,0,0);)
Coba sendiri »
Catatan Untuk W3C CSS compliant: Jika anda mendefinisikan properti warna, Anda juga harus menentukan warna latar belakang properti.
Alignment Teks
Properti text-align digunakan untuk mengatur alignment horizontal teks.
Teks dapat terpusat, atau disesuaikan ke kiri atau kanan, atau dibenarkan.
Text-align Ketika diatur ke "membenarkan", setiap baris ditarik sehingga setiap baris memiliki lebar yang sama, dan margin kiri dan kanan lurus (seperti di majalah dan surat kabar).
Contoh
h1 (text-align: center;)
p.date (text-align: right;)
p.main (text-align: membenarkan;)
Coba sendiri »
Dekorasi Teks
Properti text-decoration digunakan untuk mengatur atau menghapus dekorasi dari teks.
Properti text-decoration banyak digunakan untuk menghapus menggarisbawahi dari link untuk keperluan desain:
Contoh
a (text-decoration: none;)
Coba sendiri »
Hal ini juga dapat digunakan untuk menghias teks:
Contoh
h1 (text-decoration: overline;)
h2 (text-decoration: line-through;)
h3 (text-decoration: underline;)
h4 (text-decoration: blink;)
Coba sendiri »
Catatan Hal ini tidak dianjurkan untuk menggarisbawahi teks yang bukan link, karena hal ini sering membingungkan pengguna.
Transformasi Teks
Teks-mengubah properti digunakan untuk menentukan huruf besar dan huruf kecil dalam teks.
Hal ini dapat digunakan untuk mengubah segalanya menjadi huruf besar atau huruf kecil, atau mengkapitalisasi huruf pertama dari setiap kata.
Contoh
p.uppercase (text-transform: uppercase;)
p.lowercase (text-transform: lowercase;)
p.capitalize (text-transform: capitalize;)
Coba sendiri »
Indentasi Teks
Properti indentasi teks digunakan untuk menentukan indentasi dari baris pertama dari teks.
Contoh
p (text-indent: 50px;)
Coba sendiri »
Contoh lainnya
Specify the space between characters
This example demonstrates how to increase or decrease the space between characters.
Specify the space between lines
This example demonstrates how to specify the space between the lines in a paragraph.
Set the text direction of an element
This example demonstrates how to change the text direction of an element.
Increase the white space between words
This example demonstrates how to increase the white space between words in a paragraph.
Disable text wrapping inside an element
This example demonstrates how to disable text wrapping inside an element.
Vertical alignment of an image
This example demonstrates how to set the vertical align of an image in a text.
Jumlah pada kolom "" mengindikasikan di mana CSS CSS versi properti didefinisikan (CSS1 atau CSS2).
| Property | Description | Values | CSS |
|---|---|---|---|
| color | Sets the color of a text | color | 1 |
| direction | Sets the text direction | ltr rtl | 2 |
| line-height | Sets the distance between lines | normal number length % | 1 |
| letter-spacing | Increase or decrease the space between characters | normal length | 1 |
| text-align | Aligns the text in an element | left right center justify | 1 |
| text-decoration | Adds decoration to text | none underline overline line-through blink | 1 |
| text-indent | Indents the first line of text in an element | length % | 1 |
| text-shadow | none color length | ||
| text-transform | Controls the letters in an element | none capitalize uppercase lowercase | 1 |
| unicode-bidi | normal embed bidi-override | 2 | |
| vertical-align | Sets the vertical alignment of an element | baseline sub super top text-top middle bottom text-bottom length % | 1 |
| white-space | Sets how white space inside an element is handled | normal pre nowrap | 1 |
| word-spacing | Increase or decrease the space between words | normal length | 1 |
Post a Comment
Tanks atas kunjungannya ke blog ini