如何设置多个链接颜色的CSS样式 css 里面怎么改链接颜色

\u5982\u4f55\u7528CSS\u8bbe\u7f6e\u4e24\u79cd\u4e0d\u540c\u7684\u94fe\u63a5\u989c\u8272

css\u53ef\u5b9a\u4e49\u7684\u94fe\u63a5\u6837\u5f0f\u6709\u5982\u4e0b\u51e0\u79cd\uff1a
\u3000\u3000a:link \u8d85\u94fe\u63a5\u7684\u666e\u901a\u6837\u5f0f
\u3000\u3000a:visited \u70b9\u51fb\u8fc7\u7684
\u3000\u3000a:hover \u9f20\u6807\u7ecf\u8fc7\u65f6\u7684
\u3000\u3000a:active \u5355\u51fb\u65f6
\u3000\u3000a:link{text-decoration:none;} \u65e0\u4e0b\u5212\u7ebf
\u3000\u3000a:link{text-decoration:underline;} \u6709\u4e0b\u5212\u7ebf
\u3000\u3000\u4e3a\u4e86\u5b9e\u73b0\u4e0d\u540c\u94fe\u63a5\u4e0d\u540c\u6548\u679c\uff0c\u53ef\u4ee5\u4e13\u95e8\u5b9a\u4e49\u94fe\u63a5\u7684CSS\u89c4\u5219\uff0c\u6bd4\u5982\uff1a
\u3000\u3000\u6211\u4eec\u5e38\u89c4css\u662f\u8fd9\u6837\u7684\uff1a
\u3000\u3000a:link{color:#ff0000}
\u3000\u3000\u90a3\u4e48\u7f51\u9875\u4e0a\u6240\u6709\u94fe\u63a5\u7684\u989c\u8272\u90fd\u662f\uff1a#ff0000\u3002
\u3000\u3000\u7136\u540e\u53ef\u4ee5\u8fd9\u6837\u53bb\u4fee\u6539\uff1a
\u3000\u3000a:link{color:#ff0000}
\u3000\u3000.line1 a:link{color:#000000}
\u3000\u3000\u540c\u65f6\uff0c\u5728\u8981\u6539\u53d8\u989c\u8272\u7684\u94fe\u63a5\u524d\u52a0\u4e0acss\u5b9a\u4e49\uff0c\u50cf\u8fd9\u6837\uff1a\u4e0d\u540c\u989c\u8272\u7684\u8d85\u94fe\u63a5\uff0c\u8fd9\u6837\u7684\u8bdd\uff0c\u8fd9\u4e2a\u94fe\u63a5\u7684\u989c\u8272\u5c31\u6539\u53d8\u4e86\u3002

a.color1:link{color: #FFFFFF ; text-decoration:none;} /*\u5e38\u89c4\u65f6\u5019\u7684\u6837\u5f0f*/
a.color1:visited{color: #FFFFFF; text-decoration:none;} /*\u9f20\u6807\u6307\u4e0a\u53bb\u7684\u6837\u5f0f*/
a.color1:hover {color: #FFFFFF; text-decoration:underline;} /*\u8bbf\u95ee\u8fc7\u540e\u7684\u6837\u5f0f*/
\u8c03\u7528\u65b9\u5f0f:\u6d4b\u8bd5
\u9700\u8981\u94fe\u63a5\u6709\u8fd9\u4e2a\u6837\u5f0f\u7684\u5c31\u5728\u6807\u7b7e\u4e0a\u52a0class="color1",\u4e0d\u9700\u8981\u7684\u5c31\u4e0d\u52a0\u5c31\u53ef\u4ee5!
\u53e6\u5916\u4f60\u8868\u793a#FFFFFF\u7684\u989c\u8272\u53ef\u7f29\u5199\u4e3a:#fff
\u8bf4\u4e86\u8fd9\u6837\u591a\u60ac\u8d4f\u5206\u624d5\u5206!\u6655\u6b7b!

使用CSS选择器：这个选项的功能是可以设定链接文本的样式在选择器下拉列表中内定了四个选项: a:active　——定义链接被激活时的样式，即鼠标已经点击了链接，但页面还没有跳转时。 a:hover　——定义了鼠标悬浮在链接文字上时的样式。 a:link　——定义了链接文字的样式。 a:visited　——浏览者已经访问过的链接样式。这个选项有两个功能。 1）一是对具有一定关联组合标签的对象使用指定的样式，选择器一栏设置是：（td p），这表示文件中所有在表格中使用
标签包围的文本将使用这里定义的统一样式，而不在表格中的

标签包围的文本将不使用这个样式。
2）我们还可以定义两种以上的链接样式风格，具体步骤如下：在选择器下拉框中选择a:link，此为链接文字常规状态下的样式具体参数如图，注意此样式我们使用的是有下划线（underline），颜色为（#0000FF）的样式。
接下来在选择器下拉框中选择a:hover，此为鼠标悬浮在链接文字上方状态时的样式同样的方法我们可以建立另一个链接样式a.t1:link和a.t1:hover。在选择器下拉框中选择a:link，修改其为a.t1:link，即在原有的a:link中加入.t1样式类
再在选择器下拉框中选择a:hover，修改其为a.t1:hover，即在原有的a:hover中同样加入.t1样式类
来自于别 的网上，因时间问题不是自己所写

a.a5:link {color:#333333;text-decoration:none;}
a.a5:hover {color:#008000;text-decoration:none;}
a.a6:link {color:#333333;text-decoration:none;}
a.a6:hover {color:#008000;text-decoration:none;}
注:link 是初始颜色和状态
hover 是鼠标移过去时候的颜色和状态
这里的状态都是不显示下划线

先从大局上,提取公用的样式,一个网站,肯定许多风格都是相似的,菜单,导航什么的
然后把CSS分成几个文件,比如一个版块几个文件共用一个css,另一个版块加载另一个css,这样会简化一个css文件的内容

加个class=?就行,我来教你.

濡備綍璁剧疆澶氫釜閾炬帴棰滆壊鐨凜SS鏍峰紡
绛旓細1锛変竴鏄鍏锋湁涓瀹氬叧鑱旂粍鍚堟爣绛剧殑瀵硅薄浣跨敤鎸囧畾鐨勬牱寮忥紝閫夋嫨鍣ㄤ竴鏍璁剧疆鏄細锛坱d p锛夛紝杩欒〃绀烘枃浠朵腑鎵鏈夊湪琛ㄦ牸涓娇鐢 鏍囩鍖呭洿鐨勬枃鏈皢浣跨敤杩欓噷瀹氫箟鐨勭粺涓鏍峰紡锛岃屼笉鍦ㄨ〃鏍间腑鐨 鏍囩鍖呭洿鐨勬枃鏈皢涓嶄娇鐢ㄨ繖涓牱寮忋2锛夋垜浠繕鍙互瀹氫箟涓ょ浠ヤ笂鐨閾炬帴鏍峰紡椋庢牸锛屽叿浣撴楠ゅ涓嬶細鍦ㄩ夋嫨鍣ㄤ笅鎷夋涓夋嫨a:link锛屾涓...

鍒╃敤css鎬庝箞鏍璁╁鍦ㄥ悓涓涓〉闈笂鐨勮繛鎺棰滆壊涓嶅悓
绛旓細鐢ㄧ被閫夋嫨鍣ㄥ垎鍒粰涓嶅悓鐨勯摼鎺ュ姞棰滆壊鍗冲彲锛屾瘮濡傦細 .k1 a {color:red} /*绗1缁勭孩鑹*/ .k2 a {color:blue} /*绗2缁勮摑鑹*/ .k3 a {color:green} /*绗3缁勭豢鑹*/ 绗1缁勯摼鎺 绗1缁勯摼鎺 绗1缁勯摼鎺 绗2缁勯摼鎺 绗2缁勯摼鎺 绗2缁勯摼鎺 ...

鍦―reamweaver8涓濡備綍璁╀竴涓〉闈㈡湁澶绉閾炬帴棰滆壊?瑕佽缁嗙殑,姹傛...
绛旓細鍏堢湅涓涓嬪父鐢璁剧疆锛歛:link 瓒閾炬帴鐨鏅氭牱寮 a:visited 鐐瑰嚮杩囩殑 a:hover 榧犳爣缁忚繃鏃剁殑 a:active 鍗曞嚮鏃 a:link{text-decoration:none;} 鏃犱笅鍒掔嚎 a:link{text-decoration:underline;} 鏈変笅鍒掔嚎 涓轰簡瀹炵幇涓嶅悓閾炬帴涓嶅悓鏁堟灉锛屾垜浠涓轰笉鍚屾晥鏋滅殑閭ｄ釜閾炬帴涓撻棬瀹氫箟涓涓css瑙勫垯銆傛瘮濡傦細鎴戜滑甯歌css鏄繖鏍...

濡備綍鍒朵綔鍦ㄥ悓涓寮犻〉闈腑鐨閾炬帴鏂囧瓧鐨棰滆壊鏈変笁绉?
绛旓細鐜板湪鍔犱笂瀹氫箟涓 杩斿洖棣栭〉 === qq:8 1 1 2 8 9 8

鎴戞兂鍦ㄤ竴涓〉闈㈤噷闈㈠疄鐜颁袱涓笉鍚棰滆壊鐨杩炴帴,鍦CSS涓鎬庝箞瀹氫箟鍟?_鐧惧害...
绛旓細鍙互璁惧畾濂戒袱涓笉鍚岀殑绫 姣斿璇存槸class="a"涓巆lass="b"鍦ㄩ噷杈硅缃鑹 鐒跺悗鍦ㄤ綘鐨勯摼鎺ラ噷鍔犱笂閫夋嫨绗﹀嵆鍙 姣斿锛

鎬庣敤css鏂囦欢,鏀瑰彉缃戦〉鎵鏈閾炬帴鏂囧瓧鐨棰滆壊?
绛旓細鍦ㄦ渶涓嬬殑灞炴ф爮鐨勬渶涓嬮潰鏈変釜鈥滈〉闈㈠睘鎬р濈偣鍑汇傝繘鍏ュ睘鎬ц缃璇濇锛岀偣宸︿晶绗簩涓滈摼鎺モ濅綘灏卞彲浠ヨ嚜宸辫缃簡銆傞噷闈㈢敤鍥涗釜閾炬帴鐨勭浉鍏棰滆壊璁剧疆銆傛瘡涓涓閾炬帴棰滆壊鈥濆氨鏄偣鍑诲墠棰滆壊銆傛渶鍚庝竴涓滄椿鍔ㄩ摼鎺モ濆氨鏄偣鍑诲悗鐨勯鑹层傝繖鍥涗釜浣犺嚜宸辫缃竴涓嬶紝灏辩煡閬撳悇鑷敤閫斾簡銆傚搱鍝堬紝澶熻缁嗗惂銆傚璐熻矗鍟娿

Dreamweaver 涓濡備綍鐢CSS璁剧疆澶绉嶇殑瓒呯骇閾炬帴鏍峰紡?
绛旓細.a1 a:active{color:red} //鐐逛笅榧犳爣鏃舵枃瀛棰滆壊 鍚岀悊a2鍙互鍋氬尯鍒笌a1鐨閾炬帴璁剧疆 .a2 a:link{color:#ccc;text-decoration:underline;} //閾炬帴鏂囧瓧棰滆壊 涓#cctext-decoration:none鏈変笅鍒掔嚎 .a2 a:visite{color:#7B5744} //璁块棶鍚庣殑閾炬帴鏂囧瓧棰滆壊 涓#7B5744锛屾繁绾㈣壊 .a2 a:hover{color:#00...

CSS 鎬庢牱鐢css璁剧疆瓒閾炬帴瀛椾綋鐨勪笉鍚棰滆壊
绛旓細绠鍗曠殑鍐欐硶:a{ color:#f00/*棰滆壊鑷畾涔*/;font-family:"妤蜂綋";font-size:20px;}/*鏈闂殑閾炬帴,宸茶闂殑閾炬帴,鐐瑰嚮婵娲婚摼鎺*/ a:hover{ color:#0f0/*棰滆壊鑷畾涔*/}}/ 榧犳爣鍦ㄩ摼鎺ヤ笂 / 鍙︿竴绉嶆柟娉 a:link{ color:#f00/*棰滆壊鑷畾涔*/;font-family:"妤蜂綋";font-size:20px;} / 鏈...

鍚屼竴椤甸潰濡備綍璁剧疆涓嶅悓鐨閾炬帴棰滆壊
绛旓細鍏堢湅涓涓嬪父鐢璁剧疆锛歛:link 瓒閾炬帴鐨鏅氭牱寮 a:visited 鐐瑰嚮杩囩殑 a:hover 榧犳爣缁忚繃鏃剁殑 a:active 鍗曞嚮鏃 a:link{text-decoration:none;} 鏃犱笅鍒掔嚎 a:link{text-decoration:underline;} 鏈変笅鍒掔嚎 涓轰簡瀹炵幇涓嶅悓閾炬帴涓嶅悓鏁堟灉锛屾垜浠涓轰笉鍚屾晥鏋滅殑閭ｄ釜閾炬帴涓撻棬瀹氫箟涓涓css瑙勫垯銆傛瘮濡傦細鎴戜滑甯歌css...

鎬庢牱鎶婁竴涓綉椤典腑鐨勪袱涓閾炬帴寮勬垚涓嶅悓鐨棰滆壊
绛旓細href="#top"style="background-color:rgb(255,255,255);color:rgb(255,165,0)">閾炬帴浜 浠ｇ爜涓紝棰滆壊鍊"color"闇瑕佷娇鐢╤ex琛ㄧず銆傛垨鑰咃紝缂栬緫css锛屽湪閲岄潰鎸囧畾锛岀劧鍚庡湪缃戦〉涓皟鐢紝杩欐牱杩樺彲浠ュ垎鍒寚瀹氶紶鏍囨偓鍋溿佺偣鍑诲悗鐨勯鑹层備絾鏄繖涓柟娉曠浉瀵规潵璁叉湁浜涢夯鐑︼紝濡傛灉浣犳兂浜嗚В锛屽彲浠ュ彂娑堟伅缁欐垜 ...

扩展阅读：超链接访问后改变颜色 ... css改不了按钮颜色 ... htmlcss网页设计成品 ... css文字颜色大于超链接 ... css设置p段落文字不同颜色 ... css超链接颜色怎么改 ... css怎么设置超链接颜色 ... 使用css设置链接颜色 ... css更改文字颜色的代码 ...