css3++
● css3簡介
○ CSS即層疊樣式表（Cascading StyleSheet）CSS3是CSS技術的升級版本，CSS3語言開發是朝著模塊化發展的模塊包括： 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄布局等CSS 用于控制網頁的樣式和布局。CSS3 是最新的 CSS 標準。CSS3 完全向后兼容，因此您不必改變現有的設計。瀏覽器通常支持 CSS2。
● css3選擇器
○ 通用兄弟選擇器
■ element1~element2 選擇器 element1 之后出現的所有 element2。兩種元素必須擁有相同的父元素，但是 element2 不必直接緊隨 element1
○ 屬性選擇器
■ [att*=val] 屬性選擇器 ：選擇具有att屬性且屬性值為包含val的字符串的E元素。
■ [att^=val] 屬性選擇器 ：選擇具有att屬性且屬性值為以val開頭的字符串的E元素。
■ [att$=val] 屬性選擇器 ：選擇具有att屬性且屬性值為以val結尾的字符串的E元素。
○ 結構性偽類選擇器
■ :root將樣式綁定到頁面的根元素中。所謂根元素，是指位于文檔樹中最頂層結構的元素，在HTML頁面中就是值包含著整個頁面的<html>部分
■ :not(s)匹配不含有s選擇符的元素
■ :empty使用該選擇器來制定當元素內容為空白時使用的樣式。
■ :target使用該選擇器來對頁面中的某個target元素（該元素的id當做頁面中的超鏈接來使用）指定樣式，該樣式只在用戶點擊了頁面中的超鏈接，并且跳轉到target元素后起作用。
■ :first-child匹配父元素的第一個子元素,要使該屬性生效，必須是某個對象的子元素。
■ :last-child匹配父元素的最后一個子元素,要使該屬性生效，對象必須是某個對象的子元素。
■ ：nth-child(n)匹配父元素的第n個子元素。
● nth-child(odd)奇數行與nth-child(even)偶數行
● n:所有的行、n+2除第1行外所有的行、2n:每2行選擇一行、3n:每3行選擇一行、2n+4:從第4行開始隔1行選擇1行
■ :nth-last-child(n)匹配父元素的倒數第n個子元素。
● n:所有行、2:倒數第2行、-n+3:最后3行
■ :nth-of-type(n)匹配同類型中的第n個同級兄弟元素。
● nth-of-type(odd)奇數和:nth-of-type(even)偶數-
■ :nth-last-of-type(n)匹配同類型中倒數的第n個同級兄弟元素。
■ :only-child匹配父元素僅有的一個子元素。
■ ：only-of-type(){僅有一個此類型的子元素}
○ UI元素狀態偽類選擇器
■ :checked匹配用戶界面上處于選中狀態的元素
■ :disabled匹配用戶界面上處于禁用狀態的元素
■ :enabled匹配用戶界面上處于可用狀態的元素
■ :read-only 指定當元素處于只讀狀態時的樣式；
■ :read-write 指定當元素處于非只讀狀態時的樣式；
● 注：在FF下要寫成 -moz-read-only 或者 -moz-read-write
■ :default 指定當頁面打開時默認處于選區狀態的radio或checkbox控件的樣式；
■ E:selection 指定當元素處于選中狀態時的樣式；
● 主流瀏覽器前綴
○ Gecko 前綴：-moz-
○ Presto 前綴：-o-
○ Trident 前綴：-ms-
○ Webkit 前綴：-webkit-
● css3新增屬性
○ css3新增文本屬性
■ text-shadow:h-shadow（水平陰影位置） V-shadow（垂直陰影距離） blur(模糊距離) color(陰影顏色)文本陰影
■ word-break：normal（默認）/break-all(允許在單詞內換行)/keep-all(只能在半角空格或連字符處換行。)規定非中日韓文本的換行規則。
■ word-wrap：normal(默認)/break-word(允許在單詞內換行)允許對長的不可分割的單詞進行分割并換行到下一行。
■ @font-face：設置字體
● Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 類型的字體。
Internet Explorer 9+ 支持新的 @font-face 規則，但是僅支持 .eot 類型的字體 (Embedded OpenType)。
例：
@font-face{font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */}
○ 背景新增屬性
■ background-origin: content-box/padding-box / border-box 規定背景圖片的定位區域。
■ background-clip: content-box/padding-box / border-box 規定背景的繪制區域。
■ background-size:規定背景圖片的尺寸。
■ 多重背景圖：background-image:url(bg_flower.gif),url(bg_flower_2.gif);
○ css3 顏色
■ rgba：R：紅色值；G：綠色值。B：藍色值。A：Alpha透明度。取值0 - 1之間
■ hsl：H：Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色；S：Saturation(飽和度)。取值為：0.0% - 100.0%L：Lightness(亮度)。取值為：0.0% - 100.0%
■ hsla：跟hsl一樣又加了alpha；
● transparent：透明顏色（擴展）
○ css3新增邊框屬性
■ box-shadow:邊框陰影
■ border-image:source slice outset repeat邊框圖片
● border-image-source:url();使用絕對或相對地址指定圖像。
● border-image-slice:圖片剪裁位置,其有1~4個參數.
● border-image-repeat:repeat（重復）/round（平鋪）/stretch（拉伸）;重復性
● border-image-outset:邊框擴展
■ border-radius:圓角邊框
■ border-color:邊框顏色
● 優雅降級和漸進增強
○ 漸進增強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
○ 優雅降級 graceful degradation：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
○ 區別：優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。
● css3擴展
○ E[att|="val"]{ sRules }選擇具有att屬性且屬性值為以val開頭并用連接符"-"分隔的字符串的E元素。(css2)
○ E[att~="val"]{ sRules }選擇具有att屬性且屬性值為一用空格分隔的字詞列表，其中一個等于val的E元素。(css2)
○ :only-of-type匹配同類型中的唯一的一個同級兄弟元素E。
○ :lang(){}匹配使用特殊語言的E元素。
○ :nth-last-of-type(n){}匹配同類型中的倒數第n個同級兄弟元素。
○ :first-of-type匹配同類型中的第一個同級兄弟元素。
○ :last-of-type匹配同類型中的最后一個同級兄弟元素。
○ :focus設置對象在成為輸入焦點（該對象的onfocus事件發生）時的樣式。(css2)
○ E:focus 元素獲得光標焦點時使用的樣式，主要是在文本框控件獲得焦點并進行文字輸入的時候使用；
○ E:active 元素被激活(鼠標在元素上按下還沒有松開)時使用的樣式；
○ E:hover 鼠標指針移動到某個文本框控件上的樣式；
轉載于:https://www.cnblogs.com/RuMengkai/articles/6198377.html
總結
- 上一篇： Linux系统编程14：进程入门之Lin
- 下一篇： Socket选项之SO_RCVTIMEO