七月 13, 2016 | 前端與Vue

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

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

前言

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

HTML與CSS

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

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

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

DIV

以往我們要做出這個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架構與更深入的部分,我們在之後的文章會再做更詳細的說明。