应用越来越广泛的css伪类_html/css_WEB-ITnose
程序员文章站
2022-04-10 19:20:53
...
说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的。但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码量。开发网页代码的效率也极大提高,今天我就跟大家分享一下学习css伪类的一些小经验.
对于开始接触css的朋友来说,在看其他人的代码的时候会经常看到 :hover,:foucs,:before,:after等相关代码,其实这些就是css伪类代码。简单来说应用css伪类就是增加了一个块。
接下来我们看一下伪类到底有哪些,并且各自有哪些用:
1.锚伪类:
a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF}
相信后面的注释的应该能看见吧,这个相对简单一点就不详解了
2.:before,:after:
这个是我们今天要说的重点,而事实上很多的非常精美的css动画都是离不开这两个元素的。 举例:
:before是在该类名前面加一个块。那么:after是在该类名后面增加一个快元素
例如 html:
we are famliy
css: .a{color:#fff;}
.a:before{
content:"";
width:30px;
height:30px
position:absoulate;
}
该例中就是在文本前面增加了一个宽为30px,高为30px;的一个空白快 这里面要说的是在伪类里面
对于元素的位置定位绝对是absoulate。不能是其他的,你可以控制left:或者top 定位它的位置
content可以向快里面增加内容,图片,文字等等。如果不需要的话。content:“”;为空。但是代码不能省略。
下面给大家一些真实的案例供大家理解
得到的效果如图;
上一篇: python3爬取微信文章
推荐阅读
-
前端开发HTML&css入门——伪类选择器和一些特殊的选择器
-
css3中关于伪类的使用_html/css_WEB-ITnose
-
WebForm 获取实体类的数据,填充页面(用session传值)_html/css_WEB-ITnose
-
【定义CSS样式问题】CSS伪类样式_html/css_WEB-ITnose
-
【关于W3C标准】是否必须严格遵守元素应该应用到的DTD标准?_html/css_WEB-ITnose
-
如何开发无障碍的Web网页应用详细手册教程指南_html/css_WEB-ITnose
-
关于伪类a:hover用行样式表达,求解,_html/css_WEB-ITnose
-
初学HTML 常见的标签(三) 插入类标签_html/css_WEB-ITnose
-
关于伪类a:hover用行样式表达,求解,_html/css_WEB-ITnose
-
【定义CSS样式问题】CSS伪类样式_html/css_WEB-ITnose