175 6191 5976

添加官方微信

领创时代关于网站建设、青岛画册设计、青岛网站设计的观点和相关新闻 将我们的想法与焦点与你共享

网站设计中CSS2和CSS3之间的区别

2019-08-28 来源:小领

CSS2和CSS3的最大区别在于CSS3被分成不同的部分,称为模块。这些模块中的每一个都在推荐过程的各个阶段通过W3C。这个过程使得不同浏览器中接受和实现各种CSS3变得更加容易。由于每个模块都是单独处理的,因此我们对CSS3模块提供了更广泛的浏览器支持。

与任何新的和不断变化的规范一样,请务必在尽可能多的浏览器和操作系统中彻底测试CSS3 页面。请记住,目标不是创建在每个浏览器中看起来完全相同的网站,而是确保您使用的任何样式(包括CSS3样式)在支持它们的浏览器中看起来很棒,并且它们适用于旧版浏览器。

新的CSS3选择器。CSS3提供了一系列新方法,您可以使用新的CSS选择器编写CSS规则,以及新的组合器和一些新的伪元素。

有三个新的属性选择器,引入了16个新的伪类:
:root
文档的根元素。
:nth-child(n)
使用它来匹配精确的子元素或使用变量来获得交替匹配。
:nth-last-child(n)
匹配从最后一个开始计算的精确子元素。
:nth-of-type(n)
在文档树中匹配前面具有相同名称的同级元素。
:nth-last-of-type(n)
匹配从底部向上计数的同名兄弟元素。
:last-child
匹配父项的最后一个子元素。
:first-of-type
匹配该类型的第一个兄弟元素。
:last-of-type
匹配该类型的最后一个兄弟元素。
:only-child
匹配作为其父级唯一子元素的元素。
:only-of-type
匹配唯一一个类型的元素。
:empty
匹配没有子元素的元素(包括文本节点)。
:target
匹配作为引用URI的目标的元素。
:enabled
在元素启用时匹配元素。
:disabled
禁用时匹配元素。
:checked
选中时匹配元素(单选按钮或复选框)。
:not(s)
元素与简单选择器不匹配时匹配。


有一个新的组合器:elementA~elementB。当elementB跟在elementA之后的某个地方时匹配,不一定立即匹配。

新属性

CSS3还引入了许多新的CSS属性。其中许多属性都是为了创建可能与Photoshop等图形程序相关联的视觉样式。其中一些,如border-radius或box-shadow,自CSS3推出以来就已存在。其他的,比如flexbox甚至CSS Grid都是更新的样式,仍然经常被认为是CSS3的补充。

在CSS3中,盒子模型没有改变。但是有一些新的样式属性可以帮助您设置框的背景和边框的样式。

使用背景图像,背景位置和背景重复样式,您可以指定多个背景图像在框中彼此叠加。第一个图像是最靠近用户的图层,后面绘制了下面的图像。如果有背景颜色,则会在所有图像图层下方绘制。

CSS3中有一些新的边框属性:border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius,border-top-left-radius。还有一个box-shadow属性,可用于向box元素添加阴影。

使用CSS3,您现在可以轻松设置具有多个列的网站页面,而无需表格或复杂的div标签结构。您只需告诉浏览器body元素应该有多少列以及它们应该有多宽。另外,您可以添加边框,跨越列高的背景颜色,文本将自动流经所有列。

CSS3中有许多其他功能在CSS2中不存在,包括:

CSS模板布局模块和CSS3网格定位模块:使用CSS创建网格。
CSS3文本模块:使用CSS概述文本甚至创建阴影。
CSS3颜色模块:现在具有不透明度。
对框模型的更改:包括   与IE标记类似的选取框属性。
CSS3用户界面模块:为您提供新游标,对操作的响应,必填字段,甚至调整元素大小。
媒体查询:  媒体查询可以在定义样式表的使用方式时提供更大的灵活性。例如,您可以定义仅适用于视口大于20em的手持设备的样式表。
CSS3 Ruby模块:为使用文本ruby注释文档的语言提供支持。
CSS3分页媒体模块:为页面媒体(纸张,透明胶片等)提供更多支持。
生成的内容:运行页眉和页脚,脚注以及以编程方式生成的其他内容,尤其是对于分页媒体。
CSS3语音模块:对听觉CSS的更改。

版权声明:转载此文章须经 领创时代 同意,并请附上 领创时代 及本页链接http://www.leadnov.com/newsItem.aspx?id=258
创造品牌视觉体验 X 创新IT技术赋能企业
领创帮助您创新品牌战略,让品牌成为最具价值的资产。
中国·山东 青岛市市北区郑州路43号橡胶谷A栋
热线:175 6191 5976
微信:leadnov
Copyright © 2018-2020 leadnov All Rights Reserved
鲁ICP备18056479号-1站点地图

关注领创公众平台

添加官方微信

175 6191 5976