CSS的用法和常用定義
■用法
加在
.....間，以外掛呼叫
例如：
加在
.....間，直接定義 ..
直接加在對象前面
例如：
優先順序：3>2>1
■定義方式：
依判斷：
例如：
===>此順序很重要
依附標籤：
先給名字(class)再呼叫
例如：
==> 呼叫：
-->只有 class 為 title 的 font才套用
先給名字(id)再呼叫
例如：
==> 呼叫：
-->只有 id 為 title 的 div才套用
--> 則套用範圍僅限於此 div 中間所有
■ 字型屬性
1. 字型種類 font-family:
2. 字型樣式 font-style: normal / italic / oblique
3. 字型轉換 font-variant: normal / small-caps
4. 字型粗細 font-weight: normal / bold / bolder / lighter / 100 / 200 / 300 /
400 / 500 / 600 / 700 / 800 / 900
5. 字型大小 font-size:
xx-small / x-small / small / medium / large / x-large / xx-large
larger/smaller
12pt, ....等
110%, ....等
6. 字型樣式 font: 所有字型屬性的設定值
■ 文字屬性
1. 文字間隔 word-spacing: normal /
2. 字母間隔 letter-spacing: normal /
3. 修飾文字效果 text-decoration: none / underline / overline / line-through / blink
4. 垂直對齊排列 vertical-align: baseline / sub / super / top / text-top / middle
/ bottom / text-bottom /
5. 字母大小寫轉換 text-transform: none / capitalize / uppercase / lowercase
6. 文字排列方式 text-align: left / right / center / justify
7. 文字縮排 text-indent: /
8. 列高 line-height: normal / / /
■ 前景顏色及背景屬性
1. 前景顏色 color: /rgb(Nr%,Ng%,Nb%)/ rgb(Nr,Ng,Nb)/#rrggbb/#rgb
2. 背景顏色屬性 background-color: / transparent (透明)
3. 背景圖案 background-image: / none
4. 背景重複方式 background-repeat: repeat / repeat-x / repeat-y / no-repeat
5. 固定背景 background-attachment: scroll / fixed
6. 背景位置 background-position: / /{[top/center/bottom]||[left/center/right]}
[註1]
7. 背景 background: 所有背景屬性
■ 邊界/方框/填白屬性
I . 邊界屬性設定
1. 邊界 margin: [//auto]
設定一個值: 四個邊界值設定相等
設定四個值: 依上、右、下、左邊界順序設定；若有缺少，則以對邊的值代替 [註2]
2. 上邊界 margin-top: / / auto
3. 右邊界 margin-right: / auto
4. 下邊界 margin-bottom: / / auto
5. 左邊界 margin-left: / / auto
II . 填白屬性設定
1. 上邊填白 padding-top: /
2. 右邊填白 padding-right: /
3. 下邊填白 padding-bottom: /
4. 左邊填白 padding-left: /
5. 填白 padding: /[註2]
III. 邊框屬性設定
a. 邊框寬度屬性
1. 上邊框寬度 border-top-width: medium/thick/thin/
2. 右邊框寬度 border-right-width: medium/thick/thin/
3. 下邊框寬度 border-bottom-width: medium/thick/thin/
4. 左邊框寬度 border-left-width: medium/thick/thin/
5. 邊框寬度 border-width: medium/thick/thin/[註2]
b. 邊框顏色屬性
1. 邊框顏色 border-color: [註2]
2. 上邊框顏色 border-top-color:
3. 右邊框顏色 border-right-color:
4. 下邊框顏色 border-bottom-color:
5. 左邊框顏色 border-left-color:
c. 邊框樣式屬性
1. 邊框樣式 border-style: none / dotted / dashed / solid / double / groove / ridge
/ inset / outset [註2]
2. 上邊框樣式 border-top-style: none / dotted / dashed / solid / double / groove
/ ridge / inset / outset
3. 右邊框樣式 border-right-style: none / dotted / dashed / solid / double / groove
/ ridge / inset / outset
4. 下邊框樣式 border-bottom-style: none / dotted / dashed / solid / double / groove
/ ridge / inset / outset
5. 左邊框樣式 border-left-style: none / dotted / dashed / solid / double / groove
/ ridge / inset / outset
d. 邊框屬性綜合設定
1. 上邊框 border-top: //
2. 右邊框 border-right: //
3. 下邊框 border-bottom: //
4. 左邊框 border-left: //
5. 邊框 border: //
■ 條類項目屬性
1. 項目符號類型 list-style-type: disc / circle / square / decimal / lower-roman
/ upper-roman / lower-alpha / upper-alpha / none
2. 項目符號圖像 list-style-image: /none
3. 目錄樣式位置 list-style-position: inside / outside
4. 目錄樣式 list-style: 所有條類項目屬性設定
■ 位置樣式
1. 擺設位置 position : absolute/relative/static
2. 視窗頂端距離 top : //auto
3. 視窗左端距離 left : //auto
4. 設定元件在網頁上的3d定位 z-index : / auto
■ 其它
1. 顯示元件設定 visibility : hidden/visible
2. 浮動元件 float: left / right / none
3. 清除浮動元件 clear: none / left / right / both
4. 元件寬度 width: //auto
5. 高度 height : //auto
6. 元件顯示 display: block / inline / list-item / none
display這個性質可設定整個物件要不要顯示，以及顯示的方式。
它可用的參數這裡一一介紹。none代表不顯示，且此物件不占任何空間；
block代表顯示，並視為區塊，前後緊臨的物件將換行顯示；inline代表顯示，
但前後緊臨的物件會排在其左右，並不會換行；list-item代表顯示，與block大致相同；
table-header-group只能用在，代表表格在多頁時（如列印），
此區之表格將會自動加在有此表格之頁面的第一列；table-footer-group
與table-header-group相似，但用於，作用是表格在多頁時，
此區之表格將會自動加在有此表格之頁面的最末列。所以使用如display:none表示此物件就被隱藏了。
7. 空白 white-space: normal / pre / nowrap
8. 表格定位 table-layout fixed
說明
注釋
[註1]： 水平位置設定值----- top﹑center﹑bottom 與垂直位置設定值----- left﹑center﹑right 可互相組合。
例如：top left﹑bottom center 等等變化。
[註2]： groove 3D凹線﹑ridge 3D凸線﹑ inset 3D嵌入線﹑ outset 3D隆起線
padding﹑border-width﹑border-color ﹑border-style 及 border-width 的說明參見的 margin
設定說明
長度單位可分以下兩種：
相對單位
em(字型大小--font-size)
ex(字型高度--x-height)
px(像素-- pixels)
絕對單位
in(英吋--inches, 1 inch 等於 2.54 米.)
cm(米 --centimeters)
mm(厘米 --millimeters)
pt(點--points, 1點= 1/72英吋)
pc(picas,1pc=12pt)
顏色單位
以 color-name 表示顏色： 例如: BLACK、 GREEN、 TEAL .....
以 R,G,B 三原色比例或數值表示顏色： 可以 rgb(Nr%,Ng%,Nb%) // rgb(Nr,Ng,Nb) // #rrggbb // #rgb
四種方式表示。
留言列表
