選擇器
:last-child /*選擇元素最後乙個孩子
*/:first-child /*
選擇元素第乙個孩子
*/:nth-child(1) /*
按照第幾個孩子給它設定樣式
*/:nth-child(even) /*
按照偶數
*/:nth-child(odd) /*
按照奇數
*/:disabled
/*選擇每個禁用的e元素 */:
checked
/*選擇每個被選中的e元素
*/:not(selector)
/*選擇非 selector 元素的每個元素
*/::selection
/*選擇被使用者選取的元素部分
*/
偽類:用於向某些選擇器新增特殊的效果(沒有建立新元素)
:last-child /*選擇元素最後乙個孩子
*/:first-child /*
選擇元素第乙個孩子
*/:nth-child(1) /*
按照第幾個孩子給它設定樣式
*/a:link
/*未訪問的鏈結
*/a:visited
/*已訪問的鏈結
*/a:hover
/*滑鼠移動到鏈結上
*/a:active
/*選定的鏈結
*/
偽元素:建立了 html 中不存在的元素,用於將特殊的效果新增到某些選擇器
::before {} /*選擇器在被選元素的前面插入內容和定義css,使用 content 屬性來指定要插入的內容。
*/::after {}
/*選擇器在被選元素的後面插入內容和定義css,使用 content 屬性來指定要插入的內容。
*/:first-letter /*
選擇該元素內容的首字母
*/:first-line /*
選擇該元素內容的首行
*/::selection
/*選擇被使用者選取的元素部分
*/
css3邊框
border-radius(圓角)、 box-shadow(陰影)、 border-image(邊框)
css3背景
文字效果
text-shadow 向文字新增陰影
text-justify 規定當 text-align 設定為 「justify」 時所使用的對齊方法
text-emphasis 向元素的文字應用重點標記以及重點標記的前景色
text-outline 規定文字的輪廓
text-overflow 規定當文字溢位包含元素時發生的事情
text-wrap 規定文字的換行規則
word-break 規定非中日韓文字的換行規則
word-wrap 允許對長的不可分割的單詞進行分割並換行到下一行
text-decoration 文字修飾符:overline、line-through、underline 分別是上劃線、中劃線、下劃線
字型您「自己的」的字型是在 css3 @font-face 規則中定義的。
2d/3d
轉換過渡(transition)
使頁面變化更平滑,以下引數可直接寫在 transition 後面
transition-property :執行動畫對應的屬性,例如 color,background 等,可以使用 all 來指定所有的屬性。
transition-duration:過渡動畫的乙個持續時間。
transition-timing-function:在延續時間段,動畫變化的速率,常見的有:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
transition-delay:延遲多久後開始動畫
動畫(animation)
先定義 @keyframes 規則(0%,100% | from,to)然後定義 animation,以下引數可直接寫在 animation 後面
animation-name: 定義動畫名稱
animation-delay: 指定元素動畫開始時間
多列布局
通過css3,能夠建立多個列來對文字進行布局
column-count: 規定元素應該被分隔的列數
column-gap: 規定列之間的間隔
column-rule: 設定列之間的寬度、樣式和顏色規則
使用者介面
resize 屬性規定是否可由使用者調整元素尺寸。
box-sizing 屬性允許您以確切的方式定義適應某個區域的具體內容。
outline-offset 屬性對輪廓進行偏移,並在超出邊框邊緣的位置繪製輪廓。
css 相容核心
-moz-:代表firefox瀏覽器私有屬性
-ms-:代表ie瀏覽器私有屬性
-webkit-:代表safari、chrome瀏覽器私有屬性
-o-:代表opera瀏覽器私有屬性
CSS3新特性總結
1.屬性選擇器 常用的簡單歸納下 attribute value 用於選取帶有指定屬性和值的元素。title w3school attribute value 包含指定詞彙的元素。後代選擇器 title hello attribute value 用於選取帶有以指定值開頭的屬性值的元素,該值必須是整...
css3新特性總結
一 圓角邊框 border radius 5px 二 多背景圖 background url img flwr.gif right bottom no repeat,url gif left top repeat 三 顏色和透明度 由原來的rgb到現在的rgba background rgba 0,...
css3新特性總結
一 圓角邊框 border radius 5px 二 多背景圖 background url img flwr.gif right bottom no repeat,url gif left top repeat 三 顏色和透明度 由原來的rgb到現在的rgba background rgba 0,...