
批改狀態(tài):合格
老師批語:前端是最考驗(yàn)程序員的地方, 因?yàn)橛刑嗟牡胤娇梢远ㄖ? 嚴(yán)重依賴開發(fā)者的自覺和行業(yè)約定, 不像后端語言那樣的嚴(yán)格
css層疊樣式表為HTML或XML等標(biāo)記語言提供了一種樣式描述,定義了其中元素的顯示方式。css中的“層疊”表示,css樣式單中的樣式形成一個(gè)層次結(jié)構(gòu),更具體的樣式覆蓋通用樣式。樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定,從而實(shí)現(xiàn)級(jí)聯(lián)效果。
css樣式表的來源主要有兩大類,分別是用戶自定義樣式和用戶代理樣式。
用戶自定義樣式
顧名思義,就是用戶自己定義的樣式。在此大類中,樣式表的來源又分為3個(gè)小項(xiàng)
style=
屬性,style屬性作為元素的屬性,直接寫在元素標(biāo)簽內(nèi)。
<h1 style="color: red">Hello World!</h1>
<style>標(biāo)簽
,style標(biāo)簽作為HTML的一個(gè)元素,可用于控制其它元素的樣式。但是由于,它是寫在具體的HTML文檔內(nèi),因此它只能控制當(dāng)前文檔的樣式,因此也稱為內(nèi)部樣式。<style>
標(biāo)簽一般放在<head>
標(biāo)簽內(nèi)。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
color: brown;
}
</style>
</head>
<link>
標(biāo)簽。<link rel="stylesheet" href="style.css">
h1
標(biāo)簽,顯示在瀏覽器時(shí)字體自動(dòng)加大并加粗,a
標(biāo)簽?zāi)J(rèn)添加下劃線等
<style>
body h1.title{
color: red;
}
h1.title{
color: yellow;
}
#head{
color: blue;
}
</style>
<h1 class="title" id="head">Hello World!</h1>
h1.title
的權(quán)重是 10×1+1=11body h1.title
的權(quán)重是 10×1+1×2=12#head
的權(quán)重是 100×1=100!important
則該屬性優(yōu)先級(jí)最高!important
和id,這樣的選擇器優(yōu)先級(jí)太高,會(huì)使代碼失去靈活性和通用性。也要少使用tag選擇器,這樣的選擇器則是優(yōu)先級(jí)太低,讓樣式表失去了減少代碼量,達(dá)到樣式復(fù)用的作用。微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)