引用方法:<link rel=stylesheet href=“style.css”>
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
下面这段代码很有趣,可以点击这里看到它的效果
<html> <title>link css</title> <head> <style> <!-- //*定义伪类元素(a:),大括号内定义了前景色属性和文本装饰属性, hover加上‘font-size’属性目的是让鼠标激活链接时改变字体*// a:link{color:green;text-decoration:none} //*未访问时的状态,颜色为绿色(green),文本装饰属性(text-decoration)值 为没有(none)*// a:visited{color:red;text-decoration:none} //*访问过的状态,颜色为红色(red),文本装饰属性值为没有*// a:hover{color:blue;text-decoration:overline;font-size:20pt} //*鼠标激活的状态,颜色为蓝色(blue), 文本装饰属性值为上划(overline), 字体大小为20pt*// --> </style> </head> <body> <p style=“font-family:行书体;font-size:18pt”> <a href=“http://www.hongen.com”>未访问的链接</a></p> //*加链接,显示三种不同状态,并且定义了链接文本的字体和大小*// <p> <a href=“http://www.hongen.com”>访问过的链接</a></p> <p> <a href=“http://www.hongen.com”>鼠标激活的链接</a></p> </body> </html>
这个例子是从洪恩在线上copy过来的,驼驼以前做过这种咚咚,copy了一大段的js代码。这算是种特效吧,而它的原理so easy 驼驼以前不是不会用link的css,只是没有想到。所以很多时候创造力和想像力是很重要的。
容器属性:虾米是容器?驼驼到现在还没找到一个定律一样的解释。8过,凭经验,<body></body><div></div>、<tr></tr>......类似的标签都是容器。这些标签就像容器,
罐装了我们的网页内容。使他们能在正确的位置来体现。CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性
边距属性 例:body{margin:1em 2em 3em 4em} //*定义文本的上、右、下、左的边距分别为1、2、3、4em*// 填充距属性 例:padding:1em 2em 3em 4em 边框属性 看上去很多,实际用起来很方便。 例:P{border:5px double purple}//*定义了四条边框为一样的值*// 图文混排 img{margin-right:2em;float:left}//*定义图片的右边距为2em,图片浮动在文字的左边*//
边距属性
例:body{margin:1em 2em 3em 4em} //*定义文本的上、右、下、左的边距分别为1、2、3、4em*//
填充距属性
例:padding:1em 2em 3em 4em
边框属性
看上去很多,实际用起来很方便。
例:P{border:5px double purple}//*定义了四条边框为一样的值*//
图文混排
img{margin-right:2em;float:left}//*定义图片的右边距为2em,图片浮动在文字的左边*//
鼠标属性
在CSS当中,这种样式是通过“cursor”属性来实现的。Cursor属性有很多的属性值,
我们来看一下它的详细列表
例子:<span style=“cursor:hand”>手的形状</span>
Powered by: 博客园 Copyright © 2024 Bobby Powered by .NET 8.0 on Kubernetes