css字體、文本相關
一、字體樣式
字體顏色
設置字體顏色,使用color來設置字體顏色 設置文字大小,使用font-size設置,瀏覽器中一般默認的文字大小都是16px 設置文字的字體,通過font-family可以指定文字的字體,當採用某種字體時,如果瀏覽器支持則使用該字體,如果字體不支持,則使用默認字體,該樣式可以同時指定多個字體,多個字體之間使用,分開,當採用多個字體時,瀏覽器會優先使用前邊的字體,如果前邊沒有在嘗試下一個。瀏覽器使用的字體默認就是計算機中的字體,如果計算機中有,則使用,如果沒有就不用。
二、字體分類
在網頁中將字體分成5大類:
serif(襯線字體) sans-serif(非襯線字體) monospace (等寬字體) cursive (草書字體) fantasy (虛幻字體)
可以將字體設置爲這些大的分類,當設置爲大的分類以後,瀏覽器會自動選擇指定的字體並應用樣式,一般會將字體的大分類,指定爲font-family中的最後一個字體 。
三、字體的其他樣式
font-style可以用來設置文字的斜體
可選值: normal,默認值,文字正常顯示。 italic 文字會以斜體顯示。 oblique 文字會以傾斜的效果顯示。 大部分瀏覽器都不會對傾斜和斜體做區分,一般我們只會使用italic。
font-weight可以用來設置文本的加粗效果:
可選值: normal,默認值,文字正常顯示。 bold,文字加粗顯示。
font-variant可以用來設置小型大寫字母
可選值: normal,默認值,文字正常顯示。 small-caps 文本以小型大寫字母顯示。
font同時設置字體相關的所有樣式
可以將字體的樣式的值,統一寫在font樣式中,不同的值之間使用空格隔開。 使用font設置字體樣式時,斜體 加粗 小大字母,沒有順序要求,甚至可寫可不寫。 如果不寫則使用默認值,但是要求文字的大小和字體必須寫,而且字體必須是最後一個樣式。 大小必須是倒數第二個樣式。
四、行間距
line-height來設置行高
在CSS並沒有爲我們提供一個直接設置行間距的方式。 我們只能通過設置行高來間接的設置行間距,行高越大行間距越大。 行間距 = 行高 - 字體大小。
line-height可選值
1.直接就收一個大小。 2.可以指定一個百分數,則會相對於字體去計算行高。 3.可以直接傳一個數值,則行高會設置字體大小相應的倍數。 4.在font中也可以指定行高,在字體大小後可以添加/行高,來指定行高,該值是可選的,如果不指定則會使用默認值。
五、文本樣式
text-transform可以用來設置文本的大小寫
可選值: none 默認值,該怎麼顯示就怎麼顯示,不做任何處理。 capitalize 單詞的首字母大寫,通過空格來識別單詞。 uppercase 所有的字母都大寫。 lowercase 所有的字母都小寫。
text-decoration可以用來設置文本的修飾
可選值: none:默認值,不添加任何修飾,正常顯示。 underline 爲文本添加下劃線。 overline 爲文本添加上劃線。 line-through 爲文本添加刪除線。 ps:如果需要去除超鏈接的下劃線則需要將該樣式設置爲none。
letter-spacing可以指定字符間距
word-spacing可以設置單詞之間的距離。 實際上就是設置詞與詞之間空格的大小。
text-align用於設置文本的對齊方式
可選值: left 默認值,文本靠左對齊。 right , 文本靠右對齊。 center , 文本居中對齊。 justify , 兩端對齊。
text-indent用來設置首行縮進
當給它指定一個正值時,會自動向右側縮進指定的像素。 如果爲它指定一個負值,則會向左移動指定的像素。 通過這種方式可以將一些不想顯示的文字隱藏起來。 這個值一般都會使用em作爲單位。