CSS Styling - Text
字體的顏色
- value 同樣地是有以下三種表達方式
- 十六進位的值,如 "#ff0000"
- RGB的值,如 "rgb(255,0,0)"
- 顏色的名稱,如 "red"
- 在css內預設color的property就是代表字體的顏色哦!
- 範例:
- body {color:blue;}
- h1 {color:#00ff00;}
- h2 {color:rgb(255,0,0);}
- 原W3School的Demo
- text-align property : 設定文字水平的對齊方式
- 置中 : center
- 靠左 : left
- 靠右 : right
- 讓每行有同樣的寬高與同樣的左右邊界 : justify
- 範例
- h1 {text-align:center;}
- p.date {text-align:right;}
- p.main {text-align:justify;}
- 原W3School的Demo
- 複習 : p.data代表對於p這個HTML元素來說有個class="date",並定義date的文字對齊方式
- text-decoration property是用來設定文字有沒有裝飾(文字上加線,底線,刪除線等等)
- 最常拿來用是移除超連結的底線!
- 範例1
- a {text-decoration:none;}
- (將a的文字裝飾拿掉)
- 原W3School的Demo
- 會發現超連結的W3School
- 範例2
- h1 {text-decoration:overline;} // h1文字上加線
- h2 {text-decoration:line-through;} // h2文字被線從中劃過
- h3 {text-decoration:underline;} // h3文字加上底線
- h4 {text-decoration:blink;} // 使h4的文字閃爍 IE,Chrome,Safari不支援
- 原W3School的Demo
- text-transform property是用來使定在元素內的大寫或是小寫
- uppercase 大寫
- lowercase 小寫
- capitalize 第一個字大寫
- 範例
- p.uppercase {text-transform:uppercase;}
- p.lowercase {text-transform:lowercase;}
- p.capitalize {text-transform:capitalize;}
- 原W3School的Demo
- text-indentation property是用來指定第一行文字的縮排
- 範例
- p {text-indent:50px;}
- 對於p這個HTML元素第一行文字的縮排為50px(第一行前面空50px的距離)
- 原W3School的Demo
| Property | Description |
|---|---|
| color | 設定文字的顏色 |
| direction | 設定文字的方向(由左到右/由右到左) |
| letter-spacing | 增加/減少每個字元間空白的距離 |
| line-height | 設定行高 |
| text-align | 設定文字對齊的方式 |
| text-decoration | 設定文字的裝飾如底線等 |
| text-indent | 設定第一行文字的縮排(前面要空幾格) |
| text-shadow | Specifies the shadow effect added to text |
| text-transform | 控制文字大小寫的轉換 |
| unicode-bidi | |
| vertical-align | 設定元素垂直排列的位置 |
| white-space | 指定在元素內的空白該如何被處理 |
| word-spacing | 增加/減少在每個字中間的空白的大小 |
留言
張貼留言