?? css0101.htm
字號:
<html>
<head>
<title>洪恩在線 - CSS教程</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="/pc/pc.css">
<link rel="stylesheet" href="/pub/css/home.css">
<meta name="keywords" content="電腦樂園,電腦,樂園,交互教程,交互,教程,教育">
</head>
<body bgcolor="white" text="black" topmargin="10" leftmargin="0" marginwidth="0" marginheight="10">
<!--頂部開始-->
<script language="Javascript" src="/pub/js/head.js"></script>
<!--頂部結束-->
<table width="760" height="20" border=0 cellspacing="0" cellpadding="0" align="center">
<tr>
<td height=20 class="p1" bgcolor="#E8E8E8" align="left"><img src="/pc/img/blank.gif" width="12" height="8"><font color="#000000"><font color="#FF9966">當前位置</font>：<a href="/default.htm" class="under">洪恩在線</a>
-> <a href="/pc/index.htm" class="under">電腦樂園</a> -> CSS教程</font></td>
</tr>
</table>
<table width="760" border=0 cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="15"></td>
</tr>
</table>
<table width="760" cellspacing="0" border=0 cellpadding="0" align="center">
<tr>
<td width="145" valign="top" bgcolor="#E8E8E8" align="left" style="color:blue" class="p1" height="123">
<br>
<table width="145" border="0" cellspacing="0" cellpadding="0" bordercolor="#F8AC0E" height="20">
<tr bgcolor="000099" valign="middle">
<td width="115" align="center" class="p2"><b><font color="#FFFFFF">CSS教程</font></b></td>
<td height="20" bgcolor="#E8E8E8" width="13"><img src="/pc/img/title_00.gif" width="13" height="20"></td>
<td height="20" bgcolor="#E8E8E8" width="17"> </td>
</tr>
</table>
<p class="p1" style="line-height:17pt" align="left"> <font color="#CC3399">→</font>
CSS快速入門<br>
<font color="#CC3399">→</font> <a href="css0201.htm">怎樣編寫CSS</a><br>
<font color="#CC3399">→</font> <a href="css0301.htm">CSS屬性</a><br>
<font color="#CC3399">→</font> <a href="css0401.htm">CSS定位</a><br>
<font color="#CC3399">→</font> <a href="css0501.htm">CSS濾鏡</a> <br>
<br>
</p><br>
<p align="center" class=p1> <a href=/pc/bin/msg.pl?file_id=k_css target="_blank"><img src="/pc/img/message.gif" width="64" height="54" alt="請您留言" border="0"><br> 談談您的看法</a>
<br>
<script language="javascript">
speak_num="za"
</script>
<script language="javascript" src=/pc/var/pc_k_css.js>
</script>
<script language="javascript">
var num=0
if (!isNaN(speak_num)){
num=speak_num;
}
else{
num=0
}
document.writeln ("已有")
document.writeln (num)
document.writeln ("條發(fā)言")
</script>
</p>
<br>
<p class="p1" style="line-height:17pt" align="left"> </p>
</td>
<td width=1 bgcolor=#0586D7 height="123"><img src="/pc/img/blank.gif" width="1" height="1">
</td><td width=15 background="/pc/img/line.gif"><p> </p></td>
<td valign="top" background="/pc/img/line.gif" width="584" height="123" class="p2">
<p align="center"><b><span class="p3"><br>
<font color="#3366CC">CSS快速入門</font></span></b></p>
<p align="right" class="p1"> </p>
<hr color=blue size=1>
<p class="p2" style="line-height:17pt"> CSS是Cascading Style Sheets（層疊樣式表單）的簡稱。更多的人把它稱作樣式表。顧名思義，它是一種設計網(wǎng)頁樣式的工具。借助CSS的強大功能，網(wǎng)頁將在您豐富的想象力下千變?nèi)f化。</p>
<p> <img src="img/css0511.gif" width="150" height="137" align="texttop" border="0" alt="圖1">
<img src="img/css02.gif" width="154" height="52" align="absmiddle" border="0" alt="圖2"> <br>
<font color="#CC3399">圖1</font> <font color="#CC3399">圖2</font></p>
<p class="p2" style="line-height:17pt"> 看到上面的兩幅圖片，您可能會認為這是用photoshop或者是其他圖形處理軟件制作的吧。可是上面的例子卻完全是用CSS編寫的。我們來看一下它的源代碼（不要以為講代碼您會搞不懂，很簡單的^_^）：</p>
<p class="p2" style="line-height:17pt"> <font color="006666"><html><br>
<head><br>
<title>css word</title></font> <br>
<font color="006666"><style></font><font color="CC33CC">//*CSS樣式定義開始*//</font>
<br>
<font color="006666"><!-- <br>
div<br>
{width：200; filter blur(add=true,direction=135,strengh=20);
<br>
}</font> <font color="CC33CC">//*定義DIV范圍內(nèi)的樣式，包括寬度(width)、模糊濾鏡屬性(blur)*//</font>
<font color="006666">--> <br>
</style></font><font color="CC33CC">//*樣式定義結束*//</font> <br>
<font color="006666"></head><br>
<body> <br>
<div></font><font color="CC33CC">//*以下的區(qū)域內(nèi)采用<head>中<style>里面定義的格式*//</font>
<br>
<font color="006666"><p style="font-size：48;font-style：bold;<br>
color:red;">hongen </p></font><br>
<font color="CC33CC">//*定義字體樣式(font-style)，包括字體大小(size)、粗細(bold)、顏色 (color)*//</font><br>
<font color="006666"> </div> <br>
</body> <br>
</html> </font></p>
<p class="p2" style="line-height:17pt"> 上面的代碼中以紅色顯示的是注釋部分，用于幫助您更好的理解代碼的含義。上面的這一段代碼產(chǎn)生的是如圖2的效果。而其中字體的模糊效果就是運用了CSS的濾鏡功能。濾鏡功能是CSS非常有趣也非常吸引人的一個功能，我們將在后面的章節(jié)中介紹。</p>
<p class="p2" style="line-height:17pt"> 實際上CSS的代碼都是由一些最基本的語句構成的。它的基本語句的結構是這樣的： <br>
<font color="006666">選擇符{屬性：屬性值}</font> <br>
看，是不是很簡單，只有三部分。 </p>
<p class="p2" style="line-height:17pt"> 我們結合上面的代碼來講解，比如上面代碼的<head>…</head>中，使用<style>來指定樣式。
<br>
一般說來，<style>下面的CSS語句是以注釋語句的形式書寫的，也就是上面代碼中的<!-- … -->符號包含的部分。所以，上面的例子中定義頁面樣式的語句是：<br>
<font color="006666">div{width：200;filter：blur(add=true,direction=35,strengh=20);}</font>
<br>
在上面的語句中，DIV是選擇符，選擇符可以是HTML中任何的標識符，比如P、DIV、IMG甚至BODY都可以作為選擇符。 <br>
這里用DIV做選擇符，就是說在HTML中，編輯在<DIV>中的頁面格式將以上面語句中大括號內(nèi)定義的格式顯示。 <br>
括號內(nèi)的WIDTH和FILTER就是屬性。<br>
WIDTH定義了DIV區(qū)域內(nèi)的頁面的寬度，200是屬性值。 <br>
FILTER定義了濾鏡屬性，BLUR是它的屬性值，該屬性值產(chǎn)生的是一種模糊效果，其小括號內(nèi)定義的是BLUR屬性值的一些參數(shù)。 <br>
<font color="#FF0033">ADD</font>參數(shù)有兩個值：True和False。分別指定圖片是否被設置成模糊效果。<br>
<font color="#FF0033">Direction</font>參數(shù)是用來設置模糊的方向。0度代表垂直向上，然后每45度一個單位，例子中的135代表底部向右135度，每一個度數(shù)單位都代表一個模糊方向，如果您感興趣的話，可以參照后面的講解中詳細的參數(shù)設定。
<br>
<font color="#FF0033">Strengh</font>代表有多少像素的寬度將受到模糊影響，參數(shù)值是用整數(shù)來設置的。 </p>
<p class="p2" style="line-height:17pt"> 我們看到除了在<HEAD>中有CSS 的定義，在<BODY>中也有一段CSS定義：
<br>
<font color="006666"><p style=“font-size：48;font-style：bold;color：red;”>hongen</p></font>
<br>
這里Style是內(nèi)嵌到<P>中來定義該段落內(nèi)的格式的。我們發(fā)現(xiàn)在<BODY>中的CSS語句與定義在<HEAD>中還有些不同，它是用<
STYLE = >直接定義的。這種定義方法非常適用于編寫的代碼比較多的情況。<br>
而上面的代碼的CSS定義格式則非常適用于代碼較少、結構較簡單的情況。 <br>
按照CSS語句的基本格式，我們可以看出上面定義P段落內(nèi)的CSS代碼中font-size、font-style和color是屬性，分別定義<P>中“hongen”字體的大小(size)、樣式(style)和顏色(color)；<br>
而48、bold、red是屬性值。意思是“hongen”將以48pt、粗體、紅色的樣式顯示。由于整個段落是定義在<DIV>中的，所以hongen又將顯示出<head>中定義的濾鏡屬性來。最終的結果就如同圖2一樣。
<br>
圖1中的效果也是用很簡單的CSS語句實現(xiàn)的，只是運用了CSS中的濾鏡屬性而已。 </p>
<p class="p2" style="line-height:17pt"> 通過上面的講解，我們可以看到用很簡單的CSS語句就可以實現(xiàn)許多需要專業(yè)軟件才可以達到的效果。利用屬性可以設置字體、顏色、背景等頁面格式；利用定位可以使頁面布局更加規(guī)范、好看；利用濾鏡可以使頁面產(chǎn)生多媒體效果。
怎么樣，CSS的功能是不是很強大，在下面的教程中我們將對它進行詳細的講解。 </p>
<hr color=blue size=1>
<p class="p1" align="right"> <a href="css0201.htm">下一節(jié)</a> </p>
<p> </p><br>
<p align="center" class=p2><a href=/pc/bin/msg.pl?file_id=k_css target="_blank"><img src="/pc/img/message.gif" width="64" height="54" alt="請您留言" border="0"><br> 談談您的看法</a>
<br>
<script language="javascript">
speak_num="za"
</script>
<script language="javascript" src=/pc/var/pc_k_css.js>
</script>
<script language="javascript">
var num=0
if (!isNaN(speak_num)){
num=speak_num;
}
else{
num=0
}
document.writeln ("已有")
document.writeln (num)
document.writeln ("條發(fā)言")
</script></p>
<br>
<p> </p></td><td width=15 background="/pc/img/line.gif"><p> </p></td>
</tr>
</table>
<!--底部開始-->
<script language="Javascript" src="/pub/js/foot.js"></script>
<!--底部結束-->
</body>
</html>?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -