CSS核心屬性1---文本相關(guān)

關(guān)于文本的css聲明

1、文本大小? {font-size:value;}

說(shuō)明:
1) 屬性值為數(shù)值型時(shí),必須給屬性值加單位,屬性值為0時(shí)除外。
2)單位還可以是pt, 9pt=12px;
3)為了減小系統(tǒng)間的字體顯示差異,IE Netscape Mozilla的瀏覽器制作商于1999年召開(kāi)會(huì)議,共同確定16px/ppi為標(biāo)準(zhǔn)

字體大小默認(rèn)值,即1em.默認(rèn)情況下,1em=16px,0.75em=12px;

4)使用絕對(duì)大小關(guān)鍵字
xx-small?? =9px
?x-small???? =11px
?small???????? =13px

medium???? =16px
?large???????? =19px
?x-large????? =23px
?xx-large??? =27px


2、文本顏色:{color:#colorValue;}?

顏色值的縮寫:

當(dāng)表示三原色的三組數(shù)字同時(shí)相同時(shí),可以縮寫為三位;

當(dāng)用十六進(jìn)制表示顏色值時(shí),需要在顏色值前加“#”;


3、文本字體:{font-family:字體1,字體2,字體3;}

font-family:"幼圓","大粗","華文細(xì)黑";

說(shuō)明:瀏覽器首先會(huì)尋找字體1、如存在就使用該字體來(lái)顯示內(nèi)容,如在字體1不存在的情況下,則會(huì)尋找字體2,如果

字體2也不存在,按字體3顯示內(nèi)容,如果字體3 也不存在;則按系統(tǒng)默認(rèn)字體顯示;


當(dāng)字體是中文字體時(shí),需加雙引號(hào);

當(dāng)英文字體中有空格時(shí),需加雙引號(hào)如(“Times New Roman”)

當(dāng)英文字體只有一個(gè)單詞組成是不加雙引號(hào);如:(Arial);

Windows中文版本操作系統(tǒng)下,中文默認(rèn)字體為宋體或者新宋體,英文字體默認(rèn)為Arial.

?
4、加粗:{font-weight:bolder(更粗的)/bold(加粗)/normal(常規(guī))/100—900;}

說(shuō)明:在css規(guī)范中,把字體的粗細(xì)分為9個(gè)等級(jí),分別為100——900,其中100對(duì)應(yīng)最輕的

字體變形,而900對(duì)應(yīng)最重的字體變形,

一般400=normal,700=bold。

100—500常規(guī)字體 取消加粗

600—900加粗字體


5、傾斜:font-style:italic(傾斜度小)/oblique(傾斜度大)/normal(取消傾斜,常規(guī)顯示);

說(shuō)明:italic和oblique都表示傾斜,不過(guò)oblique的幅度要大一點(diǎn)。但一般瀏覽器對(duì)它們的區(qū)分不是很明顯。


6、水平對(duì)齊方式{text-align:left(左對(duì)齊)/right(右對(duì)齊)/center(居中對(duì)齊)/justify(兩端對(duì)齊);}


7、垂直對(duì)齊方式{vertical-align:top/bottom/middle;}


8、行高{line-height:normal/value;}

說(shuō)明:

1)當(dāng)單行文本的行高等于容器高時(shí),可實(shí)現(xiàn)單行文本在容器中垂直方向居中對(duì)齊;

2)?? 當(dāng)單行文本的行高小于容器高時(shí),可實(shí)現(xiàn)單行文本在容器中垂直中齊以上任意位置的定位;

3)?? 當(dāng)單行文本的行高大于容器高時(shí),可實(shí)現(xiàn)單行文本在容器中垂直中齊以下任意位置的定位。


倍行高:{line-height:2;} 2倍 ,{line-height:1.5em;}1.5倍;

注:當(dāng)使用倍行高為單位時(shí),不加PX;


字號(hào),行高,字體 font-size:12px; line-height:20px;font-family:"微軟雅黑";

font屬性簡(jiǎn)寫:font:12px/1.5em? "宋體";

?
說(shuō)明:font的屬性值應(yīng)按以下次序書(shū)寫(各個(gè)屬性之間用空格隔開(kāi))

(1)簡(jiǎn)寫時(shí) , font-size和line-height只能通過(guò)斜杠/組成一個(gè)值,不能分開(kāi)寫。

(2) 順序不能改變 ,這種簡(jiǎn)寫法只有在同時(shí)指定font-size和font-family屬性時(shí)才起作用 。


word-wrap:break-word;強(qiáng)制換行


9、文本修飾:text-decoration:none/underline/overline/line-through/blink;

說(shuō)明:

none:沒(méi)有修飾

underline:添加下劃線

overline:添加上劃線

line-through:添加刪除線

blink:閃爍

(高版本瀏覽器不支持blink屬性)


10、首行縮進(jìn):{text-indent:value;}
說(shuō)明:

1)text-indent可以取負(fù)值;

2)text-indent屬性只對(duì)第一行起作用。
?

11、使用 text-transform 屬性 進(jìn)行字母大小寫設(shè)置。

值?????????????????????????????????????????????? 描述

none???????????????????? 默認(rèn)。定義帶有小寫字母和大寫字母的標(biāo)準(zhǔn)的文本。

capitalize???????????? 文本中的每個(gè)單詞以大寫字母開(kāi)頭。

uppercase??????????? 定義僅有大寫字母。

lowercase??????????? 定義無(wú)大寫字母,僅有小寫字母。

inherit????????????????? 規(guī)定應(yīng)該從父元素繼承 text-transform 屬性的值。


12、字間距{letter-spacing:value;}控制英文字母和漢字的字距。(英文字母和字母)


13、詞間距{word-spacing:value;}控制英文單詞詞距。(通用于英文詞和詞之間的間距)


14、文本流控制{layout-flow:horizontal/vertical-ideographic;}(只支持IE瀏覽器)
?說(shuō)明:

1)horizontal自左向右
2)vertical-ideographic自上而下

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.塊級(jí)元素和行內(nèi)元素 塊級(jí)(block-level)元素;行內(nèi)(內(nèi)聯(lián)、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,200評(píng)論 1 4
  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,143評(píng)論 1 92
  • 本課來(lái)自http://www.imooc.com/learn/9請(qǐng)不要用作商業(yè)用途。 HTML5 HTML介紹 H...
    PYLON閱讀 3,448評(píng)論 0 5
  • 文本樣式的font屬性 文本大?。篺ont-size示例:{fount-size:value;}說(shuō)明:屬性值為數(shù)字...
    筱南獨(dú)舞閱讀 445評(píng)論 0 1
  • 一 外部式css樣式 (也可稱為外聯(lián)式)就是把css代碼寫一個(gè)單獨(dú)的外部文件中,這個(gè)css樣式文件以“.css...
    KunMitnic閱讀 1,120評(píng)論 0 1

友情鏈接更多精彩內(nèi)容