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的內容垂直方向的對齊

 

 

 

 

 

 




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM