- 文本樣式的font屬性
-
文本大小：font-size
示例：{fount-size:value;}
說明：屬性值為數字型，必須給屬性值加單位，屬性值為0時除外。
單位可以是pt、px、em （9pt=12px）
em是相對文字單位，當前文字的字符大小；
pt是絕對長度單位，表示多少個點；
px是相對長度單位，使用比較廣泛。 -
文本字體：font-family
示例：{font-family:"Times New Roman",Serif}
瀏覽器首先會尋找字體1，如果存在就使用該字體來顯示內容，如果字體1不存在就會尋找字體2，如果字體2不存在就會顯示默認字體；
當字體是中文時需加雙引號；
當英文字體中有空格時需加雙引號；
當英文字體只有一個單詞組成是不加雙引號； - ** 文本粗細**：font-weight
示例：{font-weight:bolder(更粗)/bold(加粗)/normal(常規)/lighter(更細)/100-900;}
在css規范中，把字體的粗細分為9個等級，分別為100——900，其中100對應最輕的字體變形，而900對應最重的字體變形；
400等同于normal；
600-900加粗字體。 - ** 文本傾斜**：font-style
示例：{font-style:italic(傾斜度小)/oblique(傾斜度大)/normal(取消傾斜，常規顯示);}
italic和oblique都表示傾斜，不過oblique的幅度要大一些，區分不明顯 -
文本顏色：color
示例：{color:顏色值}
用十六進制表示顏色值：0123456789ABCDEF;
顏色模式：光色模式：
R G B
FF 00 00
顏色值的縮寫：當表示三原色的三組數字同時相同，可以縮寫為三位；當用十六進制表示顏色值時，需要在顏色值前面加上#。 -
文本行高：line-height
示例：{line-height: normal/value;}
當單行文本的行高等于容器高時，可實現單行文字在容器中垂直方向居中對齊；
當單行文本的行高小于容易高時，可實現單行文字在容器中垂直對齊以上任意位置定位；
當單行文本的行高大于容器高時，可實現單行文本在容器中垂直對齊以下任意位置的定位；
line-height與font-size的計算值之差（在CSS中成為“行間距”）分為兩半，分別加在一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。 -
文字屬性font簡寫
示例：{font:12px "宋體"}；
font的屬性值應該按照以下順序書寫（各個屬性之間用空格隔開）
順序：font-style font-weight font-size/line-height font-family
簡寫時，font-size和line-height只能通過斜杠/組成一個值，不能分開。
順序不能改變。
- 文本樣式的text屬性
- text-align：水平對齊方式
{text-align: left/right/center/justify(“兩端對齊對中文不起作用”);} - vertical-align:垂直對齊方式
{vertical-align: top/bottom/middle;}
指定圖片垂直對齊方式，相對于其他文字，該屬性只對inline-block類型的元素起作用，他設置的是元素左右兩邊的元素對于自己的對齊方式。
- 文字樣式的運用規范
- 文本修飾：text-decoration
{text-decoration: none/underline/overline/line-through/blink;}
none：沒有修飾；underline：添加下劃線；overline：添加上劃線；line-through：添加刪除；blink：閃爍。 - 文字縮進：text-indent
{text-indent: value;}
text-indent可以取負值，如果使用負值，那么首行會被縮進到左邊；
text-indent只對第一行起作用。 - 字符間距：letter-spacing
{letter-spacing:value;}
控制英文字母和漢子的間距。 - 字間距：word-spacing
{word-spacing: value;}
控制英文單詞詞句 - 元素空白的處理方式：white-space
{whtie-space: normal | pre | nowrap | pre-wrap | pre-line};}
normal：默認處理方式，空白會被瀏覽器忽略；
pre：用等寬字體顯示預先格式化的文本，不合并文字間的空白距離，當文字超出邊界時不換行；
nowrap：強制在同一行內顯示所有文本，合并文本間的多余空白，直到文本結束或者遭遇br對象；
pre-wrap：用等寬字體顯示預先格式化的文本，不合并文字間的空白距離，當文字碰到邊界時發生換行；
pre-line：保持文本的換行，不保留文字間的空白距離，當文字碰到邊界時發生換行。 - 控制元素中的字母：text-transform
{text-transform: capitalize | uppercase | lowercase;}
capitalize：首字母轉大寫；
uppercase ：所有字母轉大寫；
lowercase：所有字母轉小寫。
- 文字添加陰影和自動換行
- text-shadow：規定添加到文本的陰影效果
{text-shadow: h-shadow v-shadow blur color;}
h-shadow ：必須寫，水平陰影的位置，允許負值；
v-shadow：必須寫，垂直陰影的位置，允許負值；
blur：可選，模糊的距離；
color：陰影的顏色。 - word-wrap：自動換行
{word-wrap: normal/break-word;}
normal：默認，只在允許的斷字點換行；
break-word：在長單詞或者URL地址內部進行換行。
