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

網頁設計phpchina 第3期：CSS基礎技術講解篇之學習筆記
發佈者:作者:Web Design香港網頁設計大皇 - 網站設計
Web Design
　　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://webdesign.zoapcon.comcn/themes/Qeeke/style/Qeeke/Novo_Dangos_001.gif) }
　　列表屬性(list-style)
　　這個屬性是設定列表樣式的一個快捷的綜合寫法
　　.g12 {list-style:circle inside url(http://webdesign.zoapcon.comcn/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://webdesign.zoapcon.comcn/ , 原文地址：http://webdesign.zoapcon.comcn/post/Website/css-jichu-phpchina/Web Hosting