CSS學習總結

原本我們通過對HTML元素加一些附加屬性進行改變頁面的外觀，比如width、height、bg-color、padding、spacing等屬性。

現在有了CSS能夠把頁面布局和頁面外觀完全分離開來。只需要把css鏈接到文本里就可以實現改變外觀。

css相對于傳統的方法最明顯的優勢：如果你想要把所有的h1元素全部設置成統一的樣式，傳統的方法需要一個一個設置，而css則只需要一個設置即可。

CSS的形式如下：

元素或類{     特性：值;     特性：值;     ............ } 比如： 對于元素： body{     background-color:white; } 對于類： td.code{     font-size:10px; } 這是對于td這個元素中class值為code的元素進行描述。

外部鏈接css的方式：

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

內部css的使用方式：

<style type = "text/css">     css代碼; </style>

外部的CSS的好處：

(1)重用。

(2)修改同步更新，不需要一個一個修改。

(3)設置不同的輸出設備。

<link rel = "stylesheet" type = "text/css" href = "1.css" media = "screen"/>

<link rel = "stylesheet" type = "text/css" href = "2.css" media = "handheld"/>

在一個樣式表中引入另一個樣式表：

@import "1.css";

選擇器的使用：

(1)一般選擇器：直接用元素。比如直接h1；

(2)通用選擇器：適用于全部的元素。*{...}

(3)類選擇器：指定特定的class。

        -   h1.classname：這種適用于h1元素中class屬性的值為classname的元素。

        -  .classname：這種適用于任何元素中class屬性的值是classname的元素。

(4)子選擇器：選擇某種依賴關系的元素。比如td>b，表示td元素的直接子元素b的元素。

(5)后繼選擇器：某種依賴關系的元素。比如 table b,表示table中的b元素。

接下來就具體介紹css的一些用法：

1.字體類別：

(1)font-family:這是字體，比如serif,monospace等。

    具體用法：font-family : arial,sans-serif;表示首選arial字體，如果機器中沒有arial字體，則選用sans-serif字體。

(2)font-size：大小。

    具體用法：font-size：12px;表示字體大小為12像素.

(3)font-weight：表示是否為粗體。

    具體用法：font-weight：bold；表示為粗體。

(4)font-style：表示是否是斜體。

    具體用法：font-style：italic；表示為斜體。

2.文本類別：

(1)text-align：表示文本的位置。可選為left,right,center;

    具體用法：text-align：center；表示文本在中央。

(2)text-decoration：表示文本是否要下劃線、刪除線等。可選為underline\line-through;

    具體用法：text-decoration：underline;表示文本下方有下劃線。

(3)color：表示文本的顏色。

    具體用法：color：red；表示顏色是紅色。

(4)text-indent：文本縮進多少。

    具體用法：text-indent：2px；表示縮進2個像素。

(5)line-height：表示行之間的寬度。

    具體用法：line-height：2px;表示行之間間隔2像素。

補充：文本偽類：

(1)first-letter：對于第一個字母特別著重。

    形如：open；

    具體用法：p：first-letter{....}

(2)first-line：對于第一行特別著重。

    形如：I am

              xiazdong；

    具體用法：p：first-line{...}

 

3.背景類別：

(1)background-color：

line-height:2px  表示行間距.

padding:

border-style：邊框的形狀，比如solid表示實線。

border-color：邊框的顏色。

border-width：邊框的寬度。

4.邊框類別：可用于任何元素的邊框。

(1)border-width：表示邊框的寬度。

    具體用法：border-width：2px;表示邊框的寬度為2px。

(2)border-style：表示邊框的類型。可選：solid,dotted

    具體用法：border-style：solid；表示邊框是實線。

(3)border-color：表示邊框的顏色。

    具體用法：border-color：red；表示邊框的顏色為紅色。

(4)padding：表示邊框和文本的距離。

    具體用法：padding：2px；表示邊框和文本距離為2像素。

(5)margin：表示邊框的距離。

    具體用法：margin：2px；表示邊框之間距離為2像素。

大小類別：

(6)width：框的寬度。

(7)height：框的高度。

(8)max-height和min-height：框的最大高度和最小高度。

(9)max-width和min-width：框的最大寬度和最小寬度。

(10)overflow：表示框是否要滾動條。

    具體用法：overflow：scroll；表示邊框需要滾動條。

5.背景類別：

(1)background-color：表示背景顏色。

    具體用法：background：blue;

(2)background-image：表示背景的圖片。

    具體用法：background-image：url("apple.jpg")；表示背景來自apple.jpg文件。

(3)background-position：表示背景圖片的位置。可選:(1)20%,30%(2)left(3)center....

    具體用法：background-position：center;表示圖片在中心。

(4)background-attachment：表示圖片是否會隨著滾動條移動而變化。可選：fixed,scroll

    具體用法：background-attachment：fixed;表示圖片不會變化。

(5)background-repeat：表示圖片是否會重復。可選：no-repeat,repeat,repeat-x,repeat-y;

    具體用法：background-repeat：no-repeat；表示不會重復。

常用顏色：

(1)#cccccc：深灰色。

(2)#efefef：淺灰色。

(2)#ffffff：白色。

(3)#000000：黑色。

6.列表類別：

(1)list-style-type：表示前標的樣式。可選：disc(默認),circle,square,none,decimal,lower-roman;

    具體用法：list-style-type：square；表示用方塊進行標號。

(2)list-style-position：表示標號的位置。可選：inside,outside;

    具體用法：list-style-position：outside;

7.表類別：

(1)border-collapse：是否應該顯示每一個邊框；可選：collapse或separate;

    具體用法：border-collapse：separate；表示每個邊框都會顯示，不會合并。

(2)border-spacing：邊框之間的距離；

    具體用法：border-spacing：15px;表示邊框之間距離為15像素。

8.外邊框類別：和邊框的區別是不占用空間。

(1)outline-style：

(2)outline-color：

(3)outline-width：

9.:before和:after偽元素：

(1):before:用于指定在哪些元素之前加哪些內容。

    具體用法：h1:before{content:"這里是h1內容：";}這樣在h1的前面會加上這個字符串。

(2):after和：before正好相反。

**計數器函數counter():

這個計數器是能夠遇到某種情況自動讓數字遞增。

比如：

body{     counter-reset:chapter; } h1:before{     content:counter(chapter); } h1{     counter-increment:chapter; } 這個例子表明，當進入body時，先清零計數器chapter，在h1之前添加計數器，每次遇到h1，計數器就加一。

10.鏈接類別：

偽類：能夠使得鏈接在不同狀態下的樣式不同。

(1)link：當一般狀態下。

(2)visited：訪問完后。

(3)active：當激活鏈接時。

(4)hover：當停留在鏈接上時。
    具體用法：

a:link{     color:red; } a:hover{     color:blue; } a:visited{     color:black; } 鏈接一般狀態為紅色，鼠標停留在鏈接上時是藍色，訪問完后是黑色。

11.其他類別：

(1)display:用于將內聯框顯示為外部框或反過來。

    具體用法：display:block；

(2)cursor：用于指定鼠標指針的樣式。

(3)visibility：某個元素是否顯示。

 

布局：

position特性，有static(默認),relative,absolute,fixed;可選。

如果選了后面三個，則可以附加left,top,right,bottom進行移位，但是有一個規則，如果left:30px;則表明向右移，top:30px;表明向下移。

1.普通定位：沒有特殊的，平時的按html代碼順序布局。

2.相對定位（relative）：相對于普通定位進行偏移，但是這個相對定位的元素沒有剝離出普通定位，即如果有三個段落，如果第二個段落移開了，但是空間還是依然保留，不會被第三個段落占用。

    具體用法：

position:relative; top:30px; left:30px;

注意：如果想要讓一個段落遮掉另一個段落，則需要設置background-color；

3.絕對定位（absolute）：被排除在普通定位之外，其他類似相對定位。如果有三個段落，如果第二個段落移開了，則空間被第三個段落占用。

具體用法：

position:absolute; top:30px; left:30px;

4.固定定位（fixed）：完全脫離普通定位，而是固定在窗體的某一個位置，不論滾動條移動也不會變化。

注意：z-index特性可以設置多個元素重疊時，元素的疊放次序，z-index越大，則越靠頂。

    具體用法：

position:fixed; top:0px; left:0px; 表明這個框不動，并且在最頂部。

5.浮動定位float：脫離普通定位，并且包含在框中，但不會重疊。指定float后，需要指定width特性，為了確定框的寬度。

    具體用法：

float:left; width:100px; 表明某個元素放在左邊，并且寬度為100像素。

 

 轉自：http://blog.csdn.net/xiazdong/article/details/6838612