成為網頁設計師的第一步：html與css

前言

在這個科技發達的時代，網路上充滿著形形色色的網站，不管是用任何的網站開發工具，他們的基本頁面都是用html與css所組成的，那麼html與css又是什麼呢？

HTML與CSS

html是有著各種不同含義標籤的網頁格式，而一個網頁就是由各種不同的標籤所組成的。而css則是為了解救html所誕生的。

為什麼說是解救呢，在最開始html只是單純的定義網頁的架構與內容，隨著人們對網頁的美觀越來越要求的同時，大家也開始在html裡面加了排版的元素，導致html越來越複雜。在一個html裡要管理網頁的架構、又要管理網頁的排版，而css的出現，便可以幫html分擔一半的工作，html只要管理網頁的架構就好，排版就都交給css。

簡單來說呢，html就是一張素顏的臉，而css就是化妝品，能把原本不怎麼起眼的html頁面打扮得美美的。

以往我們要做出這個div的樣式，會這樣打︰
<div style="width:200px;height:200px;background-color:red;text-align:center;line-height:200px">DIV</div>
有了css之後html就只需要打
<div>DIV</div>
剩下的樣式就由css完成
div{ width:200px; height:200px; background-color:red; text-align:center; line-height:200px }

這樣html看起來就不會非常的雜亂，也能夠的區分出，架構就是html，樣式就是css了。

HTML 5與CSS 3

隨著時代的演進，html與css也在不斷的改革與變新，而現階段兩者最新的版本分別為HTML 5與CSS 3。

HTML 5

html 5與前幾個版本最大的差異在於，簡化了很多宣告的寫法以及賦予更有實質意義的標籤。

以往要宣告網頁的編碼時，在html 4必須要打：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，
而在html 5你只需要打：<meta charset="utf-8">

以往在頁面排版時你可能會用很多個Div，內容一多，你往往不知道你到底在改什麼東西，而html5則賦予了更有意義的標籤。 例如，以往你可能會用<div id="header">才能在css更改這個div的樣式，而現在你只需要<header>就可以在css去做更改，也能更清楚的瞭解網頁上的內容是屬於html上的哪個部分。

CSS 3

css與html的版本所代表的意思有所不同，html的每一個版本都可以看做一次改革，而css則是不斷的新增更有趣的屬性。在最新的css 3版本裡，則是增加了新的選擇器以及動畫、文字效果、多列佈局和特效等屬性。

結論

基本上只要瞭解了html與css的基本結構與寫法，就能自己寫出一個好看的網頁囉，有關於html以及css架構與更深入的部分，我們在之後的文章會再做更詳細的說明。