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ù)字開(kāi)頭
• 元素選擇器 .名稱{}pt為字體的號(hào)數(shù)
• 標(biāo)簽名后面跟.名稱{}

群組選擇器

選擇器聲明以逗號(hào)隔開(kāi)的選擇器列表

• 將一些相同的規(guī)則作用于多個(gè)元素

后代選擇器

div span {color:red;}

div span {color:blue;}
后代選擇器,獲取div里面的所有span
子代選擇器,直系子代,和后代選擇器優(yōu)先級(jí)一致,誰(shuí)靠的近渲染誰(shuí)

子代選擇器,直選親系子代

偽類選擇器

偽類選擇器.PNG

link 尚未訪問(wèn)的鏈接,默認(rèn)狀態(tài)下（不顯示默認(rèn)時(shí)，清除緩存）
visited 訪問(wèn)過(guò)的鏈接.
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();
  CSS顏色單位rgba.PNG
  rgba(); a 代表透明度

• 十六進(jìn)制數(shù)
  #rrggbb 如#ff0000
rgb簡(jiǎn)寫的十六進(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)容足夠顯示就沒(mé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>

• 簡(jiǎn)寫方式

border:width style color;

邊框樣式:實(shí)線:solid 虛線:dotted

• 單邊方式

  
  
  邊框單邊方式.PNG
• transparent 用于創(chuàng)建有寬度的不可見(jiàn)邊框
  
  transparent 有寬度不可見(jiàn)邊框.PNG

邊框倒角

左上，右上，，順時(shí)針

邊框倒角的使用 可以設(shè)計(jì)角.PNG

邊框倒角角度.PNG

邊框陰影 box-shadow

box-shadow 向方框加一個(gè)或多個(gè)陰影
取值為多個(gè)屬性值
box-shadow:h-shadow v-shadow blur spread color inset

邊框陰影順序用法.PNG

圖片邊框 border-image

border-image: source width repeat;

應(yīng)用圖片邊框.PNG

也可以分開(kāi)設(shè)置.PNG

圖片邊框(續(xù)1)

圖片續(xù)一.PNG

輪廓，在邊框外圍，突出元素的作用

輪廓.PNG