Teks CSS
Kami tidak akan menerangkan atribut dalam jadual di atas satu persatu. Kami hanya akan menerangkan beberapa atribut yang biasa digunakan, terutamanya untuk dipelajari dan dipraktikkan oleh semua orang pada masa yang sama. Anda boleh menguji sendiri kandungan lain dan anda juga boleh melihat kandungan khusus setiap atribut pada w3c.
Contoh 1 warna warna
index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <p>查看颜色</p> <h1>标题查看颜色</h1> </body> </html>
style.css
body{
color: aqua;
}Hasil jalankan :
Anda boleh lihat bahawa kami menetapkan warna untuk badan, tetapi tag p dan h1 juga menunjukkan warna yang ditetapkan oleh badan Warna fon menunjukkan bahawa kedua-dua tag mewarisi warna fon badan.
Contoh 2 penjajaran teks
penjajaran teks ialah atribut asas yang mempengaruhi perhubungan antara baris teks dalam unsur. 3 nilai pertama adalah agak mudah, tetapi yang ke-4 dan ke-5 adalah sedikit lebih rumit.
Nilai kiri, kanan dan tengah menyebabkan teks dalam elemen itu masing-masing dijajar ke kiri, dijajarkan ke kanan dan di tengah.
Bahasa Barat dibaca dari kiri ke kanan dan nilai lalai semua penjajaran teks ditinggalkan. Teks dijajarkan pada sempadan kiri dan bergerigi pada sempadan kanan (dipanggil teks "kiri-ke-kanan"). index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <p>php中文网</p> </body> </html>
style.css
body{
color: red;
text-align: center;
}Hasil jalankan:
Contoh 3 inden teks
Inden teks Inden baris pertama perenggan pada halaman Web Ini adalah salah satu kesan pemformatan teks yang paling biasa digunakan. CSS menyediakan sifat inden teks, yang boleh melaksanakan inden teks dengan mudah. Dengan menggunakan atribut text-indent, baris pertama semua elemen boleh diinden dengan panjang tertentu, malah nilai negatif. Penggunaan atribut ini yang paling biasa ialah untuk mengenden baris pertama perenggan Peraturan berikut akan mengenden baris pertama semua perenggan sebanyak 5 em:
p {text-indent: 5em;}Kod dalam index.html di bawah ialah:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div> <h3>PHP中文网</h3> <p>最好的自学网站</p> <p>最好的自学网站</p> <p>最好的自学网站</p> <p>最好的自学网站</p> </div> </body> </html>
Jika anda tidak menambah sebarang pengubahsuaian css pada masa ini. Kesan yang dipaparkan ialah:
Tambahkan lekukan berikut pada kod style.css kami untuk mengesot tiga perkataan "Bangunan Makmal" sebanyak 2 bait.
h3{
text-indent: 5em;
}Hasil jalankan:
Jarak perkataan
atribut jarak perkataan ialah OK Tukar jarak standard antara aksara (perkataan). Nilai lalainya normal adalah sama seperti menetapkannya kepada 0.
Atribut jarak perkataan menerima nilai panjang positif atau negatif. Jika nilai panjang positif disediakan, jarak antara perkataan meningkat. Menetapkan nilai negatif untuk jarak perkataan akan membawanya lebih dekat:
<html> <body> <h1 style="word-spacing:15px;">设置中文字符间距</h1> <h1 style="word-spacing:15px;">this is a test</h1> </body> </html>
Jarak huruf
Perbezaan antara sifat jarak huruf dan jarak perkataan ialah jarak huruf mengubah suai jarak antara aksara atau huruf.
Seperti atribut jarak perkataan, nilai yang mungkin untuk atribut jarak huruf termasuk semua panjang. Kata kunci lalai adalah biasa (yang sama dengan jarak huruf:0). Nilai panjang yang dimasukkan akan menambah atau mengurangkan ruang antara huruf dengan jumlah yang ditentukan:
<html>
<head>
<style type="text/css">
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
</style>
</head>
<body>
<h1>php中文网</h1>
<h4>php中文网</h4>
</body>
</html>Penukaran Aksara
<🎜 The >atribut text-transform mengendalikan kes teks. Atribut ini mempunyai 4 nilai:- tiada
- huruf besar
- huruf kecil
- menggunakan huruf besar
h1 {text-transform: uppercase}Menggunakan text-transform mempunyai dua faedah. Pertama, tulis sahaja peraturan mudah untuk mencapai pengubahsuaian ini tanpa mengubah suai elemen h1 itu sendiri. Kedua, jika anda kemudian memutuskan untuk menukar semua kes kembali kepada kes asal, adalah lebih mudah untuk menyelesaikan pengubahsuaian. Hiasan Teks
Seterusnya, kita membincangkan atribut hiasan teks, iaitu atribut yang sangat menarik yang menyediakan banyak tingkah laku yang menarik. teks-hiasan mempunyai 5 nilai:- tiada
- garis bawah
- overline
- line-through
- berkelip
a {text-decoration: none;}Nota: Jika anda secara eksplisit menggunakan peraturan sedemikian untuk mengalih keluar garis bawah pautan, maka satu-satunya perbezaan visual antara sauh dan teks biasa ialah warna (sekurang-kurangnya ini adalah lalai, tetapi tidak ada jaminan bahawa warna akan sama) perbezaannya).
Anda juga boleh menggabungkan berbilang hiasan dalam satu peraturan. Jika anda mahu semua hiperpautan digariskan dan digariskan, peraturannya adalah seperti berikut:
a:link a:visited {text-decoration: underline overline;}Walau bagaimanapun, ambil perhatian bahawa jika dua hiasan berbeza sepadan dengan elemen yang sama, nilai peraturan yang menang akan betul-betul Ganti nilai lain. Sila pertimbangkan peraturan berikut:
h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}Untuk peraturan yang diberikan, semua elemen h2 dengan stickyn kelas hanya mempunyai satu hiasan garisan dan tiada garis bawah atau garis atas, kerana nilai hiasan teks akan digantikan sebaliknya Kumpul.
Mengendalikan ruang kosong
Atribut ruang putih mempengaruhi pengendalian ejen pengguna terhadap ruang, baris baharu dan aksara tab dalam dokumen sumber.
Menggunakan atribut ini, anda boleh mempengaruhi cara penyemak imbas mengendalikan ruang kosong antara perkataan dan antara baris teks. Pada tahap tertentu, pemprosesan XHTML lalai sudah mengendalikan ruang putih: ia menggabungkan semua aksara ruang putih ke dalam satu ruang. Oleh itu, memandangkan penanda berikut, apabila dipaparkan dalam pelayar web, hanya satu ruang akan dipaparkan di antara setiap perkataan, manakala baris baharu dalam elemen akan diabaikan:
<p>This paragraph has many spaces in it.</p>
Lalai ini boleh ditetapkan secara eksplisit dengan pengisytiharan berikut Gelagat:
p {white-space: normal;}Peraturan di atas memberitahu penyemak imbas untuk melakukan perkara yang biasa dilakukan: buang sebarang ruang kosong tambahan. Jika nilai ini diberikan, aksara baris baharu (pemulangan pengangkutan) ditukar kepada ruang dan jujukan berbilang ruang pada satu baris ditukar kepada satu ruang.
Arah Teks
Jika anda membaca buku dalam bahasa Inggeris, anda akan membacanya dari kiri ke kanan dan atas ke bawah, iaitu bahasa Inggeris arah aliran. Walau bagaimanapun, ini tidak berlaku untuk semua bahasa. Kita tahu bahawa bahasa Cina kuno dibaca dari kanan ke kiri, dan sudah tentu Ibrani dan Arab dibaca dari kanan ke kiri. CSS2 memperkenalkan sifat untuk menerangkan hala tujunya. Atribut arah
mempengaruhi arah penulisan teks dalam elemen peringkat blok, arah susun atur lajur dalam jadual, arah kandungan mengisi kotak elemennya secara mendatar dan kedudukan baris terakhir dalam elemen yang dibenarkan .
Nota: Untuk elemen sebaris, atribut arah hanya digunakan apabila atribut unicode-bidi ditetapkan untuk membenamkan atau bidi-override. Atribut arah
mempunyai dua nilai: ltr dan rtl. Dalam kebanyakan kes, lalai ialah ltr, yang memaparkan teks dari kiri ke kanan. Jika memaparkan teks kanan ke kiri, nilai rtl harus digunakan.
bahagian seterusnya