前端html--css樣式選擇器
CSS
1. CSS 介紹
CSS : Cascading Style Sheet 層疊樣式表
作用 : 調整頁面元素的顯示外觀,實現網頁佈局
2. CSS使用
在HTML文件中使用CSS樣式表,有三種方式
1. 內聯樣式/行內樣式
特點 : 在標籤中通過style屬性,為元素設定樣式
語法 :
<標籤名 style="屬性:值;屬性2:值;"></標籤名>
CSS中使用屬性和值來宣告樣式
常用的CSS屬性:
1. font-size
設定元素的字型大小,取畫素值;
2. color
設定元素的字型顏色,取顏色值;
3. background-color
設定元素的背景顏色,取顏色值;
2. 文件內嵌
特點 : 在文件中使用<style></style>標籤,為文件中的
元素設定樣式
語法 :
<style type="text/css">
選擇器{
屬性:值;
屬性2:值;
...
}
選擇器{
屬性:值;
屬性2:值;
...
}
</style>
選擇器 : 用來匹配文件中的元素併為其設定樣式
et :
p{
color:red;
font-size:32px;
}
通過標籤名匹配文件中所有的該元素,叫標籤選擇器
3. 外鏈
特點 : 在HTML文件中引入外部的樣式表文件
使用 :
1. 定義外部的樣式表文件 以.css為字尾
2. 在HTML中使用
<link rel="stylesheet" href="url" type="text/css">
3. 樣式表的特徵
1. 層疊性
可以為一個元素設定多個樣式,共同起作用
p{
color:red;
background-color:green;
font-size:32px;
}
2. 繼承性
子元素可以繼承父元素或祖先元素的某些CSS樣式
例如 : 大部分的文字屬性都可以被繼承;
塊元素預設寬度與父元素保持一致 h1 p div
3. 優先順序
從低到高依次為 :
1. 瀏覽器預設樣式
2. 文件內嵌樣式/外鏈檔案中的樣式,以程式碼書寫順序為準
後來者居上
3. 行內樣式 (最高)
如果發生樣式衝突,參考優先順序,決定元素最終樣式
4. 選擇器
1. 選擇器作用 :
根據不同的選擇器,匹配文件中相應的元素,併為其設定樣式
2. 選擇器分類 :
1. 標籤選擇器
作用 : 根據標籤名匹配文件中所有的該元素
語法 :
標籤名{
屬性 : 值;
}
練習 :
1. 建立超連結標籤
2. 設定文字顏色為紅色
3. 取消下劃線 text-decoration : none;
2. id選擇器
根據元素的id屬性值匹配元素
注意 : 所有的元素都有id屬性,屬性值自定義.
ID屬性具有唯一性
語法 :
#id屬性值{
樣式
}
et:
#box{
width : 200px;
height : 200px;
background-color:red;
}
<div id="box"></div>
3. class類選擇器
根據標籤的class屬性值匹配元素,可以複用
語法 :
.class屬性值{
樣式
}
特殊用法 :
1. 標籤選擇器與類選擇器結合使用
p.c1{
background-color:pink;
}
標籤名必須放在前面
.c1p{ 匹配類名class="c1p"的元素
}
2. class 屬性值可以出現多個使用空格隔開
et :
class="c1 c2 c3"
4. 群組選擇器
可以為一組元素,設定共同樣式.
語法 :
選擇器1,選擇器2,選擇器3{
樣式
}
常見於清除瀏覽器預設樣式,或者設定網頁基礎樣式
5. 後代選擇器
特點 : 匹配滿足要求的所有後代元素
語法 :
選擇器1 選擇器2{
樣式
}
選擇器1 表示匹配父元素
選擇器2 表示後代元素
6. 子代選擇器
只匹配父元素中的直接子元素
語法 :
選擇器1>選擇器2{
樣式
}
7. 偽類選擇器
1. 作用 : 針對元素不同狀態,設定相應樣式
2. 分類 :
1. 超連結偽類選擇器
針對超連結不同狀態設定樣式
2. 動態偽類選擇器
所有元素都可以使用
3. 使用 :
1. 超連結偽類選擇器
1. 訪問前 :link
2. 訪問後 :visited
偽類選擇器需要與其他選擇器結合使用,不能單獨使用
a:link{
設定超連結訪問之前的樣式
}
2. 動態偽類選擇器
1. :hover
滑鼠滑過元素時的狀態
2. :active
滑鼠點按元素時的狀態,啟用
超連結使用注意 :
1. 超連結可以設定四種狀態的樣式,書寫時必須按照
以下順序定義 : LoVe/HAte 愛恨原則
:link
:visited
:hover
:active
2. 網頁中一般會直接對a標籤設定預設樣式,配合
:hover改變超連結文字色或背景色
3. :focus
表示文字框或密碼框在獲取焦點時的狀態
焦點狀態 : 正接受輸入或編輯時的狀態
input:focus{
}
3. 選擇器的優先順序
選擇器的優先順序看權重(值),權值越大,優先順序越高
基礎選擇器的權值
標籤選擇器 1
類選擇器/偽類選擇器 10
id選擇器 100
行內樣式 1000
組合選擇器,除了群組選擇器,其他的選擇器權值由各選擇器
的權值相加得到
div span{ 2
color:red;
}
span{ 1
color:green;
}
.d1 .c1{ 20
}
#d1 .c1
5. 尺寸與顏色單位
1. 尺寸 :
1. 屬性 : width height
2. 單位 :
1. px 預設單位,表示畫素
2. % 百分比單位:參照父元素對應屬性的值獲取尺寸
-------------
3. cm 釐米
4. mm 毫米
5. pt 磅 1pt = 1/72in
6. in 英寸inch 1英寸 = 2.54 cm
-------------
7. em 預設情況下 1 em = 16px
8. rem 與字型大小相關
2. 顏色取值 :
1. 英文單詞表示顏色
2. rgb(r,g,b);
使用紅綠藍三原色表示,每種顏色取值範圍0~255
red rgb(255,0,0);
green rgb(0,255,0);
blue rgb(0,0,255);
black rgb(0,0,0);
white rgb(255,255,255);
3. rgba(r,g,b,a)
a 表示alpha 透明度,取值0-1
0表示透明,1表示不透明
使用小數表示半透明 0.5 .5
4. 十六進位制表示顏色
語法 :
十六進位制取值範圍 0-9,a-f
表示顏色 : 以#開頭,每兩位為一組,代表一種三元色
et :
rgb(255,0,0) #ff0000
green #00ff00
blue #0000ff
#01ace6
短十六進位制 :
由三位組成,每一位表示一種三元色,瀏覽器會
自動重複補充成6位十六進位制
#f00 -> #ff0000