認(rèn)識css:
指層疊樣式表鸳玩,控制頁面布局和樣式阅虫。
html和css的關(guān)系:
html結(jié)構(gòu)層 負(fù)責(zé)從語義的角度搭建頁面結(jié)構(gòu)
css樣式表 輔助從審美的角度美化頁面
javascript行為層 負(fù)責(zé)從交互的角度提升用戶體驗
id name? style = 樣式名稱代表
行內(nèi)標(biāo)簽
h1 style=“ color:red;font-size:12px不跟;”
內(nèi)嵌樣式
head
style type=“text/css”
p{color=green颓帝;
font-szie=12px;
background=black窝革;
}
/head
外聯(lián)樣式:
link rel=“stylesheet” href=“css/main.css”
@import url(css/mian.css)
選擇符{屬性:值购城;}
id在style設(shè)置屬性時在前面加“#”號,可以用字母虐译,數(shù)字工猜,下劃線
#p1 {font-size:20px}
id="p1"
類選擇器class,在類前面加“.”菱蔬,
.web{font-size:20px}
p calss=“web”
復(fù)合選擇器:
h1.p2{font-size:20px篷帅;}
說明是在《h1 class=“p2”》不可以選擇到《h1》標(biāo)簽里
后代選擇器:
.box li{}----(首先找到calss的box標(biāo)簽 然后找到里面的li標(biāo)簽)
復(fù)合選擇器:
h1,p1,p2,{屬性值}
子元素選擇器:
h1>p{}----(找到h1標(biāo)簽里的p標(biāo)簽給予屬性,剩余其余標(biāo)簽不被選中)
屬性選擇器:
h1[id][clss]{}---(h1標(biāo)簽里有id 和class都可以實行屬性)
css偽類:
:link:應(yīng)用于沒被訪問過的鏈接
:hover:鼠標(biāo)到某個位置會有方塊反應(yīng)
:active:鼠標(biāo)點擊鏈接時產(chǎn)生的效果
:visited:應(yīng)用在訪問過的網(wǎng)站
:focus:應(yīng)用于有鍵盤輸入焦點的元素
css偽元素:
:first-line:一行顯示效果拴泌。
:first-letter:第一個顯示效果
:first-child:選擇屬于第一個子元素的元素
:before魏身,after:屬性前后加上效果
css層疊性(最終屬性為準(zhǔn))和繼承性(子承父業(yè))
css優(yōu)先級:
*標(biāo)簽>body標(biāo)簽
標(biāo)簽級>*>body
clss類選擇器>標(biāo)簽級
id>class
style行內(nèi)>id選擇器
width:寬度
height:高度
color:前景色
backcolor:背景色
font-size:字體大小
*:通配符=代表頁面中所有標(biāo)簽的屬性
margin:外邊距
padding:內(nèi)邊距