17 文字屬性和字型屬性

2022-06-22 18:54:15 字數 1867 閱讀 5432

文字屬性

介紹幾個常用的

文字對齊

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

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

文字顏色

color屬性

文字首行縮排

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

文字修飾

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

屬性值:none(預設) | underline(下劃線) | overline(定義文字上的一條線)  | line-through (定義穿過文字下的一條線) | inherit(繼承父元素的text-decoration屬性的值。)

行高

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

字型屬性

字型大小

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:75 px;同時保證盒子的高度為300px,那麼高度改為225px;

游標屬性

cursor: pointer;     #小手

cursor:wait; #等待

cursor: help; #問號

font-family介紹

使用font-family注意幾點:

4.所有的中文字型,都有英語別名,

我們也要知道: 微軟雅黑的英語別名:

font-family: "microsoft yahei";

宋體的英語別名: font-family: "simsun";

font屬性能夠將font-size、line-height、font-family合三為一: font:12px/30px "times new roman","microsoft yahei","simsun";

17 文字屬性和字型屬性

介紹幾個常用的。文字對齊 text align 屬性規定元素中的文字的水平對齊方式。屬性值 none center left right justify 文字顏色 color屬性 文字首行縮排 text indent 屬性規定元素首行縮排的距離,單位建議使用em 文字修飾 text decorati...

17 文字屬性和字型屬性

介紹幾個常用的。文字對齊 text align 屬性規定元素中的文字的水平對齊方式。屬性值 none center left right justify 文字顏色 color屬性 文字首行縮排 text indent 屬性規定元素首行縮排的距離,單位建議使用em 文字修飾 text decorati...

17 文字屬性和字型屬性

17 文字屬性和字型屬性 介紹幾個常用的。文字對齊 text align 屬性規定元素中的文字的水平對齊方式。屬性值 none center left right justify 文字顏色 color屬性 文字首行縮排 text indent 屬性規定元素首行縮排的距離,單位建議使用em 文字修飾 ...