蔡逸竹

（一）畫個瓢

引用:

核心提示： 說起來現在介紹樣式表的文章比較多了。其實真正用透樣式表的人並不多，筆者也僅僅就敢說懂得了一點皮毛。大家不信？那下面我就來說說，本文主要也就是從語法和功能兩大方面來說說前文都未提到的一些東西。說到語法，似乎只有那些高深的程序語言才有，CSS也有嗎？答案是肯定的，只不過沒有其它語言那麼複雜罷了。特別是

      說起來現在介紹樣式表的文章比較多了。其實真正用透樣式表的人並不多，筆者也僅僅就敢說懂得了一點皮毛。大家不信？那下面我就來說說，本文主要也就是從語法和功能兩大方面來說說前文都未提到的一些東西。
　　 說到語法，似乎只有那些高深的程序語言才有，CSS也有嗎？答案是肯定的，只不過沒有其它語言那麼複雜罷了。特別是它的id和class，完全可以說是C++語言中的類在網頁上的再現。

　　 它一般怎麼使用呢？首先id部分是必須寫在HTML頭檔案中的< STYLE>說明中的，一般就是把一段css代碼用一個代號來表示，稱為id說明部分。而在引用時就在對像後面加class=id號，來使用這些屬性。瀏覽器會選擇那些引用id的對象具有的屬性來對其進行定義，從而可以縮短你的開發時間。而且代碼也更易讀一些。而相應的，class也有兩種，一種是相關式的，可以給頁面內的某一種tag使用；而另一種就是獨立式的，即你定義的class可以給頁面內的任意一個或多個tag使用。

　　 空談無益，筆者還是拿一些例子來向大家說明吧。大家不妨看看前文的幾個例子，倘若我把它們合成一個，利用id將其表示出來，然後再在後面引用，效果將是一樣的。

　　 比如下面這一段，在第二章中曾經使用過的css.將其設定一個id：text1。
.text1{
text-align: left;
font-size: 15pt;
font-family: 隸書,細明體;
letter-spacing: 3px
color: navy;
line-height: 12pt;
text-indent: .5in;
border: solid 1pt;
}

　　 然後你在後文中引用：
< P CLASS="text1">你好，這另一個例子。< /P>

　　 同樣可以得到與第二章例子相同的效果。當然這個class可以多次使用，也可以給多個tag使用。比如< table>，< td>，< form>等等。

　　 另一方面我想跟大家談談dhtml中擴充的一些css。比如說現在很多地方都在使用的濾鏡(filter)功能。所謂濾鏡，並不是對圖像進行了什麼處理，而是在瀏覽器中對使用了該屬性的對象進行一定的修飾。現在能使用的濾鏡有16個之多，這裡並非一篇介紹DHTML的文章，所以筆者也不便贅述。不過可以就其中幾個相當重要好用的給大家講一講。

　　 1.陰影過濾器

　　 這個東西的好處真是不得了，用文本實現圖形的功能，怎能不誘人？不過由它處理而成的給對像製造的陰影，卻並不是那麼準確和形象。不過考慮到它超出一籌的「性價比」，還是值得考慮的。

　　 具體的用法就是，在css描述符號({})內，加入陰影過濾器名和它該有的值。格式如下：
{FILTERropShadow(Color=color,OffX=offx,OffY=offy,Positive=positive) 其中參數的含義為：
color 顏色
Direction 陰影方向。方向角度的表示是從垂直方向開始，按順時針方向，以45度為單位逐漸遞增，預設為225度。
參數描述：
Color 十六進制RGB色彩值
OffX 可視化對像沿X軸的陰影偏移量，正值為右，負值為左
OffY 可視化對像沿Y軸的陰影偏移量，正值為下，負值為上
Positive 布爾值。預設為非零值，表示用不透明像素創建陰影；假值(零值)使用透明像素創建陰影。

　　 2.α-過濾器

　　 這就是透明度的意思，用過photoshop的人恐怕對這個概念對最有感覺。而借助於css-p(定位css)中的「層」的幫助，就可以做出各種溶入效果；倘若利用javascript頁面腳本語言，對濾鏡的參數進行處理，就可以做出淡入淡出的效果來，這一點留給大家去思考吧。

　　 α-過濾器的所有可選項：
{FILTER:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style、
StartX=startx,StartY=starty,FinishX=finishx,FinishY=finishy)}
稍微為大家解釋一下參數的含義：
Opacity：起始透明度；
FinishOpacity:終止透明度；
Style：風格；
Startx,starty,finishx,finishy：作用域。

　　 最後綜合本章內容給大家留兩個例子，效果如圖。



第一個是一個陰影的例子。
< html>
< head>
< title>Untitled Document< /title>
< meta http-equiv="Content-Type" c>
< style type="text/css">
< !--
.text1 { position:relative;width:600;filter:shadow(color=blue,direction=135);
color:#66ccff;font-size:48pt; font-family:"方正彩雲繁體"}
-->
< /style>
< /head>

< body bgcolor="#FFFFFF">
< div class="text1"
align="center">
< p>CSS循序漸進< /p>
< /div>
< /body>
< /html>

　　 將中間的style改一下， .text1
{ position:relative;width:600;filter:alpha(opacity=50,finish=100,startx=0,sta
rty=0,finishx=200,finishy=200); color:#66ccff;font-size:48pt; font-family:"方正
彩雲繁體"}

　　 這就是關於透明度的一個效果。



　　 這次就談到這裡吧，下章將繼續為大家介紹一些style的特殊地方和一些小技巧。

蔡逸竹

（二）字的藝術

引用:

核心提示： 說到CSS，筆者用的最多的還是它的排版和字型設計功能。因為網頁嘛，最終還是要做給人家看的，要傳遞信息給對方的，所以不管怎麼說，這種傳遞形式非常重要，具體說來，也就是字的控制和版面的控制。另外一個很重要的原因就是中文相當難處理，Windows自帶的中文字庫很少，而中文的美術效果又很難做，遠不如英文那

說到CSS，筆者用的最多的還是它的排版和字型設計功能。因為網頁嘛，最終還是要做給人家看的，要傳遞信息給對方的，所以不管怎麼說，這種傳遞形式非常重要，具體說來，也就是字的控制和版面的控制。另外一個很重要的原因就是中文相當難處理，Windows自帶的中文字庫很少，而中文的美術效果又很難做，遠不如英文那麼隨隨便便寫幾個字就很舒服。所以借助CSS的幫助就更顯得有必要。好，廢話也不多說了。大家還是跟我一起看一看CSS到底對字能起些什麼作用吧。 　　 首先，給朋友們說說樣式表關於字型的一些功能。總的說來，主要是字體(font)、大小(size)、字體粗細(Weight)、字體變形(Variant)、字體風格(Style)、修飾(Decoration)、Case(大小寫)等等。下面筆者向大家詳細介紹一下。請注意，本文所用的Style例子都是採用的調用外部檔案的形式，且只是外部檔案css1.css的內容，大家看的時候注意了。要是想使用它們，如上節所說的，在HTML檔案的檔案頭說明部分中加入< LINK REL=STYLESHEET HREF="CSS1.CSS">就可以了。 　　 好，下面先給大家看一個例子:
　　 P {
　　 text-align: left;
　　 font-size: 25pt;
　　 font-family: "隸書"、"細明體";
　　 letter-spacing: 3px;
　　 color:navy;
　　 line-height:30pt;
　　 text-indent: .5in;
　　 border: solid 2pt;
　　 } 　　 鏈入網頁以後出來的效果如下圖： 　　 現在就對上面這段代碼進行詳解。首先，P就是表示是對檔案中的所有< p>< /p>容器中的內容進行的定義。大括號內就是對各項屬性所規定的值。對於一個定義的格式往往是: 　　 屬性:值 　　 中間以分號隔開。 　　 Text-align:left表示段落是居左對齊，font-size:15pt，表示字體大小為15pt，font-family:隸書,細明體 表示所採用的字體。這裡要說明一下，這裡使用了幾種字體，並分別用逗號隔開，表示第一、第二、第三字體，也就是說如果客戶機的系統內有第一種字體的話就採用它，如果沒有再查看有沒有第二種，第三種，倘若都沒有則使用預設字體。letter-spacing:3px就說明字間寬為3px.color:navy，則表示顏色為天藍色，line-height:12pt表示行高為12pt(這裡的行高是連同字高一起計算的)。text-indent:.5in表示段落首行的縮進的多少，這裡是.5in.border:solid 1pt表示邊框是寬度為1pt的實心邊框。 　　 大家對照一下圖看看屬性與效果之間的關係。看看寫Style是不是很簡單呢?有關字體和排版的屬性還有幾項，下面就列表向大家說明。 　　 字體參數(Font Properties):

參數	含義	舉例
Font-size	字體大小	Small,midium
Font-Style	字體風格	Normal,italic
Font-family	選用字體	細明體,fantasy
Font-weight	字體粗細	Bold,bolder

　　 文本參數(Text Properties):

參數	含義	舉例
Line-Height	行距	1.2,18pt
Text-decoration	文字裝飾	underline,none
Text-transform	大小寫轉換	Capitalize(單詞首字母大寫) 　　 Uppercase(全部大寫) 　　 Lowercase(全部小寫)
Text-align	文字對齊	Left,right,center,justify
Text-indent	文字縮進	長度值,百分比值

　　 塊參數(Block-Level Formatting Properties)

參數	含義	舉例
Left-margin,right-margin	留的空白	長度值,百分比值
Padding-top…	內容邊框間距	長度值,百分比值
Border-width	邊框寬度	長度值
Border-style	邊框風格	Solid,double,groove
Border-color	邊框顏色	顏色值
Width	寬度	長度值,百分比值
Float	對齊	Left,right

　　 顏色參數(Color and Background Properties)

參數	含義	舉例
Color	前景色彩	顏色值(red、#FF0000)
Background-image	背景檔案	檔案地址
Background-color	背景顏色	顏色值

蔡逸竹

（三）樣式「表」秀

引用:

核心提示： 不知道大家看完前面兩篇以後是否對用style已經有了一點心得，其實前文所說的不過是樣式表最基本的運用。筆者這裡想問一問，讀者們有沒有感覺到html中所規定的那些標準形式的表格（table）和表單（form）樣子過於呆板，而風格又時常與自己網頁格格不入呢?而且，對於一個大信息量和交互式的網頁而言，表

      不知道大家看完前面兩篇以後是否對用style已經有了一點心得，其實前文所說的不過是樣式表最基本的運用。筆者這裡想問一問，讀者們有沒有感覺到html中所規定的那些標準形式的表格（table）和表單（form）樣子過於呆板，而風格又時常與自己網頁格格不入呢?而且，對於一個大信息量和交互式的網頁而言，表格和表單是需要大量運用並且佔有很重要的位置的。現在如果筆者告訴大家用樣式表定制自己個人風格的表單和表格的話，您是否會興奮得跳起來呢?其實，如果恰當的運用style，甚至可以做出比作圖更好的效果來。
　　先給大家說說關於定製表格的一些細節。在第一章裡的那個例子裡，大家應該看到了許多運用定製表格的地方。應該說定製表格並不複雜，主要的也就是對背景（background）和邊框（border）進行定義。用的也不過是這兩方面的屬性。

塊參數（Block-Level Formatting Properties）

參數	含義	舉例
Left-margin,right-margin	留的空白	長度值,百分比值
Padding-top…	內容邊框間距	長度值,百分比值
Border-width	邊框寬度	長度值
Border-style	邊框風格	Solid,double,groove
Border-color	邊框顏色	顏色值
Width	寬度	長度值,百分比值
Float	對齊	Left,right

顏色參數（Color and Background Properties）

參數	含義	舉例
Color	前景色彩	顏色值（red、#FF0000）
Background-image	背景檔案	檔案地址
Background-color	背景顏色	顏色值
background-attachment	背景是否依附	scroll（隨內容滾動）和fixed（固定位置）
background-repeat	背景重複格式	repeat-x（水平重複） ,repeat-y（縱向重複）,no-repeat（不重複）

　　說起來這些屬性在上次介紹文字排版的時候也用過了，不過您這次再看看它在表格裡的表現，它們在這裡扮演的角色非常重要，筆者決非是簡單的老調重彈。需要說明的是所有的邊框屬性都是分位置的，也就是說，可以對外觀的上、下、左、右四個方向分別作設定，也就是說，對於每一項邊框屬性，都有border-left-width,border-right-width,border-top-width,border-bottom-width這樣的四個分屬性，也可以在某個屬性後面連帶四個值，分別表示對top、right、bottom、left的定義。這一點很有用，我們就可以運用它，做出類似光影的效果。而另外一個屬性，所謂風格（style）就很難定義了。有些說法，比如說solid（實心），double（雙層）很好理解。但是有些效果恐怕要您用過以後才能明白是怎麼回事。這裡筆者把它們全部列舉如下:

　　 dotted、dashed、solid、double、groove、ridge、inset、outset。 　　下面有一個專門的關於表格的例子，大家看看，效果如圖一

引用:

　　源碼如下:

< html>
< head>
< title>Untitled Document< /title>
< meta http-equiv="Content-Type" c>
< style type="text/css">
< !--
table {  font-family: "細明體"; font-size: 9pt; color:
#000033; text-decoration: none; background-color:
#FFCCCC; padding-top: 4px; padding-right: 3px; padding-
bottom: 2px; padding-left: 2px; border: #CCCCFF;
border-style: groove; border-top-width: thick; border-
right-width: thick; border-bottom-width: thick; border-
left-width: thick}

-->
< /style>
< /head>

< body bgcolor="#FFFFFF">
< table width="75%" border="1" cellspacing="1"
cellpadding="1" align="center">
  < tr bgcolor="#CCFFCC" bordercolor="#0000CC"
valign="middle" align="center">
    < td>一< /td>
    < td>二< /td>
    < td>三< /td>
    < td>四< /td>
  < /tr>
  < tr bgcolor="#CCFFCC" bordercolor="#0000CC"
valign="middle" align="center">
    < td>a< /td>
    < td>b< /td>
    < td>c< /td>
    < td>d< /td>
  < /tr>
  < tr bgcolor="#CCFFCC" bordercolor="#0000CC"
valign="middle" align="center">
    < td>甲< /td>
    < td>乙< /td>
    < td>丙< /td>
    < td>丁< /td>
  < /tr>
  < tr bgcolor="#CCFFCC" bordercolor="#0000CC"
valign="middle" align="center">
    < td>A< /td>
    < td>B< /td>
    < td>C< /td>
    < td>D< /td>
  < /tr>
< /table>
< /body>
< /html>

　　至於表單，由於網頁的交互性越來越被人們重視，表單的運用也越來越多。可是HTML本身所制定的那些標準形式的表單件的樣子實在讓人不敢恭維。文本框一律是內部深陷的長條，而按鈕又全是那種灰灰的塊塊，放在一個精緻的網站中實在不成樣子。所以可以說適當的調整邊框大小、顏色，做出符合網站個性的表單也是網站成功的一環吧。

　　大家要看效果的話可以借鑒一下fanso的打開音樂訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。）的例子。（也可以看圖二）大家注意看它右邊的一排輸入框，其實它是將輸入框做到最小了，但是味道卻反而足了。

　　用到的定義語句其實很簡單:

.input1 {
        BACKGROUND-COLOR: #e8e8e8; BORDER-BOTTOM:
#a8a8a8 1px solid; BORDER-LEFT: #a8a8a8 1px solid;
BORDER-RIGHT: #a8a8a8 1px solid; BORDER-TOP: #a8a8a8
1px solid; FONT-SIZE: 9pt
}
　　大家應該可以看到，表格和表單的定制最重要的地方其實在於邊框與顏色的選擇與搭配，這個是其外觀效果的關鍵。

蔡逸竹

（四）表裡春秋

引用:

核心提示： 這一次還是繼續為大家介紹一些樣式表應用方面的技巧。大家知道樣式表的定義是針對容器(tag)而言的，那麼在HTML 中，Anchor(錨，即超級鏈接標記)是一類作用非常之大的容器。它實現了HTML最根本的功能（超文本，超連結）。而CSS也有關於Anchor的一些特殊用法。使得頁面的聯接更緊湊，更富有

    這一次還是繼續為大家介紹一些樣式表應用方面的技巧。大家知道樣式表的定義是針對容器(tag)而言的，那麼在HTML 中，Anchor(錨，即超級鏈接標記)是一類作用非常之大的容器。它實現了HTML最根本的功能（超文本，超連結）。而CSS也有關於Anchor的一些特殊用法。使得頁面的聯接更緊湊，更富有條理。
　　 跟其它的tag一樣，Anchor的定義方法也可以是：

　　 　　 A:{css標記}

　　可是它特殊之處在於，它有各種相關的屬性，比如visited(瀏覽過)，active(激活)，hover(滑鼠在其上)，link（有鏈接）。可以根據不同需要而做出專門的定義以根據用戶不同的動作做出反應，從而形成比較好的效果。

　　比如說，您可以做以下的定義：

引用:

< html>
< head>
< title>Untitled Document< /title>
< meta http-equiv="Content-Type" c>
< style type="text/css">
< !-- a:active { font-family: "細明體"; font-size: 9pt; color: #9999FF; text-decoration: underline}a:hover { font-family: "細明體"; font-size: 9pt; color: #99FF99; text-decoration: underline}a:link { font-family: "細明體"; font-size: 9pt; color: #FFCCCC; text-decoration: none}-->
< /style>
< /head>
< body bgcolor="#000000">
< a href="www.www.www">返回< /a>
< /body>
< /html>

圖一	圖二

　　在這個例子中，定義了錨的active,hover,link三種狀態。當例子中存在著超級鏈接時，就會呈現出如圖一的沒有下劃線的淡紅，而將滑鼠置於其上時，滑鼠變成了手形，而這個鏈接則會呈現出如圖二的亮綠色。而一旦訪問過後，該鏈接則會呈現出深紅色。這種變化既美觀了頁面，又提醒了用戶。為絕大多數網站採用。

　　事實上，有很多時候我們在沒有使用錨的時候也需要對像根據用戶的動作作一些改變。這時候我們往往需要當用戶控制滑鼠經過該對像時，能夠給他一些提示。比如滑鼠換個形狀。像手形，十字形之類的，再結合必要的javascript，不就可以出現很炫的效果了嗎？而且很多時候使用了錨的話容易改變當前焦點。比如當我們使用到Dhtml中的層概念時，如果是層是不可見的，利用錨將其改為可視，可一旦滑鼠移上去以後，焦點馬上到了層的上面，令大家感到非常不方便。不過，css裡面剛好有這個屬性，可以幫我們改變滑鼠屬性，解除這個煩惱。我們現在就看這個例子：

引用:

< html>
< head>
< title>測試一< /title>
< meta http-equiv="Content-Type" c>
< style type="text/css">
< !-- .text1 { font-family: "細明體"; font-size: 9pt; color: #9999FF; cursor: crosshair}
-->
< /style>
< /head>
< body bgcolor="#FFFFFF">
< p align="center" class="text1" >關閉窗口< /p>
< /body>
< /html>

　　這裡的關閉窗口的這個文字滑鼠屬性為一個十字，所以當移上去時，滑鼠就變化為十字形。而點擊它則會出現關閉窗口事件。

這個屬性能使用的滑鼠形狀還有：

crosshair:十字；

hand:手形；

text:文本光標；

wait:沙漏；

help:問號；

e-resize:右箭頭；

ne-resize:右上向箭頭；

n-resize:向上箭頭；

nw-resize:左上箭頭；

w-resize:向左箭頭；

sw-resize:左下箭頭；

s-resize:向下箭頭；

se-resize:右下箭頭。

　　好了，關於css的一些技巧性的東西就為大家介紹到這裡啦。