Sepuluh Tip untuk Desain Style Sheet CSS

1. Aturan singkatan font CSS

Saat mendefinisikan font menggunakan css Anda mungkin melakukan ini:

Sebenarnya Anda bisa menyingkat properti ini:

jenis huruf: 1em/1,5em huruf miring tebal verdana,serif

Sekarang jauh lebih baik, tetapi ada satu hal yang perlu diperhatikan: untuk menggunakan metode singkatan ini, Anda setidaknya harus menentukan atribut font-size dan font-family. Jika atribut 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:

<p class="text side">...</p>Dengan menggunakan dua kelas sekaligus (dipisahkan dengan spasi dan 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 mendapatkan prioritas absolut, misalnya: margin-top: 3.5em !important; margin-top: 2em di semua browser kecuali IE Margin atas selalu 3.5em, sedangkan IE adalah 2em. Terkadang ini berguna, terutama ketika menggunakan nilai margin relatif (seperti contoh ini), untuk menunjukkan perbedaan halus antara IE dan browser lain. (Banyak orang mungkin juga memperhatikan bahwa sub-pemilih CSS juga diabaikan oleh IE)

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:

<h1><img src="/widget-image.gif" alt="Beli widget" /></h1>

Hal ini memang benar, namun terdapat bukti bahwa mesin pencari lebih menghargai teks asli daripada teks alternatif (karena terlalu banyak situs web yang menggunakan teks alternatif sebagai kata kunci), jadi kami harus menggunakan metode lain: <h1><span >Beli widget< /span></h1>, bagaimana dengan font cantik Anda? Css berikut dapat membantu:

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. Pilihan lain untuk hack 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 lebar (daripada menambahkannya ke nilai lebar). Misalnya, Anda mungkin menggunakan css berikut untuk menentukan dimensi kontainer:

Kemudian terapkan dalam html:

<div id="kotak">...</div>

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:

Ini akan menghasilkan lebar total kotak menjadi 150 piksel di browser apa pun.

7. Pusatkan elemen blok

Dengan asumsi situs web Anda menggunakan tata letak dengan lebar tetap, dengan semua konten ditempatkan di tengah layar, Anda dapat menggunakannya

CSS berikut ini:

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:

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, cukup atur tinggi garis kotak agar sama dengan tinggi kotak. Dalam contoh ini, tinggi kotak adalah 2em, lalu tambahkan saja tinggi garis: 2em ke css !

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:

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:

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:

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.

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.