Klik di sini untuk kembali ke kolom tutorial Wulin.com HTML. Jika Anda ingin menelusuri tutorial CSS, silakan klik di sini.
Atas: Markup Bahasa-CSS Tata Letak . Bab 13 Tentukan Gaya untuk Teks
Saya pikir itu adalah ide yang baik untuk membahas praktik menggunakan CSS untuk mengatur gaya teks dalam satu bab. Secara umum, memproses konten teks mungkin adalah tempat di mana CSS paling banyak digunakan, bahkan untuk situs web yang tidak sepenuhnya mematuhi standar. Hapus tag berulang pada halaman web sekali (dan sekarang) sangat menarik bagi para desainer, dan tidak sulit untuk melihat keuntungan besar menggunakan CSS untuk mengontrol pencetakan teks, yaitu, lebih lanjut memisahkan konten dan metode tampilan.
Dari banyak contoh sebelumnya, kita tahu bahwa CSS dapat menangani banyak situasi, dan mengatur gaya teks adalah cara termudah untuk menambahkan elemen desain untuk halaman web paling dasar. Pada saat yang sama, menambahkan CSS ke teks juga dapat mencegah kami menambahkan gambar yang tidak perlu di halaman.
Dalam bab ini, kita akan melihat bagaimana CSS mengambil sepotong teks yang membosankan dan biasa ke ketinggian lain (dalam warna baru, ukuran dan font). Bagaimana cara membuat hypertext terlihat lebih keren?
Menentukan gaya teks adalah salah satu pekerjaan terbaik yang dimiliki CSS, bahkan ketika menghadapi browser yang sedikit tua dan tidak sepenuhnya mendukung fungsi canggih CSS. Di masa lalu, desainer dan pengembang mungkin ingin membuat halaman web yang tak tertahankan dan sulit digunakan menurut standar saat ini ketika merancang teks untuk mencapai ukuran dan efek tebal (apakah Anda pernah melihat halaman web di mana teks sebagian besar diwakili oleh gambar? Tetapi Anda kebetulan menggunakan browser teks ...)
Untuk memberi Anda beberapa alternatif untuk menggunakan gambar dan menjawab pertanyaan di atas, dalam bab ini, Anda akan mulai dengan paragraf teks yang belum ditata, dan secara bertahap menambahkan berbagai aturan CSS ke dalamnya, menjadikannya desain yang menarik. Waktu yang selalu berubah
Mulailah dengan melihat teks yang akan diproses di font preset browser. Dalam kasus saya, font preset adalah 16 piksel kali. Gunakan browser Safari di Mac OS X. Karena itu, teks yang Anda lihat akan digambarkan dengan cara anti-aliasing. Jika Anda menggunakan Windows XP dan memulai ClearType, Anda dapat melihat efek yang sama.
Waktu (atau varian kali Roman baru) adalah font yang telah ditetapkan untuk banyak browser, namun, ini mudah diubah oleh pengguna ke font favorit mereka sendiri, jadi Anda tentu tidak dapat mengandalkan nilai preset ini.
Gambar 1301 menunjukkan konten teks yang kami gunakan dalam bab ini yang belum ditambahkan dengan gaya: judul sederhana yang ditandai dengan <h1>, dan berikut adalah tiga tips untuk dekorasi rumah.
Gambar 13-1 Browser menampilkan judul, dan efek preset dari teks mengubah ketinggian garis
Salah satu efek gaya teks yang paling sederhana dan paling efektif adalah atribut garis tinggi. Menambahkan beberapa ruang ekstra antara setiap baris teks dapat membuat paragraf teks lebih mudah dibaca, lebih menarik, dan juga membawa efek indah ke halaman Anda.
Anda dapat menyelesaikan teknik ini dengan menambahkan aturan CSS berikut ke tag <body>. Tentu saja, Anda juga dapat menambahkan aturan ini ke tag lain, seperti hanya ingin mengubah ketinggian garis <p>.
tubuh {
Line-Height: 1.5em;
}
Arti kode ini adalah: ketinggian garis teks pada halaman harus 1,5 kali tinggi teks. Saya suka menggunakan unit EM saat menentukan ketinggian garis, karena mereka akan berubah dengan ukuran font.
Gambar 13-2 menunjukkan efek setelah menambahkan garis tinggi.
Gambar 13-2 Efek Setelah Teks yang Diprediksi ditambah tinggi garis
Tampaknya bagus, dan hasil yang dapat dicapai oleh garis kecil yang dapat dicapai luar biasa.
Page sebelumnya 2 3 4 5 Halaman berikutnya Baca teks lengkapnya