精通CSS高級Web標準解決方案【讀書筆記】

時間 2019-11-17

標籤精通 css 高級 web 標準解決方案讀書筆記欄目 CSS 简体版

原文原文鏈接

#第一章基礎知識
XHTML，指的是Extendsible Hypertext Marker Language ，當使用(X)HTML這個術語時指的是XHTML和HTML；html

1.1 設計代碼的結構web
- 1.1.1 使用有意義的標記瀏覽器
  - 1 ID和類名
    一個ID名只可以應用於頁面上的一個元素，而同一個類名能夠應用於頁面上任意數量的元素。
    在寫類名和ID名時，須要注意區分大小寫。CSS大致上是不區分大小寫的語言。可是在標記中實體好比類名和ID名）是否區分大小寫取決於標記語言是否區分大小寫。若是使用XHTML，那麼類名和ID名是區分大小寫的；若是使用常規的HTML，那麼是不區分大小寫的。處理這個問題最好的方式是保持一致的命名約定。
  - 2 div和Span
- 1.1.2 文檔類型、DOCTYPE切換和瀏覽器模式
  DTD（文檔類型定義）是一組機器可讀的規則，他們定義XML或（X）HTML的特定版本中容許有什麼，不容許有什麼。在解析網頁時，瀏覽器將使用這些規則檢查頁面的有效性而且採起相應的措施。瀏覽器經過分析頁面的DOCTYPE聲明來了解使用哪一個DTD，所以知道要使用（X）HTML的哪一個版本。
  DOCTYPE聲明是(X)HTML文檔開頭處的一行或兩行代碼，它描述哪一個DTD。在下面的示例中，要使用的DTD是XML
  1.0 Strict的DTD：dom
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```
  DOCTYPE一般（但不老是）包含指定的DTD文件的URL。瀏覽器通常不讀取這些文件，而是隻識別常見的DOCTYPE聲明。設計
  - 1 有效性檢驗code
  - 2 瀏覽器模式htm
  - 3 DOCTYPE切換
    瀏覽器根據DOCTYPE是否存在以及使用的DTD來選擇要使用的表現方法。若是XHTML文檔包含形式完整的DOCTYPE，那麼它通常以標準模式表現。對於HTML4.01文檔，包含嚴格DTD的DOCTYPE經常致使頁面以標準模式表現。包含過分DTD和URI的DOCTYPE也致使頁面以標準模式表現，可是有過分DTD而沒有URI會致使頁面以怪異模式表現。DOCTYPE不存在或形式不正確會致使HTML和XHTML文檔以怪異模式表現。根據DOCTYPE是否存在選擇表現方法的效果被稱爲DOCTYPE切換（DOCTYPE switching）或DOCTYPE偵測（DOCTYPE sniffing）。並不是全部瀏覽器都採用這些規則，可是這些規則很好地說明了DOCTYPE切換的工做方式。Eric Meyer什麼研究了這個主題，而且製做了一張圖表（http://meyerweb.com/dom/dtype/dtype-grid.html)來講明不一樣的瀏覽器如何根據DOCTYPE聲明選擇表現方法。
    DOCTYPE切換是瀏覽器用例區分遺留文檔和符合標準的文檔的手段。不管是否編寫了有效的CSS，若是選擇了錯誤的DOCTYPE，那麼頁面就將以怪異模式表現，其表現就可能會有錯誤或不可預測。所以，必定要在站點的每一個頁面上包含形式完整的DOCTYPE聲明，而且在使用HTML時嚴格選擇DTD。文檔
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
"http://www.w3.org/TR/html4/strict.dtd">  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/DTD/xhtml1-transitional.dtd">  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```
1.2 爲樣式找到目標get
- 1.2.1 經常使用的選擇器
  最經常使用的選擇器類型是類型選擇器和後代選擇器。類型選擇器用來尋找特定類型的元素，好比段落、錨或標題元素，只須要指定但願應用樣式的元素的名稱，類型選擇器有時候也成爲元素選擇器或簡單選擇器。it
```
p{color:balck;}
     a{text-decoration: underline;}
     h1{font-weight:bold;}
```
後代選擇器可用來尋找特定元素或元素組的後代。後代選擇器由其餘兩個選擇器之間的空格表示。在下面的示例中，只在做爲列表項的後代的錨元素上應用樣式，而段落中的錨不受影響。
```
li a{text-decoration:none;}
```
這兩種選擇器適合於應用那些應用範圍廣的通常性樣式。要想尋找更特定的元素，可使用ID選擇器和類選擇器。ID選擇器由一個#字符表示，類選擇器由一個點號表示。
```
#intro{font-weight:bold;}
    .datePosted{color:green;}

    <p id="intro">Some Text</p>
    <p class="datePosted">24/3/2006</p>
```

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。