黑馬前端 CSS基礎 CSS 字型屬性 文字屬性

2021-10-23 20:52:34 字數 2062 閱讀 1905

內容來自b站的黑馬程式設計師pink老師

由我收集整理

css fonts (字型)屬性用於定義字型系列、大小、粗細、和文字樣式（如斜體）。

css 使用 font-family 屬性定義文字的字型系列

p  


div
 各種字型之間必須使用英文狀態下的逗號隔開

 一般情況下,如果有空格隔開的多個單詞組成的字型,加引號.

 盡量使用系統預設自帶字型，保證在任何使用者的瀏覽器中都能正確顯示

 最常見的幾個字型：body

css 使用 font-size 屬性定義字型大小

p
 px（畫素）大小是我們網頁的最常用的單位

 谷歌瀏覽器預設的文字大小為16px

不同瀏覽器可能預設顯示的字型大小大小不一致，我們盡量給乙個明確值大小，不要預設大小

 可以給 body 指定整個頁面文字的大小

css 使用font-weight 屬性設定文字字型的粗細

實際開發時，我們更喜歡用數字表示粗細

css 使用 font-style 屬性設定文字的風格。

注意： 平時我們很少給文字加斜體，反而要給斜體標籤（em，i）改為不傾斜字型。

body
 使用 font 屬性時，必須按上面語法格式中的順序書寫，不能更換順序，並且各個屬性間以空格隔開

 不需要設定的屬性可以省略（取預設值），但必須保留 font-size 和 font-family 屬性，否則 font 屬性將不起作用

總結：

css text（文字）屬性可定義文字的外觀，比如文字的顏色、對齊文字、裝飾文字、文字縮排、行間距等。

color 屬性用於定義文字的顏色。

div
開發中最常用的是十六進製制.

text-align 屬性用於設定元素內文字內容的水平對齊方式。

如果想讓居中，不能直接在img標籤中設定，要在其父標籤中設定text-align

div
text-decoration屬性規定新增到文字的修飾。可以給文字新增下劃線、刪除線、上劃線等。

text-indent 屬性用來指定文字的第一行的縮排，通常是將段落的首行縮排。

div
如果想控制文字的左右邊距，可用此標籤粗略控制通過設定該屬性，所有元素的第一行都可以縮排乙個給定的長度，甚至該長度可以是負值。

p
em 是乙個相對單位，就是當前元素（font-size) 1 個文字的大小, 如果當前元素沒有設定大小，則會按照父元 素的 1 個文字大小。

line-height 屬性用於設定行間的距離（行高）。可以控制文字行與行之間的距離.

p
小技巧：

將文字垂直居中的辦法——將文字高度與盒子高度設定相同高度

前端學習 Css 字型

設定文字的大小,瀏覽器中一般預設的文字大小都是16px font size設定的並不是文字本身的大小，在頁面中，每個文字都是處在乙個看不見的框中的我們設定的font size實際上是設定格的高度，並不是字型的大小一般情況下文字都要比這個格要小一些，也有時會比格大，根據字型的不同，顯示效果也不能。當採...

前端學習 Css 字型分類

在網頁中將字型分成5大類 serif 襯線字型 sans serif 非襯線字型 monospace 等寬字型 cursive 草書字型 fantasy 虛幻字型 可以將字型設定為這些大的分類,當設定為大的分類以後，瀏覽器會自動選擇指定的字型並應用樣式。一般會將字型的大分類，指定為font fami...

前端CSS基礎

頁面布局要學習三大核心,盒子模型,浮動 和 定位。學習好盒子模型能非常好的幫助我們布局頁面 網頁布局過程 先準備好相關的網頁元素，網頁元素基本都是盒子 box 利用 css 設定好盒子樣式，然後擺放到相應位置。往盒子裡面裝內容 網頁布局的核心本質 就是利用 css 擺盒子 所謂盒子模型 就是把htm...