17-文本屬性和字體屬性

文本屬性

介紹幾個經常使用的。

文本對齊

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

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

文本顏色

color屬性

文本首行縮進

text-indent 屬性規定元素首行縮進的距離，單位建議使用em

文本修飾

text-decoration屬性規定文本修飾的樣式

屬性值：none(默認) | 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>變有錢 我變有錢多少人沒日沒夜地浪費時間</p>
       <p>變有錢 我變有錢多少人沒日沒夜地浪費時間</p>
       <p>變有錢 我變有錢多少人沒日沒夜地浪費時間</p>
</div>

 

字體屬性

字體大小

font-size表示設置字體大小，若是設置成inherit表示繼承父元素的字體大小值。

字體粗細

font-weight表示設置字體的粗細

屬性值：none(默認值，標準粗細) | bold(粗體) | border(更粗）| lighter(更細) | 100~900（設置具體粗細，400等同於normal，而700等同於bold）| inherit（繼承父元素字體的粗細值）

字體系列

font-family

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

若是瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。若是都不支持則顯示宋體。

 

行高 line-height

針對單行文本垂直居中

公式：行高的高度等於盒子的高度，可使當行文本垂直居中，注意只適用單行文本。

針對多行文本垂直居中

行高的高度不能小於字體的大小，否則上下字之間會緊挨一塊兒。

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

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

 

font-family

使用font-family注意幾點：

1.網頁中不是全部字體都能用哦，由於這個字體要看用戶的電腦裏面裝沒裝，
好比你設置： font-family: "華文彩雲"; 若是用戶電腦裏面沒有這個字體，
那麼就會變成宋體
頁面中，中文咱們只使用： 微軟雅黑、宋體、黑體。
若是頁面中，須要其餘的字體，那麼須要切圖。 英語：Arial 、 Times New Roman

2.爲了防止用戶電腦裏面，沒有微軟雅黑這個字體。
就要用英語的逗號，隔開備選字體，就是說若是用戶電腦裏面，
沒有安裝微軟雅黑字體，那麼就是宋體：
font-family: "微軟雅黑","宋體"; 備選字體能夠有無數個，用逗號隔開。
3.咱們要將英語字體，放在最前面，這樣全部的中文，就不能匹配英語字體，
就自動的變爲後面的中文字體：
font-family: "Times New Roman","微軟雅黑","宋體";

4.全部的中文字體，都有英語別名，
咱們也要知道： 微軟雅黑的英語別名：
font-family: "Microsoft YaHei";
宋體的英語別名： font-family: "SimSun";
font屬性可以將font-size、line-height、font-family合三爲一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

5.行高能夠用百分比，表示字號的百分之多少。
通常來講，都是大於100%的，由於行高必定要大於字號。
font:12px/200% 「宋體」 等價於 font:12px/24px 「宋體」;
反過來，好比： font:16px/48px 「宋體」;
等價於 font:16px/300% 「宋體」

vertical-align

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

該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊

經常使用屬性值：

• baseline 默認值
• top
• bottom
• middle

它的做用：

• 內聯元素之間的對齊
  • 文字與圖片垂直方向的對齊
  • 圖片與託片垂直方向的對齊
  • 行內塊元素垂直方向的對齊
• 單元格td的內容垂直方向的對齊