Pemilih asas tutorial asas CSS
Pemilih CSS
1. >
(1) Pemilih "*": Kad liarPenerangan
: akan sepadan dengan Semua teg HTML , semua tag akan berubah.
Sintaks: *{ color:red; }
Nota: Gunakan "*" sedikit mungkin, kerana IE6 tidak menyokongnya.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> *{ color:red; } </style> </head> <body> <h1>習近平心中的互聯(lián)網(wǎng)</h1> <p>互聯(lián)網(wǎng)是20世紀最偉大的發(fā)明，它正在將人類“一網(wǎng)打盡”，人們在不知不覺中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。</p> </body> </html>
(2) Pemilih teg
Penerangan : Akan sepadan dengan teg HTML yang ditentukan.
: h1{ color:red; }
Nota: Pemilih teg CSS mempunyai nama yang sama dengan teg HTML, tetapi kurungan sudut tidak boleh tambah.<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
h1{
color:red;
}
p{
color:blue;
}
</style>
</head>
<body>
<h1>習近平心中的互聯(lián)網(wǎng)</h1>
<p>互聯(lián)網(wǎng)是20世紀最偉大的發(fā)明，它正在將人類“一網(wǎng)打盡”，人們在不知不覺中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。</p>
</body>
</html>
(3) pemilih kelas (pemilih kelas) - pemilih kelas adalah yang paling kerap digunakan
Penerangan: Tambahkan gaya pada jenis teg HTML. "Satu kelas" yang dirujuk di sini ialah: setiap teg HTML mempunyai atribut kelas dan nilai kelas adalah sama. Atribut kelas ialah atribut awam yang ada pada setiap teg HTML.
Nama pemilih kelas mesti bermula dengan "." dan terhad kepada nilai atribut kelas teg HTML. Contohnya: .box{ color:red; }
Nota: Nilai atribut kelas teg HTML tidak boleh bermula dengan nombor.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
.NO1{
color:red;
background-color:#88ff66;
}
</style>
</head>
<body>
<h1 class="NO1">習近平心中的互聯(lián)網(wǎng)</h1>
<p class="NO1">互聯(lián)網(wǎng)是20世紀最偉大的發(fā)明，它正在將人類“一網(wǎng)打盡”，人們在不知不覺中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。</p>
</body>
</html>(4) pemilih id
Penerangan : Tambahkan gaya pada elemen dengan id yang ditentukan.
:
Nilai atribut id teg HTML dalam halaman web mestilah unik.
- Setiap teg HTML mempunyai atribut awam id.
- Atribut id biasanya digunakan untuk JS, bukan untuk anda menambah gaya. Atribut kelas hanya boleh digunakan untuk CSS, bukan JS.
- Nama pemilih id mesti bermula dengan "#", diikuti dengan nilai atribut id teg HTML.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> #NO1{ color:blue; background-color:#88ff99; } .NO1{ color:red; background-color:#88ff66; } </style> </head> <body> <h1 id="NO1">習近平心中的互聯(lián)網(wǎng)</h1> <p class="NO1">互聯(lián)網(wǎng)是20世紀最偉大的發(fā)明，它正在將人類“一網(wǎng)打盡”，人們在不知不覺中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。</p> </body> </html>
