關於部落格
二歲ㄉ部落格,有部落格ㄉ朋友支持,人氣一定會旺旺喔!!...不要讓部落荒廢哩...還有來逛逛的時候...記得留下你的腳印喔!!!
  • 8543

    累積人氣

  • 3

    今日人氣

    0

    追蹤人氣

CSS基本概念

【CSS能做什麼】
CSS 能做什麼?可做的事可多著,不過,以最簡單的方式來比喻其功能的話,我們可以說它是網頁的美容師,凡是網頁上看得到的文字、圖片、表格、表單都有它發揮的 空間,文字方面,您可以利用CSS來隨意設定字體大小(不再像HTML最大只能到size=7而已),設定行距、間距、去除連結底線…等。
您也可以利用CSS將圖片或文字精準的定位在網頁上的某一個地方,更可以更改表單、表格的框線、顏色…等,您甚至可以更改滑鼠形狀或是做出類似簡報的轉場 效果。這些只是工友隨便舉幾個效果而已,實際上,若是要認真講解,是可以寫成一本書的。所以,今天這一系列工友盡量以一些實用的技巧,來介紹CSS,若是 看完這篇教學後,還覺得意猶未盡的讀者,可以自行去買相關的書籍來閱讀喔!

【CSS語法】
CSS語法我們"通常"加在<HEAD></HEAD>之間!

為什麼說通常呢?因為隨著加上去的方法的不同,放置的位置也不盡相同。至於加上去的方法可不只一種喔!大致上說來,要在網頁上使用CSS共有四種方法,後面我們再一一來介紹。

以這個例子而言,我們究竟加上什麼,才能改變整個網頁的字體大小呢?看看下面的語法:

<style type="text/css">
body{font-size:9pt}
</style>

 

範例分析:這就是我們加在<HEAD></HEAD>之間的CSS語法啦!<style type="text/css"></style>標籤是告訴瀏覽器說:「這裡頭是CSS語法喔!若是瀏覽器有支援的話,那麼就照裡頭的語法來設定網頁的樣式吧!」而其中的 body{font-size:9pt} 則是CSS的宣告,它的意思是說:「只要是被<body>標籤包起來的文字,其文字大小(font-size)都設成9pt 的大小。」這樣可以了解嗎?

 
在開講之前,我們先直接跟您講答案!怎麼做出「連結變色」的用法?

樣式表 <style type="text/css">
A:link {color: blue}
A:visited {color: gray}
A:active {color: green}
A:hover {color: red}
</style>

這就是連結變色的 CSS 語法!怎麼套用到網頁上呢?不不不...它不需要套用!您只要將這個CSS語法乖乖的擺到網頁上即可,當網頁中有連結時,它就會自動套用上去了!夠簡單吧!若仍不懂,請看看範例及原始碼

您可以仔細瞧瞧 CSS 樣式表中所列的東西,通通都是 A: 開頭的!這是什麼意思呢?A在HTML裡面代表的就是連結...也就是說,您宣告的這四個語法都是和連結有關係的!

有什麼關係呢?嗯!關係就寫在「:」之後(注意 A:link 這中間沒有任何空白!)A:link 就是代表「正常的連結」,A:visited 就是代表「參觀過的連結」,A:active 就是代表「執行中的連結」,A:hover 比較特別,它是代表「當滑鼠移到連結上的時候」!我們再回頭看看剛剛的樣式表,我們來解釋一下:

原始CSS 其意義如下
<style type="text/css">
A:link {color: blue}
A:visited {color: gray}
A:active {color: green}
A:hover {color: red}
</style>
<CSS 樣式表開始>
一般連結:{顏色:藍色}
參觀過的連結:{顏色:灰色}
正在執行的連結:{顏色:綠色}
當滑鼠移到連結上:{顏色:紅色}
<CSS 樣式表結束>

就這樣...連結變色的效果,很快的就產生了!真的粉簡單吧!

相簿設定
標籤設定
相簿狀態