CSS超初教學版-CSS概念 2


說到改BLOG樣式就不能不扯到CSS,那麼,這個CSS又是什麼東西呢?

接下來就做個簡單的介紹吧~

一般的BLOG服務都會提供後台,用來設定基本的資料還有自訂BLOG的樣式等等的設定

其中,樣式設定裡面,有個自訂樣式或是原始碼編輯
裡面是通常一大堆像火星文的東西,這個就是所謂的CSS樣式表

CSS是用來設定HTML網頁裡的圖片、表格、文字等等元素的樣式

用人和衣服來比喻的話
HTML裡的內容元素是人,CSS就是衣服

CSS有好幾種穿法,有直接在HTML裡拿衣服穿
(所謂的行內CSS樣式,例如: <p stlye=”color:red;”)

也有用針對HTML裡的元素指定某個衣櫃一口氣穿裡全部的衣服這種穿法
(所謂的外連式CSS,例如: <p class=”title”>)

這種衣櫃看放的地方不同,又有分放在HTML和外連兩種。

放在HTML裡的就是同一個HTML裡會看到用<style>標籤包起來集中管理的各種CSS樣式衣櫃
例如 <style> .title{color:red;}  </style>

外連的就像是BLOG的CSS設定一樣,是完全獨立於HTML,另外有一個.CSS的衣櫃庫放衣服
在HTML裡會看到一行 <link href=”…/…/某某.css” rel=”stylesheet” type=”text/css”>
然後另外會有一個.CSS的檔案,裡面全都是放滿衣服的CSS衣櫃


以BLOG的CSS為例,就是外連式的CSS衣櫃
一般使用者只能改變CSS衣櫃內的衣服,但是不能改變網頁本身的架構,也就是是網頁HTML的部分

像是你可叫他換衣服、穿隱形斗篷或脫光XD,但是不能叫他換穿另一個CSS衣櫃裡的衣服一樣

 

換句話說,在BLOG的情況下,我們可以設定不同的背景、背景圖、文字大小、樣式、顏色還有表格的長寛…
也可以改變大小、排列方式,但不能讓在HTML裡增加一個新的區塊或是幫某個元素增加一個全新的衣櫃

網頁設計者在編寫HTML頁面時會先在HTML裡像上面講的一樣
指定好表格或圖片要穿哪一個CSS樣式(衣櫃),然後再設定CSS的內容(衣服的樣式)

除了文字元素外、表格、圖片、標題、區塊或是整個網頁本身都可以是元素
所以元素本身可能單指某一段的文字,例如<p></p>
也有可能是一個表格包括裡面的文字及圖片,這就要看設計網頁的人在設計時是怎麼指定的了

以BLOG的情況,我們只能換CSS裡的衣服,沒辨法增加衣櫃的數量

以下是一個CSS衣櫃的設定

.category_word{
color:#117E96;
font-size:15px;
font-weight:bold;
padding-left:85px;
padding-top:0px;
padding-bottom:2px;
}/* 主標題文字設定 */

其中第一行的.category_word
是CSS衣櫃的名字

再來{} 這個標製就是衣櫃的門,裡面包有.category_word 的每一件衣服

設定的方式就是像color:#117E96;
color 指的是字的顏色,加上後打上顏色的參數 #117E96
最後加上 就是這個CSS一個關於顏色的設定

; 就是區隔開每個設定用的,相當於句點的意思

項目 : 參數值;

比如 color : #000000 ;
就等於,顏色 黑色 結束

最後的/* 文字文字 */
是用來說明的,只要加上一組/*  */

中間的字或是程式碼就不會在網頁中表現出來(傳說中的隱形斗篷XD),可以幫助你筆記你的樣式是針對網頁的哪個部分
這裡就是筆記這個CSS物件是”主標題的文字設定” 
記得/* 和文字中間要保留一個空白喔 */ 

 


再拿衣櫃來比喻,就是有人(元素)在HTML裡,
要穿CSS房間裡一座叫 .category_word 衣櫃裡的衣服

.category_word 裡面有{上衣:紅色的; 帽子:有條紋的;} /* 說明: 這座衣櫃是給HTML裡會計穿的 */


每個HTML頁面都有很多的元素,像BLOG裡最常見的用一組<div></div>標籤包住
或者是<p></p> 

然後會告訴你這個<div> 套用哪一組CSS
在HTML裡看起來就像是 <div class=”banner”> <p id=”banner”>

 

在CSS的部分就會是 .banner{} 或是#banner{}

.class 和 #id的差異就在於
.class 是大家共用的衣櫃,很多人都穿這一櫃
#id 則是專屬於某個人(HTML元素)的衣櫃(CSS樣式)

所以只要先在BLOG裡找出元素是穿CSS樣式表裡哪一個衣櫃的衣服
再到CSS樣式表裡
針對裡被指定的衣櫃設定
{}圍起來每件衣服的參數,就能變化你的BLOG啦~~


About chibc

chibc《暗月之鏡》 從高中網路開始普及就開始成為重度網路使用者,早期主要活動集中於巴哈姆特。
G+ CHIBC


看完有什麼想和版主講的,沒有就留個「閱」吧

2 thoughts on “CSS超初教學版-CSS概念