CSS中设置文字链接的样式主要是设置链接的四种状态，分别为什么？ div+css如何设置文本链接样式
CSS\u6837\u5f0f\u600e\u4e48\u5728\u4e00\u7f51\u9875\u4e2d\u8bbe\u7f6e\u4e24\u79cd\u8d85\u94fe\u63a5\u6587\u5b57\u5c5e\u6027\uff1f
a.style1 {color:red} /*\u7b2c\u4e00\u79cd\u6837\u5f0f*/
a.style2 {color:blue} /*\u7b2c\u4e8c\u79cd\u6837\u5f0f*/
\u7b2c\u4e00\u79cd\u8d85\u94fe\u63a5\u6587\u5b57\u6837\u5f0fstyle1
\u7b2c\u4e8c\u79cd\u8d85\u94fe\u63a5\u6587\u5b57\u6837\u5f0fstyle2
.div1 a:link {color: blue} /* \u672a\u88ab\u8bbf\u95ee\u7684\u94fe\u63a5 \u84dd\u8272 */
.div1 a:visited {color: blue} /* \u5df2\u88ab\u8bbf\u95ee\u8fc7\u7684\u94fe\u63a5 \u84dd\u8272 */
.div1 a:hover {color: blue} /* \u9f20\u6807\u60ac\u6d6e\u5728\u4e0a\u7684\u94fe\u63a5 \u84dd\u8272 */
.div1 a:active {color: blue} /* \u9f20\u6807\u70b9\u4e2d\u6fc0\u6d3b\u94fe\u63a5 \u84dd\u8272 */
a:link { text-decoration: none} //a:link 指正常的未被访问过的链接
a:active { text-decoration: none } //a:active 指点击链接的瞬间出现的链接情况
a:visited { text-decoration: none } //a:visited 指已经访问过的链接
a:hover { text-decoration: none; } //a:hover 指鼠标放上去链接出现的情况
hover是一个经常会被混淆的属性，一般大家都认为链接是三个属性：link,active,visited，而且一般的网页制作软件里也只有这三个设置，但是hover其实也是一个非常重要的属性，它还可以在链接上加上背景色（BACKGROUND:#ccffcc;），其它的设置与上面三个一样，所以大家现在可以记住，链接上可以做四个属性设置，分别是：link,active,visited,hover text-decoration是文字修饰效果的意思，none参数表示使有超级链接的文字不显示下划线。如果讲none替换成underline就表示有下划线，换成overline则给超连文字加上划线，换成 line-through给超连文字加上删除线。还有一个是blink参数，顾名思义是闪烁效果，但是他要在NetScape浏览器上才能显示。
二、使粗体文字加上删除线。 粗体文字使用的代码是：B { text-decoration: line-through } 使粗体文字中所有的字母大写。使用代码： B { text-transform: uppercase }（这个在NS中才显示出来，IE没有相应效果显示） 产生既大写，又有颜色，又有删除线的效果的代码是：b { text-decoration: line-through; text-transform: uppercase; color: #66FFFF} 。另外，用lowercase使所有字母小写显示，capitalize 使每个单词的首字母大写显示。
三、产生链接变色效果： 经过在对链接的几个属性进行颜色设置后，可以使具有link,active,visited属性的链接显示不同的颜色，但是却不会产生鼠标覆盖变色效果。
a:link { text-decoration: none ; color: green } //正常链接文字显示绿色
a:active { text-decoration: none ; color: yellow } //点击瞬间的链接显示黄色
a:visited { text-decoration: none ; color: red } //已经访问过的链接显示红色 要想产生鼠标放上去产生变色效果，就要用到另一个属性了,这就是 hover。如：a:hover { text-decoration: none ; color: yellow；background:white; } 表示鼠标移动到链接文字上时，文字修饰风格为“无”，同时链接文字显示黄色，链接文字的底色显示为白色。四、看一下下面链接设置的总体运用情况：
a:link { text-decoration: none ; color: blue ; font-size: 9pt }
a:active { text-decoration: underline ; color: yellow;font-size: 10pt }
a:visited { text-decoration: none ; color: red;font-size: 10.5pt }
a:hover { text-decoration: underline; color: green ; font-size: 11pt;background:white; }上面这样设置含义为：
a:link 链接文字没有下划线，蓝色（blue）显示，字为9pt大小；
a:active鼠标点击链接的瞬间文字再现下划线，颜色变成黄色（yellow），并且文字大小变成10pt；
a:visited 访问过的链接没有下划线，文字变成红色（red），同时文字大小变成10.5pt；
a:hover鼠标放到链接上时出现下划线，颜色为绿色（green），字符大小11pt，同时文字上出现一个白色（white）的背景区域。
link 一般状态
visited 已访问状态
hover 鼠标悬停状态
active 鼠标点击状态
<HTML>
<HEAD>
<TITLE> a 标签示例 </TITLE>
<style>
a:link {
color: black; text-decoration: none
}
a:visited {
color: red; text-decoration: none
}
a:hover {
color: green; text-decoration: none
}
</style>
</HEAD>
<BODY>
<a href="#">aa</a>
<a href="#">bb</a>
<a href="#">cc</a>
<a href="#">dd</a>
<a href="#">ee</a>
</BODY>
</HTML>
a:link，定义正常链接的样式
a:visited，定义已访问过链接的样式
a:hover，定义鼠标悬浮在链接上时的样式
a:active，定义鼠标点击链接时的样式。
绛旓細a:link 閾炬帴鏂囧瓧娌℃湁涓嬪垝绾匡紝钃濊壊锛坆lue锛夋樉绀猴紝瀛椾负9pt澶у皬锛沘:active榧犳爣鐐瑰嚮閾炬帴鐨鐬棿鏂囧瓧鍐嶇幇涓嬪垝绾匡紝棰滆壊鍙樻垚榛勮壊锛坹ellow锛夛紝骞朵笖鏂囧瓧澶у皬鍙樻垚10pt锛沘:visited 璁块棶杩囩殑閾炬帴娌℃湁涓嬪垝绾匡紝鏂囧瓧鍙樻垚绾㈣壊锛坮ed锛夛紝鍚屾椂鏂囧瓧澶у皬鍙樻垚10.5pt锛沘:hover榧犳爣鏀惧埌閾炬帴涓婃椂鍑虹幇涓嬪垝绾匡紝棰滆壊涓虹豢鑹诧紙green锛夛紝瀛楃...
绛旓細a:hover锛屽畾涔夐紶鏍囨偓娴湪閾炬帴涓婃椂鐨勬牱寮 a:active锛屽畾涔夐紶鏍囩偣鍑婚摼鎺ユ椂鐨勬牱寮忋
绛旓細鎴栨爣棰CSS鍙帶鍒瓒呴摼鎺ユ牱寮-css閾炬帴鏍峰紡濡備笅a:link鏄秴绾閾炬帴鐨鍒濆鐘舵乤:hover鏄妸榧犳爣鏀句笂鍘绘椂鎮仠鐨勭姸鍐 a:active 鏄紶鏍囩偣鍑绘椂 a:visited鏄闂繃鍚庣殑鎯呭喌1銆侀氬父瀵瑰叏绔欒秴閾炬帴鏍峰紡鍖栨柟娉昦{color:#333;text-decoration:none;
绛旓細1.鍐呰仈鏍峰紡鍐呰仈鏍峰紡鏄湪鏍囪鐨剆tyle灞炴т腑璁惧畾CSS鏍峰紡銆傚涓嬮潰鐨勪緥瀛愬皢h1鐨勫唴瀹规爣璁颁负榛戝簳鐧藉瓧銆 2.鍐呴儴鏍峰紡琛ㄥ唴閮ㄦ牱寮忔槸灏咰SS鏍峰紡闆嗕腑鍐欏湪缃戦〉鐨刪ead>/head>鏍囩瀵圭殑style>/style>鏍囩瀵逛腑銆傚瀵规湰缃戦〉鎵鏈夌殑h1鏍囪閮借缃负榛戝簳鐧藉瓧: 3.澶栭儴鏍峰紡琛ㄥ綋鏍峰紡闇瑕佸簲鐢ㄤ簬寰堝椤甸潰鏃,澶栭儴鏍峰紡琛ㄥ皢鏄悊鎯崇殑閫夋嫨銆傚湪浣跨敤...
绛旓細濡備綍璁剧疆CSS閾炬帴鐨勬牱寮锛熶互涓嬫槸閾炬帴鐨勪竴浜涘熀鏈珻SS灞炴:鈼忛鑹插睘鎬 鈼瀛椾綋绯诲垪灞炴 鈼忔枃鏈楗板睘鎬 鈼忚儗鏅鑹插睘鎬 1.color灞炴:杩欎釜CSS灞炴х敤浜庢敼鍙閾炬帴鏂囨湰鐨勯鑹层傝娉:绀轰緥:鏁堟灉鍥:2.font-family灞炴:璇ュ睘鎬х敤浜庨氳繃浣跨敤font-family灞炴ф潵鏇存敼閾炬帴鐨勫瓧浣撶被鍨嬨傝娉:3.text-decoration灞炴:璇ュ睘鎬涓昏鐢ㄤ簬...
绛旓細font-weight:bold缁欓摼鎺ユ枃瀛楀姞绮楋紱font-size:16pt璁剧疆閾炬帴鏂囧瓧瀛椾綋澶у皬锛沚ackground:#ffd306缁欓摼鎺ユ枃瀛楀姞鑳屾櫙棰滆壊锛沠ont-style:italic閾炬帴鏂囧瓧鍊炬枩锛沚order-bottom:1px dashed #51bfe0缁欓摼鎺ユ枃瀛楀姞铏氱嚎锛屽叾涓1px鏄櫄绾跨殑绮楃粏搴︼紝鏁板艰秺澶ц秺绮楋紝dashed琛ㄧず铏氱嚎锛#51bfe0鏄櫄绾块鑹诧紝濡傛灉瑕佺粰閾炬帴鏂囧瓧鍔犺櫄绾跨殑...
绛旓細鍐呰仈鏍峰紡鏄湪html鍏冪礌涓洿鎺ヤ娇鐢╟ss锛屼緥濡:"杩欐槸鐢╟ss鐩存帴鍦ㄥ厓绱犱腑璁剧疆鑳屾櫙鑹层傚畠閫傜敤浜庡崟涓厓绱狅紝涓嶄細褰卞搷鍏朵粬鍏冪礌銆傚唴閮ㄩ鏍兼槸鐢ㄦ妸css鏀惧湪澶撮儴锛涙爣绛炬潵瀹氫箟锛屼緥濡:} p{棰滆壊:钃濊壊锛泒 鍏朵腑姝ｆ枃{鑳屾櫙鑹:榛勮壊锛泒瀹氫箟鏁翠釜涓讳綋鐨勮儗鏅鑹层俻{棰滆壊:钃濊壊锛泒瀹冨畾涔変簡椤甸潰涓墍鏈夋枃鏈殑棰滆壊銆傚ソ澶勬槸鍙互璋冪敤鏁翠釜...
绛旓細銆愰珮绾э紙ID銆佷笂涓嬫枃閫夋嫨鍣ㄧ瓑锛夈戠敤浜庡鐗规畩鐨勬爣绛剧粍鍚堬紝鎴栬呭寘鍚湁鍒跺畾ID灞炴х殑鎵鏈夋爣绛捐繘琛屾牸寮忓畾涔夛紝濡傚瓒呴摼鎺ユ枃瀛鏁堟灉杩涜瀹氫箟銆
绛旓細閾炬帴鏍峰紡鏄互@importurl鏍囪鎵閾炬帴鐨澶栭儴鏍峰紡琛紝瀹冧竴鑸父鐢ㄥ湪鍙︿竴涓牱寮忚〃鍐呴儴銆傚layout.css涓轰富椤垫墍鐢ㄦ牱寮忥紝閭ｄ箞鎴戜滑鍙互鎶婂叏灞閮介渶瑕佺敤鐨勫叕鍏辨牱寮忔斁鍒颁竴涓猤lobal.css鐨鏂囦欢涓紝鐒跺悗鍦╨ayout.css涓浠importurl(\"/css/global.css\")鐨勫舰寮忛摼鎺ュ叏灞鏍峰紡锛岃繖鏍峰氨浣夸唬鐮佽揪鍒板緢濂界殑閲嶇敤鎬с6銆丆SS瑙勫垯鐢...
绛旓細鐗瑰緛锛1銆鏍峰紡鐨灞炴у唴瀹圭洿鎺ヨ窡鍦ㄥ皢瑕佷慨楗扮殑鏂囧瓧鏍囪閲孾濡傦細2銆佸叿浣撴牸寮忥細 style="font-size:10px;font-color:#ff0000"渚嬪锛氫慨楗板崟鍏冩牸閲岀殑鏂囧瓧 3. 宓屽叆寮 鏈鍒濈骇鐨 CSS 鍐欐硶鍗虫妸浠ｇ爜鐩存帴娣诲姞浜庢墍淇グ鐨勬爣璁板厓绱犮傜ず渚嬩唬鐮佸涓嬶細鑺掓灉 杩欐牱鍋氳櫧鐒舵洿涓虹洿瑙傦紝浣嗗緢澶х▼搴︿笂鍔犲ぇ浜嗛〉闈綋绉紝涓嶇鍚堢粨鏋...
