masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Pewarisan CSS

Gaya tertentu CSS diwarisi, jadi apakah warisan? Warisan ialah peraturan yang membenarkan gaya digunakan bukan sahaja pada elemen tag html tertentu, tetapi juga kepada keturunannya. Contohnya, kod berikut: Jika warna tertentu digunakan pada tag p, tetapan warna ini digunakan bukan sahaja pada tag p, tetapi juga pada semua teks sub-elemen dalam tag p, di mana sub-elemen ialah span. tag. 

p{color:red;}

<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

Ia boleh dilihat bahawa teks dalam p dan teks dalam span dalam tetingkap hasil di sebelah kanan kedua-duanya ditetapkan kepada merah. Tetapi ambil perhatian bahawa beberapa gaya CSS tidak diwarisi. Contohnya, sempadan:1px merah pepejal;

p{border:1px solid red;}

<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

Dalam contoh di atas, fungsi kod hanya untuk menetapkan sempadan kepada 1 piksel, merah dan garis sempadan pepejal untuk tag p, tetapi ia tidak mempunyai kesan pada rentang sub-elemen. 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>继承</title>
<style type="text/css">
p{color:red;}
span{border:1px solid blue;
    color:#aa2355;}
p{border:1px solid red;}
</style>
</head>
<body>
    <h1>勇气</h1>
    <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
</body>
</html>


Meneruskan pembelajaran
||
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>继承</title> <style type="text/css"> p{color:red;} span{border:1px solid blue; color:#aa2355;} p{border:1px solid red;} </style> </head> <body> <h1>勇气</h1> <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> <p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</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)  492799 permainan