phpchina 第3期：CSS基礎技術講解篇之學習筆記

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

phpchina 第3期：CSS基礎技術講解篇 檔下載:CSS基礎技術講解篇

一、CSS語法

:

right

center

left p

left h1

二、css字體屬性

字體Arial;

字體大小14;

風格屬性斜體oblique

字體濃淡屬性

字體屬性

字體顏色

三、CSS常用文字屬性:

文本縮進屬性(text-indent)

length (長度，可以用絕對單位(cm, mm, in, pt, pc)或者相對單位 (em, ex, px))

percentage (百分比，相當於父物件寬度的百分比)

行高屬性(line-height)

這個屬性設定每行之間的距離。 其值有以下設定方法：

normal (缺省值)

length (長度，可以用絕對單位(cm, mm, in, pt,pc)或者相對單位 (em, ex, px))

percentage (百分比，相當於父物件高度的百分比)

示例代碼如下：

p3 {line-height:1cm}

字間距屬性(letter-spacing)

p4 {letter-spacing: 3mm}

四、CSS背景屬性

背景顏色

body {background-color:#ccc;}

背景圖片屬性(background-image)

body{background-image:url(.. /images/css_tutorials/background.jpg)}

五、CSS邊框屬性

邊框風格屬性(border-style)

這個屬性用來設定上下左右邊框的風格，它的值如下：

none (沒有邊框，無論邊框寬度設為多大)

dotted (點線式邊框)

dashed (破折線式邊框)

solid (直線式邊框)

double (雙線式邊框)

groove (槽線式邊框)

ridge(脊線式邊框)

inset (內嵌效果的邊框)

outset (突起效果的邊框)

邊框顏色屬性(border-color)

.kuang9{border-style: ridge;border-color:yellow;}

邊框寬度屬性(border-width)

這個屬性用來設定上下左右邊框的寬度，它的值如下

medium (是缺省值) thin (比medium細) thick (比medium粗)

用長度單位定值。 可以用絕對長度單位(cm, mm, in, pt, pc)或者用相對長度單位 (em, ex, px)。

.kuang10{border-style:solid;border-width:1px;border-color:#ccc;}

單邊邊框屬性

.kuang11{ border-style:solid; border-width:1px; border-top-color:#ccc; border-bottom-color:#ccc; }

上邊框屬性(top ,left ,right,bottom類似)，你可以使用border-top, border-top-width, border-top-style, border-top-color

.kuang12 { border-top-style:solid; border-width:1px; border-top-color:#ccc; border-bottom-color:#ccc; }

六、CSS邊距屬性

左邊距屬性(margin-left)

這個屬性用來設定左邊距的寬度。 示例如下：

.d1{ border-style:solid; border-width:1px; border-color:#ccc; margin-left:8cm}

這個屬性用來設定右邊距的寬度。 示例如下：

.d1{ border-style:solid; border-width:1px; border-color:#ccc; margin-right:8cm}

其他top bottom類似

邊距屬性(margin)

這個屬性是設定邊距寬度的一個快捷的綜合寫法，用這個屬性可以同時設定上下左右邊距屬性。 你可以為上下左右邊距設置相同的寬度

.d3{border-style:solid; border-width:1px; border-color:#ccc; margin:1cm,1cm,1cm,1cm}

七、CSS間隙屬性

間隙屬性(padding)是用來設置元素內容到元素邊界的距離。

左間隙屬性(padding-left)

這個屬性用來設定左間隙的寬度。 示例如下：

.d1{padding-left:1cm}

右間隙屬性(padding-right)

這個屬性用來設定右間隙的寬度。 示例如下：

.f2{border-style:solid; border-width:1px; border-color:#ccc; padding-right:1cm; text-align:right; } 右側是1cm->

上間隙屬性 下間隙屬性類似

間隙屬性(padding)

.f3{border-style:solid; border-width:1px; border-color:#ccc; padding:1cm,1cm,1cm,1cm}

八、CSS盒子模式(Box Model)

CSS 中有個重要的概念，就是盒子模式 (Box model)。

胡戈的"一個饅頭引發的血案"中有個圓圈套圓圈娛樂城，而這個盒子模式套用這句話來說，就是方塊套方塊。

先看看下面這個圖，黑框包圍的一個方塊，就是一個盒子 (Box)。

盒子裡由外至裡依次是：

margin 邊距

border 邊框

padding 間隙 (也有人稱做補丁)

content (內容，比如文本，圖片等)

CSS 邊距屬性 (margin) 是用來設置一個元素所占空間的邊緣到相鄰元素之間的距離。

CSS 邊框屬性 (border) 用來設定一個元素的邊線。

CSS 間隙屬性 (padding) 是用來設置元素內容到元素邊框的距離。

CSS 背景屬性指的是 content 和 padding 區域。

CSS 屬性中的 width 和 height 指的是 content 區域的寬和高。

九、CSS清單樣式屬性

清單樣式類型屬性(list-style-type)

清單樣式類型屬性(list-style-type)

這個屬性用來設定清單項標記(list-item marker)的類型。 有以下值：

disc (缺省值，黑圓點)

circle (空心圓點)

square (小黑方塊)

decimal (數位排序)

lower-roman (小寫羅馬字排序)

upper-roman (大寫羅馬字排序)

lower-Alpha (小寫字母排序)

upper-Alpha (大寫字母排序)

none (無清單項標記)

清單樣式位置屬性(list-style-position)

清單樣式位置屬性(list-style-position)有兩個值：

outside (以清單項內容為准對齊)

inside (以清單項標記為准對齊)

清單樣式圖片屬性(list-style-image)

清單項標記可以用圖片來表示，用清單樣式圖片屬性(list-style-image)來設定圖片。 示例代碼如下：

.g11 {list-style-image: url(HTTP://www.startseo.cn/themes/Qeeke/style/Qeeke/Novo_Dangos_001.gif) }

清單屬性(list-style)

這個屬性是設定清單樣式的一個快捷的綜合寫法

.g12 {list-style:circle inside url(HTTP://www.startseo.cn/themes/Qeeke/style/Qeeke/Novo_Dangos_001.gif) }

十、CSS偽類(pseudo-class)

和一般的CSS語法不同(參見CSS語法)，CSS偽類的語法有兩種。

第一種： selector:pseudo-class {property: value}

山東網站優化 a:link {color:red} a:visited{color:green} a:hover{color:blue}

例句： a:link {color:red}

第二種： selector.class:pseudo-class {property: value}

濟南網站優化 a.c1:link {color:red} a.c1:visited {color:#FFCC00} a.c1:hover {color:blue}

例句： a.c1:link {color:red}

錨(a)偽類

錨(a)偽類是最常用的偽類。 例句如下：

a:link {color: #FF0000} /* 未被訪問的連結 紅色 */

a:visited {color: #00FF00} /* 已被訪問過的連結 綠色 */

a:hover {color: #FFCC00} /* 滑鼠懸浮在上的連結 橙色 */

a:active {color: #0000FF} /* 滑鼠點中啟動連結 藍色 */

也可以用HTML的class屬性來設定偽類。 例句如下：

a.c1:link {color: #FF0000} /* 未被訪問的連結 紅色 */

a.c1:visited {color: #00FF00} /* 已被訪問過的連結 綠色 */

a.c1:hover {color: #FFCC00} /* 滑鼠懸浮在上的連結 橙色 */

a.c1:active {color: #0000FF} /* 滑鼠點中啟動連結 藍色 */

注：由於CSS優先順序的關係(後面比前面的優先順序高)，在寫a的CSS時，一定要按照a:link， a:visited， a:hover， a:actived的順序書寫

檔下載:CSS基礎技術講解篇

本文來源於君信啟航SEO-山東網站優化 HTTP://www.startseo.cn/ , 原文位址：HTTP://www.startseo.cn/post/Website/css-jichu-phpchina/