首頁 > web前端 > css教學 > css如何對文字進行修飾? css修飾文字樣式的9種屬性(總結)

css如何對文字進行修飾? css修飾文字樣式的9種屬性(總結)

青灯夜游
發布: 2018-10-13 15:41:36
原創
12409 人瀏覽過

css如何對文字進行修飾?這篇文章就為大家總結了css修飾文本文字的一些方法,介紹一些css 修飾文本的屬性,讓大家了解css修飾文本文字的9種屬性有哪些。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

1、css設定文字文字顏色的屬性

color屬性:設定文字文字顏色。用法如下:

color:颜色值;
登入後複製

color屬性可以設定的合法顏色值包括:16進位顏色值(例:#ffffff),rgb顏色值【範例:rgb(0,0,0)】,rgba顏色值【例:rgb(0,0,0,0.5),0.5表示透明度】,hsl顏色值【例:hsl(120,65%,75%)】,hsla顏色值【hsl(120,65%,75 %,0.3),0.3表示透明度】。

2、css文字文字行高(行間距)的屬性

line-height屬性:設定行間的距離(行高)。用法如下:

line-height:值;
登入後複製

具體css line-height屬性是如何設定文字文字的行間距,大家可以參考之前的文章【css如何設定行間距? css文字文字的行間距設定】,希望對大家有幫助。

3、css設定文字文字的水平對齊方式的屬性

#text-align屬性:設定元素中的文字文字的水平對齊方式。用法如下:

text-align: left || right || center || justify ;
登入後複製

left:設定文字文字左對齊。預設值:由瀏覽器決定。   

right:設定文字文字右對齊。   

center:設定文字文字以居中對齊。   

justify :實現兩端對齊文字效果。   

4、css 文字縮排屬性

text-indent屬性:設定文字縮排。

具體css text-indent屬性是怎麼設定文字縮排的,大家可以參考【css如何實現首行縮排效果? text-indent屬性實作首行縮排】。

5、設定文字文字裝飾效果

text-decoration屬性:定義新增到文字的修飾。

說明:

這個屬性允許對文字設定某種效果,如加底線。如果後代元素沒有自己的裝飾,祖先元素上設置的裝飾會「延伸」到後代元素中。

用法:

text-indent:none ||  [underline(下划线) || overline(上划线) || line-through(中划线)] || blink ;
登入後複製

none:預設值,定義標準的文字。   

underline :定義文字下的一條線。   

overline:定義文字上的一條線。   

line-through:定義穿過文字下方的一條線。   

blink:定義閃爍的文字。

6、文字字元的大小寫轉換屬性

text-transform屬性:控製文字字元的大小寫。

用法:

text-transform:uppercase(全大写) || lowercase(全小写) || capitalize(首字母大写) || none ;
登入後複製

大家可以參考文章【css如何設定字母的大小寫? text-transform屬性設定字母的大小寫】,裡面有具體介紹。

7、文字文字間距的屬性

word-spacing屬性:設定文字或單字之間的間距,單字之間的間距= word- spacing 空格大小。

letter-spacing屬性:設定字母間的間隔。

大家可以參考文章【css如何設定文字間距? word-spacing屬性與letter-spacing屬性的簡單比較】,裡面介紹了word-spacing屬性和letter-spacing屬性設定文字文字的間距的方法,以及它們的差異。

8、文字文字陰影的屬性

text-shadow屬性:設定陰影給文字文字

#如何實作文字文字陰影效果,大家可以閱讀文章【css3如何加入文字陰影效果? text-shadow設定文字陰影效果】了解詳情。

總結:以上就是這篇文章的全部內容,希望能對大家的學習有所幫助。更多相關教學請造訪 CSS基礎影片教學 CSS3影片教學bootstrap教學

以上是css如何對文字進行修飾? css修飾文字樣式的9種屬性(總結)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板