說(shuō)起來(lái)現(xiàn)在介紹樣式表的文章比較多了。其實(shí)真正用透樣式表的人并不多,筆者也僅僅就敢說(shuō)懂得了一點(diǎn)皮毛。大家不信?那下面我就來(lái)說(shuō)說(shuō),本文主要也就是從語(yǔ)法和功能兩大方面來(lái)說(shuō)說(shuō)前文都未提到的一些東西。
說(shuō)到語(yǔ)法,似乎只有那些高深的程序語(yǔ)言才有,CSS也有嗎?答案是肯定的,只不過沒有其它語(yǔ)言那么復(fù)雜罷了。特別是它的id和class,完全可以說(shuō)是C++語(yǔ)言中的類在網(wǎng)頁(yè)上的再現(xiàn)。
它一般怎么使用呢?首先id部分是必須寫在HTML頭文件中的< STYLE>說(shuō)明中的,一般就是把一段css代碼用一個(gè)代號(hào)來(lái)表示,稱為id說(shuō)明部分。而在引用時(shí)就在對(duì)象后面加class=id號(hào),來(lái)使用這些屬性。瀏覽器會(huì)選擇那些引用id的對(duì)象具有的屬性來(lái)對(duì)其進(jìn)行定義,從而可以縮短你的開發(fā)時(shí)間。而且代碼也更易讀一些。而相應(yīng)的,class也有兩種,一種是相關(guān)式的,可以給頁(yè)面內(nèi)的某一種tag使用;而另一種就是獨(dú)立式的,即你定義的class可以給頁(yè)面內(nèi)的任意一個(gè)或多個(gè)tag使用。
空談無(wú)益,筆者還是拿一些例子來(lái)向大家說(shuō)明吧。大家不妨看看前文的幾個(gè)例子,倘若我把它們合成一個(gè),利用id將其表示出來(lái),然后再在后面引用,效果將是一樣的。
比如下面這一段,在第二章中曾經(jīng)使用過的css.將其設(shè)定一個(gè)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">你好,這另一個(gè)例子。< /P>
同樣可以得到與第二章例子相同的效果。當(dāng)然這個(gè)class可以多次使用,也可以給多個(gè)tag使用。比如< table>,< td>,< form>等等。
另一方面我想跟大家談?wù)刣html中擴(kuò)充的一些css。比如說(shuō)現(xiàn)在很多地方都在使用的濾鏡(filter)功能。所謂濾鏡,并不是對(duì)圖像進(jìn)行了什么處理,而是在瀏覽器中對(duì)使用了該屬性的對(duì)象進(jìn)行一定的修飾?,F(xiàn)在能使用的濾鏡有16個(gè)之多,這里并非一篇介紹DHTML的文章,所以筆者也不便贅述。不過可以就其中幾個(gè)相當(dāng)重要好用的給大家講一講。
1.陰影過濾器
這個(gè)東西的好處真是不得了,用文本實(shí)現(xiàn)圖形的功能,怎能不誘人?不過由它處理而成的給對(duì)象制造的陰影,卻并不是那么準(zhǔn)確和形象。不過考慮到它超出一籌的“性價(jià)比”,還是值得考慮的。
具體的用法就是,在css描述符號(hào)({})內(nèi),加入陰影過濾器名和它該有的值。格式如下:
{FILTER:DropShadow(Color=color,OffX=offx,OffY=offy,Positive=positive) 其中參數(shù)的含義為:
color 顏色
Direction 陰影方向。方向角度的表示是從垂直方向開始,按順時(shí)針方向,以45度為單位逐漸遞增,缺省為225度。
參數(shù)描述:
Color 十六進(jìn)制RGB色彩值
OffX 可視化對(duì)象沿X軸的陰影偏移量,正值為右,負(fù)值為左
OffY 可視化對(duì)象沿Y軸的陰影偏移量,正值為下,負(fù)值為上
Positive 布爾值。缺省為非零值,表示用不透明像素創(chuàng)建陰影;假值(零值)使用透明像素創(chuàng)建陰影。
2.α-過濾器
這就是透明度的意思,用過photoshop的人恐怕對(duì)這個(gè)概念對(duì)最有感覺。而借助于css-p(定位css)中的“層”的幫助,就可以做出各種溶入效果;倘若利用javascript頁(yè)面腳本語(yǔ)言,對(duì)濾鏡的參數(shù)進(jìn)行處理,就可以做出淡入淡出的效果來(lái),這一點(diǎn)留給大家去思考吧。
α-過濾器的所有可選項(xiàng):
{FILTER:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,
StartX=startx,StartY=starty,FinishX=finishx,FinishY=finishy)}
稍微為大家解釋一下參數(shù)的含義:
Opacity:起始透明度;
FinishOpacity:終止透明度;
Style:風(fēng)格;
Startx,starty,finishx,finishy:作用域。
最后綜合本章內(nèi)容給大家留兩個(gè)例子,效果如圖。
第一個(gè)是一個(gè)陰影的例子。
< html>
< head>
< title>Untitled Document< /title>
< meta http-equiv="Content-Type" content="text/html; charset=gb2312">
< 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循序漸進(jìn)< /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:"方正
彩云繁體"}
這就是關(guān)于透明度的一個(gè)效果。
這次就談到這里吧,下章將繼續(xù)為大家介紹一些style的特殊地方和一些小技巧。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號(hào)聯(lián)系: 360901061
您的支持是博主寫作最大的動(dòng)力,如果您喜歡我的文章,感覺我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
