CSS入門(一)

CSS入門(一)
文∕趙英傑

本文旨在提供《Dreamweaver MX 2004中文版網頁設計寶典》一書第九章「使用CSS樣式表」補充說明。

HTML語言是描述網頁文件內容的標籤語言,網頁的版型編排原本不是它的職責,但是為了呈現美美的網頁,表格(<table>標籤)經常被當成控制留白、切割版面的元素使用。使用HTML標籤編排網頁的缺點是,網頁內容將被一堆和內文無關的標籤指令糾結在一起,而且一旦定下版型就不易修改和更換。

CSS最偉大的貢獻就是把網頁外觀樣式的「表現層」與「內文」分隔開來,而且CSS樣式表可以單獨地儲存成一個文件讓多個網頁共用,令它們呈現一致的外觀與感覺。

Dreamweaver的「圖層」工具是CSS的具體應用(亦即,「圖層」工具是一種以「視覺」方式建立 CSS 的方法),能讓設計人員把網頁元素定位在任意座標位置。

CSS樣式語法之一
CSS可重新定義指定HTML標籤的外觀(將影響到網頁中的所有相同標籤元素),或者針對個別標籤元素做設定,後者即是Dreamweaver軟體「新增CSS樣式」面版的「類別」選項。

新增 CSS 規則

重新定義指定HTML標籤外觀的CSS語法如下:

選取器 {
   屬性:值;
}

選取器(selector)」指的是HTML標籤。例如,書本9-3頁(簡體版221頁)定義的 h1 標籤,將產生如下的CSS原始碼:

h1 {
   /* 指定字體 */
   font-family: “標楷體”;
   /* 指定字體大小 */
   font-size:24px;
   /* 指定顏色 */
   color:#FF6600;
}

樣式定義裡的 /* 和 */ 之間的文字是「註解」,不會被瀏覽器處理。內嵌於HTML網頁的CSS樣式,通常寫在網頁的檔頭區(<head>與</head>之間),並且放在<style>與</style>標籤之間,如下:

<head>
   <title>基本的CSS設定</title>
   <style type="text/css">
     h1 {
       font-family: "標楷體";
       font-size:24px;
       color:#FF6600;
     }
   </style>
</head>

如此,網頁內文裡的所有<h1>標籤元素都將以「標楷體」、24像素、#FF6600的色彩呈現。

設定一組標籤的樣式
您也可以一次把相同的CSS樣式設定給一組「選取器」(標籤),例如,替 h1, h2 和 h3 設定相同的字體和顏色樣式(選取器之間用逗號分隔):

h1, h2, h3 {
   font-family: "標楷體";
   color:#FF6600;
}

CSS樣式語法之二
若要個別設定標籤元素,可以使用底下的「類別選取器(class selector)」語法建立新的樣式類別。類別選取器的名稱請自行定義,名稱的第一個字不可以是數字,否則將無法在Firefox(火狐)瀏覽器中運作

「類別選取器」的名字以句點(.)起始。例如,書本 9-10 頁(簡體:226頁)定義的 paragraph 樣式類別的原始碼如下:

.paragraph {
   /* 縮排 40像素 */
   text-indent: 40px;
   /* 字距:2像素 */
   letter-spacing: 2px;
}

網頁內文的任何標籤都可以透過class屬性套用自訂樣式類別。例如,在某個<p>標籤套用 paragraph 樣式的語法如下:

<p class="paragraph">類別樣式段落</p>

請留意,設定 class 屬性值時不需要在樣式類別名稱前面加上句點(.)

CSS樣式語法之三
還有一種替相同標籤元素設定不同樣式的方法。假設你想要讓大多數的<p>標籤內容呈現藍色,少部分的強調文字<p>段落用紅色表示,可以這樣定義樣式:

p.normal {
   color: #6699CC;
}
p.notice {
   color: #CC0033;
}

應用上述CSS樣式的範例如下:

<p class="normal">這是一般段落</p>
<p class="notice">這是重點段落</p>
<p class="normal">仍是一般段落</p>

CSS樣式語法之四
另一種個別設定標籤樣式的語法,稱為「id選取器(id selector)」。id 選取器的名稱同樣需要自行定義,而且名稱前面要加上 # 號,例如,底下的敘述將定義一個稱為 paragraph 的 id 選取器:

#paragraph {
   text-indent: 40px;
   letter-spacing: 2px;
}

id選取器將套用到使用 id 屬性定義的同名標籤元素上。例如,在某個<p>標籤套用 paragraph 樣式的語法如下:

<p id="paragraph">id樣式段落</p>

請注意,CSS樣式的類別和id選取器名稱會區分大小寫,因此,底下的<p>標籤將不會套用 paragraph 樣式:

<p id="Paragraph">沒有效果</p>

如同「JavaScript程式基本範例」這篇文章談到的,HTML標籤的 id 屬性用於替該標籤設定一個唯一的識別名稱。實際上,以該文章設定<img>(影像)標籤的“icon”名稱為例,假若有一個以上的<img>都命名為“icon”,那麼,調換影像的JavaScript程式將無法運作。因此,定義 id 選取器樣式,就形同定義了一個僅用於單一元素的樣式。

然而,CSS樣式和JavaScript程式不同,即使網頁包含相同 id 名稱的元素,這些元素仍能將引用相同的樣式,只是這樣的寫法很奇怪:

<p id="paragraph">一個paragraph段落</p>
<p id="paragraph">另一個paragraph段落</p>
<p id="paragraph">又一個paragraph段落</p>

在一個標籤上設定多個樣式
同一個標籤可以被指定多個樣式,例如底下設定了兩個類別樣式:

.gbYellow {
   /* 背景顏色 */
   background-color: #FFFF99;
}
.notice {
   color: #CC0033;
}

接著在同一個<span>標籤(繁體書本9-28頁;簡體239頁)上套用相同的樣式(在 style 屬性值中,用空格區分不同的樣式):

這是<span class="notice gbYellow">很要緊
</span>的事

CSS樣式的放置地點
除了把CSS樣式定義擺在上述的檔頭區之外,還可以直接在特定標籤內,藉由 style 屬性定義CSS。這種樣式定義稱為「內文樣式(inline style)」,例如,指定某個<p>元素之縮排與字距樣式的語法如下:

<p style="text-indent: 40px; 
   letter-spacing: 2px">
   內文樣式段落
</p>

如果要讓不同網頁套用一致的CSS樣式,樣式表就得單獨寫成一個檔案(副檔名是.css)。例如,某個CSS樣式檔可能命名成 myStyle.css,存放在相對於HTML網頁檔的 styles/myStyle.css 路徑底下,其內容如下(不需要寫<style>和</style>標籤):

h1 {
   font-family: "標楷體";
   font-size:24px;
   color:#FF6600;
}
.paragraph {
   text-indent: 40px;
   letter-spacing: 2px;
}

引用外部.css檔的方法是在HTML網頁的檔頭區透過<link>標籤設定檔案連結,如下:

<head>
   <link rel="stylesheet" type="text/css"
   href="styles/myStyle.css" />
</head>

有關採用Dreamweaver的「新增 CSS 樣式」設定面版建立共用 CSS 檔的方式,請參閱書本9-39頁(簡體:248頁)。

Posts created 467

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top