CSS 3 語法介紹
CSS 的語法由三個部份組成. 分別是 selector 選擇子, property 屬性,
及 value數值:其構成的語法就像底下的範例. 這個範例僅是說明CSS
語法的構成.並不是真實可用的CSS 語法指令
selector {property:value}
這個選擇子通常是您想要定義的HTML 標註語言的要素/元素 或標簽. 屬性這個用來定義您想要改變的屬性內容,每一個屬性可以給予一個含以上的數值., 在屬性與數值之間是用 : 冒號加以區隔最外層則是以 {} 大括弧包覆。
body {color:black}
注意事項:如果數值是多個字元的組成,您必需為這個數值以引號包覆,請參考下例:
p {font-family:"sans serif"}
注意事項: 如果您想要指定更多的屬性，您必需使用; 分號來區別多個屬性,請參考底下的範例
這個範例展示了如何將文字區段指定為文字居中,並指定文字顏色為紅色.
p {text-align:center;color:red}
另外為了使CSS 樣式定義更方便閱讀.您可以每一行描述一個屬性內容,請參考底下的範例
p
{
text-align:center;
color:black;
font-family:arial
}
CSS 3 語法介紹
CSS 的語法由三個部份組成. 分別是 selector 選擇子, property 屬性,
及 value數值:其構成的語法就像底下的範例. 這個範例僅是說明CSS
語法的構成.並不是真實可用的CSS 語法指令
selector {property:value}
這個選擇子通常是您想要定義的HTML 標註語言的要素/元素 或標簽. 屬性這個用來定義您想要改變的屬性內容,每一個屬性可以給予一個含以上的數值., 在屬性與數值之間是用 : 冒號加以區隔最外層則是以 {} 大括弧包覆。
body {color:black}
注意事項:如果數值是多個字元的組成,您必需為這個數值以引號包覆,請參考下例:
p {font-family:"sans serif"}
注意事項: 如果您想要指定更多的屬性，您必需使用; 分號來區別多個屬性,請參考底下的範例
這個範例展示了如何將文字區段指定為文字居中,並指定文字顏色為紅色.
p {text-align:center;color:red}
另外為了使CSS 樣式定義更方便閱讀.您可以每一行描述一個屬性內容,請參考底下的範例
p
{
text-align:center;
color:black;
font-family:arial
}
群組化 Grouping
您也可以將選擇子群組化,每一個選擇子間以逗號區別.底下的範例將展示如何將HTML 中標題元素/要素 相關的選擇子,群組起來並指定為綠色的文字.
h1,h2,h3,h4,h5,h6
{
color:green
}
類別選擇子 The class Selector
使用類別選擇子您可以為相同的HTML 元素/要素 定義不同的樣式,以字段來說 HTML 的要素/元素是<P> 假設您想為字段設定不同的排序分別,一個向右對齊 另一個向中對齊. 您可以參考底下的範例,底下的範例是寫在CSS 樣式表指令區.
<head>
<style type="text/css">
p.right {text-align:right}
p.center {text-align:center}
</style>
</haed>
您可以使用類別屬性在您的HTML 文件中:
<p class="right">This paragraph will be right-aligned.</p> <p class="center">This paragraph will be center-aligned.</p>
注意事項:您也可以指定一個以上的類別屬性給HTML 元素/要素,請參考底下的範例
<p class="center bold">This is a paragraph.</p>
像是上面的範例裏就是同時指定了類別選擇子 center 及類別選擇子 bold 給這個字段
您也可以省略類別選擇子的標記名稱,來定義一個可以使用在所有HTML 要素/元素的樣式.
並且所有使用此一類別運算子的HTML 要素/元素皆為同一階層. 請參考以下範例:
.center {text-align:center}
在底下的範例裏,h1 及 p 這兩個html 元素/要素. 同時都使用了這個省略了標記名稱的類別選擇子.這兩個元素/要素都套用了 .center 這個省略了標記名稱的類別選擇子的樣式規則. 都是文字排序居中的效果, 使用這樣的類別選擇子可以大大簡化CSS樣式表,避免為同樣的樣式撰寫過多冗長的指令,在這個範例中您就可以不必為 P 字段 跟 H1 標題字段分別定義各別的文字居中樣式.
<h1 class="center">This heading will be center-aligned</h1> <p class="center">This paragraph will also be center-aligned.</p>
注意事項: 您必需注意不能使用數值符號在定義類別選擇子的名字前面.
.1234center
在學習CSS 前您有什麼是必需知道的?
在您繼續閱讀底下的教學前.您必需對 HTML/XHTML 有一些基本的了解, 當然也可以依循底下我發佈的教學
慢慢的對HTML/XHTML 有一個概括的了解,我將不會介紹所有的HTML/XHTML 只會概略提到跟底下CSS 教學相關的部份.
什麼是CSS?
CSS 是Cascading Style Sheets 的縮寫.一般的翻譯是標準樣式表
它可以用來定義如何來表現/顯示 HTML 要素/元素.
它可以用來存儲一般的樣式表定義
它可以被加入到 HTML 4.0 的網頁標註語言來解決及強化HTML 4.0 的功能
外部定義的樣式表可以儲存很多並簡化網頁的定義
外部定義的樣式表可以被存儲在單一的檔案中. 其副檔名為 .CSS
多重的樣式定義可以經由一個樣式來套用
CSS 發展到現在已經是 3.0版了, 3.0 向下相容 2.0 其較早版本的樣式定義,也包括了一些針對特別瀏覽器的延伸子集
底下先對網頁的背景的相關語法做個解釋
CSS Background
CSS 的背景屬性定義 HTML 中關於背景要素的影嚮,請看底下的網頁範例
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
<BODY> </BODY> 等等,這些全是HTML 標註語言的標簽. 用以定義不同的作用區域,
像是 <HTML> 到 </HTML> 中間所包含的就是 HTML 標註語言的主體. 而 <BODY> 到 </BODY> 則是 HTML檔案中的主要標簽,用來存儲文字,聲音,影像等等. 當然還要加上更多的細節標簽才能達到上述的應用
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
上面的CSS 指令包含了四行對HTML 元素/要素的定義,
分別是 body h1,h2,p 等
簡單的來提一下 body{} 內的指令. 這樣就可以把
這個網頁的背景顏色指定為 yellow 黃色.
這兒關於顏色的定義,有三種指定顏色的方式.
一. 就是字面上的定義. 例如上例 yellow 就是黃色
二. 16進位的色碼表示,例如 #00ff00
三. RGB 三元色的色碼表示.
還有一個特別的顏色應用 transparent 這個是指透明色. 上面的顏色定義看起來很繁複. 這的確也是但是要利用適當的工具就可以好好的指定自己想要用的顏色.
http://www.w3schools.com/HTML/tryit.asp?filename=tryhtml_basic
上面這個網址是一個小型的即時的網頁編輯頁面,您可以在這練習您剛學到的指令.
接下來請您到下述的網址去下載 ColorSelector
http://www.fujitsu.com/global/accessibility/assistance/cs/download.html
這兒可以下載英文版或簡體中文版,不過建議使用正體中文作業系統朋友們. 下載英文版就可以了
功能很強大,操作很簡單. 若是下載簡體中文版在使用上會碰到不些字碼顯示不正確. 還是用英文版就好了
如何在Blogger 文章裏使用表情符號?
當然也可以透過blogger 內建的圖片檔上傳作業來上傳要使用的表情圖案.但那可一次只能上傳一個圖檔.即使利用google site 也是只能一次上傳一個.目前皆尚未支援FTP 批次傳檔.
較好的方法是將表情圖檔下載回來後.解壓縮後直接上傳到Goolge 的Picasa 3網路相薄去
不過要做這個動作前先要去下載表情圖檔.首先介紹有很多表情圖檔的網站. 像是內陸的朋友常用的QQ表情圖檔,或是國內流行的彎彎,洋蔥頭皆有收錄.
http://cuteemoticon.blogspot.com
這兒以QQ Panda emoticon 做為範例說明.詳細下載位置如下
http://cuteemoticon.blogspot.com/2009/02/panda-emoticon.html
其實在上面這個連結裏是有一些可以立即拿來用的程式碼,您可以直接點選最左邊的圖示就會被導引到另一個頁面去. 請參考下圖. 不過這不是所有的表情圖示都有連結的.
QQ 的熊貓表情符號("不會是真的吧")
只要直接點選HTML CODE 再把它複製貼到您的部落格文章即可.底下有個IMG CODE 那是給一般論壇用的,通稱 BB 標簽,一般是不能直接在Blogger 部落格使用的
[IMG]http://i655.photobucket.com/albums/uu273/cebongipiet/panda%20emot/QQ_3710.gif[/IMG]
之前提到較好的方法是直接上傳到Picasa 去.但這裏您極有可能碰到下載好的表情圖案,在Picasa 無法找到的情況. 即使是您自認放到了正確的目錄底下. 例如 我的文件底下的我的圖片
會發生這樣的情況.請參考敝人在下我的另一篇文章
http://idarfan.blogspot.com/2009/05/damn-where-is-my-picture-part-of-picasa.html
接下來若您已成功將圖示檔傳上去Picasa 3 網路相薄. 當您要引用表情符號時. 只要登入到該相薄並選右側的連結到該相片. 如下圖所示的勾選. 再將那html code 貼到您的文章就可以了
要記得右下角的要勾選.要不然就會把您的相薄連結給洩露出去了. 嘿嘿
這幾天來一直在找給 Blogger WideScreen Template,實在還蠻難找的, 或說我都沒能順利找到適當的模版. 有一件事我實在蠻想不懂的. 相信很多人家裏的螢幕都早已經16:9 或 16:10 的寬螢幕了吧.怎麼四處去找都很難找到給寬螢幕用的模版?!
一般而言不管找到三欄式或五欄式的Blogger Template 若是非專門為寬螢幕設計的.就會如下圖一樣看起來極度兀突.只有中間有模板. 兩邊都是空白的. 這對寬螢幕的使用者來說. 好像
螢幕給縮水了.這樣的比例又會讓字體相對的變的擁擠難以觀看. 還要按住Ctrl 再按 + 號. 把螢幕給放大. 真是令心困擾.(P.S 按住Ctrl 再按+ 可以把字體等比例放大,但不是所有瀏覽器都有支援; 我用的是FirFox)
底下這個連結是我目前正在用的模版.也不是說完全沒有問題. 但至少不會把寬螢幕當成窄螢幕來用. 若您手邊有更好的寬螢幕模板.也請您務必不吝分享. 感激不盡
http://btemplates.com/2008/03/11/simpress/
