層疊樣式表 CSS 學習筆記 (1)

CSS 現在已經和HTML綁的越來越緊了,下了兩本CSS的書,拿到學校實驗室打印,竟然被人發現,發現就發現了,還TM扔我資料,仍我資料就算了,中國人和中國人講話至於用英語嗎,馬勒戈壁。

 

不能跟這種人一般見識,先把今天學到的記下來。

 

 

 

1.CSS的基本用法

 

1.1 如何在HTML內插入樣式表

 

 

從樣式表的插入形式來看基本分爲三種:

a. 內聯式樣式表: 直接寫在現有的HTML標籤中,如:

    <p style="color:red"> 這裏是紅色文字</p>

b. 嵌入式樣式表: 使用"<style> </style>"標籤嵌入到HTML文件的頭部種,如:

    <style type="text/css">

    .warning {color: red}

    </style>

 

c. 外部式樣式表:樣式表外部文件以[.css] 爲擴展名,在<head>內(不是在<style>標籤內)使用<link>標籤將樣式表文件鏈接到HTML文件內,如:

 

    <link rel="stylesheet" href="basic.css" type="text/css"/>

 

    <style type="text/css" media="all">@import url(basic.css);</style>

 

 

1.2 使用外部式樣式表的優點

主要的優點是:1.多個文件可引用一個樣式表文件,2.樣式表文件只需要下載一次,3.瀏覽器會先顯示HTML的內容,然後再根據樣式表文件進行渲染,從而使訪問者可以更快的看到內容。

 

1.3 規則

 

樣式表由一些規則組成,瀏覽器將這些樣式表規則應用到相應的元素中。

 

說一下選擇符的分類:

 

選擇符分爲一下幾種:

1. 類型選擇符(type Selectors), 就是HTML文檔中的元素。

2. 類選擇符(Class Selectors),例如:.warning 

3. ID選擇符(ID selectors),例如:#warning

4. 包含選擇符(Descendant Selectors,

5. 選擇通配符*,選定文檔目錄樹(DOM)中的所有類型的單一對象,利用通配選擇符可以爲所有的元素定義統一的屬性。

例如:*{margin:0;}

 

 

 

 

最常用的選擇符應該就是   類選擇符和ID選擇符了,他們的差別主要幾種在下面幾點:

 

1. 類選擇符可以重複使用,並且可以用在任意元素上,使用任意次。

2. HTML內ID屬性應該是唯一的,只有擁有該ID的元素纔會應用該樣式。

3. ID選擇符的優先權高於類選擇。

 

 

1.4 註釋

 

格式: /* 這裏是註釋*/

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章