Text

CSS Text
«Sebelumnya
Tonton video tutorial ini
Next Chapter »

format teks

Teks ini ditata dengan beberapa properti format teks. Pos ini menggunakan text-align, text-transform, dan sifat warna. Paragraf lebih menjorok, selaras, dan ruang antara karakter ditentukan. Menggarisbawahi ini dihapus dari "Cobalah sendiri" link.

Warna Teks

Properti warna yang digunakan untuk mengatur warna teks.

Dengan CSS, warna yang paling sering ditentukan oleh:

     nilai HEX - seperti "# ff0000"
     nilai RGB - seperti "rgb (255,0,0)"
     nama warna - seperti "merah"

Lihatlah Nilai Warna CSS untuk daftar lengkap dari nilai warna mungkin.

Warna default untuk halaman didefinisikan dalam pemilih tubuh.
contoh
body {
     warna: biru;
}

h1 {
     color: # 00FF00;
}

h2 {
     Warna: rgb (255,0,0);
}

Cobalah sendiri »

Catatan Catatan: Untuk W3C CSS compliant: Jika anda mendefinisikan properti warna, Anda juga harus menentukan properti background-color.

teks Keselarasan

Properti text-align digunakan untuk mengatur alignment horizontal teks.

Teks dapat terpusat, atau sejajar ke kiri atau ke kanan, atau dibenarkan.

Ketika text-align diatur ke "membenarkan", setiap baris ditarik sehingga setiap baris memiliki lebar yang sama, dan margin kiri dan kanan lurus (seperti di majalah dan koran).
contoh
h1 {
     text-align: center;
}

p.date {
     text-align: right;
}

p.main {
     text-align: justify;
}

Cobalah sendiri »

Dekorasi teks

Properti text-decoration digunakan untuk mengatur atau menghapus dekorasi dari teks.

Properti text-decoration banyak digunakan untuk menghilangkan garis bawah dari link untuk keperluan desain:
contoh
a {
     text-decoration: none;
}

Cobalah sendiri »

Hal ini juga dapat digunakan untuk menghias teks:
contoh
h1 {
     text-decoration: overline;
}

h2 {
     text-decoration: line-melalui;
}

h3 {
     text-decoration: underline;
}

Cobalah sendiri »

Catatan Catatan: Hal ini tidak dianjurkan untuk menggarisbawahi teks yang tidak link, karena hal ini sering membingungkan pengguna.

teks Transformasi

Properti text-transform digunakan untuk menentukan huruf besar dan huruf kecil dalam teks.

Hal ini dapat digunakan untuk mengubah segalanya menjadi huruf besar atau kecil, atau memanfaatkan huruf pertama dari setiap kata.
contoh
p.uppercase {
     text-transform: uppercase;
}

p.lowercase {
     text-transform: lowercase;
}

p.capitalize {
     text-transform: memanfaatkan;
}

Cobalah sendiri »

teks Indentasi

Properti text-indent digunakan untuk menentukan indentasi baris pertama dari teks.
contoh
p {
     text-indent: 50px;
}