CSS字體樣式

2019-04-11

字體屬性

屬性 描述
font-family 字體名稱(chēng)。 宋體與黑體較為常用。 字體名稱(chēng)超過(guò)一個(gè)單詞時(shí)要使用引號(hào)擴(kuò)起來(lái)，<br /> 比如"Times News Roman","宋體"。
font-size 字體尺寸。中文常用字體是9px、10.5px、11px、12px、14px、16px
font-weight 字體粗細(xì)。
font-style 是否斜體(italic)。
font-variant 是否小型大寫(xiě)字體(smal-caps)，僅對(duì)英文有效
font 簡(jiǎn)寫(xiě)屬性。把所有針對(duì)字體屬性設(shè)置在一個(gè)聲明中。屬性值順序如下：<br /> font-style font-variant font-weight font-size line-height font-family

文本樣式屬性

屬性 描述
color 文本顏色。
word-spacing 定義以空格間隔的單詞間距。單詞間距是指單詞（包括漢字與字母）之間插入的空格數(shù)。距離差只是單詞與單詞的，與單詞內(nèi)部沒(méi)關(guān)系。
letter-spacing 定義文本中字母之間的間隔(中文為漢字的間隔)。
text-indent 首行縮進(jìn)。
line-height 設(shè)置行高。 注意：可以將文本所在容器的高度與line-height設(shè)置為相同值，實(shí)現(xiàn)文本垂直方向居中效果。
text-align 水平對(duì)齊。
vertical-align 垂直對(duì)齊。
text-decoration 向文本添加修飾線。
text-transform 設(shè)置字母大小寫(xiě)狀態(tài)。
white-space 設(shè)置元素中空白（包括空格和換行等）的處理方式。
overflow 設(shè)置水平溢出處理方式。
text-overflow 設(shè)置溢出文本效果。
text-shadow 設(shè)置文本陰影效果
box-align 和 box-pack 設(shè)置元素水平和垂直對(duì)齊方式。
文字分欄屬性 column-count:定義分欄數(shù)量 column-gap:定義每欄中間的寬度 column-rule:定義分欄中間的樣式

vertical-align屬性

值 描述
baseline 默認(rèn)。元素放置在父元素的基線上。
sub 垂直對(duì)齊文本的下標(biāo)。
super 垂直對(duì)齊文本的上標(biāo)
top 把元素的頂端與行中最高元素的頂端對(duì)齊
text-top 把元素的頂端與父元素字體的頂端對(duì)齊
middle 把此元素放置在父元素的中部。
bottom 把元素的頂端與行中最低的元素的頂端對(duì)齊。
text-bottom 把元素的底端與父元素字體的底端對(duì)齊。
% 使用 "line-height" 屬性的百分比值來(lái)排列此元素。允許使用負(fù)值。

text-decoration屬性

值 描述
underline 下劃線
overline 上劃線
line-through 刪除線
none 不用線

text-transform屬性

值 描述
capitalize 首字母大寫(xiě)
uppercase 所有字母大寫(xiě)
lowercase 刪除線
none 保持默認(rèn)

white-space

值 描述
normal 默認(rèn)。將多個(gè)連續(xù)的空格合并。
pre 空白和換行會(huì)被瀏覽器保留。類(lèi)似HTML中的<pre>標(biāo)簽。
nowrap 文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到 標(biāo)簽為止。
pre-wrap 保留空格，但是正常地進(jìn)行換行。
pre-line 合并空格，但是保留換行符。

overflow

規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)如何處理

值 描述
visible 默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。
hidden 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的。在body元素上設(shè)置此值可以去除網(wǎng)頁(yè)滾動(dòng)條
scroll 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條。
auto 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條。

text-overflow【CSS3】

規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)如何處理

值 描述
clip 修剪文本。
ellipsis 顯示省略符號(hào)來(lái)代表被修剪的文本。

實(shí)現(xiàn)超出部分以省略號(hào)顯示：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

text-shadow【CSS3】

值 描述
h-shadow 必需。水平陰影偏移。正值偏右，負(fù)值偏左
v-shadow 必需。垂直陰影偏移。正值偏下，負(fù)值偏上。h-shadow和v-shadow為0，可構(gòu)建陰影效果；<br /> 值為相同的正數(shù)，可構(gòu)建浮雕效果。
blur 可選。模糊程度。
color 可選。陰影的顏色。

box-align 和 box-pack 【CSS3】

只適用于webkit內(nèi)核

設(shè)置容器內(nèi)部元素的對(duì)齊方式。
box-align：垂直對(duì)齊設(shè)置
box-pack：水平對(duì)齊設(shè)置

值 描述
start 垂直頂邊對(duì)齊，水平左邊對(duì)齊
end 垂直底邊對(duì)齊，水平右邊對(duì)齊
center 垂直水平居中對(duì)齊
baseline 如果 box-orient 是inline-axis或horizontal，所有子元素均與其基線對(duì)齊。
stretch 拉伸子元素以填充包含塊

字體分欄屬性【CSS3】

只適用于webkit內(nèi)核

CSS3的分欄效果需要用到以下3個(gè)屬性：
column-count:定義分欄數(shù)量
column-gap:定義每一欄之間的寬度
column-rule:定義分欄中間的樣式

column-rule取值：

值 描述
column-rule-width 分隔線寬度。
column-rule-style 分隔線類(lèi)型。
column-rule-color 分隔線顏色。

column-rule-style取值如下：

值 描述
none 定義沒(méi)有規(guī)則。
hidden 定義隱藏規(guī)則。
dotted 定義點(diǎn)狀規(guī)則。
dashed 定義虛線規(guī)則。
solid 定義實(shí)線規(guī)則。
double 定義雙線規(guī)則。
groove 定義 3D grooved 規(guī)則。該效果取決于寬度和顏色值。
ridge 定義 3D ridged 規(guī)則。該效果取決于寬度和顏色值。
inset 定義 3D inset 規(guī)則。該效果取決于寬度和顏色值。
outset 定義 3D outset 規(guī)則。該效果取決于寬度和顏色值。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容