CSS對文字的變化

介紹 CSS對文字大小、顏色、對齊、縮排、字體..之文字屬性與屬性值應用


範例::純HTML語法,尚未加入CSS

範例觀測重點 :比對加入CSS後之差異與變化


範例::用CSS Color屬性改變文字色彩

範例觀測重點 :比對加入CSS文字樣式後之差異與變化

參閱色彩設定值說明與對照


範例::HTML結合內部CSS樣式表(Internal Style Sheet)

範例觀測重點 :

動手實驗一下 : 將 red改成bule看看哪列文字顏色有變化,哪列文字顏色沒變化??

操作要領: 先看試驗前的畫面,再比較試驗後的結果(每個實驗區都如此使用)

CSS 文字屬性列表

屬性 說明
color 設定文字顏色
direction 指定文字書寫方向
letter-spacing 設定字母間距大小
line-height 設定文字位置高度基準線,可用來改變文字的垂直置中
text-align 指定文字的水平對齊邊
text-decoration 指定標示文字的裝飾橫線
text-indent 指定文字區首字的縮排位置
text-shadow 指定文字的陰影特效
text-transform 控制英文文字大小寫
unicode-bidi  
vertical-align 設定文字的水平對齊 ,可應用在文繞圖指定文字位置
white-space 指定句子過長時元素文字是否斷行
word-spacing 增或減少英文單字(不是字母喔),字與字句間的空白間距


文字書寫方向({direction)屬性。

元素{屬性: 值 }檢視結果

td {direction:ltr;}

文字從左到右

td {direction:ltr;}

文字從右到左


文字間隔({letter-spacing)屬性。

元素{屬性: 值 }檢視結果

p {letter-spacing:10px;}

看看文字之間的空間

p {letter-spacing:normal;}

看看文字之間內定值的空間


每行的空間高度({line-height)屬性。

元素{屬性: 值 }檢視結果

p { line-height:30px; }

行的空間高度({line-height)

p { line-height:150%;}

行的空間高度({line-height)


對齊相關 :CSS並沒有垂直對齊樣式,垂直對齊要去higth-line屬性去調整高度


文字對齊({Text Alignment)屬性。

元素{屬性: 值 }檢視結果

td {text-align:center;}

文字置中

td {text-align:right;}

文字靠右

td {text-align:justify;}

一段句子文字,每一列都同寬,左右兩邊是筆直的

decoration指定文字裝飾線屬性。

元素{屬性: 值 }檢視結果

p {text-decoration:overline;}

裝飾線在文字上緣

h3 {text-decoration:line-through;}

裝飾線在文字中間

p {text-decoration:underline;}

裝飾線在文字底部


文字首字縮排({Text Indent)屬性。

元素{屬性: 值 }檢視結果

td { text-indent:25px; }

這段句子的首字位置內縮了句子的首字位置內縮了。

英文字母變化({text-transform)屬性。

舉例,以字串 "hello ,hOW ARE yoU" 做轉換

元素{屬性: 值 }檢視結果

td { text-transform:capitalize; }

每個字的第一個字母都以大寫呈現,其他的字母則不改變。

結果字串為 hello ,hOW ARE yoU

td { text-transform:uppercase; }

將全部英文字母,全數以大寫呈現。

結果字串為 hello ,hOW ARE yoU

td { text-transform:lowercase; }

將全部英文字母,全數以小寫呈現。

結果字串為 hello ,hOW ARE yoU


word-spacing 屬性是用來設定字與字之間的距離。

元素{屬性: 值 }檢視結果

td { word-spacing:5px; }

注意每個英文單字間的距離。Hello how are you

元素內的空白鍵(white-space) 處理屬性。

元素{屬性: 值 }檢視結果

td { white-space:nowrap; }

指定段落中的 內文不進行換行

td { white-space:pre; }

空白 會被瀏覽器保留

td { white-space:pre-line; }

合併 空白符序列, 但是保留換行符

td { white-space:pre-wrap; }

保留 空白符序列 ,但是正常地進行換行

垂直對齊(vertical-align)屬性。

vertical-align屬性值有 baseline、sub、super、top、text-top、middle、bottom、text-bottom、數字px、數字cm、數字%

元素{屬性: 值 }檢視結果

img style='vertical-align:text-top;' src="sample1.jpg"

看看文字與圖的垂直對齊點.

img style='vertical-align:middle;' src="sample1.jpg"

看看文字與圖的垂直對齊點.

img style='vertical-align:text-bottom;' src="sample1.jpg"

看看文字與圖的垂直對齊點.

文繞圖範例: