今天『成為CSS高手之路』系列文章之三將來說明一下,CSS語法的宣告方式以及在Dreamweaver中要如何設定CSS,雖然有些人覺得應該直接用『寫』得方式來學習CSS,但設計嵐希望CSS被更多人所了解接受(包括初心者),唯有大家不害怕CSS了,也才會願意去深入研究它,所以即使直接使用軟體的設定畫面完成的CSS,只要使用得當,實用性還是相當高的。

      由於CSS的宣告方式很多種不同的方式,為了減輕各位學習上的負擔,以及分別說明各種不同的方式,設計嵐以一種方式一篇文章的方式來解說,大家可以分開閱讀,也比較好掌握重點;首先Part I 設計嵐先來講解第一種方式-『在整個網頁頁面中套用CSS規則』要怎麼設定以及宣告的方式。

     在這一系列的文章中,我們依然用上一篇的範例來做示範說明,下圖為一個純粹使用HTML語法撰寫的頁面:  

 

1.網頁頁面內容圖解說明: (順便溫故知新一下)

1.jpg 

‧上圖1為網頁內文的大標題文字,套用了html語法中的<h1></h1>標籤。

1-2-5.jpg 

 ‧上圖2為內文的段落文字,套用了<p></p>標籤。

1-2-6.jpg 

‧上圖3表示在頁面中插入了一張圖片,套用了<img>標籤。

1-2-7.jpg 

‧上圖4為在內文中插入一個3欄3列表格,使用的是<table></table>標籤。

1-2-8.jpg 

‧上圖5表示在文字上加入了『超連結』,使用了<a></a>標籤。

1-2-9.jpg 

‧上圖6表示網頁的頁面標題,使用了<title></title>標籤。

1-2-10.jpg  

 接著我們將針對上述頁面設定CSS樣式並且加以說明。

2.在整個頁面套用CSS的設定與宣告方式

 

a.在Dreamweaver中的設定:

i.執行『修改』→『頁面屬性』

1.jpg 

ii.在分類中的『外觀(CSS)』都是以CSS語法控制整頁面格式的設定值

2.jpg 

iii.在此我將文字設定為『新細明體』、12pt、粗體、藍色;背景色彩為『#F9F』,然後按下『確定』。(如下圖)

3.jpg 

iV.預覽畫面如下:

4.jpg 

      由上圖可得知,整頁的所有文字(含表格文字)都變成了藍色粗體的格式,唯一不變的只有大標題的尺寸(上圖,因為大標題最初是設定了HTML語法的<h1>格式,所以尺寸上依然沿用<h1>的格式。

 

b.整頁套用的CSS語法宣告方式說明:

5.jpg 

在Dreamweaver的『分割』編輯模式中,我們可以看到原始碼如上圖,由此我們可以知道整頁套用的CSS規則:

i.最常用的方式就是使用<style>標籤來定義CSS的內容。

ii.而且定義的規則要寫在html語法的<head>檔頭區域內。

iii.為了讓瀏覽器可以認得CSS樣式,通常會在<style>標籤中加上type屬性(如下圖)。

6.jpg 

iV.為了應付有些瀏覽器可能不支援CSS,於是會在<style>標籤中加入<!--和-->,目的是讓不支援CSS的瀏覽器可以直接忽略<style>中的內容而不會有錯誤訊息。

V.所以用上述幾點規則所撰寫的CSS規則,將會套用在整頁中,至於套用在整頁中的那些『內容』上,則要看我們的定義對象,以下加以說明。

首先我們來看看規則的內容(如下圖):

7.jpg  

從上圖我們可以得知,CSS宣告的方式:

i.上圖中1和2分別代表兩個不同的規則,分別定義不同的格式。

ii.上圖中的紅色字(body,td,th還有body)我們稱為『元素名稱』,也就是我們規則要套用的『對象』。

iii.而{ }中的文字中,冒號(:)前面我們稱為『屬性』(ex.font-family);而冒號(:)後面我們稱為『設定值』(ex.新細明體)。

iV.不同的屬性定義結尾都會用一個 ; 做結束。

V.綜合上述,CSS的基本宣告方式為:

元素名稱 {屬性1:設定值1;

            屬性2:設定值2;

            屬性3:設定值3;

              .......

                 }

Vi.而上述兩個規則,其中的body,td,th定義了與文字格式相關的設定;而body則定義了背景顏色有關的設定。

      所以,當我們在頁面屬性中進行CSS格式設定時,Dreamweaver就幫我們撰寫了這些CSS語法,如果我們理解了,也可以用手寫方式定義。

      以上,就是CSS宣告方式第一種類~整頁套用的介紹,後續我們將繼續針對其他方式做說明。

 

 

 

 

arrow
arrow
    全站熱搜

    房匠網 發表在 痞客邦 留言(2) 人氣()