CSS學(xué)習(xí)
1. 繼承
標(biāo)簽未設(shè)置的屬性會(huì)繼承父標(biāo)簽設(shè)置了的屬性,父標(biāo)簽未設(shè)置屬性會(huì)繼承父標(biāo)簽的父標(biāo)簽的屬性钱磅,以此類(lèi)推梦裂。
2. 選擇器
div p 選擇 <div> 元素內(nèi)部的所有 <p> 元素。
div>p 選擇父元素為 <div> 元素的所有 <p> 元素盖淡。
div+p 選擇緊接在 <div> 元素之后的所有 <p> 元素年柠。
[target=_blank] 選擇 target="_blank" 的所有元素。
[title~=flower] 選擇 title 屬性包含單詞 "flower" 的所有元素褪迟。
[lang|=en] 選擇 lang 屬性值以 "en" 開(kāi)頭的所有元素冗恨。
input:focus 選擇獲得焦點(diǎn)的 input 元素。
3. CSS樣式
背景
background-attachment:fixed 背景隨著滾動(dòng)條滾動(dòng)
background-repeat 背景是否重復(fù)
文字
text-indent:首行縮進(jìn)
如果有要求除首行或者標(biāo)題等不縮進(jìn)味赃,其他縮進(jìn)則可以:
h1{
text-indent : -2em;
}
div{
padding-left : 2em;
}
<div>
<h1>標(biāo)題</h1>
<p>文字</p>
<p>文字</p>
</div>
text-transform:改變字母大小寫(xiě)
text-shadow:文字陰影(屬性1:表示向右平移的距離掀抹,屬性2:表示向下平移的距離,屬性3:表示模糊度心俗,屬性4:陰影顏色)
word-wrap:文字換行(可以規(guī)定寬度)
text-align:center 文字居中
偽類(lèi)
a:link 普通的未被訪問(wèn)的鏈接
a:visited 用戶已訪問(wèn)的鏈接
a:hover 鼠標(biāo)指針位于鏈接上方
a:active 鏈接被點(diǎn)擊的時(shí)刻
注意: 在CSS定義中傲武,a:hover 必須被置于 a:link 和 a:visited 之后,才是有效的。
注意: 在 CSS 定義中谱轨,a:active 必須被置于 a:hover 之后,才是有效的吠谢。
注意:偽類(lèi)的名稱不區(qū)分大小寫(xiě)土童。
p:first-child 匹配第一個(gè)<p>元素
p:before 在每個(gè)<p>元素之前插入內(nèi)容
p:after 在每個(gè)<p>元素之后插入內(nèi)容
表格
border-collapse: collapse 表格邊框折疊(由雙行變?yōu)閱涡校?br> colspan 是合并列,rowspan是合并行工坊,合并行的時(shí)候献汗,比如rowspan="2",它的下一行tr會(huì)少一列王污;合并列的時(shí)候 colspan="2"罢吃,此行的列會(huì)少一列
定位
position:static 默認(rèn)值
position:relative 相對(duì)布局,相對(duì)于其正常位置進(jìn)行定位
position:absolute 絕對(duì)布局,相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位
position:fixed 絕對(duì)布局,相對(duì)于瀏覽器窗口進(jìn)行定位
浮動(dòng)
clear:left 清除左浮動(dòng)
clear:right 清除右浮動(dòng)
clear:both 清除所有浮動(dòng)
盒子模型
外邊距會(huì)疊加,采用外邊距更長(zhǎng)的那段昭齐,浮動(dòng)元素不會(huì)疊加
兼容性
-ms- IE瀏覽器
-moz- 火狐瀏覽器
-webkit- Google Chrome瀏覽器
-webkit- Safari瀏覽器
-o- Opera瀏覽器
-xv- Opera瀏覽器
CSS動(dòng)畫(huà)
transform:translate(100px,200px); 延X(jué)軸向右平移100px尿招,延Y軸向下平移200px。
transform:rotate(45deg); 順時(shí)針旋轉(zhuǎn)45度阱驾。
transform:scale(1,2); 寬度不變就谜,高度變?yōu)樵瓉?lái)的2倍。
transform:skew(20deg,30deg); X軸傾斜20度里覆,Y軸傾斜30度丧荐。
transform:rotateX(60deg); 延X(jué)軸向平面里旋轉(zhuǎn)60度。
transform:rotateY(60deg); 延Y軸向平面里旋轉(zhuǎn)60度喧枷。
transition: width 1s linear 2s; 寬度過(guò)渡時(shí)間1s虹统,過(guò)渡方式 linear,等2s開(kāi)始
animation:anima 5s; 定義一個(gè)動(dòng)畫(huà)隧甚,名稱為anima车荔,完成時(shí)間5s
@keyframes anima{
0%{}//初始狀態(tài)
25%{}//動(dòng)畫(huà)演示到25%狀態(tài)
50%{}//動(dòng)畫(huà)演示到50%狀態(tài)
75%{}//動(dòng)畫(huà)演示到75%狀態(tài)
100%{}//動(dòng)畫(huà)演示到100%狀態(tài)
}
權(quán)值
標(biāo)簽的權(quán)值為1,類(lèi)選擇符的權(quán)值為10戚扳,ID選擇符的權(quán)值最高為100夸赫,繼承的權(quán)值最低可以看成0.1
p{color:red;} /*權(quán)值為1*/
p span{color:green;} /*權(quán)值為1+1=2*/
.warning{color:white;} /*權(quán)值為10*/
p span.warning{color:purple;} /*權(quán)值為1+1+10=12*/
#footer .note p{color:yellow;} /*權(quán)值為100+10+1=111*/