1.内容与表现分离
写一个网页就好比建房子,房子的结构通过砖块、钢筋、水泥搭建,后期通过瓷砖、地板等的装饰,才能让房子更加漂亮。
网页通过HTML搭建整体结构,通过CSS修饰美化网页。为了使得在搭建的过程中不受到美化网页的影响,而是专注在结构上。并且在后期的维护上也更加方便。
2.网页的表现统一,容易修改
分开之后,结构和样式在不同的文件,互不影响,结构清晰,可读性强,后期如果修改维护便于定位查找。
3.丰富的样式,使得页面布局更加灵活
首先样式表中提供了强大的而且非常全面灵活的选择器,可以供大家选取到网页中的任何一个元素
从大的方面选择器可以分为四大类:
1.基本选择器
2.层次选择器
3.结构伪类选择器
4.属性选择器
如下图偶只是截取了属性选择器中几种:
其次样式表不仅提供了文本效果、背景和边框还有2D/3D 转换、动画、多列布局、用户界面等。
4.减少网页的代码量,增加网页的浏览速度,节省网络带宽
很多CSS3技术通过提供相同的视觉效果而成为图片的“替代品”
换句话说,在进行Web开发时,减少多余的标签嵌套以及图片的使用数量,意味着用户要下载的内容将会更少,页面加载也会更快。
另外,更少的图片、脚本和Flash文件能够减少用户访问Web站点时的HTTP请求数,这是提升页面加载速度的最佳方法之一。
而使用CSS3制作图形化网站无需任何图片,极大地减少了HTTP的请求数量,并且提升了页面的加载速度
基于以上几点,使用样式表是必须的!!
css3和css一样吗?
CSS3是CSS的子集,CSS3是最新的标准,提供了很多好用的新属性,提升了网页的表现性。
CSS3提供了更好用的选择器
最新的CSS3中,对伪类、伪元素选择器做了严格的规范。有了伪类后,不用在div标签里面添加额外的元素完成一些DOM操作,可以通过::before,::after完成,代码简洁明了。对于鼠标的操作,也可以通过::hover等类似的操作完成。非常高效。还有::first–child等类似的选择器去操作子元素。
CSS3使动画效果越来越方便
css3里面通过animation来完成动画,设置@keyframes即可,一些轻量级的动画不必再通过js完成。
CSS3完成圆角、阴影美化更方便
以前的css完成类似的功能只能通过图片做背景,现在只需要border-radius、boxshadow即可。非常高效简洁。
CSS3提供了全新的盒模型
这个特性十分有用。原来的盒模型width=content.+border+padding。你规定了width.每次都要自己计算,现在有了boder-box不用这么麻烦了。
CSS3的flex布局是最强大的
IE已死,不需要再考虑它的兼容性!!!用flex布局,节省很多时间,节省的时间可以学很多东西,而不是浪费时间去适应落后的ie!!!
还有很多好用的css3特性,这个版本提供了巨大的生产力!!!很感谢它,期待下一个grid布局~
以上是偶的看法~
学习web前端开发?
黑马程序员web前端中级程序员学习路线图,含配套视频,前端工具,源码等。
黑马程序员学习路线图及能掌握的能力(总,以下会分阶段,加上配套学习视频,小伙伴可继续往下看!)
第一阶段:HTML5+css
配套学习视频:
前端小白零基础入门HTML5+CSS3
第二阶段:移动web网页开发
配套学习视频:
移动web进阶教程
第三阶段:JavaScript网页编程
配套学习视频:
前端与移动开发基础入门到精通
javaScript零基础通关必备教程
第四阶段:Node.js与Ajax
配套学习视频:
Nodejs教程精讲
ajax从入门到精通
第五阶段:vue.js项目实战
配套学习视频:
4小时+5个拣选案例让你快速入门Vue.js
Vue.js深入浅出教程
第六阶段:微信小程序
配套学习视频:
一天教你打造企业级微信小程序
微信小程序-个人语音接口功能
分分钟快速入门小程序开发
零基础玩转微信小程序
2小时轻松实现人脸识别的小程序
第七阶段:React.js项目实战
配套学习视频:
Reactjs入门教程
ReactJs精品教程
第八阶段:框架阶段与原理
第九阶段:移动APP开发
第十阶段:node.js进阶
第十一阶段:可视化游戏
第十二段阶段:架构与运维
还有前端免费工具下载
另外,关注加转发,然后私聊偶发送:前端,就能获得上面这些资源咯。
伪类选择器的属性?
伪类选择器是通过冒号来定义,它定义了元素的状态,如点击按下,点击完成等,通过伪类可以为元素的状态修改样式。伪类选择器的功能和一般的DOM中的元素样式相似,但和一般的DOM中的元素样式不一样,它并不改变任何DOM内容。
只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见。
伪类选择器的效果可以通过添加一个实际的类来达到。
伪类选择器主要可以分为:动态伪类选择器、UI元素状态伪类选择器、结构伪类选择器、否定伪类选择器。
如果觉得《css伪类选择器及伪元素选择器 使用样式表有什么好处 – CSS – 前端 css input 背景》对你有帮助,请点赞、收藏,并留下你的观点哦!