CSS學習總結 基礎篇 設計字型屬性

2021-10-02 18:01:49 字數 3604 閱讀 4674

css fonts屬性可以用於定義字型系列,大小,粗細,和文字樣式(斜體,加粗,下劃線等)

css使用font_family屬性定義文字的字型系列

語法格式:

p div

示例**:

<

!doctype html>

"en"

>

"utf-8"

>

字型屬性<

/title>h2p

<

/style>

<

/head>

標題字型設定為微軟雅黑<

/h2>

這是文字主題內容的字型,同樣也為微軟雅黑<

/p>

這是文字主題內容的字型,同樣也為微軟雅黑<

/p>

這是文字主題內容的字型,同樣也為微軟雅黑<

/p>

這是文字主題內容的字型,同樣也為微軟雅黑<

/p>

<

/body>

<

/html>

效果:

●各種字型之間必須使用英文逗號隔開

●一般情況下,如果有空格隔開的多個單詞組成的字型加引號,例如"microsoft yahei ui".

●盡量使用系統預設自帶字型,保證在任何使用者的瀏覽器中都能正確顯示,自己新增的字型在其他使用者電腦上不一定有這樣的字型。

●最常見的幾個字型:

body

可以對body標籤內的所有內容設計同樣的字型。

字型大小

可以用font-size:20px 設定字型大小

ppx( 畫素)大小是我們網頁的最常用的單位

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

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

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

字型粗細

css使用font-weight屬性來定義字型的粗細。定義字型粗細通常用於強調某幾個字。所以最好使用**.類名的方式定義

font-weight 有normal bold bolder lighter 四種預設屬性,還可以通過直接指定數字大小來定義字型粗細。推薦直接用數字指定。

normal:正常的字型。相當於number為400**.宣告此值將取消之前任何設定

bold:粗體。相當於number為700。也相當於b物件的作用

bolder: ie5+特粗體

lighter: ie5+細體

number:ie5+100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

示例**:

<

!doctype html>

"en"

>

"utf-8"

>

字型屬性<

/title>

h2.bold

.bolder

<

/style>

<

/head>

標題字型設定為微軟雅黑<

/h2>

="bold"

>這是文字主題內容的字型,同樣也為微軟雅黑<

/p>

這是文字主題內容的字型,同樣也為微軟雅黑<

/p>

="bolder"

>這是文字主題內容的字型,同樣也為微軟雅黑<

/p>

這是文字主題內容的字型,同樣也為微軟雅黑<

/p>

<

/body>

<

/html>

效果:

文字樣式

css使用font-style定義文字的風格

語法格式:

pnormal預設值,瀏覽器會顯示標準的字型樣式font-style: normal;

italic瀏覽器會顯示斜體的字型樣式。

示例**:

<

!doctype html>

"en"

>

"utf-8"

>

字型屬性<

/title>

p.notitalic

<

/style>

<

/head>

標題字型設定為微軟雅黑<

/h2>

="notitalic"

>這是文字主題內容的字型<

/p>

這是文字主題內容的字型<

/p>

="notitalic"

>這是文字主題內容的字型<

/p>

這是文字主題內容的字型<

/p>

<

/body>

<

/html>

效果:

字型復合屬性

字型屬性可以把上述所有屬性復合到一句話中寫完

body

必須嚴格按照格式來定義。

示例**:

<

!doctype html>

"en"

>

"utf-8"

>

字型屬性<

/title>

h2<

/style>

<

/head>

標題字型設定為微軟雅黑<

/h2>

="notitalic"

>這是文字主題內容的字型<

/p>

這是文字主題內容的字型<

/p>

="notitalic"

>這是文字主題內容的字型<

/p>

這是文字主題內容的字型<

●使用font屬性時,必須嚴格按語法格式中的順序書寫,不能更換順序,井且各個屬性間以空格隔開

●不需要設定的屬性可以省略(取預設值) ,但必須保留font- size和font family屬性,否則font屬性將不起作用

CSS學習總結 基礎篇 CSS選擇器

選擇器就是根據不同需求把不同的標籤選出來,然後針對性性的進行樣式設定 通過選擇器,我們還可以實現各種複雜的指定,同時也能大量減少樣式表的 書寫量,最終書寫出來的樣式表也會變得簡潔明瞭。即把某個標籤選擇出來 示例 選擇器分為基礎選擇器和復合選擇器兩大類。基礎選擇器就是由單個選擇器構成 基礎選擇器又可以...

CSS學習總結 基礎篇 背景的修改

css可以使用背景屬性設定背景顏色,背景,背景平鋪,背景位置,背景圖固定等。background color屬性可以定義任意元素的背景顏色。預設值是transparent 透明 示例 utf 8 表單 表單 如果需要設定背景是否平鋪,可以通過background repeat屬性來設定,有四個引數 ...

CSS 再學習,基礎篇

語法 共享宣告 h1,h2,h3,h4,h5,h6繼承 通過 css 繼承,子元素將繼承最高端元素 在本例中是 body 所擁有的屬性 這些子元素諸如 p,td,ul,ol,ul,li,dl,dt,和 dd 不需要另外的規則,所有 body 的子元素都應該顯示 verdana 字型,子元素的子元素也...