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ù)字表示像素。