????????????????????????????????????
css文本設置
color 設置文字的顏色,如: color:red;
font-size 設置文字的大小,如:font-size:12px;
font-family 設置文字的字體,如:font-family:'微軟雅黑';
font-style 設置字體是否傾斜,如:font-style:'normal'; 設置不傾斜,font-style:'italic';設置文字傾斜
font-weight 設置文字是否加粗,如:font-weight:bold; 設置加粗 font-weight:normal 設置不加粗
font 同時設置文字的幾個屬性,寫的順序有兼容問題,建議按照如下順序寫: font:是否加粗 字號/行高 字體;如: font:normal 12px/36px '微軟雅黑';
line-height? ? 設置文字的行高,如:line-height:24px;
text-decoration? ? 設置文字的下劃線,如:text-decoration:none; 將文字下劃線去掉
text-indent? ??設置文字首行縮進,如:text-indent:24px; 設置文字首行縮進24px
text-align? ??設置文字水平對齊方式,如 text-align:center 設置文字水平居中
? ??????????????????????????????????????????????字體的分類
在網頁中將字體分成5大類:
? ??serif(襯線字體)
? ??sans-serif(非襯線字體)
? ??monospace (等寬字體)
? ??cursive (草書字體)
? ??fantasy (虛幻字體)
可以將字體設置為這些大的分類,瀏覽器會自動選擇指定的字體,并應用樣式
一般會將字體的大分類,指定為font-family中的最后一個字體
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 字體的其它樣式
font-style可以用來設置文字的斜體
- 可選值:
normal 默認值,文字正常顯示
italic 文字會以斜體顯示
oblique 文字會以傾斜的效果顯示
- 大部分瀏覽器都不會對傾斜和斜體做區(qū)分,也就是說我們設置italic和oblique效果是一樣的
- 一般我們只會使用italic
..................................................................................................................................................
font-weight可以用來設置文本的加粗效果
- 可選值:
normal 默認值,文字正常顯示
bold 文字加粗顯示
該樣式也可以指定100-900之間的9個值
但是由于用戶的計算機往往沒有這么多級別的字體,所以200有可能比100粗,但也有可能是一樣的
..................................................................................................................................................
font-variant可以用來設置小型大寫字母
- 可選值:
normal 默認值,文字正常顯示
small-caps 文本以小型大寫字母顯示
小型大寫字母:
將所有的字母都以大寫形式顯示,但是小寫字母的小型大寫,要比大寫字母小一些
..................................................................................................................................................
在CSS中還為我們提供了一個樣式叫font,使用該樣式可以同時設置字體相關的所有樣式
可以將字體的樣式值統一寫在font樣式中,不同的值之間使用空格隔開
使用font設置字體樣式時,斜體 加粗 小大字母,沒有順序要求,甚至可寫可不寫,如果不寫則使用默認值
但是要求文字的大小和字體必須寫,而且字體必須是最后一個樣式,大小必須是倒數第二個樣式
實際上使用簡寫屬性也會有一個比較好的性能
? ??????????????????????????????????????????????????行間距
行間距 = 行高 - 字體大小
在CSS中并沒有直接提供設置行間距的方式,我們只能通過設置行高來間接的設置,行高越大行間距越大
使用line-height來設置行高
行高類似于我們上學用的單線本,單線本是一行一行的,線與線之間的距離就是行高
網頁中的文字實際上也是寫在一個看不見的線中的,而文字會默認在行高中垂直居中顯示
..................................................................................................................................................
通過設置line-height可以間接的設置行高
可以接收的值:
1.直接接收一個大小
2.可以指定一個百分數,則會相對于字體去計算行高
3.可以直接傳一個數值,則行高會設置字體大小相應的倍數
..................................................................................................................................................
對于單行文本來說,可以將行高設置為和父元素的高度一致,這樣可以是單行文本在父元素中垂直居中
..................................................................................................................................................
在font中也可以指定行高
在字體大小后可以添加/行高,來指定行高,該值是可選的,如果不指定則會使用默認值
? ??????????????????????????????????????????文本的樣式
text-transform可以用來設置文本的大小寫
可選值:
none 默認值,該怎么顯示就怎么顯示,不做任何處理
capitalize 單詞的首字母大寫,通過空格來識別單詞
uppercase 所有的字母都大寫
lowercase 所有的字母都小寫
..................................................................................................................................................
text-decoration可以用來設置文本的修飾
可選值:
none:默認值,不添加任何修飾,正常顯示
underline 為文本添加下劃線
overline 為文本添加上劃線
line-through 為文本添加刪除線
..................................................................................................................................................
超鏈接會默認添加下劃線,也就是超鏈接的text-decoration的默認值是underline
如果需要去除超鏈接的下劃線則需要將該樣式設置為none
..................................................................................................................................................
超鏈接會默認添加下劃線,也就是超鏈接的text-decoration的默認值是underline
如果需要去除超鏈接的下劃線則需要將該樣式設置為none
..................................................................................................................................................
text-align用于設置文本的對齊方式
可選值:
left 默認值,文本靠左對齊
right 文本靠右對齊
center 文本居中對齊
justify 兩端對齊
- 通過調整文本之間的空格的大小,來達到一個兩端對齊的目的
..................................................................................................................................................
text-indent用來設置首行縮進
這個值一般都會使用em作為單位
當給它指定一個正值時,會自動向右側縮進指定的像素
如果為它指定一個負值,則會向左移動指定的像素
通過這種方式可以將一些不想顯示的文字隱藏起來