文本屬性

介紹幾個(gè)常用的。

文本對齊

text-align 屬性規(guī)定元素中的文本的水平對齊方式。

屬性值：none | center | left | right | justify

文本顏色

color屬性

文本首行縮進(jìn)

text-indent 屬性規(guī)定元素首行縮進(jìn)的距離，單位建議使用em

文本修飾

text-decoration屬性規(guī)定文本修飾的樣式

屬性值：none(默認(rèn)) | underline(下劃線) | overline(定義文本上的一條線)  | line-through (定義穿過文本下的一條線) | inherit(繼承父元素的text-decoration屬性的值。)

行高

line-height就是行高的意思，指的就是一行的高度。

陰影

text-shadow：水平方向偏移量 垂直方向偏移量 模糊度 陰影顏色；

文字溢出

text-overflow:clip | ellipsis

案例：文字超出部分顯示...

css部分
div{
   width: 200px;
   height: 200px;
   border: 1px solid red;

 }
div p{
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
} 
html部分
<div>
       <p>變有錢 我變有錢多少人沒日沒夜地浪費(fèi)時(shí)間</p>
       <p>變有錢 我變有錢多少人沒日沒夜地浪費(fèi)時(shí)間</p>
       <p>變有錢 我變有錢多少人沒日沒夜地浪費(fèi)時(shí)間</p>
</div>

字體屬性

字體大小

font-size表示設(shè)置字體大小，如果設(shè)置成inherit表示繼承父元素的字體大小值。

字體粗細(xì)

font-weight表示設(shè)置字體的粗細(xì)

屬性值：none(默認(rèn)值，標(biāo)準(zhǔn)粗細(xì)) | bold(粗體) | border(更粗）| lighter(更細(xì)) | 100~900（設(shè)置具體粗細(xì)，400等同于normal，而700等同于bold）| inherit（繼承父元素字體的粗細(xì)值）

字體系列

font-family

font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif

如果瀏覽器不支持第一個(gè)字體，則會(huì)嘗試下一個(gè)。瀏覽器會(huì)使用它可識(shí)別的第一個(gè)值。如果都不支持則顯示宋體。

行高 line-height

針對單行文本垂直居中

公式：行高的高度等于盒子的高度，可以使當(dāng)行文本垂直居中，注意只適用單行文本。

針對多行文本垂直居中

行高的高度不能小于字體的大小，不然上下字之間會(huì)緊挨一起。

第一步，一個(gè)寬度300*300的盒子，看盒子中一共顯示了幾行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px

第二步，讓(盒子的高度-150px)/2=75;那么設(shè)置盒子的padding-top:75px;同時(shí)保證盒子的高度為300px,那么高度改為225px;

font-family

使用font-family注意幾點(diǎn)：

1.網(wǎng)頁中不是所有字體都能用哦，因?yàn)檫@個(gè)字體要看用戶的電腦里面裝沒裝，
比如你設(shè)置： font-family: "華文彩云"; 如果用戶電腦里面沒有這個(gè)字體，
那么就會(huì)變成宋體
頁面中，中文我們只使用： 微軟雅黑、宋體、黑體。
如果頁面中，需要其他的字體，那么需要切圖。 英語：Arial 、 Times New Roman

2.為了防止用戶電腦里面，沒有微軟雅黑這個(gè)字體。
就要用英語的逗號(hào)，隔開備選字體，就是說如果用戶電腦里面，
沒有安裝微軟雅黑字體，那么就是宋體：
font-family: "微軟雅黑","宋體"; 備選字體可以有無數(shù)個(gè)，用逗號(hào)隔開。
3.我們要將英語字體，放在最前面，這樣所有的中文，就不能匹配英語字體，
就自動(dòng)的變?yōu)楹竺娴闹形淖煮w：
font-family: "Times New Roman","微軟雅黑","宋體";

4.所有的中文字體，都有英語別名，
我們也要知道： 微軟雅黑的英語別名：
font-family: "Microsoft YaHei";
宋體的英語別名： font-family: "SimSun";
font屬性能夠?qū)ont-size、line-height、font-family合三為一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

5.行高可以用百分比，表示字號(hào)的百分之多少。
一般來說，都是大于100%的，因?yàn)樾懈咭欢ㄒ笥谧痔?hào)。
font:12px/200% “宋體” 等價(jià)于 font:12px/24px “宋體”;
反過來，比如： font:16px/48px “宋體”;
等價(jià)于 font:16px/300% “宋體”

vertical-align

定義：vertical-align 屬性設(shè)置元素的垂直對齊方式。

該屬性定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊

常用屬性值：

• baseline 默認(rèn)值
• top
• bottom
• middle

它的作用：

• 內(nèi)聯(lián)元素之間的對齊
  • 文字與圖片垂直方向的對齊
  • 圖片與托片垂直方向的對齊
  • 行內(nèi)塊元素垂直方向的對齊
• 單元格td的內(nèi)容垂直方向的對齊