css(雜記)

CSS中的僞類有：

• :link——未訪問過的連接；
• :visited——訪問過的連接；
• :hover——鼠標懸停的元素；
• :focus——獲取焦點的元素；
• :active——激活的元素（例如一個被單擊的連接元素）；
• :first-child——做爲其餘元素第一個子元素的元素；
• :lang()——根據元素的lang屬性肯定的元素。
• :target
• :root
• :nth-child()
• :nth-of-type()
• :nth-last-of-type()
• :first-of-type
• :last-of-type
• :only-of-type
• :only-child
• :last-child
• :empty
• :not()
• :enabled
• :disabled
• :checked

CSS2.1中的僞元素有：

• ::first-line
• ::first-letter
• ::before
• ::after

那麼區別在哪兒呢？區別就在於這些僞選擇器影響文檔的方式不一樣。僞類的表現有點兒像給文檔添加類，而僞元素的效果就好像有元素被插入到了文檔中。

特殊性能夠來判斷優先級

• 每一個元素描述符貢獻0,0,0,1；
• 每一個類、僞類或者屬性描述符貢獻0,0,1,0；
• 每一個ID描述符貢獻0,1,0,0。

a[href*="w3.org"] {font-weight: bold;}
選擇全部URL中包含w3.org的連接元素

a[href^="http"]
a[href$=".pdf"]
只查找屬性值的開頭或結尾部分

p~ul選擇前面有<p>元素的每一個<ul>元素，即選擇p以後出現的全部ul

css中「>」是css3中特有的選擇器，A>B表示選擇A元素的全部子B元素，與A B不一樣的是，A B選擇全部後代元素，爲A>B只選擇一代。

A B{}選擇A全部的後代B元素

A>B{}選擇A的一代B元素

A+B{}這個+是選擇相鄰兄弟，稱做「相鄰兄弟選擇器」，若是須要選擇緊接在另外一個元素後的元素，並且兩者有相同的父元素，可使用相鄰兄弟選擇器，例如，若是要增長緊接在 h1 元素後出現的段落的上邊距，能夠這樣寫：

　　h1 + p {margin-top:50px;}
  
波浪號做爲選擇符，容許選擇後續的兄弟元素，但不包含直接相鄰的兄弟元素。
h1 ~ ul {list-style-type: lower-alpha;}

line-height（行高）屬性既能夠接受無單位的數值，也可使用帶單位的行高值。那麼它們之間有什麼區別呢？當你定義了一個有單位的值，例如1em或者100%時，就會將計算後的行高值傳給所有的後代元素。而無單位的行高值不會傳導到後代元素。

.hide {visibility: hidden;}
該規則會使元素不可見，這可能聽上去像是元素沒有`display`屬性。然而，這裏有個很關鍵的差別：被設置成`visibility:　hidden`的元素仍然參與頁面佈局

設置打印樣式
將這些打印樣式應用到屏幕媒介上，把其餘的屏幕樣式取消，如圖3-11所示。所以，須要把print改成screen而且把原來存在的screen值改成其餘的media值。通常會使用tty這個值，由於這是跟screen最不搭邊的媒介了，而且它很短，輸入很方便。

<link type="text/css" rel="stylesheet" href="basic.css" media="tty">
<link type="text/css" rel="stylesheet" href="theme.css" media="tty">
<link type="text/css" rel="stylesheet" href="print.css" media="screen">

通用樣式

body {padding: 0; margin: 0;}
消除全部瀏覽器的裝訂距離

ul, ol {margin-left: 0; padding-left: 0;}

輪廓outline和div的區別
一、邊框是參與佈局的，而輪廓並不參與。
二、輪廓必然是環繞着元素的，而且在元素的四周永遠保持一致。換種說法就是，你不能像設置邊框那樣只設置左輪廓或者上輪廓

清除浮動：

div#footer {clear: left;}

清除浮動最簡單的辦法就是在文檔中插入一個元素，並設置它的clear（清除）屬性。

<br class="clearfix">

.clearfix {display: block; clear: both;
font-size: 0; height: 0;}

em和rem相對於px更具備靈活性，他們是相對長度單位，更適用於響應式佈局。

對於em和rem的區別一句話歸納：em相對於父元素，rem相對於根元素。
em

• 子元素字體大小的em是相對於父元素字體大小
• 元素的width/height/padding/margin用em的話是相對於該元素的font-size

列出使用的各類媒體類型

1. aural - 用於語音和音頻合成器
2. print - 用於打印機
3. projection - 用於方案展現，好比幻燈片
4. handheld - 用於小的手持的設備
5. screen - 用於電腦顯示器