|
網站設計 如果能為頁面實現理想的佈局，豈不妙哉？
是啊，但如何實現呢？
你可以使用級聯樣式表（Cascading Style
Sheets，簡稱CSS）為網站設計頁面佈局。本課將對CSS作簡單介紹。如需從頭開始全面學習CSS知識，可以使用我們提供的CSS教程。因此，請將本課當作CSS的預備課。
CSS是HTML的搭檔。在編碼過程中，它們發揮不同的作用：HTML負責網頁的具體內容（結構），而CSS則修飾網頁的表現形式（佈局）。
正如第7課所講， 可以用style屬性將CSS內聯到網頁中。例如，你可以採用下面的方法來設置文字的字體類型和大小：
例1：
<p
style="font-size:20px;">這裡的文字大小為20</p>
<p
style="font-family:黑體;">這裡的文字字體為黑體</p>
<p style="font-size:20px;
font-family:黑體;">這裡是文字大小為20、採用黑體的文字</p>
該例在瀏覽器中將顯示如下：
這裡的文字大小為20
這裡的文字字體為黑體
這裡是文字大小為20、採用黑體的文字
在上例中，我們使用了style屬性來指定字體類型（font-family）和字體大小（font-size）。在最後一段中，我們同時進行了字體類型與字體大小的設置，請注意用分號將它們隔開。
頁面佈局似乎挺繁瑣的？
CSS有一個優越的特性，即它可以對頁面佈局進行集中管理。也就是說，你不必在每個標籤裡都使用style屬性；相反，你可以只聲明一次，瀏覽器便會按相應的頁面佈局效果來顯示文本：
例2：
<html>
<head>
<title>我的第一個CSS頁面</title>
<style
type="text/css">
h1 {font-size:30px; font-family:細明體;}
h2
{font-size:15px; font-family:黑體;}
p {font-size:8px;
font-family:"隸書";}
</style>
</head>
<body>
<h1>我的第一個CSS頁面</h1>
<h2>歡迎參觀我的第一個CSS頁面</h2>
<p>你可以在這裡瞭解CSS的原理</p>
</body>
</html>
顯示示例
在上例中，我們在文檔的頭部（head）插入了CSS，它將應用於整個頁面。要將CSS嵌入文檔，你只需通過標籤<style
type="text/css">告訴瀏覽器該段為CSS即可。
在例2中，所有一級標題（h1）採用細明體，字體大小為30（象素）；所有二級標題（h2）採用黑體，字體大小為15（象素）；普通段落文字（p）採用隸書，字體大小為8（象素）。
另一種使用CSS的方法，是將CSS代碼單獨作為一個文檔保存。通過把CSS文檔獨立出來，你就可以同時對多個頁面的佈局進行集中管理。如果你要對一個大型網站上的大量網頁作字體類型或大小的修改，那麼這個方法絕對是最佳選擇。在此，我們不對CSS作更深的討論，我們的CSS教程最就此作詳細介紹。
CSS具有哪些其他功能？
CSS的作用不僅僅是指定字體類型和大小，它還可以用於許多其它方面，比如設置顏色和背景等。你可以試試下面的例子：
<p style="color:green;"
>綠色的文字</p>
<h1
style="background-color:blue;">蘭色背景的標題</h1>
<body
style="background-image:url('http://www.jzxue.com/logo.png');">
你可以試一下將這些示例代碼插入自己的網頁中，你可以採用兩種方法：（1）使用style屬性；（2）把CSS放在文檔的頭部（head）。
CSS僅僅用於設置顏色和字體嗎？
CSS除了用於設置顏色與字體等佈局之外，還可以控制頁面設置與表現形式(邊距，漂浮，對齊，寬度，高度等）。通過為不同元素設置不同的CSS，你可以令頁面佈局精密而美觀。
例3：
<p style="padding:25px;border:1px solid
red;">我愛CSS</p>
該例在瀏覽器中將顯示如下：
我愛CSS
float屬性用以定義元素的漂浮方式：靠左還是靠右。下例展示了該屬性的用法：
例4：
該例在瀏覽器中將顯示如下：
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat...
In the example, one element (the image) floats to the left and the other
element (the text) fills the hole.
With the property position, you can place an element exactly where you want
it in your page:
例5：
<img src="bill.jpg" alt="Bill Gates"
style="position:absolute;bottom:50px;right:10px;" />
顯示示例
在該例中，圖像被放置在瀏覽器中位於距底端50象素、距右邊界10象素的位置。這裡只是一個例子，實際上你可以把它放在你所期望的任何位置上。試一試吧！挺容易，而且很酷，是吧？
確實很酷。
但不容易吧？
當然，你不可能在十分鐘內學會CSS。正如前面所提到的，這一課只對CSS作簡要的介紹。以後，你可以從我們提供的CSS教程中學到更多CSS知識。
現在，讓我們先把精力集中於HTML，繼續學習下一課，在那裡你將學到如何在因特網上發佈自己的網站，讓全世界都能看到你的網站。
<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed
diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat
volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation
ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo
consequat...</p>
網頁寄存
|
留言列表
