文本樣式

1.段落

通過(guò)文本的屬性,我們可以指定很多東西。顏色、字符間距、文本如何對(duì)齊、如何對(duì)文本做裝飾等等。

<p style="color:red;"> 讓文字有不同顏色。

<p style="text-indent:2em;"> 第一行縮進(jìn)。text-indent 后面跟長(zhǎng)度單位,em 指的是當(dāng)前字體大小的倍數(shù),1em 就是這個(gè)字有多寬,縮進(jìn)這個(gè)寬度。若輸入百分比為整個(gè)頁(yè)面的百分比,與em相同為相對(duì)值??奢斎虢^對(duì)單位,如 in (英寸)、cm(厘米)、 mm(毫米)、 px(像素)、 pt(1/72英寸)??梢詾樨?fù)值。

<p style="text-indent=-2em;padding:2em;"> 懸掛縮進(jìn)(第二行開始比第一行縮進(jìn))。如果只用 padding 效果為設(shè)定內(nèi)邊距。

<p style="line-height:2em;"> 指定行高。用 2 也是一樣的。行高只看數(shù)字,為當(dāng)前字體尺寸倍數(shù)。帶單位的數(shù)據(jù)為絕對(duì)間距。normal 為正常行間距。

<p style="text-align:left;"> 指定對(duì)齊方式。left / right / center / justify (兩端對(duì)齊)

<p style="word-spacing:30px;"> 單詞間空格(英文)。只看空格,中文無(wú)空格所以沒有用。

<p style="letter-spacing:10px;"> 字符間距。

<p style="text-transform:uppercase;"> 轉(zhuǎn)變字母大小寫(英文)。uppercace(大寫) / lowercase(小寫) / capitalize(首字母大寫)

<p style="text-decoration:underline overline line-through;"> 文字裝飾(主要指畫線),可組合。

<p style="white-space:normal;">空白字符處理。normal(把連續(xù)空格和換行當(dāng)作一個(gè)空格) / pre(有多少空格都承認(rèn),回車也承認(rèn),不自動(dòng)卷繞) / pre-wrap(自動(dòng)卷繞,承認(rèn)空格回車) / nowrap(不卷繞) / pre-line(合并空白,保留換行) 。

<p style="direction:ltr;"> 文字書寫方向。ltr rtl 僅最后一行句號(hào)放到前面。中英文不會(huì)改變文字方向。


2.字體

可以指定文字的很多東西:字體、文字大小、是否加粗、斜體、變形、裝飾(陰影,輪廓)

font-family 指定字體有兩種方式:指定字體系列,給出字體具體名稱。

給出字體名稱對(duì)于英文字體,不同操作系統(tǒng)、不同瀏覽器名字基本一樣。中文字體名字可能不一樣,需要測(cè)試。如果瀏覽器沒有這種字體會(huì)用默認(rèn)字體替換。這時(shí)可以加入多種備選字體。

font-family:Times,TimesNR,serif; Times為中英文默認(rèn)字體,中文用宋體。


字體系列有 5 個(gè)通用系列:

serif 大多數(shù)英文字體,是一種矢量字體,線條有粗細(xì),會(huì)等比例放大,會(huì)在豎線兩端出現(xiàn)小橫線。

sans-serif 它的豎線上下兩端不出現(xiàn)橫線。(如H,I

monospace 指的是等寬的字,比如像用于寫程序代碼,表達(dá)終端輸出,所有字寬度一樣。

cursive 表示類似手寫的字體。

fantasy 無(wú)法歸類的,比如不是文字而是形狀、符號(hào)的字體。


font-style:normal / italic / oblique

normal 不傾斜的

italic 字體廠家做好的斜體,斜體字

oblique 瀏覽器計(jì)算產(chǎn)生的斜體,傾斜的文字


font-variant:small-caps; 小的大寫字母,比正常的大寫字母小一號(hào),但所有字母都是大寫。

font-weight:bold; 加粗??梢越o100-900間的數(shù)字。

font-size:2em; 把字體變大或變小。也可用絕對(duì)值單位,但不是所有瀏覽器都支持。


3.效果

text-shadow:3px 5px 5px rgba(0,255,0,0.5);

陰影。4個(gè)參數(shù),第一參數(shù) 3px 表示陰影在 x 方向距離字延伸多少,5px 表示往下延伸5個(gè)像素,5px 表示陰影模糊范圍,rgba 為字體顏色。

陰影可以有很多變化方式,最終靠你自己調(diào)配這4個(gè)值可以做出很多效果。陰影可以有很多塊。

<h1 style="text-shadow:0px -1px 0px #000000,0px 1px 3px #606060;color:#606060">

outline-color:red;outline-style:solid;outline-width:thin;

輪廓必須給出顏色和線形。最后的寬度可用數(shù)字表示像素。

最后編輯于
?著作權(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)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

  • font-family:這是文本字體。 使用“,”分隔的字體族名稱,如 font-family: Arial, H...
    霜之朝閱讀 361評(píng)論 0 0
  • CSS提供了幾個(gè)屬性來(lái)操作字體。font,可以很方便的指定字體的屬性。比如: 字體加粗,字體的風(fēng)格:斜體和字體變形...
    勿以浮沙筑高臺(tái)閱讀 357評(píng)論 0 0
  • 一、常見的文本樣式:font-size:文字大?。ㄒ话憔鶠榕紨?shù));font-family:"STKaiti","s...
    波羅的海de夏天閱讀 333評(píng)論 0 0
  • 感恩偉大的格西老師把《能斷金剛》分享給大家,把一件平凡的事情做極致,可以成為偉大,讓愿意追隨者都追隨不...
    椰子與你同行閱讀 321評(píng)論 0 1
  • 【日更124】 昨天看到一則娛樂(lè)新聞: 在某電影節(jié)論壇上,導(dǎo)演馮小剛又“語(yǔ)出驚人”了:“剛才說(shuō)到垃圾電影,是不是有...
    唐斬2086閱讀 273評(píng)論 0 0

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