1. aturan singkatan font cs s
Saat menggunakan css untuk mendefinisikan font, Anda dapat melakukan ini:
| ukuran font: 1em; tinggi garis: 1,5em; berat font: tebal; gaya font: miring; varian font: huruf kecil; keluarga font: verdana,serif; |
Sebenarnya Anda bisa menyingkat properti ini:
| jenis huruf: 1em/1,5em huruf miring tebal verdana,serif; |
Ini jauh lebih baik sekarang, tetapi ada satu hal yang perlu diperhatikan: untuk menggunakan metode singkatan ini, Anda harus menentukan setidaknya properti font-size dan font-family. Jika properti lainnya (seperti font-weight, font-style, font-family) varian) tidak ditentukan, nilai default akan digunakan secara otomatis.
2. Gunakan dua kelas sekaligus
Biasanya kita hanya menentukan satu kelas untuk suatu atribut, namun bukan berarti Anda hanya bisa menentukan satu kelas saja. Bahkan, Anda bisa menentukan sebanyak yang Anda mau, misalnya:
| isi |
Dengan menggunakan dua kelas sekaligus (memisahkannya dengan spasi, bukan koma), paragraf ini akan menerapkan aturan yang ditentukan di kedua kelas. Jika ada aturan yang tumpang tindih, maka aturan terakhirlah yang akan diutamakan.
3. Nilai default perbatasan di css
Saat menulis aturan batas, Anda biasanya menentukan warna, lebar, dan gaya (dalam urutan apa pun). Misalnya: border: 3px solid #000 (batas hitam solid selebar 3 piksel). Faktanya, satu-satunya nilai yang perlu ditentukan dalam contoh ini adalah gaya. Jika Anda menentukan gaya sebagai solid, maka nilai default akan digunakan untuk nilai lainnya: lebar default adalah sedang (setara dengan 3 hingga 4 piksel); . Jika ini yang Anda inginkan, Anda tidak perlu menentukannya di css.
4. !important akan diabaikan oleh IE
Dalam CSS, aturan terakhir yang ditentukan biasanya diutamakan. Namun, untuk browser selain IE, pernyataan apa pun yang ditandai dengan !important akan mendapat prioritas mutlak, misalnya:
| margin-atas: 3,5em !penting; margin-atas: 2em |
Margin atas adalah 3,5em di semua browser kecuali IE, dan 2em di IE. Terkadang ini berguna, terutama saat menggunakan nilai margin relatif (seperti contoh ini), untuk menunjukkan perbedaan antara IE dan browser lain.
(IE di sini mengacu pada: IE6 dan di bawahnya, tidak termasuk IE7. Faktanya, IE7 mendukung atribut !important, dan hal yang sama berlaku untuk sub-selektor css)
5. Keterampilan penggantian gambar
Seringkali lebih bijaksana menggunakan html standar daripada gambar untuk menampilkan teks, selain mempercepat pengunduhan dan menghasilkan kegunaan yang lebih baik. Namun jika Anda bertekad untuk menggunakan font yang mungkin tidak tersedia di mesin pengunjung Anda, Anda hanya dapat memilih gambar.
Misalnya, Anda ingin menggunakan judul "Beli widget" di bagian atas setiap halaman, tetapi Anda juga ingin judul tersebut ditemukan oleh mesin pencari. Jika Anda menggunakan font langka untuk estetika, maka Anda harus menggunakan gambar untuk ditampilkan itu. Punya:
Hal ini memang benar, tetapi ada bukti bahwa mesin pencari lebih menghargai teks asli daripada teks alternatif (karena terlalu banyak situs web yang menggunakan teks alternatif sebagai kata kunci), jadi kita harus menggunakan metode lain:
Beli widget, tapi bagaimana dengan font cantik Anda? Css berikut dapat membantu:
| h1 { latar belakang: url(widget-image.gif) tanpa pengulangan; } rentang h1 { posisi: mutlak; kiri:-2000 piksel; } |
Sekarang Anda memiliki gambar yang indah dan teks asli yang disembunyikan dengan baik - dengan bantuan CSS, teks diposisikan -2000 piksel dari sisi kiri layar.
6. Opsi lain untuk peretasan model kotak css. Peretasan model kotak css digunakan untuk menyelesaikan masalah tampilan browser sebelum IE6 . Versi sebelum IE6.0 akan menyertakan nilai batas dan nilai bantalan elemen dalam lebarnya (bukan ditambahkan ke dalamnya). nilai lebar). Misalnya, Anda mungkin menggunakan css berikut untuk menentukan dimensi kontainer:
| #kotak { lebar: 100 piksel; batas: 5 piksel; bantalan: 20 piksel; } |
Kemudian terapkan dalam html:
Total lebar kotaknya adalah 150 pixel di hampir semua browser (lebar 100 pixel + dua border 5 pixel + dua padding 20 pixel), kecuali di browser sebelum IE6 masih 100 pixel (nilai border dan nilai padding sudah termasuk dalam nilai lebar), peretasan model kotak dirancang untuk mengatasi masalah ini, tetapi juga akan menimbulkan masalah. Cara yang lebih sederhana adalah sebagai berikut:
| css: #kotak { lebar: 150 piksel; } #kotak div { batas: 5 piksel; bantalan: 20 piksel; } html: ... |
Ini akan menghasilkan lebar total kotak menjadi 150 piksel di browser apa pun.
7. Elemen blok tengah
Dengan asumsi bahwa situs web Anda menggunakan tata letak dengan lebar tetap dan semua konten ditempatkan di tengah layar, Anda dapat menggunakan css berikut:
| #isi { lebar: 700 piksel; margin: 0 otomatis; } |
Anda dapat menempatkan item apa pun di dalam badan HTML, dan item tersebut secara otomatis akan mendapatkan nilai batas kiri dan kanan yang sama untuk memastikan tampilan terpusat. Namun masalah ini masih menjadi masalah di browser sebelum IE6 dan tidak akan terpusat, sehingga harus dimodifikasi sebagai berikut:
| tubuh { perataan teks: tengah; } #isi { perataan teks: kiri; lebar: 700 piksel; margin: 0 otomatis; } |
Menyetel isi akan menyebabkan konten utama berada di tengah, tetapi bahkan semua teks akan berada di tengah. Ini mungkin bukan efek yang Anda inginkan. Karena alasan ini, div #content juga harus menentukan nilai: text-align: left
8. Gunakan css untuk mencapai pemusatan vertikal
Pemusatan vertikal adalah hal yang mudah untuk tabel, cukup tentukan sel sebagai perataan vertikal: tengah, tetapi ini tidak berfungsi dalam tata letak CSS. Misalkan Anda mengatur tinggi menu navigasi menjadi 2em, lalu menentukan aturan perataan vertikal di CSS, teks akan tetap tersusun di bagian atas kotak, tidak ada perbedaan sama sekali.
Untuk mengatasi masalah ini tinggal atur tinggi garis kotak sama dengan tinggi kotak. Pada contoh ini tinggi kotak adalah 2em, selanjutnya Anda hanya perlu menambahkan lagi line-height: 2em pada css. Mencapai pemusatan vertikal!
9. Penentuan posisi CSS di dalam container
Salah satu keuntungan terbesar CSS adalah objek dapat diposisikan di mana saja dalam dokumen, dan objek juga dapat diposisikan di dalam wadah. Cukup tambahkan aturan css ke wadah:
| #wadah { posisi: relatif; } |
Kemudian elemen apa pun di dalam wadah diposisikan relatif terhadap wadah tersebut. Asumsikan Anda menggunakan struktur html berikut:
...
Jika Anda ingin memposisikan navigasi dalam wadah 30 piksel dari tepi kiri dan 5 piksel dari atas, Anda dapat menggunakan pernyataan css berikut:
| #navigasi { posisi: mutlak; kiri: 30 piksel; atas: 5 piksel; } |
10. Warna latar belakang meluas hingga bagian bawah layar
Salah satu kelemahan CSS adalah kurangnya kontrol vertikal, yang menyebabkan masalah yang tidak dihadapi oleh tata letak tabel. Misalkan Anda menyiapkan kolom di sisi kiri halaman untuk menempatkan navigasi situs web Anda. Halamannya berlatar belakang putih, tetapi Anda ingin kolom navigasinya berlatar belakang biru. Cukup gunakan css berikut:
| #navigasi { latar belakang: biru; lebar: 150 piksel; } |
Masalahnya adalah item navigasi tidak sampai ke bagian bawah halaman, dan tentu saja warna latar belakangnya juga tidak sampai ke bawah. Jadi latar belakang biru kolom kiri terpotong di tengah halaman, menyia-nyiakan desain Anda. Apa yang harus kita lakukan? Sayangnya kita hanya bisa menggunakan tipu daya yaitu menentukan background body sebagai gambar dengan warna dan lebar yang sama dengan kolom kiri.
| tubuh { latar belakang: url(blue-image.gif) 0 0 ulangi-y; } |
Gambar latar belakang harus berupa gambar biru dengan lebar 150 piksel. Kerugian dari metode ini adalah em tidak dapat digunakan untuk menentukan lebar kolom kiri. Ketika pengguna mengubah ukuran teks dan lebar konten diperluas, lebar warna latar belakang tidak akan berubah.
Saat tulisan ini dibuat, ini adalah satu-satunya solusi untuk masalah jenis ini, jadi Anda hanya dapat menggunakan nilai piksel untuk kolom kiri untuk mendapatkan warna latar belakang berbeda yang membentang secara otomatis.