Dreamwaver CSS 串聯樣式表教學『文字屬性一覽』

CSS串聯樣式表教學『文字屬性一覽』
http://tw.myblog.yahoo.com/davidbulll/article?mid=513

color: #000; /*色彩*/
font-family: 細明體,sans-serif; /*文字字型*/
font-size: 9pt; /*文字大小*/
font-style: italic; /*文字斜體*/
font-style: normal; /*標準文字*/
可消除瀏覽器中預設的斜體文字或標籤<i> <em>內的字
font-weight: bold; /*文字粗體*/
font-weight: normal; /*標準文字*/
可以用在消除 h1 ~ h6 的預設粗體或粗體標籤<b> <strong>內的字
font-variant: small-caps; /*小型英文大寫*/
letter-spacing: 1pt; /*字間距離*/
line-height: 200%; /*設定行高*/
vertical-align: sub; /*下標字*/
vertical-align: super; /*上標字*/
text-decoration: line-through; /*加刪除線*/
text-decoration: overline; /*加頂線*/
text-decoration: underline; /*加底線*/
text-decoration: none; /*刪除底線*/
text-transform: capitalize; /*首字大寫*/
text-transform: uppercase; /*英文大寫*/
text-transform: lowercase; /*英文小寫*/
text-align: right; /*文字靠右對齊*/
text-align: left; /*文字靠左對齊*/
text-align: center; /*文字置中對齊*/
text-align: justify; /*文字分散對齊*/
word-spacing: 5px; /*半形空格的間距*/
white-space: pre; /*讓元素有<pre>標籤功能*/
CSS串聯樣式表教學『連結屬性一覽』
a /*所有超連結*/
a:link /*超連結文字格式*/
a:visited /*瀏覽過的連結文字格式*/
a:active /*按下連結的格式*/
a:hover /*滑鼠移至連結*/
滑鼠游標樣式：
作業中 cursor:progress
十字型 cursor:crosshair
箭頭朝上下 cursor:n-resize 或 cursor:s-resize
十字箭頭 cursor:move
箭頭朝左右 cursor:w-resize 或 cursor:e-resize
加一問號 cursor:help
箭頭朝左上右下 cursor:nw-resize 或 cursor:se-resize
文字I型 cursor:text
箭頭斜左下右上 cursor:sw-resize 或 cursor:ne-resize
漏斗 cursor:wait
手型(IE6) cursor:pointer
無法使用(IE6) cursor:not-allowed
游標圖案(IE6)  p {cursor:url("游標檔名.cur"),text;}
CSS串聯樣式表教學『背景屬性一覽』
background-color:#fff; /*背景色彩*/ background:transparent; /*透視背景*/ background-image : url(bg.jpg); /*背景圖片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重複排列-網頁預設*/ background-repeat : no-repeat; /*不重複排列*/ background-repeat : repeat-x; /*在 x 軸重複排列*/ background-repeat : repeat-y; /*在 y 軸重複排列*/ 指定背景位置,以下方式皆可使用 background-position : 90% 90%; /*背景圖片x與y軸的位置*/ background-position : top; /*向上對齊*/ background-position : bottom; /*向下對齊*/ background-position : left; /*向左對齊*/ background-position : right; /*向右對齊*/ background-position : center; /*置中對齊*/
CSS串聯樣式表教學『清單樣式屬性一覽』
list-style-type: none; /*不編號*/
list-style-type: decimal; /*阿拉伯數字*/
list-style-type: lower-alpha; /*小寫英文字母*/
list-style-type: upper-alpha; /*大寫英文字母*/
list-style-type: lower-roman; /*小寫羅馬數字*/
list-style-type: upper-roman; /*大寫羅馬數字*/
list-style-type: disc; /*實心圓形符號*/
list-style-type: circle; /*空心圓形符號*/
list-style-type: square; /*實心方形符號*/
list-style-image: url(dot.gif); /*圖片式符號*/
list-style-position: outside; /*凸排*/
list-style-position: inside; /*縮排*/
CSS串聯樣式表教學『框線屬性一覽』
邊框顏色 border-top-color : #369; /*上框線色彩*/ border-right-color : #369; /*右框線色彩*/ border-bottom-color : #369; /*下框線色彩*/ border-left-color : #369; /*左框線色彩*/ border-color : #369; /*簡化 四邊框線色彩*/ 邊框寬度 border-top-width :1px; /*上框線寬度*/ border-right-width :1px; /*右框線寬度*/ border-bottom-width :1px; /*下框線寬度*/ border-left-width :1px; /*左框線寬度*/ border-width :1px; /*簡化 四邊框線寬度*/ 邊框樣式 border-top-style : solid; /*上框線樣式*/ border-right-style : solid; /*右框線樣式*/ border-bottom-style : solid; /*下框線樣式*/ border-left-style : solid; /*左框線樣式*/ border-style : solid; /*簡化 四邊框線樣式*/
CSS串聯樣式表教學『標籤元素邊框空白值』
標籤元素內容和標籤元素邊框之間的空白設定 padding-top: 10px; /*上邊框留空白*/ padding-right: 10px; /*右邊框留空白*/ padding-bottom: 10px; /*下邊框留空白*/ padding-left: 10px; /*左邊框留空白*/
CSS串聯樣式表教學『標籤元素邊界值』
margin-top: 10px; /*上邊界*/ margin-right: 10px; /*右邊界值*/ margin-bottom: 10px; /*下邊界值*/ margin-left: 10px; /*左邊界值*/
CSS串聯樣式表教學『標籤元素與文字間的相對位置』
float : right; /*標籤元素向右靠.文字圍繞在左邊*/ float : left; /*標籤元素向左靠.文字圍繞在右邊*/ float : none; /*以預設位置顯示*/
CSS串聯樣式表教學『標籤元素與文字間的相對位置』
clear 屬性是用來解除 float 屬性的作用 clear : right; /*解除元素置右的浮動*/ clear : left; /*解除元素置左的浮動*/ clear : both; /*解除元素兩邊的浮動*/ clear : nono; /*以預設位置顯示*/
CSS串聯樣式表教學『標籤元素定位效果』
製作物件重疊效果必須加上position屬性：
position : static; /* 無定位 */
position : relative; /* 依物件左上角為基準點取相對位置 */
position : absolute; /* 依網頁左上角為基準點取絕對位置 */
position : fixed; /* 固定位置不受捲軸影響 */
控制 position 的位置,可用: top | right | bottom | left 。
CSS串聯樣式表教學『overflow屬性一覽』
overflow 屬性值 ： overflow: auto; /*預設使用捲軸*/ overflow: hidden; /*隱藏溢出範圍的內容*/ overflow: scroll; /*使標籤元素產生捲軸*/ overflow: visible; /*顯示全部忽略區塊大小*/ overflow: inherit; /*繼承父元素的可見性*/ IE 專用樣式 overflow-x:hidden; /*刪除水平捲軸*/ overflow-y:hidden; /*刪除垂直捲軸*/
CSS串聯樣式表教學『display 屬性的運用』
display 屬性值 ：
display : none; /* 隱藏不顯示任何資料內容 */
display : block; /* 將資料內容分段顯示 */
display : lnline; /* 將資料顯示在同一行不分段 */
display : inline-block; /* 將資料顯示在同一行同時擁有區塊等級 */
display : block : 將資料內容分段顯示,並且可設定元素的寬與高。
display : lnline : 將資料顯示在同一行不分段,元素內的寬高不可改變。
display : inline-block : 將資料顯示在同一行,並且可設定元素的寬與高。
CSS串聯樣式表教學『visibility 屬性的運用』
visibility 屬性值 ： visibility : inherit; /* 繼承父元素的可見性 */ visibility : visible; /* 顯示元素內容 */ visibility : hidden; /* 隱藏元素內容 */
CSS串聯樣式表教學『vertical-align 屬性一覽』
vertical-align屬性 vertical-align: top; /*垂直向上對齊*/ vertical-align: bottom; /*垂直向下對齊*/ vertical-align: middle; /*垂直置中對齊*/ vertical-align: text-top; /*文字垂直向上對齊*/ vertical-align: text-bottom; /*文字垂直向下對齊*/