Zona_writing

CSS屬性-按字母

 

    * /*...*/ -- 注釋

    * azimuth

    * background-attachment -- 背景圖片隨滾動軸的移動方式

    * background-color -- 背景顏色

    * background-image -- 背景圖像

    * background-position -- 背景圖片的位置

    * background-repeat -- 背景圖片的顯示方式

    * background -- 統一背景

    * border -- 統一邊框所有屬性

    * border-bottom -- 統一下邊框

    * border-bottom-color -- 下邊框顏色

    * border-bottom-style -- 下邊框樣式

    * border-bottom-width -- 下邊框寬度

    * border-break -- 內容分開的邊框

    * border-collapse

    * border-color -- 邊框顏色

    * border-left -- 統一左邊框

    * border-image -- 邊框圖像

    * border-left-color -- 左邊框顏色

    * border-left-style -- 左邊框樣式

    * border-left-width -- 左邊框寬度

    * border-radius -- 圓角邊框

    * border-right-color -- 右邊框顏色

    * border-right-style -- 右邊框樣式

    * border-right-width -- 右邊框寬度

    * border-right -- 統一右邊框

    * border-spacing

    * border-style -- 邊框樣式

    * border-top -- 統一上邊框

    * border-top-color -- 上邊框顏色

    * border-top-style -- 上邊框樣式

    * border-top-width -- 上邊框寬度

    * border-width -- 統一邊框寬度

    * bottom -- 下偏移屬性

    * caption-side

    * clear -- 清除

    * clip -- 了盒子可顯示的區域

    * color -- 顏色

    * content -- 字串

    * counter-increment

    * counter-reset

    * cue-after

    * cue-before

    * cue

    * cursor -- 滑鼠樣式

    * direction

    * display -- 顯示方式

    * elevation

    * empty-cells

    * float -- 元素漂浮

    * font-family-- 字體

    * font-size -- 字體大小

    * font-style -- 字體樣式

    * font-variant -- 小型的大寫字母字體

    * font-weight -- 字體粗細

    * font -- 統一字體所有屬性

    * height -- 盒子高度

    * left -- 左偏移屬性

    * letter-spacing -- 文本中字母的間距(中文為文字的間距)

    * line-height -- 一段文字中每行文字的間距

    * list-style-image -- 列表圖像

    * list-style-position -- 列表位置

    * list-style-type -- 列表類型

    * list-style -- 統一列表所有屬性

    * margin-right -- 右邊外補白寬度

    * margin-left -- 左邊外補白寬度

    * margin-top -- 上邊外補白寬度

    * margin-bottom -- 下邊外補白寬度

    * margin -- 統一邊外補白

    * max-height -- 最大高度

    * max-width -- 最大寬度

    * min-height -- 最小高度

    * min-width -- 最小寬度

    * opacity -- 元素的透明度

    * orphans

    * outline-color

    * outline-style

    * outline-width

    * outline

    * overflow -- 盒子中內容的顯示方式

    * padding-top -- 上邊內補白

    * padding-right -- 右邊內補白

    * padding-bottom -- 下邊內補白

    * padding-left -- 左邊內補白

    * padding -- 統一邊內補白

    * page-break-after

    * page-break-before

    * page-break-inside

    * pause-after

    * pause-before

    * pause

    * pitch-range

    * pitch

    * play-during

    * position -- 元素的定位

    * quotes

    * richness

    * right -- 右偏移屬性

    * speak-header

    * speak-numeral

    * speak-punctuation

    * speak

    * speech-rate

    * stress

    * table-layout

    * text-align -- 文本對齊方式

    * text-decoration -- 文本是否有劃線以及劃線的方式

    * text-indent -- 文本的首行縮進

    * text-transform -- 文本的大小寫狀態,此屬性對中文無意義

    * top -- 上偏移屬性

    * unicode-bidi

    * vertical-align -- 垂直對齊方式

    * visibility -- 元素是否可見

    * voice-family

    * volume

    * white-space -- 文本的格式

    * widows

    * width -- 盒子寬度

    * word-spacing -- 以空格間隔文字的間距

    * z-index -- z軸順序

基本語法====================================

<style/css>

<!--

body,table{

color : #999999 ; /*文字色彩*/

font-family : 細明體 ; /*文字字型*/

font-size : 9pt /*文字大小*/

}

-->

</style>

文字屬性一覽================================

color : #999999 /*文字色彩*/

font-family : 細明體 /*文字字型*/

font-size : 9pt /*文字大小*/

font-style:itelic /*文字斜體*/

font-variant:small-caps/*小字體*/

letter-spacing : 1pt/*字間距離*/

line-height : 200% /*設定行高*/

font-weight:bold /*文字粗體*/

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 /*文字置中對齊*/

 

背景語法===================================

<style/css>

<!--

body{

background-image : url(image/bg.gif); /*背景圖片*/

background-repeat : no-repeat; /*不重複排列*/

background-position : 90% 90%; /*背景圖片x與y軸的位置*/

background-attachment : fixed;/*固定背景*/

}

-->

</style>

 

背景屬性一覽================================

background-color:#F5E2EC /*背景色彩*/

background-image : url(image/bg.gif) /*背景圖片*/

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軸的位置*/

 

連結語法====================================

<style/css>

<!--

A:link/*超連結*/

{color : #999999 ; /*文字色彩*/}                                      

A:visited/*瀏覽過的超連結*/

{color : #999999 ; /*文字色彩*/}                                      

A:active/*按下連結*/

{color : #999999 ; /*文字色彩*/}                                

A:hover/*滑鼠移至連結*/

color : #000000 ; /*文字色彩*/

font-weight:bold; /*文字粗體*/

-->

</style>

 

連結屬性一覽==================================

A/*所有超連結*/

A:link/*超連結文字格式*/

A:visited/*瀏覽過的連結文字格式*/

A:active/*按下連結的格式*/

A:hover/*滑鼠移至連結*/

text-decoration:none;/*刪除連結線*/}

{cursor:s-resize;/*滑鼠指標樣式*/

font-weight:bold; /*文字粗體*/

border : 1px dotted #cc3300 ; /*文字框線*/}

 

滑鼠指標樣式一覽===============================

cursor:crosshair 十字型 cursor:s-resize 箭頭朝下

cursor:move 十字箭頭 cursor:e-resize 箭頭朝右

cursor:help 加一問號 cursor:w-resize 箭頭朝左

cursor:n-resize 箭頭朝上 cursor:ne-resize 箭頭朝右上

scursor:nw-resize 箭頭朝左上 cursor:text 文字I型

cursor:se-resize 箭頭斜右下 cursor:sw-resize 箭頭斜左下

cursor:wait 漏斗 cursor:nono  預設

 

彩色捲軸=======================================

<style/css>

<!--

BODY{

SCROLLBAR-FACE-COLOR: #FFFFFF; /*捲軸顏色*/

SCROLLBAR-HIGHLIGHT-COLOR: #336699; /*捲軸左與上內邊框*/

SCROLLBAR-SHADOW-COLOR: #336699;/*捲軸右與下內邊框*/

SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; /*捲軸左與上外邊框*/

SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;/*捲軸右與下外邊框*/

SCROLLBAR-ARROW-COLOR: #336699; /*捲軸箭頭*/

SCROLLBAR-TRACK-COLOR: #FFFFFF; /*捲軸底色*/

}

-->

</style>

 

刪除捲軸=====================================

<style/css>

<!--

BODY{overflow:hidden; /*刪除捲軸*/}

-->

</style>

 

<style/css>

<!--

BODY{overflow-x:hidden; /*刪除水準捲軸*/}

-->

</style>

 

<style/css>

<!--

BODY{overflow-y:hidden; /*刪除垂直捲軸*/}

-->

</style>

 

滑鼠移過連結位移============================

<style>

<!--

a:hover{position:relative;top:1px;left:1px;}

-->

</style>

說明:

在a:hover 滑鼠移至連結的屬性做文字位置的變化

top:1px;left:1px 位移數值

right:1px;bottom:1px 可改變位移方向

 

表格透明效果================================

<style/css>

<!--

table{FILTER: Alpha(opacity=60);/*表格透明*/}

-->

</style>

說明:

opacity=60 設定透明度(值越小越透明)