字體的樣式/字體的分類/字體的其它樣式/行間距/文本的樣式

???????????????????????????????????? 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作為單位

當給它指定一個正值時,會自動向右側縮進指定的像素

如果為它指定一個負值,則會向左移動指定的像素

通過這種方式可以將一些不想顯示的文字隱藏起來

?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 1.塊級元素和行內元素 塊級(block-level)元素;行內(內聯、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,198評論 1 4
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,111評論 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 28,797評論 1 45
  • HTML 5 HTML5概述 因特網上的信息是以網頁的形式展示給用戶的,因此網頁是網絡信息傳遞的載體。網頁文件是用...
    阿啊阿吖丁閱讀 4,928評論 0 0
  • 學習CSS的最佳網站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,181評論 0 1

友情鏈接更多精彩內容