前端基础入门——升级页面化妆师CSS3
目錄
CSS3選擇器
新增基本選擇器
子元素選擇器
相鄰兄弟元素選擇器
通用兄弟選擇器
群組選擇器
屬性選擇器 element[attribute]
偽類選擇器（權值為10）
偽元素（權值為1）
CSS3邊框與圓角
border-radius屬性
box-shadow屬性
border-image屬性
CSS3背景與漸變
CSS3背景圖像區域
CSS3背景圖像定位
CSS3背景圖像大小
CSS3多重背景圖像
CSS3背景屬性整合
CSS3漸變
CSS3線性漸變
CSS3徑向漸變
CSS3文本與字體
CSS3文本陰影
text-shadow屬性?
CSS3換行
word-break屬性
word-wrap屬性
CSS3新文本屬性
text-align-last屬性?
text-overflow屬性?
CSS3 @font-face的語法規則
CSS3 @font-face的取值說明
CSS3 @font-face的字體格式
CSS3 @font-face的字體應用
CSS3 獲取特殊字體
CSS3轉換
CSS3 Transform
CSS3 2D轉換
CSS3 rotate() 旋轉
CSS3 translate() 平移
CSS3 scale() 縮放
CSS3 skew() 扭曲或斜切
CSS3 3D轉換?
CSS3 rotate3d()
CSS3 translate3d()
CSS3 scale3d()
CSS3 perspective3d()
CSS3 Transform與坐標系統
CSS3 矩陣?
CSS3 擴展屬性
transfor-style屬性
perspective屬性?
backface-visibility屬性?
CSS3過渡
transition-property屬性
transition-duration屬性
transition-timing-function屬性
transition-delay屬性
CSS3動畫
CSS3 動畫
CSS3 animation
animation-name屬性
animation-duration屬性?
animation-timing-function屬性?
animation-delay屬性?
animation-iteration-count屬性?
animation-fill-mode屬性?
animation-play-state屬性?
animation屬性?
CSS3 @keyframes
CSS3 will-change
提高渲染速度的方法
will-change屬性?
CSS3選擇器
新增基本選擇器
子元素選擇器
概念
子元素選擇器只能選擇某元素的子元素
注意：是直接后代，不是間接后代
語法格式?
父元素 > 子元素（father > child）
兼容性
IE8+、Firefox、Chrome、Safari、Opera
相鄰兄弟元素選擇器
概念?
相鄰兄弟選擇器可以選擇緊接在另一個元素后的元素，而且他們具有一個相同的父元素
語法格式
元素 + 兄弟相鄰元素（element + sibling）
兼容性
IE8+、Firefox、Chrome、Safari、Opera
通用兄弟選擇器
概念
選擇某元素后面的所有兄弟元素，而且他們具有一個相同的父元素
語法格式
元素 ~ 后面所有兄弟相鄰元素（element ~ siblings）
兼容性
IE8+、Firefox、Chrome、Safari、Opera
群組選擇器
概念
群組選擇器是將具有相同樣式的元素分組在一起，每個選擇器之間使用逗號“ , ”隔開
語法格式
元素1 , 元素2 , ... , 元素n（element1 , element2 , ... , elementn）
兼容性
IE8+、Firefox、Chrome、Safari、Opera
屬性選擇器 element[attribute]
概念
選擇所有帶有attribute屬性的元素
兼容性
IE8+、Firefox、Chrome、Safari、Opera
舉例
element[attribute="value"] 選擇所有使用attribute="value"的元素
element[attribute~="value"] 選擇所有attribute屬性包含單詞"value"的元素（注意是用空格隔開的單詞）
element[attribute^="value"] 選擇所有attribute屬性以"value"開頭的元素
element[attribute$="value"] 選擇所有attribute屬性以"value"結尾的元素
element[attribute*="value"] 選擇所有attribute屬性包含"value"的元素
element[attribute|="value"] 選擇所有attribute屬性為"value"或以"value-"開頭的元素
偽類選擇器（權值為10）
動態偽類
這些偽類并不存在于HTML中，只有當用戶和網站交互的時候才能體現出來
錨點偽類
:link、:visited
用戶行為偽類
:hover、:active、:focus
UI元素狀態偽類
概念
我們把":enabled"、":disabled"、":checked"偽類稱為UI元素狀態偽類
兼容性
IE9+、Firefox、Chrome、Safari、Opera
CSS3結構類
我們把CSS3的:nth選擇器也成為CSS3結構類
element:fitst-child
選擇屬于其父元素的首個子元素的每個element元素
elment:last-child
選擇屬于其父元素的最后一個子元素的element元素
element:nth-child()
選擇器匹配屬于其父元素的第N個子元素，無論元素的類型（計數時不看類型，但顯示時還是要看類型的）
說明：參數可以取number（某個具體值）、帶n的表達式（n從0開始，依次取0,1,2……）、odd（第奇數個）、even（第偶數個）
element:nth-last-child()
選擇器匹配屬于其父元素的倒數第N個子元素，無論元素的類型（計數時不看類型，但顯示時還是要看類型的）
element:nth-of-type()
選擇器匹配屬于父元素的特定類型的第N個子元素的每個元素（從符合的標簽中數出第N個）
element:nth-last-of-type()
選擇器匹配屬于父元素的特定類型的倒數第N個子元素的每個元素（從符合的標簽中數出倒數第N個）
element:first-of-type
選擇器匹配屬于其父元素特定類型的首個子元素的每個元素
element:last-of-type
選擇器匹配屬于其父元素特定類型的最后一個子元素的每個元素
element:only-child
選擇器匹配屬于其父元素的唯一子元素的每個元素（元素必須是其父元素的唯一子元素才符合，也就是指向自己）
element:only-of-type
選擇器匹配屬于其父元素的特定類型的唯一子元素的每個元素（可以有其他類型的元素，但該類型的元素只能有一個）
element:empty
選擇器匹配沒有子元素（包括文本節點，即標簽內沒有文字）的每個元素
否定選擇器
:not（element / selector）
選擇器匹配非指定元素 / 選擇器的每個元素
語法格式
父元素:not（子元素 / 子選擇器）
兼容性
IE9+、Firefox、Chrome、Safari、Opera
偽元素（權值為1）
element::first-line
概念
根據"first-line"偽元素中的樣式對element元素的第一行文本進行格式化
說明
"first-line"偽元素只能用于塊級元素
element::first-letter
概念
用于向文本的首字母設置特殊樣式
說明
"first-letter"偽元素只能用于塊級元素
element::before
概念
在元素的內容前面插入新內容
說明
- 是其元素的父元素的第一個子元素
- 是行級元素
- 常用"content"配合使用，內容通過content寫入
- 標簽中找不到對應的標簽
element::after
概念
在元素的內容后面插入新內容
說明
- 是其元素的父元素的最后一個子元素
- 是行級元素
- 常用"content"配合使用，內容通過content寫入，多用于清除浮動
- 標簽中找不到對應的標簽
element::selection
概念
用于設置在瀏覽器中選中文本后的背景色與前景色（即光標選中區域的效果）
兼容性說明
selection在IE家族中，只有IE9+版本支持，在firefox中需要加上其前綴“-moz”
CSS3邊框與圓角
border-radius屬性
一個最多可指定四個 border -*- radius 屬性的復合屬性，這個屬性允許你為元素添加圓角邊框
語法
border-radius: 1-4 length|% / 1-4 length|%
多值
- 四個值：分別是左上角、右上角、右下角、左下角（順時針）
- 三個值：分別是左上角、右上角和左下角、右下角
- 兩個值：分別是左上角與右下角，右上角與左下角
- 一個值：四個圓角值相同
兼容性
IE9+、Firefox4+、Chrome、Safari5+、Opera
說明：
- 單位不僅可以是px，還可以是em、vw、rem等。
- 用%時，是相對容器本身寬高而言的，會出現圓角不圓的效果。取值為50%時，會變成橢圓。
- 可以用border-radius-top(bottom)-left(right)來單獨設置
box-shadow屬性
可以設置一個或多個下拉陰影的框
語法
box-shadow-
h-shadow：水平陰影，正值往右
v-shadow：垂直陰影，正值往下
blur：模糊
spread：往四周擴展
color：顏色
inset：內外陰影
border-image屬性
使用border-image-*屬性來構建美麗的可擴展按鈕
語法
border-image-
source：指定要使用的圖像，取值可以是 none | image路徑
slice：指定圖像的邊界向內偏移，取值可以是 number | % | fill （百分比越大，圖片越小）
說明：fill為可選屬性值，假如指定，name中間第九塊不是透明塊，假如不指定，那么為透明圖片處理
width：指定圖像邊界的寬度，取值可以是 number | % | auto
outset：指定在邊框外部繪制 border-image-area的量，取值可以是length | number
repeat：圖像邊界是否重復（repeat）、拉伸（stretch）或鋪滿（round）
兼容性
IE不兼容、Firefox、Chrome、safari6+、Opera不兼容
CSS3背景與漸變
CSS3背景圖像區域
CSS3背景圖像定位
設置背景是相對于內邊距、邊框還是內容框來定位
CSS3背景圖像大小
- 說明：
- percentage 表示占父元素的比例，如果只寫其中一個百分比，另一個為auto，就會按比例進行縮放。如果兩個都寫，就按設置值大小顯示圖片。?
- cover 將背景圖片等比縮放以填滿整個容器，多余部分溢出（背景圖片很大時），可以用定位調整背景顯示區域，默認情況下從左上角開始顯示。—— 以寬、高較小者為準
- contain 將背景圖片等比縮放至某一邊緊貼容器邊緣為止，也就是要么填滿寬，要么填滿高，另一側填不滿就留白。—— 以寬高較大者為準
CSS3多重背景圖像
CSS3允許為元素使用多個背景圖像
語法
background-image: url(1.jpg) , url(2.jpg);
注意：元素引用多個背景圖片，前面圖片依次覆蓋后面的圖
CSS3背景屬性整合
建議：background 只寫 color url repeat content-box(h) content-box(v) , background-size / background-oringin / background-clip / background-attachment 另外寫，避免不兼容，有利于排除錯誤
CSS3漸變
CSS3線性漸變
? ??
??
?
?
注意：
- 第一個元素不設置百分比默認為0%，最后一個元素不設置百分比默認為100%。
- 百分比意思是從容器的某個位置到某個位置實現兩個顏色的過渡，而這個位置用百分比來定位。
?
注意：百分比不滿100%的不會自動填充剩余的部分，而是不斷重復同一樣式的漸變?。
CSS3徑向漸變
??
?
?
??
?
注意：關鍵字和形狀要寫在同一個參數中，用空格隔開。
?
CSS3文本與字體
CSS3文本陰影
text-shadow屬性?
說明：
- h-shadow：陰影的水平距離
- v-shadow：陰影的垂直距離
- blur：模糊程度
- color：陰影顏色
?
CSS3換行
word-break屬性
說明：
- normal：單詞放不下了，換到下一行。在中文顯示中，若文檔流中最后一行只有一個標點符號，就會和它前面的字符一起排到實際顯示的最后一行。
- break-all：單詞放不下了，把字符斷開
- keep-all：單詞放不下了，換到下一行，有連字符就從連字符斷開。在中文顯示中，從文檔流中離換行處最近的標點符號處換行。
word-wrap屬性
說明：
- normal：即使單詞很長，沒有遇到空格也不會斷開，會直接溢出
- break-word：把單詞斷開以防止溢出現象?
CSS3新文本屬性
text-align-last屬性?
說明：
- left：左對齊
- right：右對齊
- center：水平居中
- justify：兩端對齊
- start：主流文本左對齊則最后一行左對齊
- end：主流文本左對齊則最后一行右對齊
text-overflow屬性?
?
說明：
- clip：溢出部分直接減掉
- eliipsis：溢出部分用省略號表示
- string：溢出部分用自己寫的"string"來表示?
CSS3 @font-face的語法規則
先把字體文件放入服務器，網頁加載時自動下載服務器中的字體文件到客戶本地，從而在用戶的電腦上也能顯示出所需的字體。
CSS3 @font-face的取值說明
注意：source 建議使用相對路徑。?
CSS3 @font-face的字體格式
??
??
?
?
說明：svg 其實是以圖片的形式渲染出字體的樣式?
CSS3 @font-face的字體應用
說明：
- font-family在本地自帶的字體庫中找不到myFont，就會到src指定的url中，自上而下去尋找一個可以兼容的字體格式
- 最好新建一個font文件夾，把字體都放在這個文件夾下，相對路徑就寫為：url('font/myFont.ttf')
CSS3 獲取特殊字體
Fontsquirrel
http://www.fontsquirrel.com/tools/webfont-generator
CSS3轉換
CSS3 Transform
說明：[<transform-function>]* 意思是后面還可以加無數個函數
CSS3 2D轉換
CSS3 rotate() 旋轉
說明：
- 角度以deg為單位
- 旋轉一定要有一個旋轉中心，所以必須先用transform-origin來確定旋轉中心，若缺省，默認transform-origin:50% 50%
?
CSS3 translate() 平移
說明：
- translate的單位可以是px、em、rem、vw、% ，x軸取正值向右偏移，y軸取正值向上偏移。
- translate(x,y)第一個參數不能缺省，第二個參數可以，不寫時默認為0
CSS3 scale() 縮放
說明：
- 縮放的標準線在父容器的垂直中線、水平中線或中點上，而不在左上角 。
- scale()的第一個參數不能缺省，第二個參數可以，不寫時默認和第一個參數一樣
- scale的參數是以1為基準的縮放矢量參數，不需要單位，也不能用分數和百分比
CSS3 skew() 扭曲或斜切
說明：角度為正，逆時針轉動，以中線為旋轉中心。?與rotate不同，rotate角度為正順時針轉動，以本元素中點為旋轉中心
skew(x,y)第一個參數不可缺少，第二個參數可以，不寫時默認為0。
CSS3 3D轉換?
CSS3 rotate3d()
說明：角度0~90°，元素被逐漸壓縮，角度90°~180°，元素倒置并逐漸變大。?
說明：以中點為旋轉中心旋轉
說明：
- rotate3d(x,y,z,angle)是三種效果疊加的效果。
- 前三個參數中，取值為1意為該方向順時針旋轉，0為該方向不旋轉，-1位該方向順時針旋轉。
?
CSS3 translate3d()
說明：多用于遮罩
說明：x軸參數指明距離左上角水平平移距離，y軸參數指明距離左上角垂直平移距離，z軸參數指明距離人眼前后平移距離
?
CSS3 scale3d()
說明：scaleZ是厚度的變化?
CSS3 perspective3d()
CSS3 Transform與坐標系統
CSS3 矩陣?
說明：
- [x y 1] 若不寫，默認為 [0 0 1]?
- ax+cy+e為變換后的水平坐標，bx+dy+f表示變換后的垂直位置。
?
CSS3 擴展屬性
transfor-style屬性
perspective屬性?
說明：z＞0的部分比正常大，z＜0的部分比正常小
backface-visibility屬性?
說明：z＜0的部分不可見?
CSS3過渡
說明：
- 從一種形態變到另一種形態，也就是CSS值發生變化
- CSS效率非常高，它發生的變化時瞬間變化，速度非常快
- 視覺發生變化時，前一秒的視覺會在人眼中停留0.1s，而CSS的變化時間絕對小于0.1s，如果1s中經歷有24幀的變化，就可以認為它是瞬間直接變化的。
transition-property屬性
?transition-duration屬性
transition-timing-function屬性
說明：
- liner：勻速變化
- ease：先慢后快
- ease-in：先慢后很快
- ease-out：先很快后慢
- ease-in-out：先慢后快再慢?
transition-delay屬性
說明：duration 是開始變化到變化完成經歷的時間，delay是開始變化之前等待的時間?
<style type="text/css"> body { background: #abcdef; } div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;-webkit-transition-property: transform;-moz-transition-property: transform;-ms-transition-property: transform;-o-transition-property: transform;transition-property: transform;-webkit-transition-duration: 2s;-moz-transition-duration: 2s;-ms-transition-duration: 2s;-o-transition-duration: 2s;transition-duration: 2s;-webkit-transition-timing-function: ease-in-out;-moz-transition-timing-function: ease-in-out;-ms-transition-timing-function: ease-in-out;-o-transition-timing-function: ease-in-out;transition-timing-function: ease-in-out;-webkit-transition-delay: 1s;-moz-transition-delay: 1s;-ms-transition-delay: 1s;-o-transition-delay: 1s;transition-delay: 1s; } div:hover { cursor: pointer; transform: rotate(180deg);-webkit-transition-property: transform;-moz-transition-property: transform;-ms-transition-property: transform;-o-transition-property: transform;transition-property: transform;-webkit-transition-duration: 2s;-moz-transition-duration: 2s;-ms-transition-duration: 2s;-o-transition-duration: 2s;transition-duration: 2s;-webkit-transition-timing-function: ease-in-out;-moz-transition-timing-function: ease-in-out;-ms-transition-timing-function: ease-in-out;-o-transition-timing-function: ease-in-out;transition-timing-function: ease-in-out;-webkit-transition-delay: 1s;-moz-transition-delay: 1s;-ms-transition-delay: 1s;-o-transition-delay: 1s;transition-delay: 1s; } </style>注意：順序一定不能錯
CSS3動畫
CSS3 動畫
CSS3 animation
animation-name屬性
animation-duration屬性?
animation-timing-function屬性?
?
animation-delay屬性?
建議：CSS中小數點前的0都可以省略掉，如 0.5 用 .5 表示?
animation-iteration-count屬性?
注意：delay的時間不算在每一次動畫循環播放時間之內，它是變化過程之外等待的時間。?
??
注意：alternate和alternate-reverse必須配合循環屬性使用
animation-fill-mode屬性?
注意：當循環次數為infinity時，顯示不出我們設置的效果?
animation-play-state屬性?
animation屬性?
?
說明：
- animation 屬性中 name 和 duration 是必須的，其余屬性可缺省，如果只有一個時間參數，默認是duration的參數
- duration參數如果不設置則默認為0，動畫不會播放
CSS3 @keyframes
?
<style type="text/css"> body { background: #abcdef; } div { position: relative; width: 760px; height: 760px; margin: auto;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d; } div > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-position: center; } div > .inner { background-image: url(images/circle_inner.png);-webkit-animation: circle_inner linear 10s infinite;animation: circle_inner linear 10s infinite; } div > .middle { background-image: url(images/circle_middle.png);-webkit-animation: circle_middle linear 10s infinite;animation: circle_middle linear 10s infinite; } div > .outer { background-image: url(images/circle_outer.png);-webkit-animation: circle_outer linear 10s infinite;animation: circle_outer linear 10s infinite; } div > .imooc { background-image: url(images/imooc.png); } @-webkit-keyframes circle_inner {form { transform: rotateX(0deg); }25% { transform: rotateX(45deg); }75% { transform: rotateX(315deg); }to { transform: rotateX(360deg); } } @keyframes circle_inner {form { transform: rotateX(0deg); }25% { transform: rotateX(45deg); }75% { transform: rotateX(315deg); }to { transform: rotateX(360deg); } } @-webkit-keyframes circle_middle {form { transform: rotateY(0deg); }25% { transform: rotateY(45deg); }75% { transform: rotateY(315deg); }to { transform: rotateY(360deg); } } @keyframes circle_middle {form { transform: rotateY(0deg); }25% { transform: rotateY(45deg); }75% { transform: rotateY(315deg); }to { transform: rotateY(360deg); } } @-webkit-keyframes circle_outer {form { transform: rotateZ(0deg); }25% { transform: rotateZ(45deg); }75% { transform: rotateZ(315deg); }to { transform: rotateZ(360deg); } } @keyframes circle_outer {form { transform: rotateZ(0deg); }25% { transform: rotateZ(45deg); }75% { transform: rotateZ(315deg); }to { transform: rotateZ(360deg); } } </style>CSS3 will-change
提高渲染速度的方法
will-change屬性?
??
?
?
?
說明：推薦使用<custom-ident>?
注意：勿濫用will-change、使用時提前申明、remove?
<style type="text/css"> body { background: #abcdef; } div { position: relative; width: 760px; height: 760px; margin: auto;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d; } div > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-position: center;-webkit-transition: transform 10s ease;-moz-transition: transform 10s ease;-ms-transition: transform 10s ease;-o-transition: transform 10s ease;transition: transform 10s ease;-webkit-will-change: transform;-moz-will-change: transform;will-change: transform; } div > .inner { background-image: url(images/circle_inner.png); transform: rotateX(0deg); } div > .middle { background-image: url(images/circle_middle.png); transform: rotateY(0deg); } div > .outer { background-image: url(images/circle_outer.png); transform: rotateZ(0deg); } div > .imooc { background-image: url(images/imooc.png); } div:hover > .inner { transform: rotateX(360deg); } div:hover > .middle { transform: rotateY(360deg); } div:hover > .outer { transform: rotateZ(360deg); } </style>?
總結
以上是生活随笔為你收集整理的前端基础入门——升级页面化妆师CSS3的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于javaweb的医院管理系统
- 下一篇： 2017年html5行业报告,云适配发布