Pelajari standar web dan ikuti standar web untuk pengembangan dan produksi. 52CSS.com telah berdiskusi dengan Anda banyak masalah terkait tata letak, dan konten utama yang disajikan pada halaman tersebut adalah gambar dan teks. Hari ini, kami akan berdiskusi dengan Anda masalah terkait tata letak teks dalam tata letak halaman web CSS.
Cara mengatur font, warna, ukuran, spasi paragraf, drop cap, dan indentasi baris pertama. Terakhir, kita akan membahas beberapa tata letak bahasa Mandarin yang umum digunakan di halaman web, seperti pemotongan karakter bahasa Mandarin, pembungkusan kata dengan lebar tetap (wrap-wrap dan word-break), dll. Karena saya baru saja menulis beberapa pengalaman aplikasi, jika Anda memerlukan pengenalan lengkap tentang properti CSS dan studi lebih mendalam, Anda dipersilakan untuk merujuk ke tutorial lebih lanjut di 52CSS.com.
1. Atur font teks, warna, ukuran, dll. Menggunakan font, dll.
font-style menyetel huruf miring, seperti font-style: italic;
font-weight mengatur ketebalan teks, seperti font-weight: bold;
font-size mengatur ukuran teks, seperti font-size: 12px; (atau 9pt, silakan merujuk ke manual CSS untuk masalah tampilan di unit yang berbeda)
line-height mengatur spasi baris, seperti line-height: 150%;
color mengatur warna teks (perhatikan bukan warna font), seperti color: red;
font-family mengatur font, seperti font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynasty, sans-serif;
2. Tata letak paragraf: gunakan margin, padding, dan perataan teks.
Paragraf berbahasa Mandarin menggunakan tag <p> (atau wadah lainnya). Margin atau padding dapat digunakan untuk kiri dan kanan (setara dengan indentasi) serta spasi sebelum dan sesudah paragraf. Misalnya:
Contoh Kode Sumber [www.downcodes.com]
P{
margin: 18px 6px 6px 18px;
/*Mereka atas, kanan, bawah, kiri, searah jarum jam mulai pukul dua belas*/
}
Gunakan perataan teks untuk perataan teks, misalnya:
Contoh Kode Sumber [www.downcodes.com]
P{
perataan teks: tengah; /*perataan tengah*/
}
Metode penyelarasan meliputi kiri, kanan dan justify (ratakan kedua ujungnya)
Ada banyak pemula yang belum terlalu paham dengan margin dan padding. Lihat gambar di bawah untuk representasinya.
3. Teks vertikal: gunakan mode penulisan.
Atribut mode penulisan memiliki dua nilai, lr-tb dan tb-rl. Yang pertama adalah default kiri-kanan, atas-bawah, dan yang terakhir adalah atas-bawah, kanan-kiri.
Misalnya:
Contoh Kode Sumber [www.downcodes.com]
P{
mode penulisan: tb-rl;
}
Dapat dikombinasikan dengan pengaturan huruf arah.
4. Masalah poin: menggunakan gaya daftar
Simbol poin dalam CSS antara lain cakram (titik padat), lingkaran (lingkaran terbuka), persegi (persegi padat), desimal (angka Arab), romawi kecil (angka romawi kecil), romawi atas (angka romawi besar), -alpha bawah (huruf kecil bahasa Inggris), upper-alpha (huruf besar bahasa Inggris), none (tidak ada). Misalnya, atur poin daftar (ul atau ol) menjadi kotak, seperti:
Contoh Kode Sumber [www.downcodes.com]
li{
gaya daftar: persegi;
}
Selain itu, gaya daftar juga memiliki beberapa nilai. Misalnya, Anda dapat menggunakan beberapa gambar kecil sebagai poin-poin, dan cukup menulis url ("alamat gambar") langsung di bawah gaya daftar. Namun 52CSS.com sangat tidak menganjurkan pendekatan ini. Disarankan agar Anda mengatur gambar sebagai latar belakang li.
5. Efek Tutup Jatuh
Objek semu: huruf pertama dapat digunakan dengan ukuran font dan float untuk membuat efek drop cap.
Misalnya:
Contoh Kode Sumber [www.downcodes.com]
p:huruf pertama{
bantalan: 6 piksel;
ukuran font: 32pt;
mengapung: kiri;
}
6. Indentasi teks: gunakan indentasi teks
text-indent dapat membuat indentasi baris pertama dalam container dengan satuan tertentu. Misalnya, paragraf bahasa Mandarin biasanya memiliki dua karakter Mandarin sebelum setiap paragraf. Dapat ditulis seperti ini:
Contoh Kode Sumber [www.downcodes.com]
P{
indentasi teks: 2em; /*em adalah satuan relatif, 2em dua kali ukuran kata*/
}
Jika ukuran font adalah 12px, maka text-indent: 2em akan diindentasi sebesar 24px.
7. Pemotongan karakter Cina dengan lebar tetap: gunakan text-overflow (menampilkan efek elipsis)
Bahasa latar belakang dapat digunakan untuk memotong konten bidang dalam database, misalnya 12 karakter Cina (setelahnya menggunakan elips). Namun terkadang perlu memfilter tag html, dll., tetapi menggunakan CSS untuk mengontrol tidak menimbulkan masalah ini. Misalnya, terapkan gaya berikut ke daftar:
Contoh Kode Sumber [www.downcodes.com]
li{
meluap: tersembunyi;
luapan teks: elipsis;
spasi putih:nowrap;
}
8. Pemisahan baris karakter (kata) Cina dengan lebar tetap: gunakan pemisah kata
Misalnya, jika Anda ingin menampilkan banyak nama tempat (diasumsikan dipisahkan dengan spasi) dalam wadah dengan lebar tetap, untuk menghindari nama tempat terpecah di tengah (yaitu, satu kata di atas dan kata lainnya dipecah ke baris berikutnya). Kemudian Anda bisa menggunakan kata-break. Misalnya:
Contoh Kode Sumber [www.downcodes.com]
<div style="width:210px;height: 200px;background: #ccc;word-break:keep-all">
Nanjing Shanghai Shanghai Nanjing Shanghai Nanjing Shanghai Shanghai Shanghai Nanjing Shanghai Shanghai Nanjing Shanghai Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Shanghai Nanjing Shanghai Shanghai
</div>
Perlu dicatat bahwa ruang di dalamnya tidak dapat digantikan oleh (setidaknya harus ada satu ruang lunak). .
9. Notasi fonetik Cina: menggunakan tag ruby dan atribut ruby-align
Misalnya, untuk <ruby>Zhuyin<rt style="font-size: 11px;">zhu yin</rt></ruby>, Anda bisa menggunakan ruby-align untuk menyetel perataannya. Ini terlihat di manual CSS. Anda dapat memeriksa item ruby-align untuk detailnya.