CSS 循序漸進(jìn)（四）表里春秋

2020-03-24 17:53:38

字體：大中小

供稿：網(wǎng)友

這一次還是繼續(xù)為大家介紹一些樣式表應(yīng)用方面的技巧。大家知道樣式表的定義是針對(duì)容器(tag)而言的，那么在HTML 中，Anchor(錨，即超級(jí)鏈接標(biāo)記)是一類(lèi)作用非常之大的容器。它實(shí)現(xiàn)了HTML最根本的功能（超文本，超鏈接）。而CSS也有關(guān)于Anchor的一些特殊用法。使得頁(yè)面的聯(lián)接更緊湊，更富有條理。跟其它的tag一樣，Anchor的定義方法也可以是： A:{css標(biāo)記} 可是它特殊之處在于，它有各種相關(guān)的屬性，比如visited(瀏覽過(guò))，active(激活)，hover(鼠標(biāo)在其上)，link（有鏈接）。可以根據(jù)不同需要而做出專門(mén)的定義以根據(jù)用戶不同的動(dòng)作做出反應(yīng)，從而形成比較好的效果。比如說(shuō)，您可以做以下的定義： html
head
title Untitled Document /title
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
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
在這個(gè)例子中，定義了錨的active,hover,link三種狀態(tài)。當(dāng)例子中存在著超級(jí)鏈接時(shí)，就會(huì)呈現(xiàn)出如圖一的沒(méi)有下劃線的淡紅，而將鼠標(biāo)置于其上時(shí)，鼠標(biāo)變成了手形，而這個(gè)鏈接則會(huì)呈現(xiàn)出如圖二的亮綠色。而一旦訪問(wèn)過(guò)后，該鏈接則會(huì)呈現(xiàn)出深紅色。這種變化既美觀了頁(yè)面，又提醒了用戶。為絕大多數(shù)網(wǎng)站采用。事實(shí)上，有很多時(shí)候我們?cè)跊](méi)有使用錨的時(shí)候也需要對(duì)象根據(jù)用戶的動(dòng)作作一些改變。這時(shí)候我們往往需要當(dāng)用戶控制鼠標(biāo)經(jīng)過(guò)該對(duì)象時(shí)，能夠給他一些提示。比如鼠標(biāo)換個(gè)形狀。像手形，十字形之類(lèi)的，再結(jié)合必要的javascript，不就可以出現(xiàn)很炫的效果了嗎？而且很多時(shí)候使用了錨的話容易改變當(dāng)前焦點(diǎn)。比如當(dāng)我們使用到Dhtml中的層概念時(shí)，如果是層是不可見(jiàn)的，利用錨將其改為可視，可一旦鼠標(biāo)移上去以后，焦點(diǎn)馬上到了層的上面，令大家感到非常不方便。不過(guò)，css里面剛好有這個(gè)屬性，可以幫我們改變鼠標(biāo)屬性，解除這個(gè)煩惱。我們現(xiàn)在就看這個(gè)例子： html
head
title 測(cè)試一 /title
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
style type="text/css"
!-- .text1 { font-family: "宋體"; font-size: 9pt; color: #9999FF; cursor: crosshair}
--
/style
/head
body bgcolor="#FFFFFF"
p align="center" 關(guān)閉窗口 /p
/body
/html 這里的關(guān)閉窗口的這個(gè)文字鼠標(biāo)屬性為一個(gè)十字，所以當(dāng)移上去時(shí)，鼠標(biāo)就變化為十字形。而點(diǎn)擊它則會(huì)出現(xiàn)關(guān)閉窗口事件。這個(gè)屬性能使用的鼠標(biāo)形狀還有：crosshair:十字；hand:手形；text:文本光標(biāo)；wait:沙漏；help:問(wèn)號(hào)；e-resize:右箭頭；ne-resize:右上向箭頭；n-resize:向上箭頭；nw-resize:左上箭頭；w-resize:向左箭頭；sw-resize:左下箭頭；s-resize:向下箭頭；se-resize:右下箭頭。好了，關(guān)于css的一些技巧性的東西就為大家介紹到這里啦。本文作者:html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：用于WebKit的CSS技巧

下一篇：用Class組合實(shí)現(xiàn)Div+CSS布局教程