網頁設計CSSBBS新手教程《一看就會》第一課－hkseo

網頁設計CSSBBS新手教程《一看就會》第一課

發佈者:作者:Web Design香港網頁設計大皇 - 網站設計

Web Design

　　作者的話

　　今天抽了點時間開始寫一個新手教程，此教程是針對初學者寫的，寫作方式也很隨意，我也沒有計劃寫多少課，有空到時候就來寫寫。把自己的一些經驗都寫出來，供大家參考。本人也不是非常專業，如果有錯誤的地方還請多多糾正。

　　首先我先說明一下，CSS的功能其實就是定義HMTL標籤顯示效果的。(如果不知道HTML是什麼，請點擊這裡學習HMTL教程!)沒有其他什麼更深奧的功能，而我寫CSS的原則就是只要能實現某個想要的效果就OK了。僅此而已，所以其中可能有不標準的地方。暫且不談這個，我們現在的重點就是實現最佳效果!

　　能夠讓學CSS的朋友，或多或少的有所收穫即是本人的最高興的事情!

　　廢話少說，現在開始講課……　　

CSS新手第一課：CSS是什麼?

　　上面已經說了，CSS就是對HMTL標籤的控制!讓網頁顯示出你想要的佈局和風格!

　　長遠的說就是實現W3C網頁的標準化，個人理解就是讓網頁更健康。這個健康不是內容的健康，而是代碼的合理運用!

　　如果還不清楚CSS能做什麼。就到百度搜索一下吧!

　　現在開始舉個例子你就知道了!

　　CSS最多到控制HTML標籤裡的DIV標籤!最常用的就是CSS+DIV佈局! 在很久以前我們都用表格(TABLE)來進行網頁佈局，現在表格佈局的網站也不少，關鍵還是簡單，方便，不過代碼看起來比較亂，改版也麻煩。所以越來越多的網站開始CSS+DIV進行W3C重構。

　　最典型的就是門戶網站，現在基本所有的大型門戶網站都重構了。因此可以說明以後的個人網站、公司網站都會以這樣的方向發展。

　　好了現在我們來看個例子!

代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://webdesign.zoapcon.comorg/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://webdesign.zoapcon.comorg/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSSBBS新手教程第一課</title>
<style>
div{ width:100px; height:100px; border:1px solid #000; float:left; background:#99FF00; margin-left:10px;}
.css{ background:#FFFF00}
#css{ background:#00FFFF}
</style>
</head>
<body>
<div>直接div</div>
<div class="css">.css</div>
<div id="css">#css</div>
</body>
</html>

        然後我們來講解一下。

        看來效果，其實很多複雜漂亮到佈局就是這樣做的，上面的代碼很短，但是涉及到知識卻不少。

        我們來分析一下代碼
        CSS代碼





div{ width:100px; height:100px; border:1px solid #000; float:left; background:#99FF00}
.css{ background:#FFFF00}
#css{ background:#00FFFF}

在一個網頁中CSS代碼一般放在網頁的頂部<head>區域，並用 <style></style> 圈起來！或者可以外部調用！

再來看看HTML代碼

<div>直接div</div>
<div class="css">.css</div>
<div id="css">#css</div>

        裡面有3個DIV，大小都是100×100像素的正方形，全部向左浮動。並且間距10像素，邊框1個像素灰色！
        第一個DIV是綠色。這個DIV沒有起名字，因為CSS中直接定義了DIV到樣式，所以沒有其他定義的話，所有的DIV都綠色的！
        第二個DIV是黃色。如果你把class="css"去掉，也會是綠色！class就是一組的意思，如果你再添加一個DIV也想是綠色的，那麼 class=css即可！等號後到名字你可以自己設定！在CSS中要定義他的話就是.css{}的形式，名字前面加個點！也可以寫成div.css{}
        第三個DIV是藍色。這個給DIV定義了ID名，同一個頁面裡是不可以重複的！這就是和class的區別！

        border:1px solid #000; 這句就是定義了DIV到邊框！邊框寬度為1個像素，樣式是實線、顏色是黑色！
        float:left; 這是佈局中比較重要的東東！用於浮動的。你可以把運行框中的這句去掉運行一下看看沒有它是什麼效果！
        background 這個就是背景顏色啦！
        好了今天就說的這裡，總結一下。
        今天的要學會，浮動、邊框、class、id、背景顏色、DIV..
        實踐：創建一個HMTL文件，複製上面的代碼，改改顏色，寬度，數值等，看看有什麼不同的效果，以便更好的理解。

Web Hosting