1. Spesifikasi tata bahasa dasar
Analisis pernyataan CSS yang khas:
p {WARNA:#FF0000;LATAR BELAKANG:#FFFFFF}
Diantaranya, "p" disebut "pemilih", yang menunjukkan bahwa kita ingin menentukan gaya untuk "p";
Deklarasi gaya ditulis dalam sepasang tanda kurung kurawal "{}";
WARNA dan LATAR BELAKANG disebut "properti", dan properti yang berbeda dipisahkan dengan titik koma ";";
"#FF0000" dan "#FFFFFF" adalah nilai atribut.
2. Nilai warna
Nilai warna dapat ditulis dalam nilai RGB, misalnya: warna : rgb(255,0,0), atau dalam heksadesimal, seperti pada contoh di atas warna:#FF0000. Jika nilai heksadesimal diulang berpasangan, nilai tersebut dapat disingkat dengan efek yang sama. Contoh: #FF0000 dapat ditulis #F00. Namun tidak bisa disingkat jika tidak berulang. Misalnya #FC1A1B harus diisi enam digit.
3. Tentukan fontnya
Standar web merekomendasikan metode definisi font berikut:
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif }
Font dipilih sesuai urutan yang tercantum. Jika komputer pengguna berisi font Lucida Grande, dokumen tersebut akan diberi nama Lucida Grande. Jika tidak maka disebut font Verdana, jika tidak ada Verdana disebut font Lucida, dan seterusnya;
Font Lucida Grande cocok untuk Mac OS X;
Font Verdana cocok untuk semua sistem Windows;
Lucida cocok untuk pengguna UNIX
"Song Ti" cocok untuk pengguna berbahasa Mandarin sederhana;
Jika tidak ada font yang tercantum tersedia, font sans-serif default dijamin akan dipanggil;
4.Pemilih grup
Ketika beberapa elemen memiliki atribut gaya yang sama, sebuah pernyataan dapat dipanggil bersama-sama, dan elemen-elemen tersebut dipisahkan dengan koma: p, td, li { font-size: 12px }
5. Turunkan penyeleksi
Anda dapat menggunakan pemilih turunan untuk menentukan gaya elemen turunan dalam suatu elemen, misalnya:
li kuat { gaya font : miring; berat font : normal }
Ini untuk mendefinisikan gaya miring tetapi tidak tebal untuk sub-elemen kuat di bawah li.
6.pemilih id
Tata letak dengan CSS terutama diimplementasikan menggunakan lapisan "div", dan gaya div ditentukan melalui "pemilih id". Misalnya, pertama-tama kita mendefinisikan sebuah layer
<div id="menubar"></div>
Kemudian definisikan seperti ini di style sheet:
#menubar {MARGIN: 0px;LATAR BELAKANG: #FEFEFE;WARNA: #666;}
Dimana "menubar" adalah nama id yang Anda tentukan. Perhatikan tanda “#” di depannya.
Pemilih id juga mendukung derivasi, misalnya:
#menubar p { perataan teks : kanan; margin-atas : 10px }
Metode ini terutama digunakan untuk mendefinisikan lapisan dan elemen yang lebih kompleks dan memiliki banyak elemen turunan.
6. Pemilih Kategori
Gunakan titik di CSS untuk menunjukkan definisi pemilih kategori, misalnya:
.14px {warna : #f60 ;ukuran font:14px ;}
Di halaman tersebut, gunakan metode class="nama kategori" untuk memanggil:
<span class="14px">font berukuran 14px</span>
Cara ini relatif sederhana dan fleksibel, serta dapat dibuat dan dihapus kapan saja sesuai kebutuhan halaman.
7. Tentukan gaya link
Empat kelas semu yang digunakan dalam CSS untuk mendefinisikan gaya tautan, yaitu: a:link, a:visited, a:hover dan a:active, misalnya:
a:link{berat font : tebal ;dekorasi teks : tidak ada ;warna : #c00 ;}
a:dikunjungi {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {berat font : tebal ;dekorasi teks : garis bawah ;warna : #f60 ;}
a:aktif {berat font : tebal ;dekorasi teks : tidak ada ;warna : #F90 ;}
Pernyataan di atas masing-masing menentukan gaya "tautan, tautan yang dikunjungi, saat mouse diarahkan, dan saat mouse diklik". Perhatikan bahwa Anda harus menulis dalam urutan di atas, jika tidak, tampilannya mungkin berbeda dari yang Anda harapkan. Ingat mereka berada dalam urutan "LVHA".
Haha, setelah banyak membaca, saya merasa sedikit pusing. Sebenarnya masih banyak lagi spesifikasi tata bahasa untuk CSS. Ini hanya beberapa yang umum digunakan. Lagi pula, kami melakukannya selangkah demi selangkah dan tidak mungkin menjadi gemuk dalam satu gigitan :)