技術敎學 - 自定義風格
-
此篇文章並非教學文章,而是讓大家在開始學習製作主頁風格前,先就CSS本身做一個初步的認識,什麼是選擇器?什麼是屬性?設定值又是什麼?這些在本文都有作一些解說,以下正文開始:
一、 CSS簡介
CSS 的全名為 Cascading Style Sheets,是一種樣式表 (Stylesheet) 語言。它的目的是為了對像 XHTML 及 HTML 之類的標記語言 (markup language) 提供一個顯示層。
簡單來說,HTML文件就是在主頁上所看到的個人資料,日誌,音樂等等,不論是文字或是影音的資料。CSS則是為了使這些資料容易被人讀取,而為的一種排版樣式。
二、 CSS語法
CSS的語法很簡單,它使用一組英語詞來表示不同的樣式和特徵。CSS即是以下面的方式呈現:
選擇器 { 屬性1: 設定值1 ; 屬性2: 設定值2 ;………}
* 注意* 每個文字跟文字,文字跟標點符號之間的『空格』是必須的
若以房子來比喻,「整個主頁的CSS」就是一棟房子,「選擇器」指的是每個房間,「屬性」則是在房間裡的傢俱、燈飾等擺設,而「值」則是指擺設的大小,顏色,位置等。
(1) 選擇器(Selector)
即body、wrap、obar、header等,多個選擇器之間可以用半形逗號(,)隔開。選擇器後須將屬性跟設定值包括起來則用({ })。
(2) 屬性(property)
目的在控制選擇器的樣式。即color(顏色<通常指文字顏色>)、font-size(字型)、background(背景)、border(邊框)、width(寬)、height(高)等。屬性跟屬性間由(;)隔開,而屬性與值之間則為(:)。
(3) 值(value)
指屬性接受的設定值,多個值之間大都以『空格』隔開。像是希望文字顏色是紅的,則在color後面加上red變成這樣à { color : red } 其中的red即是設定值。
以下是一些屬性與設定值之間的搭配用法:
【長度單位】
單位
單位說明
範例
pt
Point,就像是Word裡面的Point一樣大小
font-size:10pt
px
Pixels,依您螢幕解析度而決定大小
font-size:10px
pc
Pica,6個Pica是一英吋
font-size:10pc
mm
公厘,用過尺...這個設定值完全不會因為其他設定而改變
font-size:10mm
cm
公分,不會因為使用者設定而改變
font-size:10cm
%
百分比,大部分是指所在位置寬度或者長度百分比
font-size:10%
【顏色表示】à用在[值]的部份
表示方式
表示方式說明
範例
#rrggbb
可以用Windows色彩選擇工具找到
color:#feefc7
rgb(#,#,#)
用數字來表示紅色藍色以及綠色的混合...也可以用Windows色彩選擇工具找
color:rgb(135,255,124)
rgb(%,%,%)
用百分比來代表紅色藍色以及綠色的強度來混合顏色
color:rgb(70%,35%,41%)
顏色名稱
用顏色的名稱來指定艷色
color:brown
-
鴨子聽雷 霧剎剎
-
怡臻: 鴨子聽雷 霧剎剎如果有心,總會學會的。慢慢來!
-
虫二: 如果有心,總會學會的。慢慢來!嗯嗯~
-
看见就头痛或是头大了。
-
haha: 看见就头痛或是头大了。有關這方面是要傷點腦的。
-
虫二: 有關這方面是要傷點腦的。可不可以拒绝一切让我头痛的学习了呢?懒人呀!
不被迫到最后都不会去学的人哦!
-
haha: 可不可以拒绝一切让我头痛的学习了呢?懒人呀!有的。只要有人幫妳弄好後。然後妳覆制貼上,是最快方法。
不被迫到最后都不会去学的人哦!
-
虫二: 有的。只要有人幫妳弄好後。然後妳覆制貼上,是最快方法。Ya!正是想要这些服务,嘻嘻!
-
haha: Ya!正是想要这些服务,嘻嘻!行
-
虫二: 行话说弄这个有啥用啊?
-
是空间背景设计么?
-
haha: 话说弄这个有啥用啊?取悅自己囉。
-
半形逗號....對我來說,新名詞。
-
椰絲酒吧: 半形逗號....對我來說,新名詞。
-
虫二:逗號 就 逗號,為什麼....半形?
-
椰絲酒吧: 逗號 就 逗號,為什麼....半形?(,)
-
虫二: (,)在我眼裡,這是逗號,為什麼叫 "半形" 逗號? 全形逗號長什麼樣?
-
椰絲酒吧: 在我眼裡,這是逗號,為什麼叫 "半形" 逗號?全形逗號長什麼樣?
-
虫二:不考你了!你上床睡覺。晚安! 我要去吃午飯了! 等你睡醒聊