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