Bootstrap 3.2.0 源碼試讀 2014/08/10

第一部分 normalize.css

167至171行

fieldset {
  padding: .35em .625em .75em;
  margin: 0 2px;
  border: 1px solid #c0c0c0;
}
legend {
  padding: 0;
  border: 0;
}

表單分組標題的內添充爲上 .23em，下 .75em， 左右 .625em。外邊距爲上下0，左右2px，邊框爲#c0c0c0、實心的1px寬。

分組標題的內添充爲0，邊框爲0。

176至178行

textarea {
  overflow: auto;
}

多行文本框在須要滾動條的時候再顯示

179至181行

optgroup {
  font-weight: bold;
}

選項組的字體樣式爲加粗。

182至189行

table {
  border-spacing: 0;
  border-collapse: collapse;
}
td,
th {
  padding: 0;
}

表格table標籤的相距單元的邊框之間的距離爲0，而且合併。單元格、標題行的單元格的內添充爲0.

能夠設置2個值，第1個爲左右，第2個爲上下。若是想繼承自父容器則設爲inherit

border-collapse是說如何處理相臨單元格之間的邊框樣式。這裏設置的是合併。

有3個值可選。

一、separate，這個是默認值，就是單元格獨立顯示自已的邊框。

二、collapse，單元格之間合併顯示邊框

三、inherit，繼承。

還有1個屬性 empty-cells，若是2行2列的表格，你只用了3個單元格，第4個格沒內容，那你不但願第4個沒用的格子也顯示邊框，就是經過這個控制的

一、show

二、hide

三、inherit，繼承。

第二部 @media print

這部分是用來設置打印的通用樣式的（190至262行）。

使用的是媒體查詢語法，舉例以下：

@media only screen and (min-width: 480px) and (max-width: 767px) {

/* 樣式規則 ...  */

}

解析：

一、only是說若是瀏覽器不支持媒體查詢的語法就不要加載下面的樣式了。

還能夠設成not ，取反的意思。

二、screen這塊是設備的類型

screen，屏幕；print，打印；all，全部；還有tv等等。

三、and ...( ...) 這塊是就是條件的設定了。經常使用的有下面的這些，與瀏覽器的支持程序有關

min-width，最小可見區域

max-width，最大可見區域

min-device-width，最小設備寬度

max-device-width，最大設備寬度

orientation，屏幕方向，landscape（豎屏），portrait（橫屏）

下面看一下這塊的設置

191至197行

  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  }

實在是很討厭*。

全局設定，字體顏色黑，清除字體及盒標籤的陰影，背景透明。

！important，設置爲最高優先級，覆蓋同類型的樣式設置。

198至211行

  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }

一、連接的默認及訪問過的樣式爲加上下劃線。

二、連接的href屬性內容後面加上屬性href的值，舉例子：

<a href="www.baidu.com">百度</a>，實際的顯示內容爲 百度(www.baidu.com)

三、連接的title屬性的內容後面加上屬性title的值。

四、若是連接的href的值是以javascript和#開頭的，那清除掉插入的任何值，以避免調用js及跳轉錨點出錯。

五、縮寫abbr的title屬性的內容後面加上屬性title的值。

content 屬性與 :before 及 :after 僞元素配合使用，來插入生成內容。

待續 。。。