怎样用css操作链接样式

~
这篇文章将详细的讲解通过css来控制超链接样式。我们主要讲文字类型的超链接，包括超链接有无下划线、超链接文字颜色等样式。
什么是超链接？
超链接通俗地指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。
超链接的代码
<a href="http://www.gxlcms.com/" target="_blank" title="关于div css的网站">DIV+CSS</a>解析如下：
href 后跟被链接地址目标网站地址这里是http://www.gxlcms.com/
target
_blank -- 在新窗口中打开链接
_parent -- 在父窗体中打开链接
_self -- 在当前窗体打开链接,此为默认值
_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)
title 后跟链接目标说明，也就是超链接被链接网址情况简要说明，或标题
CSS可控制超链接样式-css链接样式如下
a:link是超级链接的初始状态
a:hover是把鼠标放上去时悬停的状况
a:active 是鼠标点击时
a:visited是访问过后的情况


1、通常对全站超链接样式化方法
a{color:#333;text-decoration:none; } //对全站有链接的文字颜色样式为color:#333;并立即无下划线text-decoration:none;
a:hover {color:#CC3300;text-decoration:underline;}//对鼠标放到超链接上文字颜色样式变为color:#CC3300;并文字链接加下划线text-decoration:underline;
2、通过链接内设置类控制超链接样式css方法
案例超链接代码<a href="http://www.gxlcms.com/" class="yangshi">CSS</a>
对应CSS代码
a.yangshi{color:#333;text-decoration:none; }
a.yangshi:hover {color:#CC3300;text-decoration:underline;}
通过这样的设置可以控制链接内的css类名为“yangshi”超链接的样式
3、通过对应超链接外的父级的css类的css样式来控制超链接的样式
案例超链接代码<div class="yangshi"><a href="http://www.gxlcms.com/">CSS</a></a>
对应CSS代码
.yangshi a{color:#333;text-decoration:none; }
.yangshi a:hover {color:#CC3300;text-decoration:underline;}
这里值得注意的是a.yangshi与.yangshi a的样式css代码区别
这里就是常css来对超链接样式设置的方法，有需要的朋友可以保存一下，也请大家持续关注本站的其他更新。


相关阅读：
html为什么有乱码以及解决方法


Div和CSS 该怎样学习


css的position怎么使用

---

仁布县15694008354： css怎么修改链接样式 - ？
芮柯欣泰： <style type=＂text/css＂> a{ text-decoration: none; color: blue; }.my_a{ text-decoration: none; color: blue }#myA{ text-decoration: none; color: blue }</style> 以上三种是在样式表里面的写法,区别是选择器不同,依照需要用不同的选择器<a class=＂my_a＂ id=＂myA＂ href=＂＂ style=＂text-decoration: none; color: blue;＂></a> 这个是直接在链接上写

仁布县15694008354： 如何通过CSS做链接? - ？
芮柯欣泰： CSS是样式,不可能做链接,但可以设置链接的样式. 不知你是不是这样问的呢,如果是我就解答以下的方式: 比如你设置一个名叫.a1的样式,那你的链接就应该是这样: .a1 {color:#000} .a1 a {这里写上超链接样式} 举例:a1 a {color:#000; text-text-decoration:none;} .a1 a:hover {这里写上滑过样式} 举例:.a1 a:hover {color:#900; text-text-decoration:none;}这样很简单吧,如果不是这个意思,那请问详细叙说.

仁布县15694008354： css控制某个div里的超链接的样式怎么设置? - ？
芮柯欣泰： 要在新窗口打开链接 就在a标签里面加入一个target属性,设置属性值为_blank; css写样式就是.singlea a{样式}//这是默认样式 还有a:link{};a:visited{};a:hover{};a:active{}几个鼠标效果

仁布县15694008354： Dreamweaver 中如何用CSS设置多种的超级链接样式? - ？
芮柯欣泰： /*样式1(myLink01)*/ a.myLink01:link {color:Green;text-decoration:none; } a.myLink01:visited { text-decoration:none; } a.myLink01:hover {text-decoration:underline; }/*样式2(myLink02)*/ a.myLink02:link {color:red;text-decoration:none; } a....

仁布县15694008354： 如何用CSS控制超链接字体样式? - ？
芮柯欣泰： 先一个例子,比如说下面这段代码:<style type=＂text/css＂ a:link {text-decoration:none;color:blue;} a:hover {text-decoration:underline;color:red;} a:active {text-decoration:none;color:yellow;} a:visited {text-decoration:none;color:green;}</style其效果...

仁布县15694008354： 如何在网页中用css定义全局和个别的链接样式? - ？
芮柯欣泰： 例如分别定义四个:.aaa:link{***}.aaa:hover{***}.aaa:visited{***}.aaa:active{***} 其实定义了一个类,使用时:<a class=aaa href=＂***＂>***</a>

仁布县15694008354： 100分帮忙设置一个CSS链接样式？
芮柯欣泰： a:link{color:颜色值} a:link 超链接的普通样式 a:visited 点击过的 a:hover 鼠标经过时的 a:active 单击时 a:link{text-decoration:none;} 无下划线 a:link{text-decoration:underline;} 有下划线

仁布县15694008354： 怎样在网页中用css制作不同样式的超级链接 - ？
芮柯欣泰：CSS这样写: .test a{}//a的属性有: font-size:10px; color:#000000; font-weight:bold; text-decoration:underline; 字体大小 颜色 粗体 下划线(:none;为无下划线).test a:hover{} .................. a:link:连接平常的状态 a:active:连接被按下的时候 a:visited:连接被访问过之后 a:hover:鼠标放到连接上的时候

仁布县15694008354： 如何连接外部CSS样式 - ？
芮柯欣泰： 外部CSS样式是一个独立的CSS文件,当在网页中直接创建外部CSS样式时,该样式自动应用到网页中;当在创建空白网页时,通常可以附加已经存在的外部样式表.如果CSS样式文件已经存在,制作网页时可以通过【CSS样式】面板中的【...

仁布县15694008354： 如何用CSS控制连接,同一页面中的不同连接采取不同的CSS样式 - ？
芮柯欣泰： 把链接分成不同的类: sssddd xxx、yyy是类的名称 然后在css中自由设置吧: a.xxx {……} a.yyy {……}