首頁  >  文章  >  web前端  >  文字css樣式有哪些

文字css樣式有哪些

青灯夜游
青灯夜游原創
2021-12-09 11:13:524955瀏覽

文字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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn