選擇器
基本選擇器
- E
- .class
- #id
- E F
- E > F //只能選擇某個元素的直接子元素,不包含孫子元素以及往后的元素
- E + F //F在E的后面并且相鄰,是選擇E后面的相鄰兄弟元素
ul li + li
<ul>
<li></li>
<li></li> *
<li></li> *
<li></li> *
<li></li> *
</ul>
- E ~ F //通用兄弟選擇器
ul li ~ li 2和5
ul li + li 2
<ul>
<li></li>
<li></li>
<a></a>
<a></a>
<li></li>
</ul>
屬性選擇器
E[attr]
只要有attr屬性,不管有沒有值都會被選中
E[attr="value"]
必須有attr屬性,值必須是value
最好加引號,如果不加則要符合css標(biāo)識規(guī)范
E[attr^="value"]
a[href^="http://"]
以http://開頭的所有a都會被選中
E[attr$="value"]
img[src$=".png"] 以.png結(jié)尾都會被選中
E[attr="value"]*
包含value
E[attr~="value"]
如果屬性值包含很多的單詞,并且這些單詞是以空格隔開的話,以此方式進(jìn)行選擇
<a title="hello world"></a>
a[title~="hello"]
E[attr|="value"]
<div lang="zh-cn"></div>
div[lang|="zh"]
偽類和偽元素選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nth p:nth-child(2){
color: red; //必須是.nth第一個元素且必須是p標(biāo)簽
}
.nth p:nth-of-type(2){
color: blue;//先去找p標(biāo)簽,然后再找第一個p
}
.nth p:empty{
color:green;
}
.nth:not(p){
font-weight:bold;
}
</style>
</head>
<body>
<div class="nth">
<div>div</div>
<p>p</p>
<p>p</p>
<p></p>
<p>p</p>
<p>p</p>
<p>p</p>
</div>
</body>
</html>
偽元素可以寫一個或兩個冒號
圓角
border-radius
如果需要設(shè)定四個值,從左上開始順時針
border-radius:30px 50px 70px 100px;
盒陰影
box-shadow: h-shadow v-shadow blur spread color inset
box-shadow:10px 10px 10px 0 red outset;
水平方向偏移量 豎直方向偏移量 模糊 擴(kuò)展 顏色 內(nèi)外陰影
邊界圖片
border-image: source slice width outset repeat
要使用的圖像 縮放 寬度 外部繪制的量 重復(fù)屬性
border-image:url('border.jpg')
背景
background-clip
指定背景繪制區(qū)域
background-clip:border-box|padding-box|content-box
background-origin
背景圖像定位,指定background-position屬性應(yīng)該是相對位置
background-origin:border-box|padding-box|content-box
background-size
指定背景圖像大小
background-size:length|percentage|cover|contain
background-size:100%; //只設(shè)定第一個值時,第二個值根據(jù)圖片寬度值等比縮放
background-size:100px; //指定大小同理
background-size:cover; //將背景圖片等比縮放以填滿整個屏幕
background-size:contain //將背景圖片等比縮放至某一邊緊貼容器邊緣為止
多重背景圖像
background-image:url(img.jpg),url(img2.png);
背景屬性整合
background:color position size repeat origin clip attachment image
漸變
線性漸變
background: linear-gradient(direction,color-stop1,color-stop2,...) //默認(rèn)從上到下
background: linear-gradient(to right,red,blue); //從左到右.標(biāo)準(zhǔn)寫法
使用角度更好
//0deg創(chuàng)建從上到下的漸變,90deg將創(chuàng)建一個從左到右的漸變
background: linear-gradient(90deg,rgba(255,0,0,0),rgba(255,0,0,1));
轉(zhuǎn)換
Transform
讓元素在一個坐標(biāo)系統(tǒng)中變形,這個屬性包含一系列變形函數(shù),可以移動,旋轉(zhuǎn)和縮放元素
2D轉(zhuǎn)換
- rotate() 旋轉(zhuǎn)
- translate() 平移
- scale() 縮放
- skew() 扭曲或斜切
- matrix() 矩陣或混合
transform:rotate(angle)
angle指旋轉(zhuǎn)角度,正數(shù)順時針,負(fù)數(shù)逆時針
transform:rotate(30deg);
transform:translate(x,y)
transform:translateX(x)
transform:translateY(y)
transform:translate(300px,100px);
transform:scaleX(x)
transform:scaleY(y)
transform:scale(x,y)
transform:scaleX(.5);
**skewX(x)
skewY(y)
skew(x,y)
**
transform:skew(20deg,20deg);
3D轉(zhuǎn)換
- rotate3d()
- translate3d()
- scale3d()
- matrix3d()
- perspective()
transform:rotateX(angle)
transform:rotateY(angle)
transform:rotateZ(angle)
transform:rotate3d(x,y,z,angle)
前三個參數(shù)分別表示旋轉(zhuǎn)的方向x,y,z,第四個參數(shù)表示旋轉(zhuǎn)的角度,參數(shù)不允許省略
transform:rotate3d(.1,1,1,45deg);
x,y,z只有0和非0的區(qū)別,如果是0沒有變化,如果都是非0的狀態(tài)時,會根據(jù)大小(不超過1)來反映出程度.-1代表逆時針,1代表順時針
transform:translateZ(z)
transform:translate3d(x,y,z)
transform:translate3d(200px,200px,200px);
transform:scaleZ(z)
transform:scale3d(x,y,z)
transform:scale3d(1.5,1.5,1.5); //參數(shù)不能省略
Transform與坐標(biāo)系統(tǒng)
transform-origin:x-axis y-axis z-axis
允許更改轉(zhuǎn)換元素的位置
transform-origin:left top;
擴(kuò)展屬性
transform-style:flat | preserve-3d;
指定嵌套元素是怎樣在三維空間中呈現(xiàn)
perspective屬性
指定觀察者[z=0]平面的距離,使具有三維位置變換的元素產(chǎn)生透視效果
perspective:100px;
perspective-origin:top; //視角的角度
backface-visibility:visible | hidden
指定元素背面面向用戶時是否可見
