收藏409 CSS 標準語法大整理
標籤:
--------------------------------------------------------------------------------
▓ 語法說明 -- 邊框控制:
--------------------------------------------------------------------------------
/*邊框控制*/
/* 分成上下左右(4部分) 寬度樣式顏色(3部分) 總計12(4x3)行 */
body { /* body 是可以依照需要作改變的,下面的內容才是重要的! */
border-XXX-width: 1px; /* 邊框寬度 */
border-XXX-style: dotted; /* 邊框樣式 */
border-XXX-color: #0066FF; /* 邊框顏色 */
}
XXX:請各位先注意XXX的部分,這裡XXX代表著是邊框的上下左右。
屬性有:top:上方 bottom:下方 left:左邊 right:右邊
Width(寬):邊框寬度。屬性有:N px:像素 N pt:點 N in:英吋 N %:百分比 (N為大小,必須為正整數)
Style(樣式):邊框樣式。屬性有:dotted:點狀線 dashed:虛線 solid:實線 double:雙實線 groove:溝道狀 ridge:山脊狀inset:凹陷狀 outset凸起狀
Color(顏色):邊框顏色。屬性為:#XXXXXX (XXXXXX為顏色代碼)
/* 語法開始:寫法二 -- 精簡寫法,功用一樣 */
/* 只分成上下左右(4部分) 寬度樣式顏色並列在同一行程式 */
body {
border-XXX: width style color; /* 邊框 寬度 樣式 顏色 */
}
★注意:相關的語法大致和第一種都像同,只是寫法不一樣!假設我要設定上方邊框為寬度一像素、虛線、紅色,就可以寫成:
border-top: 1px dashed #FF0000; /* 邊框 寬度 樣式 顏色 */
/* 語法開始:寫法三 -- 最為精簡、但有限制 */
/* 使用時機:當上下左右、寬度、樣式、顏色都要設定一樣的時候 */
body {
border: width style color; /* 邊框 寬度 樣式 顏色 */
}
★注意:相關的語法大致和第二種都像同,只是這部分 border-XXX 改為 border 。因為此時我們已經不用在設定上下左右了!
--------------------------------------------------------------------------------
▓ 語法說明 -- 文字控制:
--------------------------------------------------------------------------------
/* 語法開始 */
body { /* body 是可以依照需要作改變的,下面的內容才是重要的! */
color: #006699; /* 文字顏色 */
font-family:"Times New Roman"; /* 文字字型 */
font-size: 14pt; /* 文字大小 */
font-style: normal; /* 文字樣式 */
line-height: 1.5px; /* 文字行高 */
font-weight: bold; /* 文字粗細 */
font-variant: normal; /* 文字變形 */
text-transform: capitalize; /* 文字大小寫 */
text-decoration: underline overline line-through blink; /* 文字裝飾 */
vertical-align: super ; /*文字上、下標字*/
text-align: center; /* 文字對齊方式(水平) */
vertical-align: top; /* 文字對齊方式(垂直) */
<st></st>