Jadwal Kursus

Tutorial Tingkat Lanjut CSS

• Buku Lengkap CSS
• Pengantar CSS
• Basis Gramatika CSS
• Gramatika Tingkat Lanjut CSS
• Pemilihan Pemilihan Turunan CSS
• Pemilihan Pemilihan id CSS
• Pemilihan Pemilihan Klasifikasi CSS
• Pembuatan CSS
• Latar Belakang CSS
• Teks CSS
• Font CSS
• Daftar CSS

Model Kunci CSS

• Ringkasan Model Bounding CSS
• Margin Dalam CSS
• Batas CSS
• Margin Luar CSS
• Perpadanan Margin Luar CSS

Pemosisian CSS

• Ringkasan Lokasi CSS
• Lokasi Relatif CSS
• Lokasi Absolut CSS
• Gelombang CSS

Pemilih CSS

• Pemilihan Pemilihan Elemen CSS
• Pemilihan Pemilihan Grup CSS
• Pemilihan Pemilihan Klasifikasi CSS Dengan Detail
• Pemilihan Pemilihan ID CSS Dengan Detail
• Pemilihan Pemilihan Pemilihan Properti CSS Dengan Detail
• Pemilihan Pemilihan Anak Elemen CSS
• Pemilihan Pemilihan Saudara Klasifikasi CSS
• Pemilihan Pemilihan Saudara Klasifikasi CSS

Kursus Pilihan

Rekomendasi Kursus:

• Panduan Kekuatan CodeW3C.com

Atribut teks CSS dapat menentukan penampilan teks.

Dengan atribut teks, Anda dapat mengubah warna teks, jarak karakter, mengeatur penyejajaran teks, menghias teks, melakukan indentasi teks, dan lain-lain.

Indentasi Teks

Mengurangi baris pertama paragraf di halaman Web, ini adalah efek format teks yang paling sering digunakan.

CSS menyediakan Atribut text-indentAtribut ini memudahkan untuk melaksanakan indentasi teks.

Dengan menggunakan atribut text-indent, baris pertama semua elemen dapat disajikan dengan panjang yang diberikan, bahkan panjang dapat berupa nilai negatif.

Penggunaan paling umum dari properti ini adalah untuk menggeser baris pertama paragraf, aturan berikut akan membuat semua baris pertama paragraf tergeser 5 em:

p {geser_teks: 5em;}

Perhatian:Secara umum, dapat diterapkan text-indent untuk semua elemen blok, tetapi properti ini tidak dapat diterapkan untuk elemen dalam baris, seperti gambar yang merupakan elemen pengganti. Namun, jika elemen blok (seperti paragraf) memiliki gambar di baris pertama, gambar akan bergerak bersamaan dengan teks sisanya di baris tersebut.

Petunjuk:Jika ingin membuat baris pertama elemen dalam baris dalam di geser, dapat digunakan margin kiri atau margin eksternal untuk menciptakan efek ini.

Penggunaan nilai negatif

text-indent dapat diatur menjadi nilai negatif. Dengan teknik ini, dapat dicapai efek yang menarik, seperti "geseran menempatkan", yaitu baris pertama menempatkan di bagian kiri element yang tersisa:

p {geser_teks: -5em;}

Namun, perhatian harus diperhatikan saat menata nilai negatif text-indent, jika paragraf diberikan nilai negatif, beberapa teks baris pertama mungkin keluar dari batas kiri jendela browser. Untuk menghindari masalah tampilan seperti ini, disarankan untuk menata marjin eksternal atau margin internal untuk geseran negatif:

p {geser_teks: -5em; margin-kiri: 5em;}

Penggunaan persen

text-indent dapat menggunakan semua satuan panjang, termasuk persen.

Persen harus bersangkutan dengan lebar elemen induk geseran. Artinya, jika nilai geseran diatur menjadi 20%, baris pertama elemen yang dipengaruhi akan geser ke kiri 20% lebar elemen induk.

Dalam contoh di bawah ini, nilai geseran adalah 20% dari elemen induk, yaitu 100 pixel:

div {lebar: 500px;}
p {geser_teks: 20%;}
<div>
<p>ini adalah paragraf</p>
</div>

Penerus

Atribut text-indent dapat diwarisi, pertimbangkan tanda berikut:

div#outer {lebar: 500px;}
div#inner {geser_teks: 10%;}
p {lebar: 200px;}
<div id="outer">
<div id="inner">beberapa teks. beberapa teks. beberapa teks.</div>
<p>ini adalah paragraf.</p>
</div>
</div>

Paragraf yang berikut ini juga akan tergeser 50 pixel, karena paragraf ini mewarisi nilai geseran id div dengan nama inner.

penempatan horizontal

text-align Sebuah atribut dasar yang akan mempengaruhiBaris teksTipe penempatan yang saling berhubungan. Dua nilai pertama sangat langsung, tetapi nilai keempat dan kelima agak kompleks.

Nilai left, right, dan center akan membuat teks di dalam elemen disesuaikan untuk rata kiri, rata kanan, dan di tengah.

Bahasa Barat dibaca dari kiri ke kanan, sehingga nilai standar text-align adalah kiri. Teks diatur di batas kiri, batas kanan berbentuk gigi (disebut teks dari kiri ke kanan). Untuk bahasa seperti Ibrani dan Arab, text-align secara default adalah kanan, karena bahasa ini dibaca dari kanan ke kiri. Tidak heran, center akan membuat setiap baris teks di tengah elemen.

Petunjuk:Untuk menempatkan elemen blok atau tabel di tengah, perlu menetapkan marjin luar kiri dan kanan yang sesuai atas elemen-elemen tersebut.

text-align:center dan <CENTER>

Anda mungkin berpikir bahwa text-align:center sama dengan fungsi elemen <CENTER>, tetapi keduanya sangat berbeda.

<CENTER> tidak hanya mempengaruhi teks, tetapi juga menempatkan seluruh elemen di tengah. text-align tidak mengontrol penempatan elemen, tetapi hanya mempengaruhi konten dalamnya. Elemen itu sendiri tidak berpindah dari satu bagian ke bagian lain, tetapi hanya teks yang dipengaruhi.

justify

Atribut rata kiri-kanan terakhir adalah justify.

Dalam teks rata kiri-kanan, ujung kiri dan kanan baris teks disebutkan di batas dalam elemen induk. kemudian, atur jarak kata dan huruf untuk membuat panjang setiap baris sama. Anda mungkin telah menemukan bahwa teks rata kiri-kanan umum digunakan di bidang cetak.

Harus dicatat bahwa pengecekan rata kiri-kanan teks diatur oleh agen pengguna (tidak seperti CSS) untuk mengeisi ruang antara batas kiri dan kanan elemen induk. Untuk informasi detil, silakan lihat Halaman referensi atribut text-align CSS.

Jarak kata

Atribut jarak-kataDapat mengubah jarak standar antara kata (kata). Nilai standarnya normal sama dengan yang diatur nilai 0.

Atribut jarak-kata menerima nilai panjang positif atau negatif. Jika disediakan nilai panjang positif, maka jarak antara kata akan di tingkatkan. Menetapkan nilai negatif untuk jarak-kata akan mendekatkan:

p.lebar {jarak-kata: 30px;}
p.tekan {jarak-kata: -0.5em;}
<p class="lebar">
Ini adalah paragraf. Jarak antara kata akan di tingkatkan.
</p>
<p class="tight">
Ini adalah paragraf. Jarak antara kata akan berkurang.
</p>

contoh TIY: Tambahkan atau kurangi jarak kata (jarak kata)

Keterangan:Untuk memahami lebih mendalam definisi CSS tentang 'kata' (word), silakan kunjungi Halaman referensi atribut word-spacing CSS.

Jarak huruf

Atribut letter-spacingPerbedaan dengan word-spacing adalah, jarak huruf mengubah jarak antara karakter atau huruf.

Seperti dengan atribut word-spacing, nilai yang dapat diambil untuk atribut letter-spacing termasuk semua panjang. Keyword default adalah normal (ini sama dengan letter-spacing:0). Nilai panjang yang dimasukkan akan menambah atau mengurangi jarak antara huruf:

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>

contoh TIY: Tentukan jarak karakter (jarak huruf)

Pemecahan karakter

Atribut text-transformPenanganan ukuran huruf teks. Atribut ini memiliki 4 nilai:

• none
• uppercase
• lowercase
• capitalize

Nilai default none tidak melakukan perubahan apapun terhadap teks, akan menggunakan ukuran huruf asli yang ada dalam dokumen sumber. Menurut namanya, uppercase dan lowercase akan mengubah teks menjadi huruf besar dan kecil penuh. Akhirnya, capitalize hanya mengucapkan huruf pertama dari setiap kata.

Sebagai atribut, text-transform mungkin kurang penting, namun jika Anda mendapat ide untuk membuat semua elemen h1 menjadi huruf besar, atribut ini sangat berguna. Tidak perlu mengubah konten semua elemen h1 secara terpisah, cukup menggunakan text-transform untuk melakukan perubahan ini:

h1 {text-transform: uppercase}

Penggunaan text-transform memiliki 2 keuntungan. Pertama, hanya perlu menulis aturan sederhana untuk melakukan perubahan ini, tanpa perlu mengubah elemen h1 sendiri. Kedua, jika nanti Anda memutuskan untuk kembali ke ukuran huruf asli, perubahan ini dapat dilakukan dengan lebih mudah.

contoh TIY: Kendalikan besarnya huruf dalam teks

dekorasi teks

kemudian, kita diskusikan text-decoration 属性Ini adalah atribut yang menarik, yang menyediakan banyak perilaku yang menarik.

text-decoration memiliki 5 nilai:

• none
• underline
• overline
• line-through
• blink

Tidak seperti yang diharapkan, underline akan menambahkan garis bawah ke elemen, seperti elemen U di HTML. Overline bertindak sebaliknya, akan menggambar garis atas di atas teks. Nilai line-through akan menggambar garis merah di tengah teks, yang setara dengan elemen S dan strike di HTML. Blink akan membuat teks berkedip, seperti tanda blink yang disokong Netscape yang kontroversial.

Nilai none akan menutup semua dekoration yang sebelumnya diaplikasikan ke elemen. Biasanya, teks tanpa dekoration adalah penampilan baku, tetapi ini tidak selalu seperti itu. Contohnya, tautan secara baku akan memiliki garis bawah. Jika ingin menghilangkan garis bawah tautan, dapat digunakan CSS seperti berikut ini untuk melakukannya:

a {text-decoration: none;}

Perhatian:Jika secara eksplisit menghapus garis bawah tautan dengan aturan seperti ini, perbedaan visual antara penanda dan teks normal hanya warna (setidaknya ini adalah seperti yang diharapkan, tetapi tidak dapat dijamin bahwa warna pasti berbeda).

Bisa menggabungkan berbagai dekoration dalam aturan yang sama. Jika ingin semua tautan memiliki garis bawah dan garis atas, aturan seperti berikut:

a:link a:visited {text-decoration: underline overline;}

Tetapi perhatikan bahwa jika dua dekoration yang berbeda yang sama dengan elemen yang sama, nilai yang menang akan menggantikan sepenuhnya nilai lainnya. Berhati-hatilah aturan di bawah ini:

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

Untuk aturan yang diberikan, semua elemen h2 dengan class stricken hanya memiliki dekoration garis merah, tanpa garis bawah dan garis atas, karena Nilai text-decoration akan menggantikan daripada menumpuk.

Pengolahan spasi putih

Atribut white-spaceAkan mempengaruhi cara agensi pengguna menangani spasi, garis paragraf, dan karakter tab dalam dokumen sumber.

Dengan menggunakan atribut ini, dapat mempengaruhi cara pengolahan spasi putih antara karakter dan baris teks dalam penanganan browser. Dalam beberapa tingkatan, pengolahan baku XHTML sudah selesai dalam penanganan spasi putih: ia akan menggabungkan semua spasi putih menjadi spasi tunggal. Jadi, dengan tanda di bawah ini, saat ditampilkan di browser web, antara setiap karakter hanya akan muncul spasi tunggal, dan paragraf dalam elemen akan diabaikan:

<p>This     paragraph has    many
    spaces           in it.</p>

Dapat disetel secara ekspresi seperti berikut untuk menentukan perilaku ini:

p {white-space: normal;}

Aturan di atas mengatakan kepada peramban untuk menangani seperti biasa: mengeluarkan spasi ekstra. Jika diberikan nilai ini, karakter pemisah baris (enter) akan diubah menjadi spasi, dan urutan spasi yang berbeda di dalam baris akan diubah menjadi satu spasi.

Contoh TIY: white-space: normal

Nilai pre

Namun, jika pengaturan white-space disetel menjadi pre, penggunaan spasi di elemen yang dipengaruhi oleh atribut ini akan berbeda, perilaku seperti elemen pre XHTML; spasi tidak akan diabaikan.

Jika nilai atribut white-space adalah pre, peramban akan mengehatikan spasi ekstra, bahkan enter. Dalam aspek ini, dan hanya dalam aspek ini, setiap elemen dapat dianggap seperti elemen pre.

Contoh TIY: white-space: pre

Perhatian:Pengujian menunjukkan bahwa peramban IE 7 dan versi sebelumnya tidak mendukung nilai ini, jadi harap gunakan peramban yang bukan IE untuk melihat contoh di atas.

Nilai nowrap

Nilai yang sebaliknya adalah nowrap, yang akan mencegah teks di dalam elemen berpindah baris, kecuali menggunakan elemen br. Pemakaian nowrap di CSS sangat mirip seperti penggunaan <td nowrap> di HTML 4 untuk mengatur sel tabel yang tidak dapat berpindah baris, tetapi nilai white-space dapat diterapkan pada setiap elemen.

Contoh TIY: white-space: nowrap

Nilai pre-wrap dan pre-line

CSS2.1 memperkenalkan nilai pre-wrap dan pre-line, yang sebelumnya tidak ada di versi CSS sebelumnya. Tujuannya adalah untuk memungkinkan kreator mengendalikan penggunaan spasi dengan lebih baik.

Jika pengaturan white-space elemen disetel menjadi pre-wrap, teks di dalam elemen akan mempertahankan urutan spasi, tetapi baris teks akan berpindah baris dengan normal. Jika disetel menjadi nilai ini, penanda pemisah baris asli dan yang dihasilkan akan tetap disimpan. Pre-line yang sebaliknya dari pre-wrap, akan menggabungkan urutan spasi seperti teks normal, tetapi mempertahankan penanda pemisah baris.

Contoh TIY: white-space: pre-wrap

Contoh TIY: white-space: pre-line

Perhatian:Kami telah menguji dua contoh di Internet Explorer 7 dan Firefox 2.0, tetapi hasilnya adalah nilai pre-wrap dan pre-line tidak mendapatkan dukungan yang baik.

Ringkasan

Tabel di bawah ini menyimpulkan perilaku properti white-space:

Arah teks

Jika Anda membaca buku berbahasa Inggris, Anda akan membacanya dari kiri ke kanan dan dari atas ke bawah, ini adalah arah aliran bahasa Inggris. Tapi bukan semua bahasa seperti ini. Kita tahu bahwa bahasa Tionghua kuno dibaca dari kanan ke kiri, termasuk bahasa Ibrani dan Arab dan lainnya. CSS2 memperkenalkan properti untuk mendeskripsikan arahnya.

Properti directionMengaruhkan arah penulisan teks dalam elemen blok, arah tata letak kolom tabel, arah pengisian horizontal dalam kotak elemen, serta posisi baris terakhir dalam elemen yang dilapisi.

Keterangan:Untuk elemen dalam baris, hanya saat Properti unicode-bidiProperti direction akan diterapkan saat diatur menjadi embed atau bidi-override.

Properti direction memiliki dua nilai: ltr dan rtl. Pada sebagian besar kasus, nilai default adalah ltr, menampilkan teks dari kiri ke kanan. Jika menampilkan teks dari kanan ke kiri, gunakan nilai rtl.

Properti Teks CSS

Alat Tangguh

Panduan Referensi CSS

Contoh CSS

Ujian CSS

Panduan CSS

Tautan Pempromosikan