css
• 層疊樣式表 (cascading style sheets)
• css可以用來為網頁建立樣式表，通過樣式表可以對網頁進行裝飾。
• 所謂層疊，可以將整個網頁想象成是一層一層的結構，層次高的將會覆蓋層次低的。
• 而css就可以分別為網頁的各個層次設定樣式。
基本語法
• css的樣式表由乙個乙個的樣式構成，乙個樣式又由選擇器和宣告塊構成。
• 語法：
– 選擇器
– p
行內樣式
• 可以直接將樣式寫到標籤內部的style屬性中，這種樣式不用填寫選擇器，直接編寫宣告即可。
• 這種方式編寫簡單，定位準確。但是由於直接將css**寫到了html標籤的內部，導致結構與表現耦合，同時導致樣式不能夠復用，所以這種方式我們不使用。
內部樣式表
• 可以直接將樣式寫到
外部樣式表
• 可以將所有的樣式儲存到乙個外部的css檔案中，然後通過標籤將樣式表引入到檔案中。
• 這種方式將樣式表放入到了頁面的外部，可以在多個頁面中引入，同時瀏覽器載入檔案時可以使用快取，這是我們開發中使用的最多的方式。
css選擇器:
選擇器• 選擇器（selector），會告訴瀏覽器：網頁上的哪些元素需要設定什麼樣的樣式。
• 比如：p這個選擇器就表示選擇頁面中的所有的p元素，在選擇器之後所設定的樣式會應用到所有的p元素上。
元素選擇器
• 元素選擇器（標籤選擇器），可以根據標籤的名字來從頁面中選取指定的元素。
• 語法：標籤名
• 比如p則會選中頁面中的所有p標籤，h1會選中頁面中的所有h1標籤。
類選擇器
• 類選擇器，可以根據元素的class屬性值選取元素。
•語法：.classname
• 比如.hello會選中頁面所有class屬性為hello的元素。
id選擇器
• id選擇器，可以根據元素的id屬性值選取元素。
• 語法：#id
• 比如#box會選中頁面中id屬性值為box的元素，和class屬性不同，id屬性是不能重複的。
復合選擇器
• 復合選擇器，可以同時使用多個選擇器，
這樣可以選擇同時滿足多個選擇器的元素。
• 語法：選擇器1選擇器2{}
• 例如div.box1會選中頁面中具有box1這個class的div元素。
群組選擇器
• 群組選擇器，可以同時使用多個選擇器，多個選擇器將被同時應用指定的樣式。
• 語法：選擇器1,選擇器2,選擇器3
• 比如p,.hello,#box會同時選中頁面中p元素，class為hello的元素，id為box的元素。
通用選擇器
• 通用選擇器，可以同時選中頁面中的所有元素。
• 語法：*
標籤之間的關係
• 祖先元素
– 直接或間接包含後代元素的元素。
• 後代元素
– 直接或間接被祖先元素包含的元素。
• 父元素
– 直接包含子元素的元素。
• 子元素
– 直接被父元素包含的元素。
• 兄弟元素
– 擁有相同父元素的元素。
後代選擇器
• 後代選擇器可以根據標籤的關係，為處在元素內部的代元素設定樣式。
• 語法：祖先元素 後代元素 後代元素
• 比如p strong 會選中頁面中所有的p元素內的strong元素。
偽類和偽元素
• 有時候，你需要選擇本身沒有標籤，但是仍然易於識別的網頁部位，比如段落首行
或滑鼠滑過的連線。css為他們提供一些選擇器：偽類和偽元素。
給鏈結定義樣式
• 有四個偽類可以讓你根據訪問者與該鏈結的交
互方式，將鏈結設定成4種不同的狀態。
• 正常鏈結
– a:link
• 訪問過的鏈結
– a:visited（只能定義字型顏色）
• 滑鼠滑過的鏈結
– a:hover
• 正在點選的鏈結
– a:active
其他• 獲取焦點
– :focus
• 指定元素前
– :before
• 指定元素後
– :after
• 選中的元素
– ::selection
其他選擇器
給段落定義樣式
• 首字母
– :first-letter
• 首行
– :first-line
屬性選擇器
• 屬性選擇器可以挑選帶有特殊屬性的標籤。
• 語法:
[屬性名]
[屬性名="屬性值"]
[屬性名~="屬性值"]
[屬性名|="屬性值"]
[屬性名^="屬性值"]
[屬性名$="屬性值"]
[屬性名*="屬性值"]
子元素選擇器
• 子元素選擇器可以給另乙個元素的子元素
設定樣式。
• 語法：父元素 > 子元素 {}
• 比如body > h1將選擇body子標籤中的所
有h1標籤。
其他子元素選擇器
• :first-child
– 選擇第乙個子標籤
• :last-child
– 選擇最後乙個子標籤
• :nth-child
– 選擇指定位置的子元素
• :first-of-type
• :last-of-type
• :nth-of-type
– 選擇指定型別的子元素
兄弟選擇器
• 除了根據祖先父子關係，還可以根據兄弟關係查詢元素。
• 語法:
– 查詢後邊乙個兄弟元素
• 兄弟元素 + 兄弟元素{}
– 查詢後邊所有的兄弟元素
• 兄弟元素 ~ 兄弟元素{}
否定偽類
• 否定偽類可以幫助我們選擇不是其他東西的某件東西。
• 語法::not(選擇器){}
• 比如p:not(.hello)表示選擇所有的p元素但是class為hello的除外。
繼承• 就像父親的財產會遺傳給兒子一樣，在css中祖先元素的樣式同樣也會被子元素繼承。
• 繼承是指應用在乙個標籤上的那些css樣式會同時被應用到其內嵌標籤上。
• 比如為父元素設定了字型顏色，子元素也會應用上相同的顏色。
• 當然並不是所有的樣式都會被繼承.
選擇器的權重
• 在頁面中使用css選擇器選中元素時，經常都是乙個元素同時被多個選擇器選中。
• 比如：
– body h1
– h1
• 上邊的兩個選擇器都會選擇h1元素，如果兩個選擇器設定的樣式不一
致那還好不會產生衝突，但是如果兩個選擇器設定的是同乙個樣式，
這樣h1到底要應用那個樣式呢？css中會預設使用權重較大的樣式，權重又是如何計算的呢？
權重的計算
• 不同的選擇器有不同的權重值：
– 內聯樣式：權重是 1000
– id選擇器：權重是 100
– 類、屬性、偽類選擇器：權重是 10
– 元素選擇器：權重是 1
– 萬用字元：權重是 0
• 計算權重需要將乙個樣式的全部選擇器相加，比如上邊的bodyh1的權重是20，h1的權重是10，所以第乙個選擇器設定的樣式會優先顯示。
css知識總結
background color 背景顏色。background image 元素的背景影象.background repeat 水平方向平鋪 repeat x background attachment 背景影象是否固定或者隨著頁面的其餘部分滾動 background position 屬性改變影...
CSS知識總結
基本流程 解析html以構建dom樹 構建render樹 布局render樹 繪製render樹,如下圖 名稱解釋 注意 display none 的節點不會被加入render tree，而visibility hidden 則會，所以，如果某個節點最開始是不顯示的，設為display none是更...
CSS知識總結
使用flex 使用 css3 transform 使用 display table cell 方法 position 的常見四個屬性值 relative，absolute，fixed，static。一般都要配合 left top right 以及 bottom 屬性使用。float屬性的取值 浮動的...