Tutorial pengenalan CSS_Tutorial asas

CSS ialah singkatan dari Cascading Style Sheets. Ia adalah mekanisme mudah untuk menambah gaya pada dokumen web dan tergolong dalam bahasa reka letak lapisan pembentangan.
　1. Spesifikasi sintaks asas
Analisis pernyataan CSS biasa:
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
Di mana "p" kami panggil "pemilih" , menunjukkan bahawa kami mahu tentukan gaya untuk "p";
Pengisytiharan gaya ditulis dalam sepasang kurungan kerinting "{}"; ;
"#FF0000" dan "#FFFFFF" ialah nilai atribut.
　2. Nilai warna
Nilai warna boleh ditulis dalam nilai RGB, contohnya: color : rgb(255,0,0), atau boleh ditulis dalam heksadesimal, sama seperti contoh di atas color:#FF0000 . Jika nilai heksadesimal diulang secara berpasangan, ia boleh disingkatkan dengan kesan yang sama. Contohnya: #FF0000 boleh ditulis sebagai #F00. Walau bagaimanapun, ia tidak boleh disingkatkan jika ia tidak berulang Contohnya, #FC1A1B mesti diisi dengan enam digit.
　3. Tentukan fon
Standard web mengesyorkan kaedah definisi fon berikut:
badan { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynasty, sans-serif }
Fon dipilih dalam susunan yang disenaraikan. Jika komputer pengguna mengandungi fon Lucida Grande, dokumen itu akan dinamakan Lucida Grande. Jika tidak, ia ditetapkan sebagai fon Verdana, jika tiada Verdana, ia ditetapkan sebagai fon Lucida, dan seterusnya
Fon Lucida Grande sesuai untuk Mac OS X
Fon Verdana sesuai untuk semua Windows; sistem;
Lucida sesuai untuk pengguna UNIX
"Song Ti" sesuai untuk pengguna Cina ringkas
Jika tiada fon tersenarai tersedia, fon sans-serif lalai boleh dijamin dipanggil;
　4. Pemilih kumpulan
Apabila beberapa elemen mempunyai atribut gaya yang sama, mereka boleh memanggil pernyataan bersama-sama, dipisahkan dengan koma: p, td, li { font-size: 12px }
5. The derived pemilih
boleh digunakan Pemilih terbitan mentakrifkan gaya untuk elemen anak dalam elemen, contohnya:
li strong { font-style : italic font-weight : normal;}
adalah untuk mentakrifkan gaya condong untuk elemen kanak-kanak kuat di bawah li Gaya berani.
　6.id selector
Reka letak CSS terutamanya dilaksanakan menggunakan lapisan "div", dan gaya div ditakrifkan melalui "id selector". Sebagai contoh, kita mula-mula mentakrifkan lapisan

dan kemudian mentakrifkannya seperti ini dalam helaian gaya:
#menubar {MARGIN: 0px;LATAR BELAKANG: #FEFEFE;COLOR: #666 ;}
Di mana "menubar" ialah nama id yang anda takrifkan. Perhatikan tanda "#" di hadapan.
Pemilih id juga menyokong derivasi, contohnya:
#menubar p { text-align : right; margin-top : 10px }
Kaedah ini digunakan terutamanya untuk menentukan lapisan dan yang lebih kompleks dan mempunyai banyak unsur terbitan.
6. Pemilih kategori
Gunakan titik dalam CSS untuk menunjukkan definisi pemilih kategori, contohnya:
.14px {color : #f60 ;font-size:14px ;}
dalam halaman , gunakan kaedah class="category name" untuk memanggil:

saiz fon 14px Kaedah ini agak mudah dan fleksibel, serta boleh dibuat dan dipadamkan pada bila-bila masa mengikut keperluan muka surat.
7. Tentukan gaya pautan
Empat kelas pseudo digunakan dalam CSS untuk menentukan gaya pautan, iaitu: a:link, a:visited, a:hover dan a:active, contohnya:
a :link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:dilawati {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a :hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
Di atas Pernyataan masing-masing mentakrifkan gaya "pautan, pautan yang dilawati, apabila tetikus tamat, dan apabila tetikus diklik". Ambil perhatian bahawa anda mesti menulis dalam susunan di atas, jika tidak paparan mungkin berbeza daripada apa yang anda jangkakan. Ingat mereka dalam urutan "LVHA".