一、字體的一些屬性及定義
屬性 | 定義 |
---|---|
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;
}