CSS樣式規則及字體樣式


CSS

CSS(Cascading Style Sheets)

CSS通常稱為CSS樣式表或層疊樣式表(級聯樣式表),主要用於設置HTML頁面中的文本內容(字體、大小、對齊方式等)、圖片的外形(寬高、邊框樣式、邊距等)以及版面的布局等外觀顯示樣式。

CSS以HTML為基礎,提供了豐富的功能,如字體、顏色、背景的控制及整體排版等,而且還可以針對不同的瀏覽器設置不同的樣式。

CSS樣式規則

使用HTML時,需要遵從一定的規范。CSS亦如此,要想熟練地使用CSS對網頁進行修飾,首先需要了解CSS樣式規則,具體格式如下:

 

 

在上面的樣式規則中:

1.選擇器用於指定CSS樣式作用的HTML對象,花括號內是對該對象設置的具體樣式。
2.屬性和屬性值以“鍵值對”的形式出現。
3.屬性是對指定的對象設置的樣式屬性,例如字體大小、文本顏色等。
4.屬性和屬性值之間用英文“:”連接。
5.多個“鍵值對”之間用英文“;”進行區分。

CSS字體樣式屬性

font-size:字號大小

font-size屬性用於設置字號,該屬性的值可以使用相對長度單位,也可以使用絕對長度單位。其中,相對長度單位比較常用,推薦使用像素單位px,絕對長度單位使用較少。具體如下:

 

 

font-family:字體

font-family屬性用於設置字體。網頁中常用的字體有宋體、微軟雅黑、黑體等,例如將網頁中所有段落文本的字體設置為微軟雅黑,可以使用如下CSS樣式代碼:

p{ font-family:"微軟雅黑";}

可以同時指定多個字體,中間以逗號隔開,表示如果瀏覽器不支持第一個字體,則會嘗試下一個,直到找到合適的字體。

常用技巧:

1. 現在網頁中普遍使用14px+。
2. 盡量使用偶數的數字字號。ie6等老式瀏覽器支持奇數會有bug。
3. 各種字體之間必須使用英文狀態下的逗號隔開。
4. 中文字體需要加英文狀態下的引號,英文字體一般不需要加引號。當需要設置英文字體時,英文字體名必須位於中文字體名之前。
5. 如果字體名中包含空格、#、$等符號,則該字體必須加英文狀態下的單引號或雙引號,例如font-family: "Times New Roman";。
6. 盡量使用系統默認字體,保證在任何用戶的瀏覽器中都能正確顯示。

 

CSS Unicode字體

在 CSS 中設置字體名稱,直接寫中文是可以的。但是在文件編碼(GB2312、UTF-8 等)不匹配時會產生亂碼的錯誤。xp 系統不支持 類似微軟雅黑的中文。

方案一: 你可以使用英文來替代。 比如 font-family:"Microsoft Yahei"。

方案二: 在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯誤。使用 Unicode 寫中文字體名稱,瀏覽器是可以正確的解析的。 font-family: "\5FAE\8F6F\96C5\9ED1",表示設置字體為“微軟雅黑”。

 

可以通過escape() 來測試屬於什么字體。

字體名稱 英文名稱 Unicode 編碼
宋體 SimSun \5B8B\4F53
新宋體 NSimSun \65B0\5B8B\4F53
黑體 SimHei \9ED1\4F53
微軟雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1
楷體_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
隸書 LiSu \96B6\4E66
幼園 YouYuan \5E7C\5706
華文細黑 STXihei \534E\6587\7EC6\9ED1
細明體 MingLiU \7EC6\660E\4F53
新細明體 PMingLiU \65B0\7EC6\660E\4F53

為了照顧不同電腦的字體安裝問題,我們盡量只使用宋體和微軟雅黑中文字體

font-weight:字體粗細

字體加粗除了用 b 和 strong 標簽之外,可以使用CSS 來實現,但是CSS 是沒有語義的。

font-weight屬性用於定義字體的粗細,其可用屬性值:normal、bold、bolder、lighter、100~900(100的整數倍)。

 

小技巧:

數字 400 等價於 normal,而 700 等價於 bold。 但是我們更喜歡用數字來表示。  

 

font-style:字體風格

字體傾斜除了用 i 和 em 標簽之外,可以使用CSS 來實現,但是CSS 是沒有語義的。

font-style屬性用於定義字體風格,如設置斜體、傾斜或正常字體,其可用屬性值如下:

normal:默認值,瀏覽器會顯示標准的字體樣式。

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

oblique:瀏覽器會顯示傾斜的字體樣式。

小技巧:

平時我們很少給文字加斜體,反而喜歡給斜體標簽(em,i)改為普通模式。

 

font:綜合設置字體樣式 (重點)

font屬性用於對字體樣式進行綜合設置,其基本語法格式如下:

選擇器{font: font-style  font-weight  font-size/line-height  font-family;}

 

使用font屬性時,必須按上面語法格式中的順序書寫,不能更換順序,各個屬性以空格隔開。

注意:其中不需要設置的屬性可以省略(取默認值),但必須保留font-size和font-family屬性,否則font屬性將不起作用。


div {
            /* font-style: italic;
            font-weight: 700;
            font-size: 16px;
            font-family: "Microsoft YaHei"; */
            /* 復合屬性寫法,font: font-style font-weight font-size/line-height font-family ;*/
            font: italic 700 16px "Microsoft YaHei";
        }

 字體樣式應用:

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字體屬性</title>
    <style>
        body {
            font-family: "宋體", Arial, Helvetica, sans-serif;
        }
        .size {
            font-size: 12px;
        }
        .bold {
            font-weight: 700;
            /* font-weight: bold;  700后面不要加單位,等價於bold,都是加粗效果*/
            /* 實際開發中提倡使用數字 */
        }
        h4 {
            font-weight: 400;
            /* font-weight: normal; 與400等價,恢復正常粗細值*/
        }
        .xieti {
            font-style: italic;
        }
        em {
            font-style: normal;
        }
    </style>
</head>
<body>
    <h4>蘭陵美酒郁金香</h4>
    <p class="size">玉碗盛來琥珀光</p>
    <p class="bold">但使主人能醉客</p>
    <p>不知何處是他鄉</p>
    <p class="xieti">上課時候的你</p>
    <em>下課時候的你</em>
</body>
</html>

 

開發者工具(chrome)

此工具是我們的必備工具,以后代碼出了問題,我們首先第一反應就是:

“按F12”或者是 “shift+ctrl+i” 打開 開發者工具。

菜單: 右擊網頁空白出---查看

小技巧:

  1. ctrl+滾輪 可以 放大開發者工具代碼大小。

  2. 左邊是HTML元素結構 右邊是CSS樣式。

  3. 右邊CSS樣式可以改動數值和顏色查看更改后效果。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM