3、CSS的屬性和值
3.1、字體屬性
3.1.1、字體族科
3.1.2、字體大小
3.1.3、字體風格
3.1.4、字體加粗
| 字體屬性 |
描述 |
| font-family |
用一個指定的字體名或一個類的字體族科 |
| font-size |
字體顯示的大小 |
| font-style |
設定字體風格 |
| 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>主流的網頁設計軟件</H1>
21 <p class="text">目前，網頁技術進入了一個新的階段，現在的網頁再也不是圖片的堆積和枯燥無味的文本了，人們現在追求的是網頁的動態效果和交互性。而Macromedia公司的網頁設計三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網頁設計的杰出代表，其最新版本MX繼承了前期版本的優點，進行了功能的進一步整合，非常適合于網頁設計和網站建設的需要。</P>
22 </BODY>
23 </HTML>
文件說明：
第10～12設定H1標記樣式，規定了字體為隸書，第13～15行設定了名為text的自定義樣式，規定了字體為宋體或仿宋，即當客戶機沒有第一種
宋體字體的時候，瀏覽器會使用第2種仿宋字體顯示。
定義了樣式后，第20行的標題字會自動應用H1樣式，而第21行通過了 class 屬性引用了 text 樣式。
顯示結果：
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>主流的網頁設計軟件</H1>
<p class="text">目前，網頁技術進入了一個新的階段，現在的網頁再也不是圖片的堆積和枯燥無味的文本了，人們現在追求的是網頁的動態效果和交互性。而Macromedia公司的網頁設計三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網頁設計的杰出代表，其最新版本MX繼承了前期版本的優點，進行了功能的進一步整合，非常適合于網頁設計和網站建設的需要。</P>
</BODY>
</HTML>
顯示結果：
3、字體風格
| 字體風格屬性值 |
描述 |
| normal |
普通的文字 |
| italic |
斜體的文字 |
| oblique |
傾斜的文字，在中文文字的使用上與italic 并無明顯區別 |
文件范例：13-6.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-6.htm -->
<!-- 文件說明：CSS字體風格 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS字體風格</TITLE>
<Style Type="text/css">
<!--
H1{
font-style:italic
}
.text {
font-style:oblique
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的網頁設計軟件</H1>
<p class="text">目前，網頁技術進入了一個新的階段，現在的網頁再也不是圖片的堆積和枯燥無味的文本了，人們現在追求的是網頁的動態效果和交互性。而Macromedia公司的網頁設計三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網頁設計的杰出代表，其最新版本MX繼承了前期版本的優點，進行了功能的進一步整合，非常適合于網頁設計和網站建設的需要。</P>
</BODY>
</HTML>
顯示結果：
4、字體加粗
| 字體加粗屬性值 |
描述 |
| 值 |
100～900之間 |
| normal |
普通的文字 |
| bold |
加粗 |
| bolder |
特粗 |
| lighter |
加細 |
文件范例：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>主流的網頁設計軟件</H1>
<p class=text>目前，網頁技術進入了一個新的階段，現在的網頁再也不是圖片的堆積和枯燥無味的文本了，人們現在追求的是網頁的動態效果和交互性。而Macromedia公司的網頁設計三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網頁設計的杰出代表，其最新版本MX繼承了前期版本的優點，進行了功能的進一步整合，非常適合于網頁設計和網站建設的需要。</P>
</BODY>
</HTML>
顯示結果：
posted on 2007-10-08 11:56
CoderDream 閱讀(2625)
評論(0) 編輯 收藏 所屬分類:
CSS