1、什么是CSS
1.1、CSS的基本概念 從總體來說，CSS 能夠完成下列工作：
a、彌補 HTML 對網頁格式化功能的不足，比如段落間距、行距等。
b、字體變化和大小；
c、頁面格式的動態更新；
d、排版定位等。
1.2、CSS的特點
a、將格式和結構分離
b、以前所未有的能力控制頁面布局
c、制作體積更小、下載更快的頁面
d、將許多頁面同時更新，比以前更快更容易
e、瀏覽器將成為更友好的界面
2、CSS的類型與基本寫法
2.1、CSS的類型
CSS層疊樣式表包含3種類型：
a、自定義CSS，相應的標記中出現“class"屬性
如下代碼：
.bg {
background-image: url(bg.gif);
}
在HTML中使用：
<body class="bg">
b、重定義標記的CSS
td {
color: #000099;
font-size: 9pt
}
c、CSS選擇符
CSS 選擇符為特殊的組合標記定義CSS，使用“ID”作為屬性，以保證文檔具有唯一可用的值。CSS選擇符是一種特殊類型的樣式，常用的有4種，分別為：
a:link、a:active、a:visited、a:hover
其中：
a:link：設定正常狀態下鏈接文字的樣式。
a:active：設定鼠標單擊時鏈接的外觀。
a:visited：設定訪問過的鏈接外觀。
a:hover：設定鼠標放置在鏈接文字之上時文字的外觀。
如下代碼：
a:link {
color: #FF3366;
font-family:"宋體";
text-decoration:none;
}
a:hover {
color: #FF6600;
font-family:"宋體";
text-decoration:underline;
}
a:visited {
color: #339900;
font-family:"宋體";
text-decoration:none;
}
2.2、CSS的基本寫法
CSS的基本寫法有3種：
1、在 HEAD 內實現，即<HEAD></HEAD>標記內：
文件范例：13-1.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-1.htm -->
<!-- 文件說明：CSS在<head>中的實現 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS在head中的實現</TITLE>
<Style Type="text/css">
<!--
body {
font-family: "黑體";
font-size: 12pt;
line-height: 16pt;
color: #FFFFFF;
background-color: #006699;
}
-->
</Style>
</HEAD>
<BODY>
主流的網頁設計軟件
<p>目前，網頁技術進入了一個新的階段，現在的網頁再也不是圖片的堆積和枯燥無味的文本了，人們現在追求的是網頁的動態效果和交互性。而Macromedia公司的網頁設計三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網頁設計的杰出代表，其最新版本MX繼承了前期版本的優點，進行了功能的進一步整合，非常適合于網頁設計和網站建設的需要。</P>
</BODY>
</HTML>
顯示結果：
2、在<BODY>內實現
使用下面的語法：
<h3 style="font-size:10pt">
這樣的寫法雖然直觀，但是無法體現出CSS的優勢，因此不推薦使用。
文件范例：13-2.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-2.htm -->
<!-- 文件說明：CSS在<body>中的實現 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS在body中的實現</TITLE>
</HEAD>
<BODY>
主流的網頁設計軟件
<p style="font-size:9pt;line-height:12pt;background-color:#FFCC00;font-family:宋體">目前，網頁技術進入了一個新的階段，現在的網頁再也不是圖片的堆積和枯燥無味的文本了，人們現在追求的是網頁的動態效果和交互性。而Macromedia公司的網頁設計三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網頁設計的杰出代表，其最新版本MX繼承了前期版本的優點，進行了功能的進一步整合，非常適合于網頁設計和網站建設的需要。</P>
</BODY>
</HTML>
顯示結果：
3、在文件外的調用
CSS 的定義既可以是在HTML文檔內部，也可以單獨成立文件，如下代碼是將CSS樣式鏈接到外部到style.css文件：
<link rel="stylesheet" href="style.css" type="text/css">
文件范例：13-3.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-3.htm -->
<!-- 文件說明：調用外部的CSS樣式文件-->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>調用外部的CSS樣式文件</TITLE>
<link href="13-3.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
主流的網頁設計軟件
<p class="t">目前，網頁技術進入了一個新的階段，現在的網頁再也不是圖片的堆積和枯燥無味的文本了，人們現在追求的是網頁的動態效果和交互性。而Macromedia公司的網頁設計三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網頁設計的杰出代表，其最新版本MX繼承了前期版本的優點，進行了功能的進一步整合，非常適合于網頁設計和網站建設的需要。</P>
</BODY>
</HTML>
文件范例：13-3.css
.t {
font-family: "宋體";
font-size: 9pt;
text-decoration: underline;
letter-spacing: 3px;
line-height: 12pt;
}
顯示結果：
2.3、CSS的沖突
a、執行最近的
b、CSS樣式優先級高于HTML樣式
posted on 2007-10-07 22:10
CoderDream 閱讀(2749)
評論(0) 編輯 收藏 所屬分類:
CSS