CSS: adalah singkatan dari Cascading Style Sheet, diterjemahkan sebagai [Cascading Style Sheet], yang merupakan seperangkat aturan pemformatan. Adalah bahasa markup yang digunakan untuk (meningkatkan) kontrol atas gaya halaman web dan memungkinkan pemisahan informasi gaya dari konten web.
Komposisi CSS: Definisi CSS terdiri dari tiga bagian: pemilih (Selector), properti (properties) dan properti nilai (value). Sintaks: selector{proprety:value} (selector{property:property value})
Hal yang perlu diperhatikan:
1. Blok deklarasi CSS terdiri dari: pemilih + "{" + satu atau lebih atribut CSS + "}".
2. CSS tidak membedakan huruf besar-kecil, dan disarankan menggunakan huruf kecil dalam sintaksis CSS.
1. Pemilih CSS
Ini adalah nama gaya CSS. Ketika gaya CSS ditampilkan dalam dokumen HTML, CSS digunakan. Bagaimana cara menggunakannya? Saat ini, pemilih CSS (nama CSS) digunakan untuk menentukan bahwa tag HTML ini menggunakan gaya CSS ini.
2. Sintaks pemilih
Pemilih CSS mendefinisikan gaya.
nama pemilih {deklarasi;}
Misalnya:
p{ukuran font:12px;}.dreamdublue{color:blue;}.dreamdu18px{ukuran font:18px;}#dreamdured{color:red;}P, dreamdublue, dan dreamdured semuanya merupakan penyeleksi.
3. Aturan penamaan pemilih
Pemilih CSS dapat menggunakan huruf besar dan kecil bahasa Inggris, angka, tanda hubung, garis bawah, titik dua, dan titik.
(1) Huruf Inggris huruf besar dan huruf kecil AZ az
(2) Angka 0-9
(3) Tanda hubung -
(4) Garis Bawah_
(5) Titik Dua:
(6) Periode.
Catatan: Pemilih CSS hanya dapat dimulai dengan huruf.
4. Klasifikasi pemilih
Pemilih CSS dapat dibagi menjadi banyak kategori, seperti: pemilih tipe, pemilih id, pemilih kelas, pemilih universal, pemilih grup, pemilih penyertaan, pemilih elemen spesifik, pemilih sub-objek, pemilih atribut, pemilih terkait, pemilih tetangga, dll. diperkenalkan dan dianalisis satu per satu di bawah ini.
1. Pemilih tipe: Pemilih tipe adalah elemen halaman web itu sendiri, dan nama elemen digunakan secara langsung saat mendefinisikan.
Isi{/*Tentukan atribut halaman*/}Div{Lebar:774px;/*Tentukan semua elemen div memiliki lebar 774 piksel*/}2. Pemilih id: Ini unik. Nilai id dari elemen yang berbeda tidak dapat diulang. Pemilih id menentukan gaya yang berbeda untuk objek tertentu dari setiap elemen, yang memudahkan pengguna untuk mengontrol halaman dengan lebih tepat. Saat menggunakan pemilih id, Anda harus terlebih dahulu menentukan atribut id untuk setiap elemen.
<divid="top"></div>Saat menggunakan pemilih id, Anda perlu menggunakan # untuk identifikasi: #top{Width:774px;/*Tentukan semua elemen div memiliki lebar 774 piksel*/}3. Pemilih kelas: Nama kelas yang sama dapat ditentukan untuk berbagai jenis elemen dalam suatu dokumen. Kelas dapat menyatukan elemen dengan gaya yang sama ke dalam satu kategori. Saat menggunakan pemilih kelas, Anda harus terlebih dahulu menentukan atribut kelas untuk setiap elemen. :
<divclass="red"></div><spanclass="red"></span><pclass="red"></p>Saat menggunakan pemilih kelas, Anda perlu menggunakan bahasa Inggris (titik) untuk identifikasi : .merah{Warna:merah;}4. Pemilih universal: Merupakan pemilih khusus yang diwakili oleh *, yaitu pemilih yang digunakan tetapi mudah diabaikan.
*{font-size:12pt;/*Tentukan ukuran semua font di dokumen menjadi 12pt*/}5. Pemilih grup: Pemilih grup bukanlah jenis pemilih, namun metode pemilih. Ketika beberapa objek menentukan gaya yang sama, kita dapat mengelompokkannya ke dalam satu grup. Ini dapat menyederhanakan pembacaan dan penulisan kode, seperti:
.class1{ukuran font:13px;warna:merah;text-decraotian:underline;}.class2{ukuran font:13px;color:biru;teks-decroation:underline;}Dapat dikelompokkan menjadi:
.class1,class2{ukuran font:13px;teks-decroation:garis bawah;}.class1{color:red;}.class2{color:blue;}Ada dua prinsip dalam menggunakan pengelompokan: 1. Prinsip aspek; 2. Prinsip kedekatan (jika beberapa elemen berdekatan, Anda dapat mempertimbangkan untuk menggunakan penyeleksi pengelompokan dalam sebuah modul)
6. Berisi penyeleksi: Jenis penyeleksi yang paling berguna, yang dapat menyederhanakan kode dan mencapai berbagai kontrol gaya. Misalnya:
.div1h2{/*Tentukan gaya judul semua h2 di lapisan div1 kelas*/ukuran font:18px;}.div1p{/*Tentukan gaya judul semua p di lapisan div1 kelas*/ukuran font:12px ;}7. Penyeleksi yang ditentukan elemen: Terkadang kita ingin mengontrol gaya elemen tertentu dalam rentang tertentu, dalam hal ini, kita dapat menggunakan kombinasi penyeleksi kelas atau id. Misalnya:
span.red{/*Definisikan warna elemen dengan kelas merah di elemen span sebagai merah*/color:red;}div#top{/*Definisikan lebar elemen dengan id sebagai top di elemen div sebagai 100 %*/width:100% ;}misalnya:<div><h2><h2><p></p><span></span></div>Jelas tidak mungkin menggunakan pemilih berita pada kode di atas. Tidak baik menggunakan P secara langsung. Pemilih tipe h2 juga tidak bagus.
p.berita{} h2.berita{} span.berita{}
8. Pemilih sub-objek: Seperti penyeleksi elemen, mereka adalah penyeleksi batasan, yaitu gaya elemen yang memenuhi kondisi pembatasan ditentukan dalam rentang elemen tertentu. Pemilih khusus elemen menggunakan atribut kelas dan id sebagai batasan, sedangkan sub -Pemilih objek Pemilih menggunakan id dan sub-objek sebagai batasan.
#main>table{/*Tentukan gaya tabel sub-objek di modul utama dengan id sebagai main*/width:788px;font-size:12px;}#main>.title{/*Definisikan sub-objek di modul utama dengan id sebagai main Kelas objeknya adalah gaya title*/color:red;font-style:italic;}9. Pemilih atribut: Pemilih atribut adalah menambahkan tanda kurung setelah elemen, dan berbagai atribut atau ekspresi dicantumkan dalam tanda kurung. Ada 7 bentuk spesifik penyeleksi atribut:
(1) Pencocokan atribut keberadaan: Kontrol gaya elemen dengan mencocokkan atribut yang ada. Umumnya, atribut yang cocok harus disertakan dalam tanda kurung, dan hanya nama yang harus dicantumkan tanpa memberikan nilai:
h1[class]{color:red;/*Berlaku untuk semua elemen h1 dengan atribut class berapa pun nilai class*/}img[alt]{border:none;/*Berlaku untuk semua elemen img dengan atribut alt apa pun alt Berapakah nilai*/}a[href][title]{font-weight:bold;/*berfungsi sebagai elemen dengan atribut href dan title*/}(2) Pencocokan atribut yang tepat: Gaya akan diterapkan hanya jika nilai atribut benar-benar cocok dengan nilai atribut yang ditentukan. Pemilih id dan kelas sebenarnya merupakan pemilihan atribut yang tepat.
a[href=www.163.com][title=NetEase]{font-size:12px;/*Alamat fungsi mengarah ke www.163.com dan perintah judulnya adalah elemen a NetEase*/}(3) Kosong dicocokkan satu per satu: Dengan menentukan daftar string untuk atribut, Anda dapat mengontrol gaya elemen selama Anda mencocokkan salah satu string tersebut.
<spanclass=abc>Siapa yang mengontrol gaya saya</span> Anda dapat menggunakan gaya berikut untuk mengontrol: [class^=a]{color:red;} atau: [class^=b]{color:red;} atau: [kelas^=c]{warna:merah;} atau: span[kelas^=c]{warna:merah;}(4) Pencocokan tanda hubung: Fungsi dan penggunaannya sama dengan pencocokan spasi, namun daftar string pada pencocokan tanda hubung dipisahkan dengan tanda hubung.
<span>Siapa yang akan mengontrol gaya saya</span>
Ini dapat dikontrol menggunakan gaya berikut:
[kelas|=a]{warna:merah;} atau: [kelas|=a]{warna:merah;} atau: [kelas|=b]{warna:merah;} atau: [kelas|=c]{warna :merah;} atau: span[kelas|=c]{warna:merah;}(5) Pemilih awalan: Selama karakter awal dari nilai atribut cocok dengan string yang ditentukan, gaya dapat diterapkan ke elemen. Pencocokan awalan diimplementasikan menggunakan formulir [^=]:
<div>Pencocokan awalan</div>
Anda dapat menggunakan kontrol gaya berikut
[kelas^=saya]{warna:merah;}(6) Pencocokan akhiran: Berbeda dengan awalan, selama karakter akhir atribut cocok dengan karakter yang ditentukan, gunakan kontrol formulir [$=].
<div>Pencocokan akhiran</div>
Anda dapat menggunakan kontrol gaya berikut
[kelas$=Ujian]{warna:merah;}(7) Pencocokan substring: Gaya diterapkan selama string yang ditentukan ada dalam atribut, dan dikontrol dalam bentuk [*=].
<div>Pencocokan substring</div>
Anda dapat menggunakan kontrol gaya berikut
[kelas*=est]{warna:merah;}10. Pemilih yang berdekatan: mengacu pada elemen berikutnya yang berdekatan dengan elemen tersebut.
div+p{font-size:24px;/*Berlaku untuk semua elemen p segera setelah elemen div, mendefinisikan ukuran font elemen p sebagai 14px*/}misalnya:<divid=wrap><divid=sub_wrap><h1 >< /h1><p></p></div><p></p></div>Untuk mengontrol elemen p bawah secara terpisah kecuali Anda menentukan atribut kelas dan id untuk elemen tersebut, Anda dapat melakukannya dengan menggunakan penyeleksi yang berdekatan.
#sub_wrap+p{ukuran font:14px;}