一、字體的一些屬性及定義
| 屬性 | 定義 |
|---|---|
| font-family | 定制頁(yè)面中使用的字體 |
| font-size | 控制字體大小 |
| color | 控制字體顏色 |
| font-weight | 控制字體粗細(xì) |
| text-decoration | 為文本增加上劃線/下劃線/刪除線 |
例子：
body{
font-family: Verdana, Genevs, Arial, sans-serif;
}
body{
font-size:14px;
}
body{
color:red;
}
body{
font-weight:bold;
}
body{
text-decoration: underline;
}
二、字體系列
-
font-family指定字體系列
fant-family5個(gè)字體系列例子
一組候選字體：
body{
font-family: Verdana, Genevs, Arial, sans-serif;
}
Verdana是我們編寫時(shí)最希望瀏覽器顯示的字體，其次是Genevs、Arial,但由于用戶的電腦上不一定裝有這些字體，在最后我們要放一個(gè)通用的候選字體sans-serif。
-
font-family:sans-serif;和font-family:"sans-serif"的區(qū)別 -
font-family: sans-serif;代表的是一種普通的sans-serif字體族 -
font-family: "sans-serif";代表的是一種叫“sans-serif”的字體 - 增加Web字體，使用
@font-face屬性
例子：
@font-face{
font-family: "Emblema One";
src:
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff");
}
src指定“Emblema One”這個(gè)字體的地址，瀏覽器可從這個(gè)地址中找到“Emblema One”字體。
三、調(diào)整字體大小——font-size
調(diào)整字體大小有四種不同的表示方法：
- 用像素值
px來(lái)表示：font-size: 100px;
body{
font-size: 100px;
}
- 用
%來(lái)表示：font-size: 130%;
body{
font-size: 20px;
}
h1{
font-size: 130%;
}
如果沒(méi)有給h1設(shè)置字體的大小，就繼承父級(jí)元素body的屬性，字體大小為20px。此規(guī)則中h1的字體大小則為父級(jí)元素字體大小的130%。
- 用
em來(lái)表示：font-size: 1.3em;
body{
font-size: 50px;
}
h1{
font-size: 1.3em;
}
- 用關(guān)鍵字來(lái)表示：xx-small，s-small，small，medium，large，x-large，xx-large
body{
font-size: small;
}
最小的為xx-small，每個(gè)大小比前一個(gè)大小大約20%，small通常定義為12px。
四、設(shè)置字體的粗細(xì)——font-weight
為body設(shè)置粗體：
body{
font-weight: bold;
}
如果子級(jí)元素繼承了父級(jí)元素的粗體樣式，想要去除粗體：
h1{
font-weight: normal；
}
五、把文本變?yōu)樾斌w
1.font-style: italic;(斜體)
2.font-style: obliqute;(傾斜)
通常使用font-style: italic斜體
六、指定Web顏色
- 用顏色名指定
body{
background-color: red;
}
- 用紅、綠、藍(lán)的值指定，255是紅、綠、藍(lán)的度量單位
1.
body{
background-color: rgb(80%, 40%, 10%);
}
2.
body{
background-color: rgb(204, 102, 25);
}
- 使用十六進(jìn)制碼來(lái)指定顏色
body{
background-color: #cc6600
}
前面兩位cc代表紅，中間66代表綠，最后兩位00代表藍(lán)
- 簡(jiǎn)寫規(guī)則：如果每一組中數(shù)字相同，則可簡(jiǎn)寫。例如：
#ccbb00=#cb0，如果為#ccbb10則不能簡(jiǎn)寫。
七、為文本增加上劃線/下劃線/刪除線——text-decoration
1.增加刪除線
em{
text-decoration: line-through;
}
2.增加下劃線和上劃線
em{
text-decoration: underline overline;
}
3.去除繼承父級(jí)元素的裝飾
em{
text-decoration: none;
}
