圖解CSS3核心技術與案例實戰（1）
前言：
我買了一本《圖解CSS3核心技術與案例實戰》大漠寫的，為了提高自己的自覺性呢，抓緊看書，把讀書筆記放在這上面，跟大家一起分享，也為督促自己完成讀書計劃。
文末有微信公眾號，感謝你的掃一掃關註···
第1章 揭開CSS3的面紗
漸進增強：開發方式、Web設計理念
網站是否需要在每個瀏覽器看起來一樣？
首先保持最核心的功能能實現，讓低端瀏覽器看到站點內容，然後考慮使用高級但非必要的CSS和JavaScript等增強功能，為當前和未來的瀏覽器提供更好的支持，帶來用戶體驗。
優雅降級：先考慮低端設備用戶能否看到所有內容，然後在此基礎之上為高端用戶進行設計，不僅為高端設備用戶提供一個完美的應用，也要求為不同性能級別設備的用戶設計不用級別的不那麽完美的應用。
1、 強大的CSS3選擇器
2、 拋棄圖片的視覺效果
3、 背景的變革
4、 盒模型變化
5、 陰影效果
6、 多列布局和彈性盒模型布局
7、 Web字體和Web Font圖標
8、 顏色和透明度
9、 圓角和邊框的新法
1、盒模型的變形
2、CSS3過渡和動畫交互效果
3、媒體特性和Responsive布局
背景漸變、圓角、文本框發光、陰影
第2章 CSS3選擇器
選擇器分類
1、 基本選擇器
2、 層次選擇器
3、 偽類選擇器
1、 動態偽類選擇器
2、 目標偽類選擇器
3、 語言偽類選擇器
4、 UI元素狀態偽類選擇器
5、 結構偽類選擇器
6、 否定偽類選擇器
4、 偽元素
5、 屬性選擇器
清除浮動經典方法
<style>
.clearfix:after , . clearfix:before{ display:table;content:”” }
.clearfix:after{ clear:both;overflow:hidden }
</style>
<ul class=’clearfix demo’>
<li></li>
<li></li>
</ul>
class=’clearfix demo’
多類選擇器，通過>=2的類選擇器組合，來定義
層次選擇器
E F 後代選擇器 匹配F被包含在E元素內
E>F 子選擇器 匹配的F是E元素的子元素
E+F 相鄰兄弟選擇器 匹配的F緊鄰E元素後
E~F 通用選擇器 匹配的所有F位於E元素後
偽類選擇器
1、 動態偽類選擇器
:link :visited :hover :active :focus
2、 目標偽類選擇器
E :target F 選取鏈接的目標元素，提供樣式
手風琴效果、高亮顯示腳註、tabs效果、幻燈片效果、燈箱效果、相冊效果
(有一些使用js效果更佳)
3、 語言偽類選擇器
多語言版本網站，不同字體風格
1、 HTML5
<!DOCTYPE HTML>
<html lang=’en-US’>
2、< html lang=’fr’>
英文版本
:lang(en)｛quotes:’ ” ’ ‘ ” ’;｝
:lang(en) q ｛background:red;｝
法文版本
:lang(fr)｛quotes:’ << ’ ‘ >> ’;｝
:lang(fr) q ｛background:green;｝
4、 UI元素狀態偽類選擇器
a) E:checked 選中狀態
b) E:enabled 啟用狀態
c) E:disabled 不可用狀態
5、 結構偽類選擇器
a) E:first-child 等同 E:nth-child(1) 父元素的第一個子元素
b) E:last-child 等同 E:nth-last-child(1) 父元素的最後一個子元素
c) E:root 匹配元素E所在文檔的根元素html
d) E F:nth-child(n) 選擇父元素E的第n個子元素F
n=1、2、3 even odd 或者公式（2n+1、-n+5）
e) E F:nth-last-child(n) 選擇父元素E的倒數的第n個子元素F
f) E:nth-of-type(n) 選擇父元素內具有指定類型的第n個E元素
g) E:nth-last-of-type(n) 選擇父元素內具有指定類型的倒數第n個E元素
h) E:first-of-type 選擇父元素內具有指定類型的第一個E元素 等同E:nth-of-type(1)
i) E:last-of-type 選擇父元素內具有指定類型的倒數一個E 等同E:nth-last-of-type(1)
j) E: only-child 選擇父元素只包含一個子元素，且子元素匹配E
k) E: only-of-type 選擇父元素只包含一個同類型子元素，且子元素匹配E
l) E: empty 選擇沒有子元素的元素，且元素不含文本節點
6、否定偽類選擇器
E:not(F) 匹配所有除元素F以外的E元素
.gallery:hover li:not(:hover)｛｝
偽元素
::first-letter{} 下沈字母或者首字母
::first-line{} 匹配第一行文字
::before{} ::after{}
不是指存在於標記內的內容
而是可以插入額外內容的位置，不會成為DOM部分
設置頁面上所有外部鏈接之後的括號中附加他們指向的URL
a[href^=http]::after{
content=” (“ attr(href) ”) ”;
}
用於鏈接添加icon效果
@font-face
::selection 匹配突出選中文本 background && color
屬性選擇器
E[attr] 選擇匹配具有屬性attr的E元素，E也可以省略，表示定義了attr屬性的任意類型
E[attr=val]
E[attr|=val] 匹配val、val開頭
E[attr~=val] 字符串、單詞匹配
E[attr*=val] val在實際val的截取之內
E[attr^=val] 匹配val開頭
E[attr$=val] 匹配val結尾
^匹配起始符 $匹配終止符 *匹配任意字符
分享一下我的微信公眾號，分享攝影與編程，謝謝大家的關註
圖解CSS3核心技術與案例實戰（1）