OECSPACE - Css style 教學「文字屬性一覽」
CSS串聯樣式表教學『文字屬性一覽』
- 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>標籤功能*/
字體樣式簡寫解說:
簡寫的順序為:font-style | font-variant | font-weight | font-size | line-height | font-family
例如:
font-style: italic; /*文字斜體*/
font-variant: small-caps; /*小型英文大寫*/
font-weight: bold; /*文字粗體*/
font-size: 10pt; /*文字大小*/
line-height: 200%; /*設定行高*/
font-family: tahoma,sans-serif; /*文字字型*/
簡寫寫法:
font : italic small-caps bold 10px/200% tahoma,sans-serif;
用簡寫法至少要有 font-size 和 font-family
font-size 和 line-height 只能用『/』组成一個值,不能分開寫
CSS 文字樣式範例 ◆ 按這裡看範例效果
設定多個文字字型以分開「 , 」但有些字型名稱由多個英文字構成
字和字之間包含空白,例如 Times New Roman ,就必須用雙引號括弧起來
font-family : 細明體,sans-serif,"Times New Roman"
字和字之間包含空白,例如 Times New Roman ,就必須用雙引號括弧起來
font-family : 細明體,sans-serif,"Times New Roman"