選擇字體

font-family: "Times New Roman", Times, serif;

注意：字體名稱中包含多個單詞要用("")括起來。

字體顏色

color：#cccccc(16進制)

color: rgb(0%, 100%, 0%) 或者 color: rbg(0, 255, 0)

rgb顏色，百分數表示0-255的一個數

修改字號

font-size

font-szie后面可接keywords(關鍵字) px 百分比 em

px:即像素值，最為常用，默認文本的像素值為16px；

keywords: 總共有7個關鍵字，分別為 xx-large， x-large, large, medium, small x-small, xx-small。但是關鍵字不精確，而且也缺乏靈活性，因此較少使用。

百分比:由于字號是一種可以繼承的屬性，因此使用百分比有時要通過計算。比如: 瀏覽器一般默認的字號都為16px，那么你將一個元素的字號設置為100%，那么這個元素的字號就為16px,也就是說100%對應16px，這是一個基準。因此，如果要將該元素的字號變為32px，那么，用百分比表示就是200%，即16 * 2。接下來，我們來看，如果有下面的結構:

<p> <!--字號為20px--><span>文本</span> <!--字號為75%--> </p>

由于span標簽會繼承p標簽的字號20px，因此，此時span的字號計算公式為20 * 0.75(也就是75%) = 15px。類似的結構可以層層嵌套，只要計算一下就可以了。

em: 表示一個大寫M的高度。但是他的作用與百分比很相近，1em = 100%， .75em = 75%, 2em = 200%。

格式化詞語和字母

斜體化 font-style

italic(斜體) normal(正常) oblique(和italic一樣)

粗體 font-weight

你可以選擇100-900之間的整百數(900超粗，100不可見),但是由于瀏覽器支持的原因，用的很少。一般normal(正常) bold(粗體)

大寫化

text-transform

uppercase(大寫) lowercase(小寫) capitalize(首字母大寫) none(不進行大小寫)

該屬性可以被繼承

小型大寫字母

font-variant: small-cap;

文本修飾

text-decoration

underline line-through overline none

字母間距和字間距

letter-spacing word-spacing

對于這些屬性，可以使用文本尺寸(px em 百分比) 正值代表擴大，負值為縮小。

行高

line-height

px em 百分比 縮放因子

要理解行高，首先要理解一些概念，可以參考這篇文章和里面的鏈接文章《深入理解css中的行高》

使用行高時要注意一些問題:

1 圖片會將整行的行框撐開，但是卻并不改變實際的行高

2 em和百分比是相對于文本的字號來計算的，比如文本字號為12px，而行高被設置為150%(1.5em)，那么行高為12 * 1.5

3 行高可以被繼承，但是em和百分比繼承的是計算值，而縮放因子繼承的是本身。比如p標簽的行高被設置為150%，里面文本字號為10px，那么p里面所有標簽都將繼承15px的行高，而不是150%；但是縮放因子不同，如果p的縮放因子被設置為2，文本字號為10px，那么p里面所有后代標簽都將繼承2這個值，而不是20px的行高

垂直對齊

vertical-align

baseline:基線對齊

top:頂端對齊

middle:中線對齊

bottom:底端對齊

text-top:文本頂端對齊

text-bottom:文本底端對齊

sub:下標

super:上標

em 百分比

具體可以參考《垂直對齊:vertical-align屬性》這篇文章

使用垂直對齊要注意:

1 瀏覽器的默認對齊方式為基線對齊，但是對于圖片沒有基線，故圖片的底端會和基線對齊

2 em和百分比值是相對于行高值來計算的，用來改變元素基線的高度，可正可負，正數是元素的基線升高，負數使元素的基線下降

3 設置處置對齊可影響行框高

4 這個屬性只是用與行內元素，表單元素，以及圖片，表格單元格

文本對齊

text-align

left right center justify(兩端對齊)

文本縮進

text-indent

px em 百分比

使用文本縮進要注意:

1 px是精確值

2 em相對于當前字號進行縮進

3 百分比不是相對于字號，而是相對于當前元素的寬度值來計算

4 可以使用負數來實現負縮進

文本格式化有個快捷方法，就是只使用font屬性，但是該屬性中必須要有字號和字體屬性，同時也可以指定行高，具體做法是在字號的后面加上"/",然后加上行高值。而且這兩種屬性必須在最后，其他屬性可以以任意屬性出現。

?

給列表定義樣式

項目符號和數字

list-style-type

對于無序列表ul有3中項目符號可以選擇

disc(實心圓) square(方形) circle(空心圓)

對于有序列表，有6中數字可以選擇

decimal(十進制) decimal-leadingzero(十進制前置0) upper-alpha(大寫字母) lower-alpha(小寫字母) upper-roman(大寫羅馬) lower-roman(小寫羅馬)

用list-style-type:none 隱藏這些樣式

給項目符號和數字定位

list-style-position

outside:讓項目符號和數字出現在文本外

inside: 讓項目符號和數字出現在文本內

注意:可以使用padding-left調整項目符號和數字的間距，但是這種情況只有使用list-style-position:outside才有效或者根本沒有使用list-style-position。

圖形項目符號

list-style-image

url(images/...jpg)

注意:外部樣式表中圖片的路徑是相對于樣式表，而不是相對于網頁

這種方法可能讓你并不能很好的控制圖片的位置，通常都會用到background-image，這會更好用

列表樣式有一個快捷樣式，list-style，它可以包含上面三種情況。

轉載于:https://www.cnblogs.com/chaoguo1234/archive/2013/02/27/2934665.html

總結

以上是生活随笔為你收集整理的css格式化文本的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。