CSS設置文本樣式的屬性有哪些

1、文本縮進：text-indent

創新互聯公司是專業的柯橋網站建設公司，柯橋接單;提供成都網站建設、網站設計,網頁設計,網站設計,建網站,PHP網站建設等專業做網站服務;采用PHP框架,可快速的進行柯橋網站開發網頁制作和功能擴展;專業做搜索引擎喜愛的網站,專業的做網站團隊,希望更多企業前來合作!

2、文本對齊：text-align

3、字間隔：word-spacing

4、字母間隔：letter-spacing

5、字母轉換：text-transform

6、文本裝飾：text-decoration

7、處理空白符：white-space

8、文本方向：decoration

9、文本顏色：color

10、背景顏色：background-color

11、文本陰影：text-shadow

還有一些屬性，不是很常用，就沒有列舉了，了解每個具體的使用方法，可以到百度 "w3cschool "了解！

希望對你有所幫助。

「譯」CSS 文本樣式-Typography

為了改變網頁字體，你可以使用?font-family?property。

注意， 當字體的名字多于one word，它必須被雙引號括起來 ，如下：

若需加粗文本，可使用font-weight property。

若不想設置加粗，則可設置value為normal。

默認情況下，?font-weight為normal。但是Some elements, like headers, have built-in bold styling。可以根據elements的默認值來選擇是否需調整其font-weight。

font-weight 的值也可被設為100的倍數。如：

1. 400? is the defaul t?font-weight?of most text.

2. 700 ?signifies a bold ?font-weight.

3. 300 ?signifies a light ?font-weight.

注意not all fonts?都支持使用數字來表示font-weight。

你可以使用font-style?property來使得文本變為斜體。其默認值是normal。

改變文本的對齊方式，可以使用text-align property.其value可設為left，right，center。

另一個可修改的屬性為line-height，它可以修改文本的leading（行距）。下圖展示了二者的關系：

你可以設置不同的行距來增強文本的legible（可讀性）。有兩種values：

1.A unitless number（無單位數值）, such as?1.2。這個數值是一個按照font size的比例（ratio）計算的絕對的值。

2，A number specified by unit（有單位數值）, such as?12px。

通常使用A unitless number（無單位數值）來表示 ，因為其更加responsive（響應靈活） and based exclusively（獨家） on the current font size。也就是說當你的font size變時，a unitless?line-height 也會自動調整。

1、使用CSS 設置文本樣式有哪些？

1、使用CSS 設置文本樣式有：color、letter-spacing、line-height、text-align、text-decoration、word-spacing

2、使用CSS 設置背景顏色的標簽background-color，背景圖片的標簽：background

3、使用CSS 設置的其他元素有哪些？margin、padding、position等

CSS字體與文本樣式詳解

學習導航

1、css中的長度與顏色

2、css中的文字屬性

3、css中的文本屬性

1、文字樣式屬性

font-family 字體屬性

作用：元素內文字以什么字體來顯示

語法：font-family:[字體1],[字體2],[......];

說明：含空格字體名和中文，用英文引號（"）括起；多個字體用英文逗號隔開；引號嵌套，外使用雙引號，內使用單引號。

font-size 文字大小

作用：元素內文字大小

語法：font-size:絕對單單位，相相對單位

color 文字顏色

語法：顏色名|十六進制|RGB

font-weight 文字粗細

語法：font-weight:normal 正常 | bold 加粗 | bolder 加粗 | lighter 細體 | 100-900

說明：默認值：normal 400等同于normal,而700等同于bold

font-style 文字樣式

作用：為元素內文字設置樣式

語法：font-style:normal 正常顯示 | italic 文字傾斜 | oblique 文字傾斜（基本不用）

font-variant 字體變形

作用：設置元素中文本為小型大寫字母

語法：font-variant:normal 正常顯示| small-caps 將英文大小寫字母調成為同寬

font 屬性簡寫

語法：font:font-style font-variant ?font-weight font-size/line-height font-family;

說明：值之間空格隔開，注意書寫順序。

2、CSS文本樣式

text-align

作用：設置元素內文本的水平對齊方式

語法：tex-align:left 左對齊?| right 右對齊 | center 居中對齊 | justify 兩端對齊

注意：該屬性對塊級元素設置有效

line-height

作用：設置元素中文本行高

語法：line-height:長度值 | 百分比

說明：一行文字的高度，行高指文本行的基線間的距離

文字基線

注意：基線并不是漢字文字的下沿，看圖理解自行理解

行高和行距

行高：基線到基線的距離

行距：底線到頂線的距離

注意：看圖自行理解

行框和行內框

注意：看圖自行理解

vertical-align

作用：設置元素內容的垂直方式

語法：vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom |?長度 | 百分比

注意：看圖自行理解

text-indent 首行縮進

3、文本樣式屬性

text-transform:?capitzlize?首字母大寫 |?uppercase?字母大寫?|?lowercase? 字母小寫 |?none 正常

text-decoration:?underline?下劃線 |?overline 上劃線?|?line-through?刪除線 | none 正常

綜合實操案例

如果您覺得有用，記得在下方點贊、關注、留言，我會定期奉 上更多的驚喜哦，您的打賞支持才是我繼續努力的動力，么么噠。

每日分享在學習過程中總結的學習經驗，學習筆記，筆試題，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以學習為目的，每天閱讀一篇文章，了解身邊的技術。陪有夢想的人一起成長！

如何對文本進行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：值;

具體cssline-height屬性是如何設置文本文字的行間距，大家可以參考之前的文章【css如何設置行間距？css文本文字的行間距設置】，希望對大家有所幫助。

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

text-align屬性：設置元素中的文本文字的水平對齊方式。用法如下：

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

left：設置文本文字左對齊。默認值：由瀏覽器決定。

right：設置文本文字右對齊。

center：設置文本文字居中對齊。

justify：實現兩端對齊文本效果。

4、css文本縮進屬性

text-indent屬性：設置文本縮進。

具體csstext-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;

7、文本文字間距的屬性

word-spacing屬性：設置文字或單詞之間的間距，單詞之間的間距=word-spacing+空格大小。

letter-spacing屬性：設置字母間的間隔。

8、文本文字陰影的屬性

text-shadow屬性：向文本文字設置陰影