lata CSS
Mari kita fikirkan soalan: Bagaimana jika terdapat berbilang gaya css untuk elemen yang sama dalam fail html dan berbilang gaya css ini mempunyai nilai berat yang sama? Nah, lata dalam bahagian ini membantu anda menyelesaikan masalah ini.
Cascading bermakna terdapat berbilang gaya css untuk elemen yang sama dalam fail html Apabila terdapat gaya dengan berat yang sama, ia akan ditentukan berdasarkan susunan gaya css ini di penghujung akan permohonan.
Seperti kod berikut:
p{color:red;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>Akhirnya, teks dalam p akan ditetapkan kepada hijau. Lata ini mudah difahami. Difahamkan gaya kemudian akan menimpa gaya sebelumnya.
Jadi keutamaan gaya CSS sebelum ini tidak sukar difahami:
Helaian gaya sebaris (di dalam teg) > Helaian gaya terbenam (dalam fail semasa) >
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>层叠</title>
<style type="text/css">
p{color:red;}
p{color:green;}
p{color:pink;}
.first{ color:purple;}
#second{ color:orange;}
</style>
</head>
<body>
<h1>勇气</h1>
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
</body>
</html><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>层叠</title>
<style type="text/css">
p{color:red;}
p{color:green;}
p{color:pink;}
.first{ color:purple;}
#second{ color:orange;}
</style>
</head>
<body>
<h1>勇气</h1>
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
</body>
</html>
tiada