H5C3 第二天 CSS3简介

CSS3的兼容情况

下面介绍这些私有属性：

       标签结构类型

     指定子元素的序号（重点）

      其他伪类选择器

• Webkit 引擎浏览器使用“-webkit-”作为私有属性，像Safari和Chrome浏览器。

• Gecko 引擎浏览器使用“-moz-”作为私有属性，像Firefox浏览器。

• Presto 引擎浏览器使用“-o-”作为私有属性,像Opera浏览器。

• Trident 引擎浏览器使用“-ms-”作为私有属性，只有IE8以上支持,像IE浏览器。

• 新增选择器

  选择相邻兄弟   匹配选择器  属性选择器  结构性伪类选择器

• 选择相邻兄弟

  如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
• h1 + p {
      margin-top:50px;
  }

• 匹配选择器

  匹配所有在#div元素之后的同级p元素。

  div ~ p {
      background-color: #f00;
  }

• 属性选择器

• 选择器	描述
  [attribute]	用于选取带有指定属性的元素。
  [attribute=value]	用于选取带有指定属性和值的元素。
  [attribute^=value]	匹配属性值以指定值开头的每个元素。
  [attribute$=value]	匹配属性值以指定值结尾的每个元素。
  [attribute*=value]	匹配属性值中包含指定值的每个元素。
  [attribute~=value]	用于选取属性值中（包含）指定词汇的元素，还可以空格为分隔符。
  [attribute|=value]	用于选取带有以指定值（开头）的属性值的元素，还可以连字符-为分隔符。

  ​​​​​​​

  结构性伪类选择器

   整体结构类型

• :first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。

• :last-child 匹配的是某父元素的最后一个子元素，可以说是结构上的最后一个子元素。

• :first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。

• :last-of-type 匹配某个父元素中最后一个某一类型的元素。

• :nth-child(n) 对指定序号的子元素设置样式（从前往后数）。参数可以使数字（1、2、3）、关键字（odd、even）、公式（2n、2n+3 :使用公式时,n从0开始），参数的索引起始值时1，而不是0。

• :nth-last-child(n)(有父元素) 对指定序号的子元素设置样式（从后往前数）。参数同上。

• :nth-of-type(n) 匹配指定序号的同一种类型的子元素（从前往后数）。参数同上。

• :nth-last-of-type(n) 匹配 指定序号的同一种类型的子元素（从后往前数）。参数同上。

• :root：将样式应用到页面的根元素中。root选择器就是将样式应用到根元素中。在整个HTML页面中，指的就是整个“html”部分。

• :empty 指定当元素内容为空白时使用的样式。

• :not(selector)排除selector选择器选中的元素，不对它们应用样式解析。

• :target 对页面中某个target元素指定样式，该样式只在用户单击了页面中的链接，并且跳转到target元素后生效

• 文本选择伪元素

• ::selection指定当前元素处于选中状态部分的样式。只能向选择器应用少量CSS属性：color、background等。

• 内容追加伪元素

• ::before:向当前的元素前面追加内容(创建一个伪元素，其将成为匹配选中的元素的第一个子元素)

• ::after:向当前的元素内容后面追加内容(创建一个伪元素，作为已选中元素的最后一个子元素)

:before和::before写法的区别

• 相同点

1.都可以用来表示伪类对象，用来设置对象前的内容，:before和::before写法是等效的

2.伪类对象要配合content属性一起使用

3.伪类对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入

4.所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，

• 不同点

  :before是css2的写法，::before是css3的写法，在H5开发中建议使用::before比较好。

伪元素和伪类区别

• 伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

• 伪类：存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类。

• 表单中使用的状态伪类选择器

• :disabled 指定当前元素处于不可用状态时的样式。

• :enabled 指定当前元素处于可用状态时的样式。

• :checked 指定表单中单选框或复选框处于选中状态时的样式。

JS新增的选择器（重点）

• querySelector()；//单个

• querySelectorAll();//数组

CSS3样式补充

background-image多重背景

在CSS3中可以在一个元素里显示多个背景图像，还可以将多个背景图像进行重叠显示

background-image的渐变

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

• direction:预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

• 定义一个角度

• 径向渐变（Radial Gradients）- 由它们的中心定义

• 径向渐变由它的中心定义

为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形）。

设置形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse

#grad {
  background-image: radial-gradient(red, yellow, green);
}
#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

background-size背景缩放

background-size属性一定要写在background属性后面。

background-origin背景定位原点

要给图像定位，可以使用background-position属性 但是这个属性总是以元素的左上角为坐标原点进行图像定位

background-origin属性是用来指定绘制背景图像时的起点，使用此属性可以任意定位图像的起始位置

• padding-box： 默认值, 从padding区域开始显示背景。

• border-box： 从border区域开始显示背景。

• content-box： 从content区域开始显示背景

CSS3的opacity 属性(重点)

opacity 属性是设置元素的不透明级别 语法

opacity: value|inherit;

值	描述
value	规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
inherit	应该从父元素继承 opacity 属性的值。

CSS3的filter(滤镜) 属性

filter 属性定义了元素(通常是<img>)的可视效果

语法

 filter: grayscale(100%) | blur(px);

值	描述
grayscale	将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
blur(px)	给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； 如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。