css高級教程第一章筆記

 

大年30，今天剛剛看完第一章，上傳上來一些筆記。

一、css:能夠將文檔的表現部分與內容分開

二、id:是惟一的，id能夠用來標識持久的結構性元素，如：主導航和內容區域，id還能夠用來表示一次性元素。連接的表單
三、class:適合標識內容的類型或類似的條目。
四、多類症的問題：不要過分的依賴的類

五、div:
 1、添加結構的一個元素是div元素
 2、div實際上表明部分、將文檔分割爲有意義的區域的方法
 3、經過將主要內容區域包圍在div中並分配id就能夠在文檔中添加結構和意義。
-----------------------萬惡的分割線-------------------------------------

1.1.2  文檔類型、doctype切換和瀏覽器模式

DTD(文檔類型定義)

IME type的縮寫爲(Multipurpose Internet Mail Extensions)表明互聯網媒體類型(Internet media type)，MIME使用一個簡單的字符串組成，最初是爲了標識郵件Email附件的類型，在html文件中可使用content-type屬性表示，描述了文件類型的互聯網標準。MIME類型能包含視頻、圖像、文本、音頻、應用程序等數據。

瀏覽器模式

標準模式和怪異模式

doctype切換
 1、xhtml文檔包含形式完整的doctype-----------------標準模式表現。
 2、嚴格DTD的doctype  -------------標準模式表現。
 3、過渡的DTD和url ----------標準模式表現。
 4、過渡的DTD沒有url ----------怪異模式表現。
 5、doctype不存在和形式不正確 ----------------怪異模式表現

doctype 是否存在的選擇是方法的效果被稱爲doctype切換

doctype切換是瀏覽器用來區分遺留文檔和符合標準的文檔的手段

選擇了錯誤的DOCTYPE，頁面就一怪異模式表現，會出現不少不可估量的錯誤

每一個頁面的都要的包含形式完整的doctype聲明，而且要選擇嚴格的DTD

-----------------------可惡的風格線---------------------------------
1.2  爲樣式找到目標

 類型選擇器-----用來尋找特色類型的元素（標籤）也稱爲（元素選擇器）
 後代選擇器-----用來尋找特色元素和元素組的後代，

#mainContent h1 {font-size:1.8em;}
這段代碼有

類型選擇（元素選擇器） id選擇器 後代選擇器

注意事項：
發現文檔中添加了許多沒用的類，那麼可能就是文檔結構不合理的一個警告，必定要記住分析元素之間的差別，經常會發現差別是他們在頁面上出現的位置，謹記不要給元素指定不一樣類，而是將一個類或id應用透明的祖先，而後使用後代選擇器定位他們

*僞類選擇器
文檔結構以外的其餘條件對元素應用樣式，就可使用僞類選擇器

:link 和visited稱爲連接僞類--------------只能應用於錨元素
：hover、:active、:focus稱爲動態僞類--------能夠用於任何元素

通用選擇器

高級選擇器（有兼容性問題）
 一、子選擇器
  只選擇元素的直接後代，叫子元素
  特色：只會在選擇的子類上應用樣式，其餘的子類不會有任何樣式
   #nav li {只會對li產生樣式};
  例子：demo(子類選擇器).html
 2.通用選擇器（兼容的ie6和更低的版本）
  可使用通用選擇器模擬子選擇器的效果，
  具體的步驟:
   1、先在全部後代上應用你但願的子元素具備的樣式
   2、使用通用選擇器覆蓋子元素的後代上的樣式
   #nav li *{background:url(12.png)no-repeat left top;}

 3.一個元素與另外一個元素的相鄰關係對它應用樣式。相鄰選擇器可用於定位同一個父元素下某個元素以後的元素   

 h1 + p {

 }

 

 屬性選擇器

  能夠根據某個屬性是否存在或屬性的值來尋找元素
  一些屬性能夠有多個值，值之間用空格分隔，屬性選擇器容許更具屬性值之一來尋找元素
  a[rel~='friend']{
   background-image:url(12.png);
  }

  <a href="www.baidu.com" rel="friend met colleague">xxxxx</a>

  樣式表中使用特殊性（--------有問題--------）