3、CSS的屬性和值
3.1、字體屬性
3.1.1、字體族科
3.1.2、字體大小
3.1.3、字體風(fēng)格
3.1.4、字體加粗
| 字體屬性 |
描述 |
| font-family |
用一個(gè)指定的字體名或一個(gè)類的字體族科 |
| font-size |
字體顯示的大小 |
| font-style |
設(shè)定字體風(fēng)格 |
| font-weight |
以 bold 為值可以使字體加粗 |
1、字體族科 font-family
文件范例：13-4.htm
1 <!-- ------------------------------ -->
2 <!-- 文件范例：13-4.htm -->
3 <!-- 文件說明：CSS字體族科 -->
4 <!-- ------------------------------ -->
5 <HTML>
6 <HEAD>
7 <TITLE>CSS字體族科</TITLE>
8 <Style Type="text/css">
9 <!--
10 H1{
11 font-family: "隸書"
12 }
13 .text {
14 font-family: "宋體,仿宋_gb2312";
15 }
16 -->
17 </Style>
18 </HEAD>
19 <BODY>
20 <H1>主流的網(wǎng)頁設(shè)計(jì)軟件</H1>
21 <p class="text">目前，網(wǎng)頁技術(shù)進(jìn)入了一個(gè)新的階段，現(xiàn)在的網(wǎng)頁再也不是圖片的堆積和枯燥無味的文本了，人們現(xiàn)在追求的是網(wǎng)頁的動(dòng)態(tài)效果和交互性。而Macromedia公司的網(wǎng)頁設(shè)計(jì)三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網(wǎng)頁設(shè)計(jì)的杰出代表，其最新版本MX繼承了前期版本的優(yōu)點(diǎn)，進(jìn)行了功能的進(jìn)一步整合，非常適合于網(wǎng)頁設(shè)計(jì)和網(wǎng)站建設(shè)的需要。</P>
22 </BODY>
23 </HTML>
文件說明：
第10～12設(shè)定H1標(biāo)記樣式，規(guī)定了字體為隸書，第13～15行設(shè)定了名為text的自定義樣式，規(guī)定了字體為宋體或仿宋，即當(dāng)客戶機(jī)沒有第一種
宋體字體的時(shí)候，瀏覽器會(huì)使用第2種仿宋字體顯示。
定義了樣式后，第20行的標(biāo)題字會(huì)自動(dòng)應(yīng)用H1樣式，而第21行通過了 class 屬性引用了 text 樣式。
顯示結(jié)果：
2、字體大小
單位可以是厘米、像素、磅等，另外還有其他一些值，例如：xx-small、x-small、smaller、x-large、xx-large等。最常用的單位為pt。
文件范例：13.5.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-5.htm -->
<!-- 文件說明：CSS字體大小 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS字體大小</TITLE>
<Style Type="text/css">
<!--
H1{
font-size:14pt
}
.text {
font-size:9pt
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的網(wǎng)頁設(shè)計(jì)軟件</H1>
<p class="text">目前，網(wǎng)頁技術(shù)進(jìn)入了一個(gè)新的階段，現(xiàn)在的網(wǎng)頁再也不是圖片的堆積和枯燥無味的文本了，人們現(xiàn)在追求的是網(wǎng)頁的動(dòng)態(tài)效果和交互性。而Macromedia公司的網(wǎng)頁設(shè)計(jì)三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網(wǎng)頁設(shè)計(jì)的杰出代表，其最新版本MX繼承了前期版本的優(yōu)點(diǎn)，進(jìn)行了功能的進(jìn)一步整合，非常適合于網(wǎng)頁設(shè)計(jì)和網(wǎng)站建設(shè)的需要。</P>
</BODY>
</HTML>
顯示結(jié)果：
3、字體風(fēng)格
| 字體風(fēng)格屬性值 |
描述 |
| normal |
普通的文字 |
| italic |
斜體的文字 |
| oblique |
傾斜的文字，在中文文字的使用上與italic 并無明顯區(qū)別 |
文件范例：13-6.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-6.htm -->
<!-- 文件說明：CSS字體風(fēng)格 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS字體風(fēng)格</TITLE>
<Style Type="text/css">
<!--
H1{
font-style:italic
}
.text {
font-style:oblique
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的網(wǎng)頁設(shè)計(jì)軟件</H1>
<p class="text">目前，網(wǎng)頁技術(shù)進(jìn)入了一個(gè)新的階段，現(xiàn)在的網(wǎng)頁再也不是圖片的堆積和枯燥無味的文本了，人們現(xiàn)在追求的是網(wǎng)頁的動(dòng)態(tài)效果和交互性。而Macromedia公司的網(wǎng)頁設(shè)計(jì)三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網(wǎng)頁設(shè)計(jì)的杰出代表，其最新版本MX繼承了前期版本的優(yōu)點(diǎn)，進(jìn)行了功能的進(jìn)一步整合，非常適合于網(wǎng)頁設(shè)計(jì)和網(wǎng)站建設(shè)的需要。</P>
</BODY>
</HTML>
顯示結(jié)果：
4、字體加粗
| 字體加粗屬性值 |
描述 |
| 值 |
100～900之間 |
| normal |
普通的文字 |
| bold |
加粗 |
| bolder |
特粗 |
| lighter |
加細(xì) |
文件范例：13-7.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-7.htm -->
<!-- 文件說明：CSS字體加粗 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS字體加粗</TITLE>
<Style Type="text/css">
<!--
H1{
font-weight:900
}
.text {
font-weight:bolder
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的網(wǎng)頁設(shè)計(jì)軟件</H1>
<p class=text>目前，網(wǎng)頁技術(shù)進(jìn)入了一個(gè)新的階段，現(xiàn)在的網(wǎng)頁再也不是圖片的堆積和枯燥無味的文本了，人們現(xiàn)在追求的是網(wǎng)頁的動(dòng)態(tài)效果和交互性。而Macromedia公司的網(wǎng)頁設(shè)計(jì)三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網(wǎng)頁設(shè)計(jì)的杰出代表，其最新版本MX繼承了前期版本的優(yōu)點(diǎn)，進(jìn)行了功能的進(jìn)一步整合，非常適合于網(wǎng)頁設(shè)計(jì)和網(wǎng)站建設(shè)的需要。</P>
</BODY>
</HTML>
顯示結(jié)果：
posted on 2007-10-08 11:56
CoderDream 閱讀(2614)
評(píng)論(0) 編輯 收藏 所屬分類:
CSS