Jadwal kursus

Tutorial tingkat tinggi CSS

• Buku Tambahan CSS
• Sampel CSS
• Bentuk Dasar CSS
• Bentuk Mahir CSS
• Pemilihan Pemilihan Turun CSS
• Pemilihan Pemilihan id CSS
• Pemilihan Pemilihan Klas CSS
• Pembuatan CSS
• Latar Belakang CSS
• Teks CSS
• Font CSS
• Daftar CSS

Model kotak CSS

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

Pemosisian CSS

• Ringkasan Pengiriman CSS
• Pengiriman Relatif CSS
• Pengiriman Absolut CSS
• Gelombang CSS

Pemilih CSS

• Pemilihan Pemilihan Elemen CSS
• Pemecahan Pemilihan CSS
• Pemilihan Klas CSS Dalam Perincian
• Pemilihan ID CSS Dalam Perincian
• Pemilihan Pemilihan Attribut CSS Dalam Perincian
• Pemilihan Pemilihan Anak-Anak CSS
• Pemilihan Pemilihan Sibling Berikutnya CSS
• Panduan CodeW3C.com

Kursus pilihan

Rekomendasi Kursus:

• Bantuan CodeW3C.com

Properti teks CSS dapat menentukan penampilan teks.

Dengan properti teks, Anda dapat mengubah warna teks, jarak karakter, penyejajaran teks, hiasan teks, mengurangi teks, dan sebagainya.

TeksIndent

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

CSS menyediakan Properti text-indentProperti ini dapat memudahkan pengecampuran teks.

Dengan menggunakan properti text-indent, setiap baris pertama semua elemen dapat disendikan sejumlah panjang yang diberikan, bahkan panjang dapat negatif.

Penggunaan paling biasa daripada property ini adalah untuk menggeser baris pertama paragraf, atur peraturan di bawah akan menggeser baris pertama semua paragraf 5 em:

p {geser teks: 5em;}

perhatian:Secara umum, boleh digunakan text-indent untuk semua elemen blok, tetapi property ini tidak boleh diterapkan kepada elemen teks dalam, seperti imej yang digantung, dan property text-indent tidak boleh diterapkan kepada elemen penggantian. Walau bagaimanapun, jika elemen blok (contohnya paragraf) ada imej di baris pertama, imej itu akan bergerak bersama-sama dengan teks di baris lain.

Petunjuk:Jika ingin 'geser' baris pertama elemen teks dalam baris, boleh digunakan marjin kiri dalaman atau marjin luar untuk mencipta kesan ini.

Guna nilai negatif

text-indent boleh diatur kepada nilai negatif. Dengan teknik ini, banyak kesan menarik boleh dicapai, seperti 'geseran terhanging', iaitu baris pertama terhanging di sebelah kiri bagian kekal elemen:

p {geser teks: -5em;}

Walau bagaimanapun, perhatian harus diberikan untuk nilai negatif text-indent, jika bagi paragraf diatur nilai negatif, beberapa teks baris pertama mungkin keluar dari sempadan kiri penuh pindah. Untuk mengelakkan masalah paparan ini, disarankan untuk mengatur marjin luar atau beberapa marjin dalaman untuk geseran negatif:

p {geser teks: -5em; margin-kiri: 5em;}

Guna peratusan

text-indent boleh menggunakan semua unit panjang, termasuk peratusan.

Peratusan perlu bersangkutan dengan lebar elemen geseran bapa. Bagi keperluan, jika nilai geseran diatur kepada 20%, baris pertama elemen yang dipengaruhi akan diseret 20% lebar bapa elemen.

Dalam contoh di bawah, nilai geseran adalah 20% daripada elemen bapa, iaitu 100 piksel:

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

Penerus

Sifat text-indent boleh diwarisi, sila pertimbangkan tanda di bawah:

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

Bilangan paragraf di dalam tanda ini akan tergeser 50 piksel, kerana paragraf ini mewarisi nilai geseran id div inner.

penataan horizontal

text-align adalah atribut dasar yang akan mempengaruhiBaris teksCara penataan yang berurutan. 3 nilai pertama cukup langsung, tetapi nilai ke 4 dan ke 5 agak kompleks.

Nilai left, right, dan center akan mengatur teks di dalam elemen untuk sejajar kiri, sejajar kanan, dan di tengah.

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

Petunjuk:Untuk menengahkan elemen blok atau tabel, perlu menetapkan marjin luar kiri dan kanan dengan cara yang sesuai untuk elemen tersebut.

text-align:center dengan <CENTER>

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

<CENTER> tidak hanya mempengaruhi teks, tetapi juga mengatur elemen seluruhnya untuk di tengah. text-align tidak mengatur penataan elemen, tetapi hanya mempengaruhi konten dalam. Elemen itu sendiri tidak berpindah dari satu bagian ke bagian lain, hanya teks yang dipengaruhi.

justify

Atribut yang terakhir untuk penataan horizontal adalah justify.

Dalam teks diatur untuk mengisi ruang, 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 sudah mengetahui bahwa teks diatur untuk mengisi ruang umumnya digunakan di bidang cetak.

Perhatian: untuk menentukan bagaimana teks diatur untuk mengisi ruang antara batas kiri dan kanan elemen induk, hal ini disebabkan oleh agen pengguna (tidak CSS). Untuk mengetahui detil, silakan lihat Halaman referensi property text-align CSS.

Jarak kata

Property word-spacingBisa mengubah jarak standar antara kata (kata). Nilai defaultnya normal sama dengan pengaturan nilai 0.

Property word-spacing menerima nilai panjang positif atau negatif. Jika disediakan nilai panjang positif, maka jarak antara kata akan bertambah. Menetapkan nilai negatif untuk word-spacing akan mendekatkan:

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
Ini adalah paragraf. Jarak antara kata akan bertambah.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>

实例 TIY ：增加或减少单词间距（字间隔）

catatan:如需深入理解 CSS 对“字”（word）的定义，请访问 CSS word-spacing 属性参考页.

字母间隔

letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。

与 word-spacing 属性一样，letter-spacing 属性的可取值包括所有长度。默认关键字是 normal（这与 letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增加或减少指定的量：

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

实例 TIY ：规定字符间距（字母间隔）

字符转换

text-transform 属性处理文本的大小写。这个属性有 4 个值：

• none
• uppercase
• lowercase
• capitalize

默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。

作为一个属性，text-transform 可能无关紧要，不过如果您突然决定把所有 h1 元素变为大写，这个属性就很有用。不必单独地修改所有 h1 元素的内容，只需使用 text-transform 为你完成这个修改：

h1 {text-transform: uppercase}

使用 text-transform 有两方面的好处。首先，只需写一个简单的规则来完成这个修改，而无需修改 h1 元素本身。其次，如果您以后决定将所有大小写再切换为原来的大小写，可以更容易地完成修改。

实例 TIY ：控制文本中字母的大小写

文本装饰

接下来，我们讨论 text-decoration 属性Ini adalah properti yang menarik, yang menyediakan banyak perilaku yang menarik.

Properti 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 melintasi 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 menghapus garis bawah tautan, Anda dapat menggunakan CSS seperti berikut 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 hal yang biasa, tetapi tidak dapat dijamin bahwa warna pasti berbeda).

Anda dapat menggabungkan beberapa dekoration dalam satu aturan. Jika ingin semua tautan memiliki garis bawah dan garis atas, aturan seperti berikut:

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

Namun, perhatikan bahwa jika dua dekoration yang berbeda cocok dengan elemen yang sama, nilai yang menang akan menggantikan sepenuhnya nilai lainnya. Berhati-hatilah aturan berikut:

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 melintasi satu, tanpa garis bawah dan garis atas, karena Nilai text-decoration akan menggantikan daripada menggabungkan.

Mengelola spasi putih

Properti white-spaceAkan mempengaruhi cara peramban pengguna mengelola spasi, baris paragraf, dan karakter tab dalam dokumen sumber.

Dengan menggunakan properti ini, anda dapat mempengaruhi cara pengelolaan spasi putih antara karakter dan baris teks pengguna peramban. Dalam beberapa cara, pengelolaan spasi putih yang default XHTML sudah selesai: ia akan menggabungkan semua spasi putih menjadi satu spasi. Jadi, dengan pemeriksaan berikut, saat ditampilkan di peramban web, setiap karakter hanya akan menampilkan satu spasi, dan paragraf di dalam elemen akan diabaikan:

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

Dapat diset dengan tanda pengesahan berikut untuk menentukan perilaku ini secara eksplisit:

p {white-space: normal;}

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

Contoh TIY: white-space: normal

Nilai pre

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

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

Contoh TIY: white-space: pre

perhatian:Pengujian menunjukkan bahwa peramban IE 7 dan versi yang lebih awal 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 untuk berpindah baris, kecuali menggunakan elemen br. Pemakaian nowrap di CSS sangat mirip dengan <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 penulis untuk mengendalikan penggunaan spasi dengan lebih baik.

Jika setting white-space elemen di pre-wrap, teks di dalam elemen akan mempertahankan urutan spasi, tetapi baris teks akan berpindah baris dengan normal. Jika diatur ke nilai ini, penanda pemisah baris teks sumber dan yang dihasilkan akan tetap disimpan. Pre-line yang sebaliknya dengan 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 IE7 dan FireFox2.0 browser, tetapi hasilnya adalah nilai pre-wrap dan pre-line tidak mendapatkan dukungan yang baik.

ringkasan

tabel di bawah ini menyumarkan perilaku sifat white-space:

arah teks

jika Anda membaca buku berbahasa Inggris, Anda akan membaca 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 sifat untuk mendeskripsikan kearahannya.

sifat directionmempengaruhi arah penulisan teks blok elemen, arah tata letak kolom tabel, arah pengisian horizontal ke dalam kotak elemen, serta posisi baris terakhir dalam elemen yang teratur.

catatan:untuk elemen dalam baris, hanya saat sifat unicode-bidisifat direction akan diterapkan hanya saat diatur menjadi embed atau bidi-override.

sifat 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.

sifat teks CSS

Alat Tangkap

Panduan Rujukan CSS

Contoh CSS

Ujian CSS

Panduan CSS

Pautan Pempromosikan