文字css樣式有哪些-css教學-PHP中文網

文字css樣式有哪些

青灯夜游

發布： 2021-12-09 11:13:52

原創

4970 人瀏覽過

文字css樣式有：文字顏色「color」、文字方向「direction」、字元間距「letter-spacing」、文字水平對齊方式「text-align」、文字修飾「text-decoration」、首行縮排“text-indent”等。

文字css樣式有哪些

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

文字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

#設定字間距

##下面給大家介紹一些css文字樣式。

text-indent首行縮排

#首行縮排是將段落的第一行縮進，這是常用的文本格式化效果。一般地，中文寫作時開頭空兩格，類似此。

該屬性的值是允許為負值的。

語法：

text-indent:<length> | <percentage> | inherit

登入後複製

tip：初始值為0;

套用於: 區塊級元素(包括block和inline-block)繼承性: 有

百分數: 相對於包含區塊的寬度

案例：首字元下沉

div {
    width: 200px;
    border: 1px solid black;
    text - indent: 0.5em;
}
div: first - letter {
    font - size: 30px;
    float: left;
}

登入後複製

text-align水平對齊

水平對齊是影響一個元素中的文字的水平對齊方式。

語法：

text-align: left | center | right | justify | inherit

登入後複製

初始值: left

應用於: 區塊級元素(包括block和inline-block)######繼承性: 有# #####對於IE7-瀏覽器來說，使用text-align不僅會改變文字的水平對齊方式，也會改變後代區塊層級元素的水平對齊方式###########word -spacing字間隔############字間隔是指單字間距，用來設定文字或單字之間的間距。實際上，"字"表示的是任何非空白符字元組成的串，並由某種空白符包圍。 ######注意：單字之間用空格分開，單字間的間距= word-spacing 空格大小######注意：字間隔可為負值######語法：## #

word-spacing: <length> | normal | inherit

登入後複製

###初始值: normal(預設為0)######套用於: 所有元素#######繼承性: 有###########letter-spacing字母間隔############字母間隔是指字元間距######注意：字母間隔可為負值###

letter-spacing：<length> | normal | inherit

登入後複製

###初始值: normal(預設為0) ######應用於: 所有元素######繼承性: 有############text-transform文字轉換############文字轉換用於處理英文的大小寫轉換。 ######語法：###

text-transform:uppercase(全大写) | lowercase(全小写) | capitalize(首字母大写) | none | inherit

登入後複製

###初始值: none######應用於: 所有元素######繼承性: 有########## ##text-decoration文字修飾############文字修飾用於為文字提供修飾線。 ######注意：文字修飾線的顏色與文字顏色相同。 ######語法：###

text-decoration:none | [underline(下划线) || overline(上划线) || line-through(中划线)] | inherit

登入後複製

###初始值: none######應用於: 所有元素######繼承性: 無#######（學習影片分享：###css影片教學###）###

以上是文字css樣式有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！