紀錄些小事情

-->只有 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: <圖檔的 url> / 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
四種方式表示。