css文字與字型常見用法集合

2021-10-07 10:07:37 字數 1485 閱讀 5404

總結一下專案中常見的文字和字型的樣式設定

文字text-align-last: 段落的最後一行的對齊方式

// 末尾右對齊

p// 文字兩端對齊

p

text-decoration 文字修飾,下劃線、上劃線、刪除線等。

// 中間刪除線

p

text-indent 首行文字的縮排

// 首行縮排20px

p

text-overflow 文字溢位

// 溢位的文字設定為點

p

text-transform 控制文字中的字母

// 文字中的每個單詞以大寫字母開頭

p

-webkit-text-stroke 文字字元指定了寬和顏色(類似於描邊)

// 文字描邊2px以及描邊顏色

p

-web

white-space 指定元素內的空白怎樣處理

// 文字不會換行

p

word-break 在合適的點換行

p

word-spacing 增加或減少單詞間的間隔

// 規定段落中的字間距是 25 畫素

p

letter-spacing 單個字元間距

// 規定字元的字間距是 2 畫素

p

writing-mode 定義了文字在水平或垂直方向上如何排布

// 垂直方向自右而左的書寫方式

字型

p

字型樣式:font-style

font-style定義字型的樣式主要屬性有三個值

正常 font-style:normal

斜體 font-style:italic

傾斜 font-style:oblique

設定字型大小

常用的設定字型大小有四個單位 px 百分比 em rem(vh、vw,這些筆者也不會,不知道能不能設定字型大小…)

px不必多說,

百分比相對父元素的font-size。

em相對自身font-size的大小,如果自身沒有設定font-size的話則向上找尋直到body,這點百分比也一樣。

rem相對於根元素;

簡寫順序:font-style | font-variant | font-weight | font-size | line-height | font-family

例如:.font

CSS文字與字型的屬性

p元素選擇器會層疊掉box1,而span卻會繼承,因為父類的字型大小即為1em 可以設定多個字型,從左到右按順序直到找到可用的字型。英文本型只適用於英文而中文字型同時適用於中文和英文。100 200 300 900 對應於文字的不同重量 元素高度為100px,若不設定行高,文字無法垂直居中 補充 c...

CSS字型和文字

字型是 文字的不同體式 或者 字的形體結構 對於英文而言,每種字型都是由一組具有獨特樣式的字母 數字和符號組成的。根據外觀,字型可以分為不同的類別 font collection 包括襯線字型 serif 無襯線字型 sans serif 和等寬字型 monospace 每一類字型可以分成不同的字型...

css文字和字型

text color,對於w3c標準的css 如果你定義了顏色屬性,你還必須定義背景色屬性。body h1h2 文字的對齊方式h1 p.date 當text align設定為 justify 每一行被展開為寬度相等,左,右外邊距是對齊 p.main 文字的修飾 decoration屬性主要用來設定文...