增加字體和顏色樣式-------CSS

通過使用CSS，控制文本的字體，風格和顏色

---

---

1.基本操作：

---

 

body{
    font-family: Verdana, Geneva, Tahoma, sans-serif
}

body{
    font-size: 14px
}

body{
    color: silver
}

body{
    font-weight: bold
}

body{
    text-decoration: underline
}

注釋：

• font-family：定制頁面中使用的字體
• font-size：控制字體大小
• color：為文本設置顏色
• font-weight：影響字體的粗細
• text-decoration：為文本增加更多風格

---

---

 

2.字體系列：

---

 

系列分類：

• sans-serif
• serif
• monospace
• cursive
• fanstasy
• 襯線：是字母末端的裝飾性的小線

示例：

• sans-serif：沒有襯線，適合閱讀

     

 

• Serif：有襯線，看起來傳統，多出現在報紙

    

    

• Monospace：字體包含固定寬度的字符，例如：一個“i”水平的寬度和一個“m”相同，主要用於顯示軟件代碼示例

      

 

• Cursive：有些看似手寫，有時會在標題上使用

    

 

• Fantasy：含有某種風格的裝飾性字體：

    

總結特點：

• serif字體看起來很高雅，傳統。
• sans-serif字體外觀清晰，可讀性好
• monospace 像打字機打出來的
• Cursive和fantasy字體給人有趣或者很有分格的感覺

---

 

---

3.使用CSS指定字體系列：

 

---

 

瀏覽器的幕后工作：

 

body{
    font-family: Verdana, Geneva, Tahoma, sans-serif
}

 

注釋：

• 我們為body指定了4個候選字體
• 瀏覽器會從左往右進行選擇
• 如果瀏覽器檢查到用戶沒有定制的第一個字體，會接着檢查第二個
• 直到查找到用戶有的字體
• 如果前面3種特定的字體都沒找到，瀏覽器就會使用默認的sans-serif字體

示圖：

    

---

---

 

4.Wed字體的使用

---

 

我們都會有這樣一個想法，

自己辛苦設計的頁面，有很酷的字體，

不希望到了用戶手里，卻全都變成了默認。。。

因此：有了@font-face規則

 

---

 使用步驟：

1. 找到一個字體，可以是自己所有的，也可以使用提供字體網站授權給你使用的
2. 確保有所需字體的格式，一般建議使用web開放字體格式（.woff）
3. 把字體文件放在web上，或者利用在線字體服務為你托管這些文件。但無論哪種，你都需要字體文件的URL
4. 在CSS中增加@font-face屬性
5. 在CSS中使用@font-face屬性

示例代碼：

@font-face{
    /*我們為我們的字體設立一個名字*/
    font-family: "JJStyle One";
    /*瀏覽器會加載src指定的字體文件，直到找到他能支持的一個文件*/
    src: ur1("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff")
         ur1("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf")
}


h1{
    /*使用我們指定的字體名*/
    font-family: "JJStyle One",sans-serif;
}

 注意：

• 可以定制多個字體，但需要保證服務器上有相應的字體文件，
• 而且要分別創建一個單獨的@font-face規則，且名字唯一

---

---

 

5.調整字體大小

---

大多數默認的字體都不太美觀，

為此，作為設計者，

都需要知道如何指定字體大小。

---

 

指定font-size的一些方法：

1. PX
2. %
3. em
4. 關鍵字

示例代碼：

body{
    /*字體的高度為14像素*/
    font-size: 14px
}

h1{
    /*字體大小為相對於另一個字體大小的150%，這里是相對於body字體的大小*/
    font-size:150%
}

h2{
    /*相對於另一個字體1.2倍*/
    font-size: 1.2em;
}

h3{
    font-size: small
    /*關鍵字有：xx-small,x-small,small,medium,large,x-large,xx-large*/
}

指定字體大小的建議：

1. 選擇一個關鍵字（推薦samll或mediun），指定它為body規則的字體大小。相當於頁面默認大小
2. 使用em或百分數，相對於body字體大小指定其它元素的字體大小（使用em還是百分數由你決定，因為效果都一樣）

body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    /*字體的高度為14像素*/
    font-size: small
}

h1{
    font-family: sans-serif;
    /*字體大小為相對於另一個字體大小的150%，這里是相對於body字體的大小*/
    font-size:150%
}

h2{
    /*相對於另一個字體1.2倍*/
    font-size: 1.2em;
}

示圖：

     

 

 

---

---

 

6.改變字體粗細：

---

 

• font-weight：bold
• font-weight：normal

---

---

 

7.為字體增加風格：

---

 

斜體：

1. not italic
2. italic（文本向右傾斜，另外襯線還有彎曲）

傾斜：

1. not oblique
2. oblique（普通文本向右傾斜）

注意：

• 一般來說，不論你指定什么風格，結果都不確定，有時是斜體，有時是傾斜。
• 所以，除非真的對你很重要，不然完全可以就用斜體，不用擔心差別

---

---

 

8.顏色樣式：

---

 

指定顏色的方法：

• 顏色名
• 按紅綠藍對百分比指定
• 十六進制碼

 

1.按名字指定

body{
    background-color: silver;
}

2.用紅綠藍值指定顏色

body{
    /*rgb：紅綠藍 顏色的縮寫*/
    background-color: rgb(80%, 40%, 0%);
}
h1{
    background-color: rgb(204,102,0);
}

3.用16進制碼指定

h2{
    background-color: #cc6600
}

注釋：

• 十六進制碼以#開頭
• 前兩位數字表示紅色的分量，中間兩位是綠色，后面兩位是藍色

    

• 上圖代碼的“CC”的分量的計算步驟與解釋如下圖

                       

---

---

文本裝飾：

---

  

em{
    /*使<em>元素有一個從文本中間穿過的橫線*/
    text-decoration: line-through;
}


em{
    /*使<em>元素有一個上畫線和下划線*/
    text-decoration: underline overline;
}

em{
    /*使<em>元素沒有任何裝飾*/
    text-decoration: none;
}

h1,h2{
    color: #cc6600;
    /*在下滑框上加一條細的虛線*/
    border-bottom:thin dotted #aabbcc;
}

 

 

The end--