1. Aturan singkatan atribut font CSS
Umumnya, CSS digunakan untuk mengatur atribut font:
berat font: tebal;
gaya font: miring;
font-varient: huruf kecil;
ukuran font:1em;
tinggi garis: 1,5em;
font-family:verdana,sans-serif;
Anda dapat menulis semuanya dalam satu baris:
jenis huruf: huruf kecil miring tebal 1em/1,5em verdana,sans-serif;
Bukankah ini tampak lebih sederhana? Hanya ada satu hal yang perlu diperhatikan: metode steno ini hanya berfungsi ketika properti font-size dan font-family ditentukan pada saat yang bersamaan. Selain itu, jika Anda tidak menyetel bobot font, gaya font, dan varian font, keduanya akan menggunakan nilai default, jadi ingatlah hal ini.
2. Nilai default batas CSS
Anda biasanya dapat mengatur warna, lebar, dan gaya tepinya, seperti:
batas: 3 piksel padat #000;
Hal ini membuat batas tampak lebar 3 piksel, hitam, dan solid. Namun nyatanya, Anda hanya perlu menentukan gayanya di sini.
Jika hanya gaya yang ditentukan, nilai default akan digunakan untuk properti lainnya. Umumnya lebar default Border adalah medium, yang umumnya sama dengan 3 hingga 4 piksel; warna default adalah warna teks. Jika nilai ini sudah pas, tidak perlu menyetel terlalu banyak pengaturan.
3. Gunakan dua kelas untuk elemen secara bersamaan
Umumnya satu elemen diset ke satu kelas (Class), namun bukan berarti dua elemen tidak bisa digunakan. Sebenarnya, Anda bisa melakukan ini:
<p class="sisi teks">…</p>
Berikan elemen P dua kelas sekaligus, dipisahkan dengan spasi, sehingga semua atribut kelas teks dan kelas samping akan ditambahkan ke elemen P. Jika terjadi pertentangan antara atribut-atribut pada kedua kelas, maka yang ditetapkan nanti akan berlaku, yaitu atribut-atribut kelas yang ditempatkan kemudian pada file CSS akan berlaku.
Tambahan: Untuk ID tidak boleh ditulis <p id="text side">…</p> dan tidak boleh ditulis seperti ini
4. CSS untuk pencetakan dokumen
Banyak situs web yang memiliki versi cetak khusus, namun hal ini tidak terlalu diperlukan karena pencetakan dapat ditata menggunakan CSS.
Dengan kata lain, Anda dapat menentukan dua file CSS untuk halaman tersebut, satu untuk tampilan layar dan satu lagi untuk dicetak:
<link type=”text/css” rel=”stylesheet” href=”stylesheet.css” media=”layar” />
<link type=”teks/css” rel=”stylesheet” href=”printstyle.css” media=”print” />
Baris 1 untuk display, baris 2 untuk print, perhatikan atribut media.
Tapi apa yang harus ditulis di CSS pencetakan? Anda dapat mengaturnya dengan cara yang sama seperti Anda mendesain CSS biasa. Saat mendesain, Anda dapat mengatur CSS ini untuk menampilkan CSS untuk memeriksa efeknya. Mungkin Anda akan menggunakan perintah display: none untuk mematikan beberapa gambar dekoratif, mematikan beberapa tombol navigasi, dll.
5. Keterampilan penggantian gambar CSS
Umumnya disarankan untuk menggunakan HTML standar untuk menampilkan teks daripada gambar, yang tidak hanya lebih cepat tetapi juga lebih mudah dibaca. Namun jika ingin menggunakan beberapa font khusus, Anda hanya bisa menggunakan gambar saja.
Misalnya, jika Anda ingin membuat ikon untuk menjual sesuatu, Anda akan menggunakan gambar ini:
<h1><img src=”widget-image.gif” alt=”Beli widget” /></h1>
Tentu saja hal ini mungkin terjadi, tetapi bagi mesin pencari, dibandingkan dengan teks biasa, mereka kurang tertarik dengan teks pengganti di alt. Hal ini karena banyak desainer yang menaruh banyak kata kunci di sini untuk menipu mesin pencari. Jadi caranya harus seperti ini:
<h1>Beli widget</h1>
Tapi tidak ada font khusus. Untuk mencapai efek yang sama, Anda dapat mendesain CSS seperti ini:
h1 { latar belakang: url(widget-image.gif) tanpa pengulangan; tinggi: tinggi gambar indentasi teks: -2000px }
Perhatikan penggantian tinggi bayangan dengan tinggi bayangan sebenarnya. Di sini, gambar akan ditampilkan sebagai latar belakang, dan karena lekukan -2000 piksel diatur, teks sebenarnya akan muncul 2000 titik di sisi kiri layar dan tidak terlihat. Namun bagi orang yang mematikan gambarnya, mungkin tidak bisa melihatnya sama sekali, jadi berhati-hatilah.
6. Teknik lain dari model kotak CSS
Penyesuaian model Box ini terutama untuk browser IE sebelum IE6, yang menghitung lebar batas dan spasi ke dalam lebar elemen. Misalnya:
#kotak { lebar: 100 piksel; batas: 5 piksel; bantalan: 20 piksel }
Sebut saja seperti ini:
<div id="kotak">…</div>
Lebar penuh kotak sekarang seharusnya menjadi 150 poin, yang berlaku di semua browser kecuali IE sebelum IE6. Namun pada browser seperti IE5, lebar penuhnya masih 100 poin. Perbedaan ini dapat diatasi dengan menggunakan metode penyesuaian Kotak yang ditemukan oleh orang-orang sebelumnya.
Namun tujuan yang sama dapat dicapai dengan CSS untuk membuat tampilannya konsisten.
#kotak { lebar: 150 piksel }
#kotak div { batas: 5 piksel; bantalan: 20 piksel }
Disebut seperti ini:
<div id="kotak"><div>…</div></div>
Dengan cara ini, apa pun browsernya, lebarnya adalah 150 poin.
7. CSS mengatur elemen blok agar sejajar secara horizontal di tengah
Jika Anda ingin membuat halaman web dengan lebar tetap dan ingin halaman web berada di tengah secara horizontal, biasanya tampilannya seperti ini:
#content { lebar: 700 piksel; margin: 0 otomatis }
Anda akan menggunakan <div id="content"> untuk mengelilingi semua elemen. Ini sederhana, namun tidak cukup baik, dan versi sebelum IE6 tidak akan menampilkan efek ini. Ubah CSSnya sebagai berikut:
isi { perataan teks: tengah } #content { perataan teks: kiri; lebar: 700 piksel margin: 0 otomatis }
Ini akan memusatkan konten halaman web, sehingga perataan teks: kiri ditambahkan ke Konten.
8. Gunakan CSS untuk menangani perataan vertikal
Perataan vertikal dapat dengan mudah dicapai dengan menggunakan tabel. Cukup atur unit tabel vertical-align: middle. Tapi ini tidak ada gunanya dengan CSS. Jika Anda ingin menyetel bilah navigasi setinggi 2em dan ingin teks navigasi berada di tengah secara vertikal, menyetel atribut ini tidak ada gunanya.
Apa metode CSSnya? Ngomong-ngomong, atur tinggi garis kata-kata ini menjadi 2em: tinggi garis: 2em, dan selesai.
9. Penempatan CSS di dalam container
Salah satu manfaat CSS adalah Anda dapat memposisikan elemen secara sewenang-wenang, bahkan di dalam wadah. Misalnya, untuk wadah ini:
#container { posisi: relatif }
Dengan cara ini, semua elemen dalam wadah akan diposisikan secara relatif, yang dapat digunakan seperti ini:
<div id="container"><div id="navigasi">…</div></div>
Jika Anda ingin mencari lokasi 30 titik dari kiri dan 5 titik dari atas, Anda dapat melakukan ini:
#navigasi { posisi: absolut; kiri: 30 piksel; atas: 5 piksel }
Tentu saja, Anda juga dapat melakukan hal ini:
margin: 5 piksel 0 0 30 piksel
Perhatikan urutan keempat angka tersebut adalah: atas, kanan, bawah, kiri. Tentu saja, terkadang positioning lebih baik daripada margin.
Untuk tata letak dan teknik CSS selengkapnya, silakan lihat sejumlah besar tutorial di 52CSS.com.
10. Warna latar belakang langsung ke bagian bawah layar
Kontrol pada arah vertikal berada di luar kemampuan CSS. Jika Anda ingin bilah navigasi langsung ke bagian bawah halaman seperti bilah konten, menggunakan tabel sangat mudah, tetapi jika Anda hanya menggunakan CSS seperti ini:
#navigasi { latar belakang: biru; lebar: 150px }
Bilah navigasi yang lebih pendek tidak sampai ke bagian bawah; Apa yang harus dilakukan?
Sayangnya, satu-satunya cara untuk berbuat curang adalah dengan menambahkan gambar latar belakang ke kolom yang lebih pendek, lebarnya sama dengan lebar kolom, dan menjadikannya warna yang sama dengan warna latar belakang yang disetel.
isi { latar belakang: url(gambar-biru.gif) 0 0 ulangi-y }
Anda tidak dapat menggunakan em sebagai unit saat ini, karena triknya akan terungkap setelah pembaca mengubah ukuran font, dan Anda hanya dapat menggunakan px.