masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

pemilih CSS

Pemilih CSS

Pemilih CSS dibahagikan kepada dua jenis

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":

       <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        #para1
        {
            text-align:center;
            color:red;
        }
    </style>
</head>

<body>
<p id="para1">php中文网(php.cn)</p>
<p>这一段不受css样式影响。</p>
</body>
</html>

Jalankan atur cara untuk mencubanya

lamp.gif Atribut ID harus tidak bermula dengan nombor ID yang bermula dengan nombor tidak berfungsi dalam pelayar Mozilla/Firefox.

pemilih kelas

pemilih kelas digunakan untuk menerangkan gaya sekumpulan elemen Pemilih kelas adalah berbeza daripada id selector , kelas 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.

Contoh

      <!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 atur cara untuk mencubanya

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">这个标题将不会受到影响</h1>
<p class="center">这一段将居中对齐</p>
</body>
</html>

Jalankan program dan cuba

lamp.gifAksara pertama nama kelas tidak boleh menggunakan nombor! Ia tidak akan berfungsi dalam Mozilla atau Firefox.


Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> #para1 { text-align:center; color:red; } </style> </head> <body> <p id="para1">php中文网(php.cn)</p> <p>这一段不受css样式影响。</p> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492424 permainan