html文字和段落的屬性
(1) 字體 Font-family 屬性
可給字體 Font-family 屬性設(shè)置一種或多種字體,這樣使得客戶端瀏覽網(wǎng)頁時如果沒有第一種字體,則順延下一種字體顯示。如果 Font-family屬性中指定的字體在客戶端都沒有,則以系統(tǒng)默認字體顯示。
可設(shè)置字體樣式代碼如下:
.style1{
font-family: "方正蘭亭超細黑簡體","微軟雅黑","黑體";}
當文字引用 style1 類樣式時,如果沒有“方正蘭亭超細黑簡體”字體,則用“微軟雅黑”字體顯示;如果也沒有“微軟雅黑”字體,則用“黑體”字體顯示文字;如果客戶端也沒有“黑體”字體,則用瀏覽器默認的字體顯示文字。
(2)字號Font-size 屬性
衡量字體大小的單位如下。
1)px(像素):根據(jù)顯示器的分辨率來確定長度。
2)pt(字號):根據(jù) Windows 系統(tǒng)定義的字號大小來確定長度。
3)in、cm、mm(英寸、厘米、毫米):根據(jù)顯示的實際尺寸來確定長度。此類單位不隨顯示器的分辨率改變而改變。
4)ex:當前字母“x”的高度,一般為字體尺寸的一半。
5)%:以當前文本的百分比定義尺寸,例如,{font-size:200%}是指文字大小為原來的2倍。
6)em:相對長度單位,單位 em 是一種相對的字體高度,如設(shè)置 body 字體大小為 lem,即相當于是 lem=16px,在其他樣式中設(shè)置字體大小為 0.8em,那么換算為像素單位是 1x0.8x16px=12.8px。通過修改 body 標簽中字號的大小,就能按比例修改所有字體大小。
(3)字體 color 屬性
字體的顏色屬性 color 的值以#號開頭,可用3位十六進制數(shù)表示,其中第1 位表示紅色,第2位表示綠色,第3位表示藍色,如#00f表示藍色:也可用6位十六進制數(shù)表示,其中第 1、2 位表示紅色,第 3、4 位表示綠色,第5、6位表示藍色,如#00ff00 表示綠色,如設(shè)置字體藍色的樣式代碼如下:
color:#00f;
(4)?字體的其他屬性
設(shè)置粗體、斜體、劃線、縮進、字符轉(zhuǎn)換與間隔等。這里所說的文本樣式主要是指粗體、斜體、下劃線等樣式:
Font-weight:可設(shè)置字體加粗、減細或其他數(shù)值。Font-style:設(shè)置字體為斜體,有兩個值可選:italic和oblique,傾斜角度不同。
Text-decoration:主要可對字體設(shè)置下劃線、上劃線、刪除線和無任何線形式,如文字鏈接,要去掉默認的下劃線時則可通過設(shè)置這個屬性值為none。另外可設(shè)置下劃線的線型、顏色等。
Font-variant:設(shè)置英文字符為小型大寫字母。
Text-transform:將英文字符設(shè)置為大寫、小寫或首字母大寫方式。 Letter-spacing:對中英文字符間的間距和英文單詞間距均產(chǎn)生影響。 Word-spacing:對英文字符間距產(chǎn)生影響。 Text-indent:設(shè)置文本塊的縮進程度。
Display:指定是否顯示以及如何顯示元素,常用屬性值有inline、block、 inline-block 等。
(5)段落及行距設(shè)置
設(shè)置段落分段及行距。調(diào)節(jié)網(wǎng)頁中文本的分段及設(shè)置行距的方法如下:
<p>分段行距
一般在文檔編輯器中使用回車鍵進行分段換行,在代碼視圖標記符號為
<p>文本內(nèi)容……</p >
用這種方式產(chǎn)生的分段,段與段之間的間隔比普通行距要大一些。段落的行距如果沒進行樣式設(shè)置則為默認行距,默認行距的大小也與設(shè)置的字體字號相關(guān)。
<br/>分段行距
如果設(shè)置段落間的間隔與默認方式行距一樣,則可以按 Shift+Enter 組合鍵來完成,在代碼視圖標記符號為<br/>。
Line-height 行距設(shè)定
段落中每行文字的間隔可以通過樣式代碼來設(shè)定行距。通過樣式規(guī)則定義對話框中選擇“類型”標簽,設(shè)置合適的Line-height屬性值設(shè)置段落行距,行距的表達方式可以是倍數(shù)、百分比,也可以是 px、pt、em、cm 等,主要有如下幾種。
Line-height 設(shè)置為 2:不帶單位表示設(shè)置為2倍行距。
Line-height 設(shè)置為 25px:帶單位的,表示實際單位值,25px表示設(shè)置行距為 25 像素高。
Line-height 設(shè)置為 150%:表示150%的行距。
(6)文本對齊方式設(shè)置
文本的水平對齊
文本的水平對齊方式通常有4種:左對齊、居中對齊、右對齊和兩端對齊,默認為左對齊方式。通過設(shè)置 CSS 樣式的 text-aligh 屬性實現(xiàn),設(shè)置文本居中對齊樣式代碼如下:
text-align:center;
文本的垂直對齊
文本垂直對齊適用于內(nèi)聯(lián)元素(如td、a和img等元素),有三種對齊方式。
top 對齊指與行內(nèi)最高元素的 top 對齊。
middle是指元素的路線與基線對齊。
bottom 是指行的 bottom 對齊,要注意的是 bottom 不等于 baseline,它類似于英語作業(yè)本格子線,字母a下部分對應(yīng)的是baseline,而字母g下部分不是baseline。