1. Memanfaatkan singkatan CSS dengan baik dapat mengurangi ukuran file halaman, meningkatkan kecepatan pengunduhan, dan membuat kode menjadi ringkas dan mudah dibaca.
menyukai:
div{
border-top:1px solid #cccccc;
perbatasan-kiri:1px solid #cccccc;
perbatasan-kanan:1px soli #cccccc;
border-bottom:1px solid #cccccc;
}
dapat ditulis sebagai
p{border:1px solid #cccccc}
Contoh lain:
div{
margin-atas:10px;
margin-kanan:20px;
margin-bawah:30px;
margin-kiri:40px;
}
dapat ditulis ulang menjadi:
/*Perhatikan urutan penulisan atas, kanan, bawah dan kiri*/
div{margin:10px 20px 30px 40px}
/*Perhatikan bahwa nilai dan satuan tidak boleh memiliki spasi, dan setiap nilai dipisahkan oleh spasi*/
(Untuk detailnya, silakan merujuk ke: manual referensi css2, ringkasan singkatan umum css)
2. Anda dapat mengatur beberapa atribut kelas untuk elemen html sekaligus mengatur (beberapa definisi kelas).
Biasanya kami menulisnya sebagai:
Faktanya, kita dapat menentukan beberapa aturan untuk elemen p, seperti:
CSS:
.A{…}
.B{….}
HTML:
Elemen ini mencakup gaya yang diatur dalam a dan b
Catatan: Pisahkan beberapa aturan dengan spasi.
3. Definisikan satuannya dengan jelas kecuali nilainya 0
Lupa mendefinisikan dimensi adalah masalah umum di kalangan pemula CSS. Dalam html kita dapat menulis lebar = "100", tetapi satuan yang akurat harus diberikan dalam css. Misalnya: lebar:100px;tinggi:50px;ukuran font:9pt, kecuali nilai 0, karena tidak masalah untuk satuan apa pun. Nilai 0 semuanya berukuran sama.
Catatan: Jangan menambahkan spasi antara nilai dan satuan.
4. Sensitivitas huruf besar-kecil Dalam xhtml, nama elemen yang ditentukan oleh css peka huruf besar-kecil. Nilai kelas dan id juga peka huruf besar-kecil dalam html dan xhtml.
Misalnya, #aaa berbeda dengan #AAA. Di xhtml, p dan P juga tidak akan ditimpa.
Jika #aaa didefinisikan dalam css, menggunakan AAA untuk menerapkannya dalam elemen html tidak akan membuat gaya ditentukan dalam #aaa.
Contoh kode:
CSS:
#aaa{batas:1px padat #ccc}
HTML:
Tidak dapat menampilkan 1 piksel tepi
5. Prinsip prioritas terbaru CSS. Jika beberapa gaya ditentukan untuk suatu elemen, level terbaru akan diutamakan, dan gaya terbaru akan mengesampingkan definisi gaya lainnya.
menyukai:
CSS:
p{warna:merah}
.biru{warna:biru}
.kuning{warna:kuning}
HTML:
ditampilkan di sini dengan warna merah
Ditampilkan di sini dengan warna biru
Ditampilkan di sini dalam warna hijau
Ditampilkan di sini dengan warna kuning
Melihat:
(1) Perhatikan beberapa prioritas gaya (prioritasnya menurun dari atas ke bawah):
--Pengaturan gaya elemen
--Pengaturan di area kepala
--File css yang direferensikan secara eksternal (2) Prioritas tidak ditentukan oleh urutan akses, tetapi oleh urutan deklarasi di css.
Seperti pada contoh di atas, di sini ditampilkan dengan warna kuning
karena .kuning berada setelah .biru dalam definisi css.
6. Gunakan sub-selektor untuk mengurangi definisi id dan kelas.
#berisi{..}
#contain_ul{...}
.contail_li{...}
dapat diubah menjadi:
#berisi{..}
#containul{...}
.contain ul li{...}
7. Jangan menambahkan tanda kutip pada jalur gambar latar belakang dan ubah background:url("xxx.gif") menjadi background:url(xxx.gif)
Karena menambahkan tanda kutip akan menyebabkan kesalahan pada beberapa browser.
8. Jalur gambar latar belakang relatif terhadap jalur halaman css saat ini.
Misalnya:
Ada struktur direktori berikut--gambar
--xxx.gif
--css
--xx.css
--index.html
Konten kode
index.html mengacu pada file xx.css.
xx.css harus mereferensikan gambar xxx.gif dan metode penulisannya adalah: background:url(../images/xxx.gif)
9. Gunakan pemilih grup untuk menerapkan gaya yang sama ke elemen berbeda seperti h1, h2, h3 , div{ukuran font:16px;berat font:bold}
Kemudian gaya elemen h1, h2, h3, dan div semuanya berukuran font 16 piksel dan tebal.
10. Tulis gaya tautan yang benar Saat menggunakan CSS untuk menentukan berbagai status tautan, Anda harus memperhatikan urutan penulisan, yaitu adalah: :link: dikunjungi :hover :aktif.
Jika Anda tidak menulis dalam urutan ini, Anda mungkin tidak dapat memperoleh efek yang Anda inginkan. Untuk mengingat urutannya, kami mengekstrak huruf pertama setiap kata: LVHA. Anda dapat mengingat urutannya dengan menghafal dua kata LoVe dan Hate.
11. Melarang konten untuk dibungkus dan memaksa konten untuk dibungkus. Dalam tabel atau lapisan, kita mungkin ingin konten tidak dibungkus atau memaksa konten untuk dibungkus. Kita dapat mencapai persyaratan ini melalui beberapa atribut CSS.
Nonaktifkan jeda baris: white-space:nowrap
Pemutusan baris paksa: bungkus kata: pemutusan kata; pemutusan kata: normal;
12. Perbedaan antara relatif dan absolut
Absolut, cara penulisan dalam CSS adalah: position:absolute; Artinya positioning absolut, mengacu pada pojok kiri atas browser dan bekerja sama dengan TOP, RIGHT, BOTTOM, dan LEFT (selanjutnya disebut TRBL) untuk positioning TRBL tidak disetel, Secara default, titik asal adalah titik asli induknya. Jika TRBL disetel dan induk tidak menyetel atribut posisi, maka absolut saat ini akan diposisikan dengan sudut kiri atas browser sebagai titik awal, dan posisinya akan ditentukan oleh TRBL.
Relatif, cara penulisan dalam CSS adalah: position:relative; Artinya penentuan posisi relatif mutlak, mengacu pada titik asal induk sebagai titik asal , dan diposisikan dengan TRBL. Jika ada atribut CSS seperti padding di induknya, titik asli dari level saat ini diposisikan dengan mengacu pada titik asli dari area konten induk.
13. Bedakan antara div dan span
div adalah elemen tingkat blok yang dapat berisi paragraf, tabel, dll., dan digunakan untuk menempatkan konten berbeda. Umumnya, kami menggunakan div untuk menata letak dan memposisikan setiap blok di halaman web.
span adalah elemen sebaris yang tidak mempunyai arti praktis. Ia ada semata-mata untuk menerapkan gaya. Menambahkan markup ke suatu konten dapat mengatur gaya kontennya dengan menentukan gaya pada rentang tersebut.
14. Bedakan antara tampilan dan visibilitas
Baik display:none maupun visibilitas:hidden dapat menyembunyikan suatu elemen, namun visibilitas:hidden hanya menyembunyikan konten elemen, namun ruang posisi yang digunakan tetap dipertahankan.
Display:none sama dengan menghapus elemen dari halaman, dan posisinya yang ditempati juga akan dihapus.