CSS2和CSS3

Anonim

CSS2和CSS3的最大区别在于CSS3被分成不同的部分，称为模块。这些模块中的每一个都在推荐过程的各个阶段通过W3C。这个过程使得不同制造商在浏览器中接受和实现各种CSS3变得更加容易。

如果您将此过程与CSS2所发生的事情进行比较，其中所有内容都作为单个文档提交，其中包含所有层叠样式表信息，您就会开始看到将建议分解为更小的单个部分的优势。由于每个模块都是单独处理的，因此我们为CSS3模块提供了更广泛的浏览器支持。

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

新的CSS3选择器

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

三个新的属性选择器：

  • 属性开头完全匹配

    元素富^ = “酒吧” 该元素有一个名为foo的属性，以“bar”开头，例如

  • 属性结尾完全匹配

    元素富$ = “酒吧” 该元素有一个名为foo的属性，以“bar”结尾，例如

  • 属性包含匹配项

    元素富* = “酒吧” 该元素有一个名为foo的属性，它包含字符串“bar”，例如

16个新的伪类：

  • ：根
    • 文档的根元素。在HTML中，这始终是。
  • ：第n个孩子（N）
    • 使用它来匹配精确的子元素或使用变量来获得交替匹配。
  • ：第n-最后一子（N）
    • 匹配从最后一个开始计算的精确子元素。
  • ：第n-的型（n）
    • 在文档树中匹配其前面具有相同名称的同级元素。
  • ：第n-最后的型（n）
    • 匹配从底部向上计数的同名兄弟元素。
  • ：最后一个孩子
    • 匹配父项的最后一个子元素。
  • ：第一型的
    • 匹配该类型的第一个兄弟元素。
  • ：式中最后
    • 匹配该类型的最后一个兄弟元素。
  • ：唯一的孩子
    • 匹配作为其父级唯一子元素的元素。
  • ：只有-型
    • 匹配该类型中唯一的元素。
  • ：空
    • 匹配没有子元素的元素（包括文本节点）。
  • ：目标
    • 匹配作为引用URI的目标的元素。
  • ：启用
    • 在元素启用时匹配元素。
  • ：禁用
    • 禁用时匹配元素。
  • ：检查
    • 选中时匹配元素（单选按钮或复选框）。
  • ：没有（S）
    • 元素与简单选择器s不匹配时匹配。

一个新的组合器：

  • elementA~elementB
    • 当elementB跟在elementA之后的某个地方时匹配，不一定立即匹配。

新属性

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

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

多个背景我法师

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

新背景样式属性

CSS3中还有一些新的背景属性。

  • 背景素材
    • 此属性定义应如何剪切背景图像。默认为边框，但可以将其更改为填充框或内容框。
  • 背景起源
    • 此属性确定背景是否应位于填充框，边框框或内容框中。
  • 背景大小
    • 此属性允许您指示背景图像的大小。它允许您拉伸较小的图像以适合页面。

对现有背景样式属性的更改

现有的背景样式属性也有一些变化：

  • 背景重复
    • 此属性有两个新值：space和round。空间将平铺图像均匀地放置在框内，而不会被剪裁。圆形重新缩放背景图像，以便在框中平铺整数次。
  • 背景附件
    • 添加了一个新值“local”，以便当该元素具有滚动条时，背景将使用元素的内容进行滚动。
  • 背景
    • 背景速记属性会添加大小和原始属性。

CSS3边框属性

在CSS3中，边框可以是我们习惯使用的样式（实线，双线，虚线等），也可以是图像。此外，CSS3带来了创建圆角的能力。边框图像很有趣，因为您创建了所有四个边框的图像，然后告诉CSS如何将该图像应用到边框。

新的边框样式属性

CSS3中有一些新的边框属性：

  • 边界半径
    • 边框右上角半径, 边框右下角半径, 边框左下角半径, 边框左上角的半径
    • 这些属性允许您在边框上创建圆角。
  • 边界图像源
    • 指定要使用的图像源文件，而不是已定义的边框样式。
  • 边界图像切片
    • 表示边框图像边缘的向内偏移量
  • 边界图像宽度
    • 定义边框图像的宽度值。
  • 边界图像开始
    • 指定边框图像区域超出边框的数量。
  • 边界图像拉伸
    • 定义如何平铺或缩放边框图像的边和中间部分。
  • 边框，图像
    • 所有边框图像属性的简写属性。

与边框和背景相关的其他CSS3属性

当分页符中的框被破坏时，换行符的换行符（对于内联元素）box-decoration-break属性定义了如何使用边框和填充包装新框。可以使用此属性在多个损坏的框之间划分背景。

还有一个box-shadow属性，可用于向box元素添加阴影。

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

CSS3列 - 定义列的数量和宽度

有三个新属性允许您定义列的数量和宽度：

  • 列宽
    • 定义列的宽度。然后，浏览器将流动文本以使用宽的列填充空间。
  • 列数
    • 定义页面上的列数。然后，浏览器将创建足够宽的列以适合空间，但只能创建您指定的数字。
  • 列
    • 简写属性，您可以在其中定义宽度或数字（或两者，但这很少有意义）。

CSS3列间隙和规则

在同一多列场景中的列之间放置差距和规则。差距将推动列，但规则不会占用任何空间。如果列规则比其间隙宽，则它将与相邻列重叠。列规则和间隙有五个新属性：

  • 柱隙
    • 定义列之间间隙的宽度。
  • 列治色
    • 定义规则的颜色。
  • 列规则式
    • 定义规则的样式（实线，点线，双线等）。
  • 列规则宽度
    • 定义规则的宽度。
  • 列治
    • 一次定义所有三个列规则属性的简写属性。

CSS3列中断，跨越列和填充列

分栏符使用与用于定义分页内容中断的相同CSS2选项，但具有三个新属性： 先开, 磨合后，和 盈亏内.

与表一样，您可以使用column-span属性将元素设置为跨列。这使您可以创建跨越多个列的标题，更像报纸。

填充列决定每列中的内容量。平衡列尝试在每列中放入相同数量的内容，而自动只是将内容流入，直到列已满，然后转到下一列。

CSS3中没有包含的CSS3中的更多功能

CSS3中有许多其他功能在CSS2中不存在，包括：

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

编辑推荐