CSS概述
CSS的作用
引入CSS的幾種方式
1.標(biāo)簽內(nèi)引用style:style="樣式名:樣式值;..."
2.內(nèi)部引用在head標(biāo)簽下
CCS內(nèi)部引用head.PNG
3.外部引用
-
利用head元素下的link標(biāo)簽,利用href引入外部的css文件
link引入外部CSS文件.PNG -
外部的css文件為body元素下的標(biāo)簽加上樣式
-
一個(gè)文本,后綴為 .css
外部css的名稱與后綴.PNG - 文件中只能包含樣式規(guī)則
-
樣式規(guī)則由選擇器和樣式聲明組成
外部的css文件.PNG - 根據(jù)標(biāo)簽名獲取對(duì)應(yīng)的標(biāo)簽,叫做選擇器
樣式的優(yōu)先級(jí)
- 內(nèi)部引用和外部引用優(yōu)先級(jí)一致,靠先后決定樣式,寫在后面的生效.也就是就近優(yōu)先
CSS樣式表特征
繼承性:應(yīng)用于后代,子元素
！important 規(guī)則，強(qiáng)制改變優(yōu)先級(jí)
通用選擇器
類名選擇器
元素選擇器
ID選擇器
id是唯一的,不能有id相同的標(biāo)簽
<#>井號(hào)
id選擇器.PNG
類選擇器
- 加上class的名稱 獲取對(duì)應(yīng)的選擇器
.voo{font-size: 30px} - class命名不能數(shù)字開頭
- 元素選擇器
.名稱{}pt為字體的號(hào)數(shù) - 標(biāo)簽名后面跟
.名稱{}
群組選擇器
選擇器聲明以逗號(hào)隔開的選擇器列表
- 將一些相同的規(guī)則作用于多個(gè)元素
后代選擇器
div span {color:red;}
div span {color:blue;}
后代選擇器,獲取div里面的所有span
子代選擇器,直系子代,和后代選擇器優(yōu)先級(jí)一致,誰靠的近渲染誰
子代選擇器,直選親系子代
偽類選擇器
link 尚未訪問的鏈接,默認(rèn)狀態(tài)下（不顯示默認(rèn)時(shí)饥悴，清除緩存）偽類選擇器.PNG
visited 訪問過的鏈接.
hover 最常用,鼠標(biāo)懸停時(shí)的樣式.
active 鼠標(biāo)按壓時(shí)的樣式.
focus 點(diǎn)上去就觸發(fā),光標(biāo)點(diǎn)上去
按照順序,順序不能顛倒偽類選擇器focus屬性.PNG
偽類選擇器可以使用其他選擇器去獲取對(duì)應(yīng)標(biāo)簽
CSS單位
顏色單位
- rgb();
rgba();CSS顏色單位rgba.PNGa 代表透明度
- 十六進(jìn)制數(shù)
#rrggbb 如#ff0000
rgb簡寫的十六進(jìn)制數(shù),如#f00
和顏色的英文單詞
尺寸
-
寬度屬性
width
max-width
min-width
p的id的最大最小寬度.PNG - 高度屬性
height
max-height
min-height
溢出
- overflow:當(dāng)內(nèi)容溢出元素框時(shí)如何處理
visible 默認(rèn)屬性
hidden 表示溢出部分不顯示
scroll 表示總是顯示滾動(dòng)條閱讀
auto 也表示滾動(dòng)閱讀,內(nèi)容多就有滾動(dòng)條,內(nèi)容足夠顯示就沒有滾動(dòng)條
溢出overflow.PNG
哪些HTML元素可以設(shè)置尺寸屬性
- 可以設(shè)置寬高的標(biāo)簽為塊標(biāo)簽,img,table.行標(biāo)簽設(shè)置寬高需要轉(zhuǎn)化塊標(biāo)簽
p
div
h1 h2 h2 h3 h4 h5 h6
ul ol li dl dt dd
img
table
結(jié)構(gòu)化標(biāo)簽都是塊標(biāo)簽
邊框?qū)傩?/h5>
- 簡寫方式
border:width style color;
邊框樣式:實(shí)線:solid 虛線:dotted
-
單邊方式
![]()
邊框單邊方式.PNG
-
transparent 用于創(chuàng)建有寬度的不可見邊框
![]()
transparent 有寬度不可見邊框.PNG
邊框倒角
border:width style color;
邊框樣式:實(shí)線:solid 虛線:dotted
單邊方式
transparent 用于創(chuàng)建有寬度的不可見邊框
左上抒钱，右上售滤，卓囚，順時(shí)針
邊框陰影 box-shadow
box-shadow 向方框加一個(gè)或多個(gè)陰影
取值為多個(gè)屬性值
box-shadow:h-shadow v-shadow blur spread color inset
圖片邊框 border-image
border-image: source width repeat;
圖片邊框(續(xù)1)
輪廓幸海，在邊框外圍，突出元素的作用
