css 9
一、複雜選擇器web
一、兄弟選擇器瀏覽器
一、相鄰兄弟函數
選擇器1+選擇器2優化
二、通用兄弟動畫
選擇器1~選擇器2url
二、屬性選擇器3d
語法：[]orm
[attr]:匹配附帶attr屬性的元素rem
elem[attr]:... ...字符串
elem[attr1][attr2]:
[attr=value]:
[class~=value]:
[attr^=value]:
[attr$=value]:
[attr*=value]:
三、僞類選擇器
一、目標僞類
:target
二、元素狀態僞類
:enabled,匹配被激活元素(表單控件)
:disabled,匹配被禁用元素(表單控件)
:checked,匹配被選中元素(radio，checkbox)
三、結構僞類
一、:first-child
二、:last-child
三、:nth-child(n)
四、:empty
五、:only-child
四、否認僞類
:not(選擇器)
四、僞元素選擇器
一、做用
匹配元素中的內容
二、語法
:first-letter,匹配元素的首字符
:first-line,匹配元素的首行
::selection,匹配用戶選中的部分
注意： :與::的區別
二、內容生成
一、語法
一、僞元素選擇器
一、:before,匹配元素內容區域以前
二、:after,匹配元素內容區域以後
二、屬性
屬性：content
取值：
一、字符串 ：普通文本,""
二、url() , 生成一副圖像
三、計數器
三、解決問題
一、浮動元素的父元素高度問題
div:after{
content:"";
display:block;
clear:both;
}
二、外邊距溢出
div:before/div:after{
content:"";
display:table;
}
四、計數器
一、聲明或復位一個計數器
屬性：
counter-reset:名 值 名 值;
值，能夠省略，默認爲0
注意：
一、不能將計數器聲明在使用的元素中
二、設置計數器增量
屬性：counter-increment:名 值;
值，能夠省略，默認爲1
注意：
一、哪一個元素使用，就在哪一個元素上聲明增量
三、使用計數器
屬性：content
取值：counter(名);
注意：
配合着:before或:after一塊兒使用
三、多列
一、屬性
一、分隔列
屬性：column-count
二、列間隔
屬性：column-gap
三、列規則
屬性：column-rule:width style color;
二、兼容性
添加瀏覽器前綴
四、CSS Hack
一、CSS Hack方式
一、CSS 類內部hack
經過 屬性前綴或值後綴的方式來編寫指定瀏覽器可以識別的樣式
hack 寫法
* *color IE6,IE7
+ +color IE6,IE7
# #color IE6,IE7
- -color IE6
_ _color IE6
\0 color:red\0; IE8,IE9,IE10
\9\0 color:red\9\0; IE9,IE10
注意：
順序問題
IE8,IE9,IE10(\0)
IE9,IE10(\9\0)
IE6,IE7(+)
IE6(-)
二、選擇器Hack
在選擇器前加上瀏覽器可以識別的前綴
* : IE6
*body{
/*IE6中body的樣式*/
}
*+ : IE7
*+body{
/*IE7中body的樣式*/
}
三、HTML都不引用Hack
經過HTML的條件註釋
條件註釋語法：
<!--[if 條件 IE 版本]>
內容
<![endif]-->
條件：
一、gt ：大於指定版本
二、gte ：大於等於
三、lt ：小於
四、lte ：小於等於
五、!不是指定版本
******************************
一、轉換
二、過渡
三、動畫
四、CSS 優化
******************************
一、轉換
一、轉換簡介
一、什麼是轉換
改變元素在頁面中的大小，位置，角度和形狀的一種方式
二、轉換分類
一、2D轉換
使元素在x軸和y軸上發生變化效果
二、3D轉換
在2D轉換基礎上，增長 z軸的變化效果
三、轉換屬性
屬性：transform
取值：
一、none
默認值，不進行任何轉換
二、轉換函數
表示一個或者多個轉換函數，若是是多個函數的話，中間以空格分開
四、轉換原點
屬性：transform-origin
默認狀況下，原點是在整個元素的中心位置處
取值：數值/百分比/關鍵字
兩個值：表示 x軸 和 y軸的位置
三個值：表示 x軸 ，y軸 ，z軸的位置
二、2D轉換
一、2D位移
一、屬性 和 函數
屬性:transform
函數:
translate(x) :元素在x軸上的位移距離，取值爲正，向右移動，取值爲負，向左移動
translate(x,y) :
x表示x軸位移距離
y表示y軸位移距離，取值爲正，向下移動，取值爲負，向上移動
translateX(x) :只改變元素在x軸上的位置
translateY(y) :只改變元素在y軸上的位置
取值：
一、數值
二、百分比
二、2D縮放
一、做用
改變元素在頁面中的大小
二、屬性和函數
屬性：transform
函數：
scale(value),若是隻給一個值，那麼x軸和y軸將等比縮放
scale(x,y):改變 x軸和y軸的縮放比例
scaleX(x):只改變x軸的縮放比例
scaleY(y):只改變y軸的縮放比例
取值：
默認值 爲1
縮小：0~1 之間的數值
放大：大於1的數值
三、2D旋轉
一、做用
改變元素在頁面中的角度
二、屬性 和 函數
屬性：transform
函數：rotate(ndeg)
n取值爲正，則順時針旋轉
n取值爲負，則逆時針旋轉
三、注意
一、轉換時，座標軸會一塊兒進行轉換
二、轉換原點能夠影響轉換效果
四、2D傾斜
一、做用
改變元素在頁面上的形狀
二、屬性 和 函數
屬性：transform
函數：
skew(xdeg) : x軸傾斜指定角度
實際上時改變 y軸的傾斜角度
取值爲正：逆時針
取值爲負：順時針
skewX(xdeg) : 效果同上
skewY(ydeg) : y軸傾斜指定角度
其實是改變 x軸的傾斜角度
取值爲正：順時針
取值爲負：逆時針
三、3D轉換
一、3D轉換
增長 z軸 轉換效果
二、屬性
屬性：perspective
做用：模擬 人眼睛到 3D投射元素的距離
注意：該屬性 須要加在 3D轉換元素的父元素上
兼容性：
火狐：-moz-perspective:
Chrome，Safari:-webkit-perspective
Opera:-o-perspective
三、3D旋轉
容許元素在 x軸，y軸，z軸上進行旋轉操做
屬性 和 函數
屬性:transform
函數：
rotateX(xdeg):以x軸爲中心軸進行元素的旋轉
rotateY(ydeg)
rotateZ(zdeg)
rotate3D(x,y,z,ndeg)
x,y,z,若是取值爲 0的話，說明該軸不參與旋轉
x,y,z,若是取值爲 1的話，說明該軸是參與旋轉的
rotate3d(0,0,1,45deg)-- rotatez(45deg)
rotate3d(1,1,0,45deg)
四、3D位移
一、做用
改變元素在z軸上的位置
二、屬性 和 函數
屬性：transform
函數：
translateZ();
translate3D(x,y,z)
三、屬性 : transform-style
做用：規範當前元素的子元素如何去排列3D位置
取值：
一、flat
默認值，不保留子元素的3D位置
二、preserve-3d
保留子元素3d位置
二、過渡
一、什麼是過渡
使得CSS的屬性值在一段時間內平滑過渡
二、過渡的 4個要素(屬性)
一、指定過渡屬性
屬性：transition-property
做用：規定應用過渡效果的CSS屬性名稱
取值：
一、none
二、all
三、property-name : 具體使用過渡效果的屬性名稱
能夠設置過渡的屬性：
一、顏色屬性
二、取值爲數值的屬性
三、轉換屬性
transform
四、漸變屬性
五、visibility 屬性
六、陰影屬性
ex:
div{
transition-property:background;
}
二、指定過渡時間
屬性：transition-duration
取值：以秒(s) 或 毫秒(ms) 做爲單位的
默認值爲0，即沒有過渡效果
ex:
div{
transition-property:background;
transition-duration:300ms;
}
三、指定速度時間曲線函數
屬性：transition-timing-function
取值：
一、ease : 默認值，慢速開始，快速變快，慢速結束
二、linear : 勻速
三、ease-in : 慢速開始，加速結束
四、ease-out: 快速開始，減速結束
五、ease-in-out:慢速開始和結束，中間先加後減
ex:
div{
transition-property:background;
transition-duration:300ms;
transition-timing-function:linear;
}
四、指定過渡延遲時間
屬性：transition-delay
取值：ms 或 s 做爲單位的數值
三、觸發過渡效果
通常都是由用戶行爲觸發
五、過渡屬性-過渡子屬性的簡寫模式
transition:property duration timing-function delay;
三、動畫
一、什麼是動畫
使元素從一種樣式逐漸變化爲另外一種樣式
其原理是經過 關鍵幀 控制動畫的每一步
注意：瀏覽器兼容性
經過了瀏覽器前綴解決兼容性
-moz-
-webkit-
-o-
二、使用動畫的步驟
一、聲明動畫
聲明動畫的名稱，而且指定關鍵幀的信息
關鍵幀：
一、時間點
二、該時間點上的狀態(樣式)
二、使用動畫
經過動畫屬性，將動畫效果綁定到某個元素上
三、聲明動畫
語法
@keyframes 動畫名稱{
0%{
動畫開始時元素的樣式聲明
}
... ...(1% ~ 99%)
100%{
動畫結束時元素的樣式聲明
}
}
兼容 Chrome Safari
@-webkit-keyframes 動畫名稱{
0%{
動畫開始時元素的樣式聲明
}
... ...(1% ~ 99%)
100%{
動畫結束時元素的樣式聲明
}
}
兼容 Firefox
@-moz-keyframes 動畫名稱{
0%{
動畫開始時元素的樣式聲明
}
... ...(1% ~ 99%)
100%{
動畫結束時元素的樣式聲明
}
}
時間點：
0%(from) : 動畫開始的時候
50% : 動畫運行到一半的時候
100%(to) : 動畫結束的時候
四、動畫的調用
一、animation-name
要調用的動畫名稱
二、aniamtion-duration
動畫完成一個週期須要用的時間
以s 或 ms 爲單位
三、animation-timing-function
動畫的 速度時間 曲線函數
ease
linear
ease-in
ease-out
ease-in-out
四、animation-delay
動畫執行延遲時間
s|ms爲單位
五、animation-iteration-count
動畫播放次數
取值：
一、具體數值
二、infinite
無限次播放
六、animation-direction
動畫播放方向
取值：
一、normal
默認值，正向播放，即從 0%~100%
二、reverse
逆向播放，即從100% ~ 0%
三、alternate
輪流播放，動畫在奇數次數播放時，從 0% ~ 100%,動畫在偶數次數播放時，從100% ~ 0%
七、animation屬性
animation:name duration timing-function delay iteration-count direction;
八、animation-fill-mode
動畫播放先後的填充方式
取值：
一、none
默認值，不改變默認行爲
二、forwards
動畫完成後，將保持在最後一個關鍵幀的狀態上
三、backwards
動畫播放前(在延遲時間內)，將元素保持在第一個幀的狀態上
四、both
動畫播放先後的填充模式都應用
九、animation-play-state
動畫的播放狀態
取值：
一、paused
暫停
二、running
播放
- 1. CSS筆記9
- 2. 9.Css——定位
- 3. HTML&CSS實驗(9)
- 4. 重拾css(9)——float
- 5. 2017-9-19-css（二）
- 6. html 9 css居中
- 7. 【CSS】【9】CSS盒子的浮動
- 8. CSS自學筆記（9）:CSS拓展（二）
- 9. 第9天：CSS精靈圖
- 10. CSS基礎（9.position深入）
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS筆記9
- 2. 9.Css——定位
- 3. HTML&CSS實驗(9)
- 4. 重拾css(9)——float
- 5. 2017-9-19-css（二）
- 6. html 9 css居中
- 7. 【CSS】【9】CSS盒子的浮動
- 8. CSS自學筆記（9）:CSS拓展（二）
- 9. 第9天：CSS精靈圖
- 10. CSS基礎（9.position深入）