CSS 簡易教學 |
CSS簡介：
在今天，不會CSS（Casading Style Sheets 層疊樣式表）的網頁製作員不可以稱為專業的網頁製作人員。會HTML語言再學CSS並不難，因為CSS跟HTML一樣也是一種標記語言，甚至很多屬性都是來源於HTML。
CSS的編輯方法同HTML一樣，也可以是任何文本編輯器或網頁編輯軟件，還有專門用來編輯CSS的軟件。 如果你寫的CSS語句是當成外部樣式表而在HTML文件中調用，那它的擴展名存成.css就可。假如你的網站每頁使用的都是這個樣式表，那麼你修改這個文件就修改了整個網站的外觀，所花的時間可能只要兩三分鐘！
■ 一點說明：
我們在這裡講述的是CSS的一些基本使用方法，起的一個入門的作用，更詳細的技巧將不作更多介紹了，這就是為什麼稱作「CSS不完全手冊」的原因。
■ CSS使用方法：
CSS在HTML中應用有三種方法
第一種是包含在<head>...</head>標記裡，例如：
<head>
<style type="text/css">
<!--
h1 {font-family:宋體;font-size:12pt;color=blue}
-->
</style>
</head>
<body>
<h1> 在這裡使用了H1標記</h1>
</body>
第二種是行間定義，例如：
<body>
<h1 style="font-family:宋體;font-size:12pt;color=blue">這是行間定義的H1標記</h1>
</body>
第三種是外部調用樣式文件，跟第一種類似，例如：
<head>
<LINK REL="stylesheet" href="sample.css">
</head>
第四種是也是導入樣式文件，跟第三種類似，例如：
<head>
<style type="text/css">
<!--
@import url([url="http://www.yourname.com/style.css"] http://www.yourname.com/style.css [/url]);
-->
</style>
</head>
分類：
CSS真是偉大，能化一為萬。假如你有幾段文字，每一段都要這樣：將第一行設成黃色，第二行設成紅色，第三行設成藍色，第四行設成綠色……其實這很容易做到。你在CSS中如下為每一行定義一個類。
P.first {color:yellow} P.second {color:red} P.third {color:blue} P.fourth {color:green} 依次定義下去。在你的HTML代碼中就是這樣使用以上的定義類。 <P class=first>這裡是第一行，使用的是class=first</p> <P class=secont>這裡是第二行，使用的是class=secont</p> <P class=third>這裡是第三行，使用的是class=third</p> <P class=fourth>這裡是第四行，使用的是class=fourth</p>
更靈活的分類：
在上面我們定義的類是前面都有一個 P，也就限定了這個類只限於<P>標記使用。如果我們在定義的時候去掉 P， 但 . 仍然要。比如：.first {color:yellow}，這樣定義的類更加靈活，可應用於任何HTML標籤，例如:
<h2 class=first >在H2標記中使用class=first</h2>
選擇符 ID：
其實CLASS只是一個類的選擇符，另一個選擇符 ID 具有同樣的功能。不過使用ID選擇符的類定義的時候要將 . 換成 # ，使用時要在類別名上加上引號。
H1 #001 {color:red}
#002 {color:blue}
使用：
<H1 ID="#001"> H1標記使用#001類</H1>
<H3 ID="#002"> H3標記使用#002類</H1>
<P ID="#002"> P標記使用#002類</H1>
■ FONT-FAMILY屬性：
每部機器上都裝有多種字體，瀏覽器會使用默認的字體瀏覽網頁，比如簡體中文版WINDOWS漢字默認是宋體，英文默認是ARIAL。 使用FONT-FAMILY屬性則可以規定瀏覽器用什麼字體解讀網頁。
■ FONT-FAMILY語法實例：
h2 {font-family:times,impact,sans-serif}
說明如下:
helvetica是瀏覽器首先尋找的字體名稱，如果有就使用它。在helvetica字體沒有找到的情況下，則會尋找impact字體，如果找到就使用它。如果以上兩種字體都沒有找到，則指示瀏覽使用sans-serif（通用字體）。在你不能保證你列出的字體瀏覽者一定會安裝時，將一種通用字體加在字體列表中是一種好的做法。因此我們提倡使用最基本的字體製作網頁，比如中文用宋體，英文用ARIAL，這樣使得你的網頁不會因為瀏覽器沒能使用合適的字體解讀而變樣。
■ 其它相關內容：
通用字體有以下幾類，其中cursive和fantasy不被NC支持：
"serif"(比如Times);
"sans-serif"(比如Helvetica);
"cursive"(比如Comic Sans);
"fantasy"(比如Western);
"monospace"(比如Courier)
其他使用事項：
如果一種字體的名稱中有空格，如"Times New Roman"，在CSS語句中要用引號包含該字體。
例：Body {font-family:"Times New Roman",serif}
如果該語句已在雙引號裡，則字體名降級為單引號。
例：<P style="font-family:'Times New Roman',serif">
如果該語句包括其它CSS規則，字體說明應放在最後。
例:H2 {color:red;margin:10px;font-family:"Times New Roman",serif}
轉載自卡特的網站: [url="http://specater.com"]http://specater.com[/url] |
|
|
|
|
 |
|