CSS基礎和選擇器
什麼是CSS?
CSS是指層疊樣式表(Cascading Style Sheets),樣式定義如何顯示HTML元素,樣式通常又會存在於樣式表中。也就是說把HTML元素的樣式都統一收集起來寫在一個地方或一個CSS檔案裡。
css的優勢
1.內容與表現分離
2.網頁的表現統一,容易修改
3.豐富的樣式,使頁面佈局更加靈活
4.減少網頁的程式碼量,增加網頁瀏覽器速度,節省網路頻寬
5.運用獨立頁面的css,有利於網頁被搜尋引擎收錄
CSS語法
CSS基礎語法
CSS語法可以分為兩部分:
- 選擇器
- 宣告
宣告由屬性和值組成,多個宣告之間用分號分隔。
CSS註釋
註釋是程式碼之母。
/*這是註釋*/
網頁中引用CSS樣式
- 內聯樣式
- 行內樣式表
- 外部樣式表
內嵌方式
style
標籤
<html> <head> <meta charset="utf8"> <style> p { color: red; } </style> </head> <body> <p>這是一個p標籤!</p> </body> </html>
行內樣式
<html> <head> <meta charset="utf8"> </head> <body> <p style="color: blue;">這是一個p標籤!</p> </body> </html>
外聯樣式表-連結式
link
標籤
index.css
p { color: green; }
然後在HTML檔案中通過link標籤引入:
<html> <head> <meta charset="utf8"> <link rel="stylesheet" href="index.css"> </head> <body> <p>這是一個p標籤!</p> </body> </html>
基礎選擇器
在一個HTML頁面中會有很多很多的元素,不同的元素可能會有不同的樣式,某些元素又需要設定相同的樣式,
選擇器就是用來從HTML頁面中查詢特定元素的,找到元素之後就可以為它們設定樣式了。 選擇器為樣式規則指定一個作用範圍。
基礎選擇器包括:
- 標籤選擇器
- 類選擇器
- ID選擇器
- 通用選擇器
標籤選擇器
通過標籤名來選擇元素:
示例:
p { color: red; }
將所有的p標籤設定字型顏色為紅色。
ID選擇器
通過元素的ID值選擇元素:
示例:
#i1 { color: red; }
將id值為i1
的元素字型顏色設定為紅色。
類選擇器
通過樣式類選擇元素:
示例:
.c1 { color: red; }
將所有樣式類含.c1
的元素設定字型顏色為紅色。
通用選擇器
使用*
選擇所有元素:
* { color: black; }
組合選擇器
後代選擇器
因為HTML元素可以巢狀,所以我們可以從某個元素的後代查詢特定元素,並設定樣式:
div p {
color: red;
}
從div的所有後代中找p標籤,設定字型顏色為紅色。
兒子選擇器
div>p {
color: red;
}
從div的直接子元素中找到p標籤,設定字型顏色為紅色。
毗鄰選擇器
div+p {
color: red;
}
找到所有緊挨在div後面的第一個p標籤,設定字型顏色為紅色。
兄弟選擇器
div~p {
color: red;
}
找到所有div標籤後面同級的p標籤,設定字型顏色為紅色。
並集選擇器
div,p{
color:red;
}
選擇所有<div>元素和<p>元素標籤,設定字型顏色為紅色。
屬性選擇器
除了HTML元素的id屬性和class屬性外,還可以根據HTML元素的特定屬性選擇元素。
根據屬性查詢
[title] {
color: red;
}
根據屬性和值查詢
找到所有title屬性等於hello的元素:
[title="hello"] {
color: red;
}
找到所有title屬性以hello開頭的元素:
[title^="hello"] {
color: red;
}
找到所有title屬性以hello結尾的元素:
[title$="hello"] {
color: red;
}
找到所有title屬性中包含(字串包含)hello的元素:
[title*="hello"] {
color: red;
}
找到所有title屬性(有多個值或值以空格分割)中有一個值為hello的元素:
[title~="hello"] {
color: red;
}
表單常用
input[type="text"] {
backgroundcolor: red;
}
偽類選擇器
a:link(沒有接觸過的連結),用於定義了連結的常規狀態。 a:hover(滑鼠放在連結上的狀態),用於產生視覺效果。 a:visited(訪問過的連結),用於閱讀文章,能清楚的判斷已經訪問過的連結。 a:active(在連結上按下滑鼠時的狀態),用於表現滑鼠按下時的連結狀態。 偽類選擇器 : 偽類指的是標籤的不同狀態: a ==> 點過狀態 沒有點過的狀態 滑鼠懸浮狀態 啟用狀態 a:link {color: #FF0000} /* 未訪問的連結 */ a:visited {color: #00FF00} /* 已訪問的連結 */ a:hover {color: #FF00FF} /* 滑鼠移動到連結上 */ a:active {color: #0000FF} /* 選定的連結 */ 格式: 標籤:偽類名稱{ css程式碼; }
before after偽類
:before p:before 在每個<p>元素之前插入內容 :after p:after 在每個<p>元素之後插入內容
例子
<html> <head> <meta charset="utf-8"> <title>PHP中文網</title> <style type="text/css"> /*沒訪問之前*/ a:link{ color: red; } /*滑鼠放在連結上的狀態*/ a:hover{ color: green; } /*訪問過後*/ a:visited{ color:black; } /*滑鼠點選的時候*/ a:active{ color: blue; } /*在p標籤屬性為c2的後面加上內容*/ p.c2:after{ content: 'hello'; color: pink; } /*在所有的p標籤的前面加上內容*/ p:before{ content: '偽類'; color: green; } </style> </head> <body> <a href="#">css中文網</a> <p>你hao</p> <p class="c2">你好</p> </body> </html>
css優先順序和繼承
css的繼承
繼承是CSS的一個主要特徵,它是依賴於祖先-後代的關係的。繼承是一種機制,它允許樣式不僅可以應用於某個特定的元素,還可以應用於它的後代。
例如一個BODY定義了的顏色值也會應用到段落的文字中。
body{color:red;} <p>hello</p>
這段文字都繼承了由body {color:red;}樣式定義的顏色。
然而CSS繼承性的權重是非常低的,是比普通元素的權重還要低的0。
p{color:green}
css的優先順序
所謂CSS優先順序,即是指CSS樣式在瀏覽器中被解析的先後順序。
樣式表中的特殊性描述了不同規則的相對權重,它的基本規則是:
1 內聯樣式表的權值最高 style=""------------1000;
2 統計選擇符中的ID屬性個數。 #id --------------100
3 統計選擇符中的CLASS屬性個數。 .class -------------10
4 統計選擇符中的HTML標籤名個數。 p ---------------1
按這些規則將數字符串逐位相加,就得到最終的權重,然後在比較取捨時按照從左到右的順序逐位比較。
1、文內的樣式優先順序為1,0,0,0,所以始終高於外部定義。 2、有!important宣告的規則高於一切。 3、如果!important宣告衝突,則比較優先權。 4、如果優先權一樣,則按照在原始碼中出現的順序決定,後來者居上。 5、由繼承而得到的樣式沒有specificity的計算,它低於一切其它規則(比如全域性選擇符*定義的規則)。
demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>層疊性</title> <style type="text/css"> /*1 0 0*/ #box{ color: red; } /*0 1 0*/ .container{ color: yellow; } /*0 0 1*/ p{ color: purple; } </style> </head> <body> <!-- 層疊性: 權重的標籤覆蓋掉了權重小的標籤,說白了 ,就是被幹掉了 權重: 誰的權重大,瀏覽器就會顯示誰的屬性 誰的權重大? 非常簡單 數數 id的數量 class的數量 標籤的數量 --> <p id="box" class="container"> 猜猜我是什麼顏色 </p> </body> </html>