CSS 指層疊樣式表(Cascading Style Sheets),用於設定網頁中元素的顯示方式。
css的語法結構:
第一種:
選擇器 { declaration1; declaration2; … }
1、該種樣式表由選擇器以及一條或多條聲明兩個部分組成;
2、該種樣式表只能定義在style標籤或css文件中,每個style標籤或css文件可定義多個CSS樣式表;
第二種:標籤內屬性:
style= " declaration1; declaration2;…"
1、該種樣式表只由一條或多條聲明組成;
2、該種樣式表只能定義在style標籤屬性;
3、HTML文檔中每個標籤都有一個style標籤屬性。
無論使用哪一種方式定義CSS樣式表,樣式表中的declaration都由一個樣式屬性(非標籤屬性,即樣式屬性不能當標籤屬性直接用在標籤中)和一個樣式屬性值組成,樣式屬性和樣式屬性值使用冒號分開;聲明之間使用分號間隔;
注意事項:
1、如果一個樣式屬性有多個樣式屬性值,則樣式屬性值之間使用逗號間隔;
2、 在CSS中樣式屬性及其樣式屬性值對大小寫不敏感,且不忽略空格;
3、如果屬性值由多個單詞組成,則建議使用引號引起來——如果用在style標籤屬性中,則使用單引號,否則使用雙引號;
按照CSS樣式定義位置可分爲3種:外部樣式表,內部樣式表,內聯樣式
1、外部樣式表
如何實現:將CSS樣式寫在css樣式文件中,使用link標籤將該css文件引入到HTML文檔中。
什麼時候用:當多個HTML文檔中某些標籤的樣式規則相同時,爲了實現這些樣式表的重用,同時也爲了方便管理樣式表,則需要將其聲明在一個CSS樣式表文件中。
link標籤還用於設置HTML文檔頭部小圖標,語法結構:<link rel="shortcut icon" href="圖片路徑"/>或<link rel="shortcut icon" type="image/x-icon" href="圖片路徑"/>
2、內部樣式表
如何實現:將CSS樣式直接寫在HTML文檔中的style標籤內。
什麼時候用:當一個HTML文檔中的樣式在其它HTML文檔中不具有共性,但是本HTML文檔中的多個標籤的樣式相同,這時爲了實現這些樣式規則的重用,同時也爲了方便管理樣式規則,則需要將其聲明在內部樣式表中。
3、內聯樣式(標籤內部添加的屬性)
如何實現:將CSS樣式寫在HTML文檔某個標籤的style標籤屬性的屬性值中。
什麼時候用:當一個HTML文檔中的某個標籤樣式與其他標籤樣式不相同,或者該文檔中的標籤樣式與父標籤樣式不統一,則此時就需要聲明內聯樣式。
總結:外部樣式表和內部樣式表中的每個樣式表都需要使用{},只有內聯樣式(標籤內部的屬性)不允許使用大括號,比如:<p style="color:red;text-align:center;">p標籤</p>
CSS定義位置優先級:
1、如果按照一般插入CSS樣式的順序(即先使用link插入外部樣式表,再使用style標籤插入內部樣式表,最後再在style標籤屬性中插入內聯樣式)來說,內聯樣式優先級最高,外部樣式表優先級最低,如下所示:內聯樣式 > 內部樣式表 > 外部樣式表。(由內到外,優先級由高到低)
css選擇器:
選擇器:瀏覽器通過選擇器爲滿足條件的HTML元素添加CSS樣式:
<!DOCTYPE html>
<html>
<head>
<!--hover稱作僞類-->
<!--上面對於該類本的編寫是爲了確定輸入框光標距離開始位置處的距離-->
<meta charset="UTF-8">
<title></title>
<style>
a{
background: red;
}
</style>
</head>
<body>
<a href="http://sina.com">體育</a>
<input />
</body>
</html>
標籤選擇器:瀏覽器爲HTML文檔內標籤名與標籤選擇器名相同的標籤元素添加CSS樣式,其語法如下:
標籤選擇器名 { declaration1; declaration2; … }
<!DOCTYPE html>
<html>
<head>
<!--hover稱作僞類-->
<!--上面對於該類本的編寫是爲了確定輸入框光標距離開始位置處的距離-->
<meta charset="UTF-8">
<title></title>
<style>
a{
font: 12px/20px "microsoft yahei","微軟雅黑","simsun","宋體";
color: #000;
text-decoration: none;
}
a:hover{
color: #e66100;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="http://sina.com">體育</a>
<input />
</body>
</html>
類選擇器:瀏覽器爲class標籤屬性的屬性值與類選擇器名相同的標籤元素添加CSS樣式,其語法如下:
類選擇器名 { declaration1; declaration2; … }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--選擇器:瀏覽器選擇匹配的元素施加相應的樣式-->
<style>
/*標籤選擇器:標籤名*/
span{
color: red;
}
/*class選擇器(第二優先級): #id標籤屬性,id 不允許重複*/
.blue_txt{
color: blue;
}
</style>
</head>
<body>
<span>鄭州大學</span>
<span id="black_txt">ZZU</span>
<b id="black_txt">QQ</b>
<i class="blue_txt">微信</i>
<p>白日依山近</p>
<span class="green_txt">黃河入海流</span>
</body>
</html>
注意:
1、class標籤屬性的屬性值不能以數字開頭;
2、class標籤屬性的屬性值可以有多個,每個值之間用空格間隔;
id選擇器:瀏覽器爲id標籤屬性的屬性值與id選擇器名相同的標籤元素添加CSS樣式,其語法如下:
# id選擇器名 { declaration1; declaration2; … }
1、id標籤屬性的屬性值不能以數字開頭;
2、id標籤屬性的屬性值在HTML文檔中必須唯一;class標籤屬性的屬性值可以不唯一;
3、id標籤的優先級要高於類標籤即class標籤
後代選擇器(descendant selector)又稱爲包含選擇器,用於爲特定的HTML子元素添加CSS樣式,語法如下:
父代選擇器1 子父代選擇器2 子父代選擇器3 ….子代選擇器 { declaration1; declaration2; … }選擇器之間用空格間隔;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--選擇器:瀏覽器選擇匹配的元素施加相應的樣式-->
<style>
/*後代選擇器,html爲父代,body子父代,後面是子代*/
html body #black_txt{
color: black;
}
</style>
</head>
<body>
<span>鄭州大學</span>
<span id="black_txt">ZZU</span>
<b id="black_txt">QQ</b>
<i class="blue_txt">微信</i>
<p>白日依山近</p>
<span class="green_txt">黃河入海流</span>
</body>
</html>
如果HTML文檔多個CSS樣式表內的部分樣式相同,則可以通過定義一個分組選擇器以簡化CSS樣式代碼, 該選擇器的選擇器名由多個選擇器組成,使用逗號分隔,其語法如下:
選擇器1,選擇器2,選擇器3…{ declaration1; declaration2; … }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--選擇器:瀏覽器選擇匹配的元素施加相應的樣式-->
<style>
/*分組選擇器,同級的話標籤重複則以下面的標籤爲主*/
p,.green_txt{
color: green;
}
</style>
</head>
<body>
<span>鄭州大學</span>
<span id="black_txt">ZZU</span>
<b id="black_txt">QQ</b>
<i class="blue_txt">微信</i>
<p>白日依山近</p>
<span class="green_txt">黃河入海流</span>
</body>
</html>
通配符選擇器匹配HTML文檔中的任何HTML元素,其語法如下:
*{ declaration1; declaration2; … }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--選擇器:瀏覽器選擇匹配的元素施加相應的樣式-->
<style>
/*通配符選擇器:匹配當前頁面的所有標籤,裏面特點是爲了消除不同瀏覽器的空白*/
*{
margin: 0px;
padding: 0px;
}
p{
border: #000000 1px solid;
}
</style>
</head>
<body>
<span>鄭州大學</span>
<span id="black_txt">ZZU</span>
<b id="black_txt">QQ</b>
<i class="blue_txt">微信</i>
<p>白日依山近</p>
<span class="green_txt">黃河入海流</span>
</body>
</html>
選擇器優先級:
id選擇器優先級最高,標籤選擇器優先級最低,如下所示:id選擇器 > 類選擇器 > 標籤選擇器,如下代碼:
CSS僞類:
CSS 僞類用於向某些選擇器添加特殊的效果,語法結構如下:
選擇器:僞類 { declaration1; declaration2; … }
1、若:link、:visited、:hover和:active一起使用,:hover 必須被置於 :link 和 :visited 之後,:active 必須被置於 :hover 之後,即:link -> :visited -> :hover -> :active 。
CSS僞類用一個冒號來表示,而CSS僞元素則用兩個冒號來表示,但由於兼容性問題,推薦一律使用一個冒號。
常用css屬性:
1、邊框屬性:
用於爲元素的所有邊框設置寬度,或者單獨地爲4個邊框設置寬度, 該屬性有多個值:
border-style樣式屬性:
只有當border-style樣式屬性不是 none或者hidden 時邊框纔可能出現;
border-color樣式屬性
邊框樣式屬性簡寫:
依次按照寬度、樣式和顏色的順序設置邊框樣式可以簡化邊框樣式屬性的設置。
1、邊框樣式屬性簡寫允許不設置其中某個值(比如border:solid #ff0000; );
2、使用border設置邊框屬性時,border-width、border-style和border-color的值只能取一種,例如:{border:20px solid red;}是有效的,但是{border:20px 60px solid red;}、 {border:20px solid dotted red;}或{border:20px solid red green;}等等都是無效的。
輪廓線樣式屬性:
outline-color樣式屬性
outline-style樣式屬性
outline-width樣式屬性
outline樣式屬性
背景樣式屬性:
background-color樣式屬性
background-image樣式屬性(設置標籤背景圖片,該樣式屬性有多個屬性值)
background-repeat樣式屬性
background-attachment樣式屬性
background-position樣式屬性(設置標籤背景圖片位置,該樣式屬性有多個屬性值)
background-origin樣式屬性
background-clip樣式屬性()
字體樣式屬性:
font-style樣式屬性
font-variant樣式屬性
font-weight樣式屬性
font-size樣式屬性
font-family樣式屬性
font樣式屬性:
用於在一個聲明中設置所有的字體樣式屬性(即font-style、font-variant、font-weight、font-size/line-height和font-family),且該樣式屬性設置屬性值時不需要設置所有字體樣式屬性所對應的屬性值,但需要按照font-style、font-variant、font-weight、font-size/line-height和font-family順序進行排列,中間用空格隔開。
1、注意 font樣式屬性至少要指定字體大小和字體系列;
2、沒有font-color樣式屬性,如果要設置字體的顏色需要使用color樣式屬性;
3、font樣式屬性的屬性值也可設置爲inherit,但Internet Explorer瀏覽器不支持屬性值 "inherit“ 如果樣式聲明列表中有line-height樣式屬性,又有font樣式屬性,則line-height無效,必須與font一起使用。