扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
需要准备的材料分别有:电脑、浏览器、html编辑器。
10年积累的成都网站设计、做网站经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计制作后付款的网站建设流程,更有宣汉免费网站建设让你可以放心的选择与我们合作。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的style标签中,输入css代码:
a{color: black}
a:hover{color: red}
a:visited{color: red}
3、浏览器运行index.html页面,此时黑色的超链接被移入和点击后是红色的。
html语言不用修改
还是直接给文字加链接
你可以
在css样式中写
a{
color:#333;
/*无链接时颜色*/
}
a:hover{
color:#F00;/*鼠标经过链接时颜色*/}
a:active{
color:#30F;
/*鼠标点击链接时颜色*/}
比如:css中写
a{
color:#333;
text-decoration:none;}
a:hover{
color:#F00;
text-decoration:underline;}
a:active{
color:#30F;}
出来的效果就是
鼠标未经过时
黑色
滑过时
红色
点击时蓝色
设置目标文字的a标签属性
如:要设置下面链接文字的颜色
a href="#" id="link"我是链接文字/a
css部分:
#link{
color:white;/*设置链接字体的颜色*/}
注意:
在有时候设置链接颜色会出现无效的情况,这时候你需要检查你的选择器写的是否正确。
a有四种状态:
a:link {color:#FF0000;}/* 未被访问的链接 */
a:visited {color:#00FF00;}/* 已被访问的链接 */
a:hover {color:#FF00FF;}/* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}/* 正在被点击的链接 */
书写时一定要按照以上顺序书写,否则无法达到设计效果
简单的写法:
a{
color:#f00/*颜色自定义*/;font-family:"楷体";
font-size:20px;}/*未访问的链接,已访问的链接,点击激活链接*/
a:hover{
color:#0f0/*颜色自定义*/}}/*
鼠标在链接上
*/
另一种方法
a:link{
color:#f00/*颜色自定义*/;font-family:"楷体";
font-size:20px;}
/*
未访问的链接
*/
a:visited{color:#f00/*颜色自定义*/}
/*
已访问的链接
*/
a:hover{
color:#0f0/*颜色自定义*/}/*
鼠标在链接上
*/
a:active{
color:#660099/*颜色自定义*/}/*
点击激活链接
*/
按照顺序来。
先是a:link:{color:#000};/*设置所有连接的颜色*/
再是a:visited:{color:#ccc};/*设置访问过的连接的颜色*/
再是a:hover:{color:#999};/*设置鼠标经过连接的颜色*/
最后a:active:{color:#333};/*设置鼠标点下连接的颜色*/
不按照这个顺序,可能就不能达到你想要的效果。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流