Id CSS 和 Kelas
pemilih id dan kelas
Jika anda ingin menetapkan gaya CSS dalam elemen HTML, anda perlu menetapkan pemilih "id" dan "kelas" dalam elemen tersebut.
Pemilih id Pemilih
id boleh menentukan gaya khusus untuk elemen HTML yang ditandakan dengan id tertentu.
Elemen HTML menggunakan atribut id untuk menetapkan pemilih id dan pemilih id dalam CSS ditakrifkan dengan "#".
Peraturan gaya berikut digunakan pada atribut elemen id="para1":
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>Jalankan instance »
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
Jangan mulakan atribut ID dengan nombor ID yang bermula dengan nombor tidak akan berfungsi dalam Mozilla /Pelayar Firefox.
pemilih kelas
pemilih kelas digunakan untuk menerangkan gaya sekumpulan elemen Pemilih kelas berbeza daripada pemilih id boleh digunakan dalam berbilang elemen.
Pemilih kelas diwakili oleh atribut kelas dalam HTML Dalam CSS, pemilih kelas dipaparkan dengan titik ".":
Dalam contoh berikut, semua objek dengan kelas tengah. Elemen HTML semuanya berpusat.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Anda juga boleh menentukan elemen HTML tertentu menggunakan kelas.
Dalam contoh berikut, semua elemen p menggunakan class="center" untuk memusatkan teks elemen:
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be center-aligned.</p>
</body>
</html>Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Aksara pertama nama kelas tidak boleh menggunakan nombor! Ia tidak akan berfungsi dalam Mozilla atau Firefox.
