《Head First HTML與CSS》的CSS屬性

關於繼承的結論。

1.元素選擇器的做用強於繼承的做用；用戶定義強於瀏覽器默認（詳見（3）《Head First HTML與CSS》學習筆記---CSS入門的2）

2.基於類的選擇器>類選擇器>元素選擇器（詳見（3）《Head First HTML與CSS》學習筆記---CSS入門的6）

3.同種選擇器下，順序是有影響的，最後一個生效（詳見（3）《Head First HTML與CSS》學習筆記---CSS入門的6）

沒有特別標註的狀況，下面的全部屬性都是在Edge和Firefox開發者版本下實測可用的（2017.11.9）。

 

關於簡寫的討論。

不少屬性均可以簡寫，好比用background、margin等，可是通過我本身的考慮，我以爲我只想用部分簡寫，另外一些諸如字體的簡寫方式我以爲很差記，因此我決定不使用其的簡寫方式。在這裏我就記錄一些本身想用的簡寫（有些簡寫有順序是由於有寫簡寫的值是同樣的，沒順序限制就沒法準確表達了；有些沒順序限制是由於沒有簡寫值同樣，因此係統能夠正確表達）：

1.內外邊距簡寫：

h1{
  padding:             25px 25px 25px 80px;
  margin:              30px 250px 30px 30px;
}
/*內外邊距值對應的大小分別是上、右、下、左*/
/*當上下、右左同樣時還能夠省略寫，可是我不喜歡那種方式，因此這裏就不寫這個例子了*/
/*若是沒順序，這裏就沒法知道哪一個值表示上邊距，哪一個是下邊距，etc*/

2.背景簡寫：

h1{
background:    #a7cece url(images/background.gif) no-repeat;
}
/*順序是背景色、背景圖、背景圖重複方式*/

 須要注意的是，雖然簡寫看起來使代碼簡潔了，可是若是你只改一個屬性，那麼還不如不用簡寫，這樣反而讓代碼易讀點。

 

1.選擇器

元素選擇器：

 p，h1{
   color: maroon;
 }

這段代碼表示HTML中的全部段落（p）和一級標題（h1）的字體顏色是茶紅色（maroon）（內嵌元素能夠繼承，好比<p>..<em>...</em>...</p>中的<em>元素字體也是茶紅色）。

id選擇器有兩種寫法，第一種：

 #one{
   color: maroon;
 }

/*
#one two{
   color： maroon；
}
這是錯誤的！要想選擇兩個id進行樣式設計，必須分開寫!之因此這樣錯是爲了區分子孫選擇器，看後面就知道了。
*/

第二種：

p#one{
  color： maroon；
}

區別在哪裏？

通常狀況下，咱們知道確定會有一個一個段落指定爲這個id，因此用哪個選擇器均可以，因此咱們會選擇最簡單的寫法，即第一種；

在一些特殊狀況，好比一組很複雜的頁面中，可能會出現這種狀況：兩個頁面連接的CSS文件是同一個（有導航欄的頁面就極可能這樣，整個頁面除了部分樣式要根據導航欄變化外，其他部分的樣式都是不變的，這樣的話連接同一個CSS是一種好的作法。），其中一個頁面將id「one」指定給一個段落，而在另外一個頁面上把id「one」分配給一個列表或塊引用。此時你若是不寫清楚，就沒法確認是在給哪一個頁面的「one」指定樣式，根據頁面上不一樣類型的元素應用不一樣的規則。

「類選擇器」也有兩種：

.guarantee{
    line-height: 1.9em;/*這是類選擇器*/
}

p.guarantee{
    line-height: 1.9em;/*這是基於元素的類選擇器*/
}

 區別在哪裏？

若是你想給某個類設計樣式（無論是什麼元素，只要是這個類），用第一種；

若是你只想給屬於這個類的某個元素設計樣式，用第二種。

子孫選擇器：

 

div h2{
  color： black；
}
#elixirs blockquote h2{
  color： black；
}
/*第一類*/
div>h2{
  color： black；
}
/*第二類*/

要正確理解上面兩類，就要看他們有什麼區別：

子孫通常表示孩子、孫子、曾孫。因此子孫選擇器這個名字是有深意的。

對於第一類，表示的是「全部子孫」，好比「div h2」選擇器表示的是任何一個父元素div下的全部h2都會應用樣式，即無論這個h2是父元素div的子元素仍是孫元素（好比有一個h2是在div中的div中）；「#elixirs blockquote h2」選擇表示的是任何一個父元素屬於elixirs類的全部blockquote裏的全部h2都會應用樣式（這句話要注意理解，可能有點繞）。

對於第二類，表示的是「直接的孩子」，這裏就不是「全部」的了。「div>h2」選擇器表示的是任何一個父元素div下的子元素h2都會應用樣式，即只能是子元素（和第一類的「div h2」進行比較，就知道差異在哪裏了）

僞類選擇器：

#elixirs a:link{
  color: #007e7e;
}
/*這是一個僞類和一個子孫選擇器，a：link就是一個僞類*/

 詳細的僞類討論見（4）《Head First HTML與CSS》學習筆記---文本的CSS規則和盒模型；div與span；<a>元素的連接色；僞類

 

2.改變顏色。

用於改變字體顏色，maroon是可愛的茶紅色~（有一個相關討論，詳見：（4）《Head First HTML與CSS》學習筆記---學習控制文本的CSS規則的6）：

      p{
        color: maroon;
      }

用於改變背景色：

      p{
        background-color: maroon;
      }

顏色名字是不區分大小寫的。

一下是幾種顏色指定的不一樣方法：

以混合色的百分比表示：

      p{
        background-color: rgb(80%,40%,0%);
      }

以混合色的數值表示：

      p{
        background-color: rgb(204,102，0);/*紅、綠、藍的範圍是0~255*/
      }

以十六進制碼錶示：

      p{
        background-color: #cc6600；/*這裏的cc6600能夠簡寫爲c60——但這隻在有兩位數字相同的狀況能夠這麼作*/
      }

其中頭兩位「cc」是紅色的份量，中間兩位「66」是綠色份量，最後兩位「00」是藍色的份量；

把這個十六進制轉換爲10進制：

  1.cc6600=cc、6六、00

  2.cc=12x16+12=204（c在十六進制中是12）；66=6x16+6=102；00=0x16+0=0

  3.cc6600=204的紅色，102的綠色，0的藍色。

 

 

3.文本的下劃線、上劃線、刪除線。

文本下劃線：

h1,h2{
  border-bottom: 1px solid black;<！--這是下邊框外框屬性-->
}

 這表示在下邊框上增長一條1px的實線，顏色爲黑色。

其與文本下劃線屬性不同：

h3 {
  text-decoration: underline；<!--這是文本下劃線屬性-->
}

兩種都是給文字添加下劃線，可是下邊框外框屬性的下劃線會一直延續到頁面邊緣（其實是由於這種下劃線是針對邊框的下劃線，而邊框的長度和文本長度不同，其是延伸一整行的），而文本下劃線屬性則只在文本下延伸。

文本下劃線屬性還有其它值用來設置上下劃線、刪除線，詳見：CSS text-decoration 屬性,注意，none雖然描述是默認，其實效果上就是去除全部裝飾效果。

要想同時給一個文本加上下劃線，不能分開寫，好比：

h3 {
  text-decoration: underline；
  text-decoration: overline；
}

 這樣上面的樣式會被覆蓋，應該這樣寫纔對：

h3 {
  text-decoration: underline，overline；
}

 

 

4.有關文本內容的屬性

body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 14px;
    font-weight: bold;
    font-style: italic；
 text-align： center；

}

1.font-family屬性：

在CSS中，字體劃分爲字體系列，能夠從中指定頁面中各個元素使用的字體——可是大多數計算機上一般只安裝了部分字體，因此在選擇字體時要特別小心。

瀏覽器會這樣解釋這個屬性列出的字體：查看用戶計算機上是否有Verdana字體，有就用，沒有就查找下一個--這裏是Geneva，依此類推，一直到找到一個用戶計算機上有的字體——實際上這個屬性就是一個候選字體優先列表，第一個是你最但願使用的字體，再後面就是候選字體。

sans-serif或者serif並非一個具體的字體名。不過若是瀏覽器不得不使用這種字體時，就會選擇一個瀏覽器自定義的該系列默認字體代替。

若是一個字體名包含多個單詞，就寫成：

font-family: 「Courier New」, sans-serif;

 

若是想擴展瀏覽器字體，方法是：

在CSS中寫以下代碼：

@font-face{
    font-family: "Emblema One";
    src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
         url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
}
h1{
    font-family: "Emblema One",sans-serif;
}

@font-face是一個創建字體的規則（=內置規則，和以前提到的選擇器規則不同），在其中：

咱們用font-face建立一個名字「Emblema One」；

用src屬性告訴瀏覽器在哪裏能夠獲得這個字體，根據不一樣的格式在這裏我給出了兩個連接，一個連接.woff文件，另外一個連接.ttf文件。

而後在選擇器中使用這個字體，只須要用雙引號把字體名字寫在font-family中就好了（別忘了留下後路——加上sans-serif）。

最後，若是向使用多個定製字體，就要確保服務器有相應字體文件的基礎上，爲每個字體單首創建一個@font-face，分別指定惟一的名字。

 2.font-size屬性

用於指定字體的大小，根據使用的單位不一樣，有區別：

  1.px（像素）爲單位，好比11px：至關於告訴瀏覽器字母高度是多少像素（實際上是每一個字母都有一個「框」，指定的是這個框的高度）。這會明確指出字體有多大。

  2.%（百分數）爲單位，好比100%：這個單位沒有明確指出字體的大小，而是說明其是相對於另外一個字體大小指出這個字體有多大。所謂的另外一個字體「就是父輩元素的字體大小」。

  3.em（比例因子）爲單位。好比1.2（=120%，便是父輩元素大小的1.2倍）：和百分數類型的效果。

  4.關鍵字：small、medium、large，詳見：CSS font-size 屬性

還能夠用font-size：initial來清除該屬性的效果。

3.font-weight屬性

用於控制文本的粗細。粗體文本看起來比正常文本更深。

值有幾種，詳見：CSS font-weight 屬性,須要注意的是：

值爲normal時確實是「默認值。定義標準的字符」，可是實際上這樣的效果就等同於「若是一個元素默認地設置爲bold，或者從父元素基礎了粗體，就能夠此來去掉粗體樣式」。

bolder和lighter這兩個值使用時會相對於所繼承的值使文本稍粗或者細一點，可是因爲沒多少字體支持粗細程度的微小差異，因此實際上這兩個值一般沒什麼效果，不多使用。

4.font-style屬性

用於設定文本的風格，詳見：CSS font-style 屬性

 

 

5.關於盒模型的屬性

body{
  line-height: 1.6em;
}

line-height：

用於調整整個頁面上文本的行高。其指定的方式也有百分數、px。

在這裏要注意，行高用百分數表示和用數字表示在一些特殊的狀況下會有區別，這個特殊的狀況涉及到繼承，下面看一個特殊狀況的例子：

CSS爲：

body {
  font-size:           small;
  font-family:         Verdana, Helvetica, Arial, sans-serif;
  line-height:         1.6em;
}

h1, h2 {
  color:               #007e7e;
}

h1 {
  font-size:           150%;
}

h2 {
  font-size:           130%;
}

#guarantee {
  line-height:         1.9em;
  font-style:          italic;
  font-family:         Georgia, "Times New Roman", Times, serif;
  color:               #444444;
  border-color:        white;
  border-width:        1px;
  border-style:        dashed;
  background-color:    #a7cece;
  padding:             25px;
  padding-left:        80px;
  margin:              30px;
  margin-right:        250px;
  background-image:    url(images/background.gif);
  background-repeat:   no-repeat;
  background-position: top left;
}
#elixirs{
  border-width: thin;
  border-style: solid;
  border-color: #007e7e;
  width: 200px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  margin-left: 20px;
  text-align: center;
  background-image: url(images/cocktail.gif);
  background-repeat: repeat-x; line-height: 1em;
}
#elixirs h2{
  color: black;
}
#elixirs h3{
  color: #d12c47;
}

重點關注劃線部分，用"1em"和用"1"有什麼區別呢？

這張圖很好的說明了有什麼區別：

爲防止之後看不懂，對上圖進行一些解釋。

首先注意看右邊的繼承圖，會發現elixirs類下的h2字體大小是samll的1.2倍（由於單獨設置過h2的字體大小，覆蓋了從body繼承來的字體大小），而di其它字體大小仍然是繼承於body的small。

而後看CSS代碼中劃線部分，這裏的「1em」是一個相對單位，即1em=elixirs元素字體大小的1倍，那麼等號右邊的「元素字體大小」到底是指small仍是1.2倍的small呢？

其實指的是samll而不是1.2倍的small，也就是說1em相對的是父元素繼承的字體大小，而不是咱們特地改變過的h2的字體大小！

寫下劃線部分的本意是：咱們但願elixirs<div>中的每個元素的行高都不要基於elixirs<div>的字體大小，而是要基於各個元素自己的字體大小！而1em在這裏的效果與咱們的本意是不一樣的！因此咱們不能在這用1em！

用「1」就能很好的符合咱們的本意了:使用數字1，就表示elixirs<div>中的各個元素行高是其本身字體大小的1倍，而不是elixirs<div>字體大小的1倍！ 

還有就是，關於line-height和height的區別，參考文章：css行高line-height的一些深刻理解及應用                      height vs line-height styling      CSS 裏的 height 屬性與 line-height 屬性有什麼區別？

 

 

 邊框屬性：

.guarantee{
    border-color: black;
    border-width: 1px;
    border-style: solid;
    background: #a7cece;
}

 效果是：

能夠看到，咱們沒有更改過內外邊距，由於border-color改的是邊框顏色，border-width改的是邊框的寬度，border-style改的是邊框風格，background改的是背景色（咱們能夠看到背景色並無延伸到外邊距，這裏的內邊距是不存在的，外邊距只有上下有13.33px；這個背景色幫助咱們看清了內邊距和外邊距之間的差異。）

更多邊框屬性，參考：CSS border 屬性

如今咱們來加上內邊距：

.guarantee{
    border-color: black;
    border-width: 1px;
    border-style: solid;
    background: #a7cece; padding: 25px;
}

效果:

咱們能夠看到，padding屬性增長了上下左右25px的內邊距。

 如今咱們增長外邊距：

.guarantee{
    border-color: black;
    border-width: 1px;
    border-style: solid;
    background: #a7cece;
    padding: 25px; margin: 30px;
}

效果如圖：

經過margin屬性咱們增長了上下左右30px的外邊距；能夠發現，這裏頁面效果的左邊縮進效果，實際上是由外邊距增長實現的，而不是經過「空格」。

另外，對內聯元素設置margin時，只有左右有效，上下是無效的；塊級元素設置的margin上下左右都有效；對table元素、CSS的table屬性設置margin無效，要用border-spacing。

最後，咱們加上背景圖：

.guarantee{
    line-height: 1.9em;
    font-style: italic;
    color: #444444;
    font-family: Georgia, 'Times New Roman', Times, serif;
/*上面的只是裝飾效果，並非重點*/

    border-color: black;
    border-width: 1px;
    border-style: solid;
    background: #a7cece;
    padding: 25px;
    margin: 30px; background-image: url(images/background.gif);
}

效果：

注意，背景顏色、背景圖只會出如今內容區和內邊距下（圖像有一個透明背景，下面的顏色透出來了）。

咱們還能夠設置背景圖像的一些格式，好比：

.guarantee{
    line-height: 1.9em;
    font-style: italic;
    color: #444444;
    font-family: Georgia, 'Times New Roman', Times, serif; /*上面的只是裝飾效果，並非重點*/
    border-color: black;
    border-width: 1px;
    border-style: solid;
    background: #a7cece;
    padding: 25px;
    margin: 30px;
    background-image: url(images/background.gif); background-repeat: no-repeat; background-position: top left;
}

效果如圖：

background-repeat屬性用於設置圖像的重複方式，background-position屬性用於設置圖像的位置。詳細的屬性值即效果百度便可知道。

 

6.媒體查詢

@media screen and （min-device-width： 481px）{
  #guarantee{
    margin-right： 250px；
  {
}

 

經過輸入「@media」來應用媒體規則，只有被這個規則包圍的纔是應用於某個特定媒體的樣式，沒有被規則包圍的則是用於整個頁面。

and是一個運算符，在這表示「和」，即要同時知足「screen」和「min-device-width： 481px」。

screen這個查詢指定了有屏幕的設備（而不是其餘設備，好比說打印機或3D眼鏡或者盲文閱讀器）

min-device-width，指定屏幕寬度大於某個值；

max-device-width，指定屏幕寬度小於等於某個值；

print這個查詢指定了是打印的狀況下。

還有不少屬性，詳見：CSS3 @media 查詢

 

7.width屬性

該屬性容許指定元素內容區的寬度。

例子（實際代碼太長，只貼部分，注意觀察圖中邊框的寬度便可）：

#elixirs{
  border-width: thin;
  border-style: solid;
  border-color: #007e7e; width: 200px;
}

圖：

 

至此我要提醒一點：注意改變或者判斷的是什麼地方的寬、高度！好比：

width屬性是CSS屬性，是改變元素內容區的寬度；

width屬性是HTML中img元素的屬性，是改變圖片的寬度；

min-width屬性是HTML中link元素的判斷屬性，判斷對象是瀏覽器；

min-device-width:屬性是HTML中link元素的判斷屬性，判斷對象是屏幕。

另外，某種程度上，上面兩個「改變」換成「固定」也是可行的。看下面兩個圖，你會發現使用了width指定的400px不會由於瀏覽器的寬度改變而改變（注意觀察飲料的框和淺綠色背景的框）：

 

能夠看到，width屬性設置的不會由於瀏覽器的寬度改變而改變！這個緣由是什麼呢？

飲料框之因此不會變，是由於你設定了width的值；而淺綠色背景框裏並無設定，這就致使了綠色背景框的內容區其實是默認按照瀏覽器的大小來改動的，只是在按照瀏覽器的大小上確保設置的外邊距、內邊距等內容是本身所設的值而已，而剛好這些值都是創建在內容區上的，因此內容區按瀏覽器大小變化，間接的就致使了總體的效果也按瀏覽器大小變化了。

由此你會發現，其實CSS是有規律的，可是你要時刻注意哪些規律是你明確指定的，哪些是默認的，由於默認的規律極可能是你指定規律的基礎，就會給你一種錯覺——我明明沒改這個且指定了，竟然還會呈現出不符合我預期的狀況！實際上極可能不是那樣的！

總結到這的時候，我不得不從新看下面這段話，彷佛又看懂了一點：

做者：靈劍
連接：https://www.zhihu.com/question/66167982/answer/240621703
來源：知乎
著做權歸做者全部，轉載請聯繫做者得到受權。

不少人覺得CSS是給DOM元素設置屬性（attribute），其實CSS規定的並非屬性，而是行爲（behavior），DOM裏的每一個元素均可以當作是一個獨立的物體，按照CSS規定的方式運動，最後穩定下來的結果就是最終佈局的結果。因此高票答案說CSS不正交，它固然不是正交的，由於它的設計就是要求協變，要求在其餘元素作出調整的時候，即使本元素的樣式沒有發生任何變化，也能夠跟着調整位置和大小，以適應新的內容，維持設計風格。
爲何CSS要設計成基於選擇器和多種各異的behavior，而不像其餘框架那樣直接將顯示樣式綁定到每一個元素呢？偏偏是由於正交性，由於CSS和DOM是正交的，這樣DOM內容變化時，CSS能夠規定一組不變的特性，從而以靈活的方式適應內容的改變。傳統的GUI一般每一個元素都有固定的位置和大小，要實現根據內容動態調整，就必須針對各類狀況（如視口大小改變，內容改變）專門編寫代碼；WPF則有網格、流式、絕對三種不一樣的定位方式，與CSS有很多共同點，可是自適應的功能少了很多，也沒有選擇器的功能，這樣動態生成的內容就須要更多的代碼來調整。而CSS只要將DOM組織成特定的格式，就會自動啓用相應的樣式。WPF製做的界面畢竟變化比較少，大部分元素仍然是固定的，而網頁一般要求更高的靈活性。

 

8.text-align屬性

用於規定元素中的文本的水平對齊方式，值爲center時表示居中，詳見CSS text-align 屬性;

「元素中的文本的水平對齊方式」話中有話，要理解這個屬性，就要回答兩個問題：

首先看下列的HTML代碼和CSS代碼。

<div id="elixirs">
    <h2>Weekly Elixir Specials</h2>
    <p>
      <img src="images/yellow.gif" alt="Lemon Breeze Elixir">
    </p>
    <h3>Lemon Breeze</h3>
    <p>
      The ultimate healthy drink, this elixir combines
      herbal botanicals, minerals, and vitamins with
      a twist of lemon into a smooth citrus wonder
      that will keep your immune system going all
      day and all night.
    </p>

    <p>
      <img src="images/chai.gif" alt="Chai Chiller Elixir">
    </p>
    <h3>Chai Chiller</h3>
    <p>
      Not your traditional chai, this elixir mixes mat&eacute;
      with chai spices and adds an extra chocolate kick for
      a caffeinated taste sensation on ice.
    </p>

    <p>
      <img src="images/black.gif" alt="Black Brain Brew Elixir">
    </p>
    <h3>Black Brain Brew</h3>
    <p>
      Want to boost your memory?  Try our Black Brain Brew
      elixir, made with black oolong tea and just a touch
      of espresso.  Your brain will thank you for the boost.
    </p>

    <p>
      Join us any evening for these and all our 
      other wonderful 
      <a href="beverages/elixir.html" 
         title="Head First Lounge Elixirs">elixirs</a>.
    </p>
</div>

#elixirs{
  border-width: thin;
  border-style: solid;
  border-color: #007e7e;
  width: 200px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  margin-left: 20px; text-align: center;
  background-image: url(images/cocktail.gif);
  background-repeat: repeat-x;
}

CSS代碼咱們主要關注劃線那個屬性便可。

其效果如圖：

問1：爲何text-align屬性會影響圖像的對齊方式？它不是隻對文本對齊麼？既然它也能對圖像對齊，看起來應該換個名字纔對。

答：事實上，該屬性會對塊元素中的全部內聯內容對齊——咱們對div塊元素設置這個屬性後，它的全部內聯內容都會居中而不是「文本居中」；並且該屬性只能在塊元素上設置，若是直接在內聯元素（好比img）上使用，則不起做用。（注意，這裏說的內聯內容=內聯元素的內容，這個內容能夠是文字、圖片。若是不清楚這一點就看不懂了！）

問2：我注意到div中的文本都在其她塊級元素中，好比h二、h3等，因此既然text-align是對div塊元素中的內聯元素對齊，那麼這些嵌套塊元素的文本怎麼也對齊了？

答：由於這些塊元素繼承了div的text-align屬性。因此這是有區別的——並非div自己將標題和段落中的文本對齊，其實是標題和段落繼承了center的值。這種繼承能夠有不少用處，好比你能夠用div包圍一些內容，而後對div應用樣式而不是對單個元素分別應用樣式；好比你但願某個塊內的一些內聯元素不居中，就把這個內聯元素拿出div的塊元素使其變成div塊元素裏的內聯元素。

 

 

9.<a>標籤的狀態樣式（僞類）——link、visited、hover。

a:link{
  color: green;
}
a:visited{
  color: red;
}
a:hover{
  color: yellow;
}

a:link選擇器表示未訪問狀態的連接——沒有單擊過的連接稱爲未訪問連接；

a:visited選擇器表示已訪問連接——單擊過的連接稱爲已訪問連接；

a:hover選擇器表示懸停連接——把鼠標停在一個連接上但不單擊稱爲懸停連接。

連接是元素世界裏的變色龍，取決於具體環境——與其它元素不一樣，a元素的樣式會根據它的狀態改變，所以就有了上面的樣式屬性。要想讓a元素在全部狀態下看起來都同樣，能夠這樣寫：

a{
  color: red;
}

但要注意，這樣的連接沒法作到用戶友好——由於沒辦法區分哪些訪問過，哪些沒有訪問過。

其實還有兩種連接狀態，書裏略講了，這裏就上個圖就行了：

注意文中有一處錯誤：「用戶第一次單擊一個連接時就處於活動（active）狀態」一句中，應把「第一次」去掉。

上面提到了僞類和多狀態下連接的結果，詳細看（4）《Head First HTML與CSS》學習筆記---文本的CSS規則和盒模型；div與span；<a>元素的連接色的相關討論。

 

10.float屬性與clear屬性

詳見（5）《Head First HTML與CSS》學習筆記---佈局與定位的有關內容。

結合11的屬性，我發現當絕對定位的元素插入某個元素後，該元素用clean屬性也沒法將其清除——我猜這是由於clean只能清除正常流裏的元素。

 

11.position—絕對定位

#sidebar{
  position： absolute；
  top： 100px；
  right： 200px；
  width： 280px；
  z-index： 1；
}

1.position

static值時：

這個屬性值默認是「static」，即靜態定位。此時元素會在正常的文檔流中，由瀏覽器來決定這些靜態元素放在哪裏（注意，float也是由瀏覽器決定的！雖然你用「right」等值規定在哪一邊，可是具體在哪一邊的那個位置，好比你規定在左邊，瀏覽器會決定左邊是距離左邊窗口多遠叫左邊。）。當這個屬性值是「absolute」時，將由你來告訴瀏覽器究竟把元素放在哪裏——注意，這裏個屬性值的做用僅僅是「編寫者決定這個元素的位置由編寫者本身確認」，具體在哪，還得靠接下來的幾個屬性。

absolute值時：

須要強調的是，當其值是「absolute」時，瀏覽器首先作的是將它從流裏徹底刪除，這一點和float不太同樣。徹底刪除意味着頁面正常流的元素根本不知道頁面上有這個絕對定位元素——其與浮動不一樣，流中的元素再也不像浮動中會調整自身來適應其邊界了，你能夠理解爲絕對定位元素對其它元素沒有任何影響（注意，以前任何一個屬性都是對其它元素有影響的！目前學的，只有這個屬性保證對其它元素沒有任何影響！）

一個元素（塊元素和內聯元素均可以）絕對定位時，會把它從頁面的正常流中刪除。

fixed值時：

首先強調一個以前一直存在誤解的概念——瀏覽器窗口和頁面是不一樣的。當有滾動條的時候，固定在頁面上和固定在窗口上是不一樣的概念，前者會因滾動條而移動，後面不會移動。只有在沒有滾動條的時候二者能夠視爲一個概念。（因此，要檢查前面提到的「瀏覽器頁面」和「瀏覽器窗口」，看看哪裏用錯了）

在這裏，fixed值表明了固定定位，其會讓元素固定在瀏覽器窗口上。（從如今開始，要把瀏覽器窗口稱爲「視窗」）

2.right、left、top、bottom

這個屬性的值告訴瀏覽器「這個元素距離哪個方向多遠」，注意，是距離多遠！

其值可爲負——這意味着一部份內容會跑到視窗或者頁面外面，即在樣式上會有部份內容消失。

3.width

這個不是必須的（float裏就必需要有這個float才能生效）。若是沒有指定這個值，默認地塊元素會佔瀏覽器整個寬度（固然要減去指定的距左邊或右邊的偏移量）。

4.z-index

這在本書中不是重點，一般用在CSS的高級語法，特別是涉及Web頁面腳本時纔用到。詳見：CSS z-index 屬性

簡單地說，絕對定位還能夠分層放置，即一個元素能夠放在另外一個絕對定位的元素上面。這個屬性就是用來讓咱們設置誰在誰的上面的。

只有使用絕對定位、相對定位或者固定定位的元素纔有這個值。

 

12.display——表格顯示

首先說明，這裏的display的表格佈局與HTML中的表格是不同的：前者是爲了佈局，後者則專一於須要表格容納的數據。

 HTML：

<div id=tableContainer>
  <div id=tableRow>
    <div id=main>
......
    <div id=sidebar>
.....
<!--div#tableRow下的元素順序就是表格的行裏從左到右列的順序-->

CSS：

......
#main {
  display: table-cell;
......
  vertical-align: top;
}
#sidebar {
  display: table-cell;
......
  vertical-align: top;
}
div#tableContainer{
  display: table;
  border-spacing: 10px;
}
div#tableRow{
  display: table-row;
}

1.display

值爲table的時候表示一個表格（定義這是一個表格容器）；

值爲table-row的時候表示一個行；

值爲table-cell的時候表示一個列；

值爲inline的時候表示列表項中顯示爲block的變成inline——即列表項的先後再也不有回車，會像常規的內聯元素同樣在頁面上流入一行。（參考P574）.

重看時檢驗下面這篇文章的正確性：

css中display設置爲table、table-row、table-cell後的做用及其注意點

一個細節：若是在一個table值的div下創建表格，其中每行的列數必須是同樣多的；若是不同多，會有空餘的列出來，這個列你是沒法填充的。惟一的辦法就是從新定義一個table值的div。（也很符合常理，這其實就是兩個表格，不能想着塞到一個表格裏）

2.border-spacing

這個屬性的值決定了表格中的單元格的邊框間距（一些其它的特性，看上面提到的文章）

要注意，這個間距也許會形成一些錯覺——好比這個邊距被你當成了「外邊距」參與了「垂直排列時的摺疊現象」（P517就提到了這個）（其實也算符合常理，此時元素與元素間的間距實際上是靠表格邊框來區分了，外邊距已經沒用了，參考P517）。

還有一些討論，見本文的14.

3.vertical-align

這個屬性的值用來確保表格某些單元格中的全部內容相對於單元格的某個方向對齊（好比這裏的相對於上邊對齊）（注意加粗部分，這個屬性是做用於一個行內元素的全部子元素相對於父元素的對齊，好比這裏的vertical-align要放在#main裏，而不是div#tableContainer裏）

 

13.列表的屬性list-style-type&&list-style-image&&list-style-position

無序列表下，list-style-type值爲none時，刪除列表項的項目符號；

無序列表下，list-style-type值爲disc、circle、square時，列表項有不一樣的樣式，分別是默認標記、圓形標記、方塊標記；有序列表時，能夠設爲字母、羅馬數字等，詳細的值能夠查閱文檔。

list-style-image用於定製標記，其格式爲：

li{
  list-style-image: url(images/backpack.gif);
  padding-top: 5px;
  margin-left: 20px;/*這裏的padding-top和margin-left可不是針對標記圖像設置的，這一點要清楚*/
}

 list-style-position用於指定列表標記（好比你上面的定製標記）在列表項的盒子裏仍是外面：

值爲inside時，標記在列表項的盒子裏，因此文字會圍繞標記（即第二行的開頭是在標記的下面——此時列表項和文本同樣佔據位置）；

值爲outside時，標記在列表項的盒子外面，因此文字就不會圍繞標記了（即第二行的開頭和第一行的開頭對齊）。

 

14.border-spacing與margin的區別&&table標籤中一些屬性的應用

table{
  margin-right: 20px;
  margin-left: 20px;
  border: thin solid black;
  caption-side: bottom; border-spacing: 0px;/*全部邊框間距爲0px*/
  border-spacing：10px 20px；/*設置爲10px的水平邊框間距和20px的垂直邊框間距*/
  border-collapse: collapse;
 
}
th,td{
  padding: 5px;
  border: thin dotted gray;
}
caption{
  padding-top: 8px;
  font-style: italic;
  caption-side: bottom;
}

1.通過實測，「caption-side: bottom」屬性放在captain選擇器或者table選擇器下均可以讓表格標題放在表格下面，那麼問題來了，爲何我決定和書上同樣把該屬性放在table選擇器下呢？

這個問題的答案在某些屬性上看也是頗有幫助的，這涉及到一個看問題的角度，一些屬性之因此用在不一樣選擇器下有不一樣的效果，以及一些屬性爲何不能用在某些選擇器中，均可以經過「看問題的角度」來融會貫通，再也不是死記硬背。

首先，「caption-side: bottom」的做用是改變表格標題的位置。其次，table標籤與captain標籤所表明的語義，或者說結構是不同的——table表示的是從「大局」上看這個表格，因此在其選擇器下的屬性也應該是基於「大局」的改變。captain則是table下的一個標題。從這裏看來，改變captain位置的樣式操做，放在table下更好，對於captain來講，其內邊距、字體樣式纔是正確的，用於captain這個標籤的樣式操做（不負責任地說，若是captain下還能夠有一個captain2，那麼對captain2的位置樣式操做要放在captain下比放table下更好）。

2.table選擇器下的margin與通常塊元素下的margin的區別？table選擇器下的border-collapse、border-spacing和通常塊元素下的margin的區別？

首先，要明確的是，table選擇器中的margin所改變的仍然是基於「全局」的，即整個表格看做一個塊元素，margin改變的就是這個塊元素的樣式（而不是裏面的單元格margin！），因此從這點看，其與通常塊元素的margin沒有區別——若是你要改變單元格的margin，你必需要把margin放在td、th選擇器中才行。

那麼，爲何td、th中margin失效了呢？

請注意，td、th表示的是單元格，雖然是不一樣意義的單元格。咱們規定，單元格中的外邊距失效（由於單元格和塊元素可不同，不只僅是不換行的區別），單元格里咱們定義了一個新的屬性提到外邊距，這個屬性就是border-spacing，它表示單元格之間的空間。

說到這，我發現：每一個標籤都有一個盒模型，可是盒模型並不都是同樣的，好比對於p來講有內外邊距和邊框，而對於td來講有的是border-spacing和內邊距、邊框。基於此，我有理由提出在1中的觀點：「CSS屬性在不一樣選擇器下可能有不一樣的效果，CSS屬性可能不能用在某些選擇器中。因此，後面複習這些的時候，我要把每一個標籤的盒模型、對應的屬性能改變什麼，每一個屬性能用在哪些標籤中，分別有什麼做用等一 一寫清楚（包括屬性名全稱和翻譯）——那些書裏沒出現過的，不能隨意的聯想別的標籤對應過去！

言歸正傳，對於表格而言，單元格的」外邊距「是不能單獨設定的，這也就照成了」外邊距「在表格中再也不存在，取而代之的是border-spacing，它的做用是爲全部單元格設置一個共同的間距。

border-spacing雖然能使單元格之間的距離爲零，可是距離爲零≠邊框靠在一塊兒後會合併，即雖然兩個單元格距離爲零了，可是它們的邊框並無消失，邊界處是兩個邊框合在一塊兒的樣子。基於這種狀況（咱們不能設置某個單元格沒有邊框，就像咱們不能單獨設置某些單元格之間的間距同樣），咱們有規定了一個屬性值：

border-collapse： collapse。這個屬性值的做用是，忽略表格上設置的全部邊框間距，而且把緊挨着的兩個邊框合成一個邊框。

注意，「border-collapse： collapse」是針對表格的一個特殊的CSS屬性，容許將單元格邊框合併爲一個邊框。仔細想一想，對於通常的塊元素、內聯元素，咱們是能夠設置沒有邊框的，那麼咱們就不須要像單元格同樣用這種「曲線救國」的屬性來合併邊框（只須要把某個標籤邊框去掉，另外一個標籤邊框留着便可）。

通過上面的討論，我發現，若是基於選擇器的全局角度看待一些CSS屬性，別有一番風味！

 

15.nth-child僞類

發現了一個有趣的地方——HTML文件中，標籤裏是沒辦法寫註釋的（即<!---->在標籤裏失效了）。

HTML代碼太長，縮短了一些，明白意思便可。

<table>
.......................
        <tr>
          <th>City</th>
          <th class="center">Date</th>
          <th class="center">Temperature</th>
          <th class="right">Altitude</th>
          <th class="right">Population</th>
          <th class="center">Diner Rating</th>
        </tr>
        <tr>
          <td>Walla Walla, WA</td>
          <td class="center">June 15th</td>
          <td class="center">75</td>
          <td class="right">1,204 ft</td>
          <td class="right">29,686</td>
          <td class="center">4/5</td>
        </tr>      
............................................
</table>

th{
  background-color: #cc6600;
}
tr:nth-child(odd){
  background-color: red;
}

這裏的效果有一個有趣之處，這裏主要是記錄CSS屬性，就很少說了，想看能夠參考：HTML中的那些bug的3。

「p:nth-child(1)」，用於指定嵌套在某個元素中的第1個p元素的樣式（在例子中只改了背景色）；

若是「1」變成even/2n，則指定的是第偶數個（從2開始/n=0時，2n=0=無段落，也是從第2個開始）p元素的樣式；

若是「1」變成odd/2n+1，則指定的是第奇數個（從1開始/n=0，2n+1=1，也是從第一個開始）p元素的樣式。