前端学习第14天：初识CSS3

第14天

1.CSS3简介

​ 如同人类的的进化一样，CSS3是 CSS2 的“进化”版本，在 CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

1.1CSS3现状

- 浏览器支持成都差，需要添加私有前缀
- 移动端支持优于`PC`端
- 不断改进中
- 应用相对广泛

1.2如何对待

- 坚持<font color="red">渐进增强</font>原则
- 考虑用户群体
- 遵照产品的方案

2.渐进增强和优雅降级

2.1渐进增强

​ 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

2.2优雅降级

​ 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

2.3区别

- 优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看。
- 而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

3.CSS3选择器

3.1属性选择器

​ 语法：

/* 存在attr属性即可 */
E[attr]{}
/* 属性值完全等于val */
E[attr=val]{}
/* 属性值中包括val字符，并在“任意”位置 */
E[attr*=val]
/* 属性值中包括val字符，并在“开始”位置 */
E[attr^=val]{}
/* 属性值中包括val字符，并在“结束”位置 */
E[attr$=val]{}

3.2伪类选择器

​ 除了以前学过的 :link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。

3.2.1结构（位置）伪类

​ 以某元素（E）相对于其父元素或兄弟元素的位置来获取无素；

​ 语法：

/* 其父元素的第1个子元素，且为E */
E:first-child{}
/* 其父元素的最后1个子元素，且为E */
E:last-child{}
/* 其父元素的第n个元素，且为E */
E:nth-child(n){}
/* 其父元素的倒数第n个元素，且为E */
E:nth-last-child(n){}


/* n可是多种形式：nth-child(2n+0)、nth-child(2n+1)、nth-child(-1n+3)等； */
/* 注：指E元素的父元素，并对应位置的子元素必须是E */

3.2.2 空伪类

​ 语法：

E:empty{}
/* 选中没有任何子节点的E元素；（使用不是非常广泛） */

3.2.3 目标伪类

​ 语法：

E:target{}
/*  结合锚点进行使用，处于当前锚点的元素会被选中； */

3.2.4排除伪类

​ 语法：

E:not(selector){}
/*  除selector（任意选择器）外的元素会被选中； */

3.2.5 UI状态伪类选择器

/*
所谓UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！
1 :enabled匹配所有用户界面（form表单）中处于可用状态(没有被禁用的)的元素。
2 :disabled匹配所有用户界面（form表单）中处于不可用状态（禁用）的E元素。
3 :checked匹配所有用户界面（form表单）中处于选中状态的元素。
4 :selection 可以让鼠标选中文字的时候，给其设置背景和文本颜色，不能设置其他的属性。
*/

3.3伪元素选择器

• E::first-letter文本第一个单词或字（如中文，日问，韩文）

• E::first-line 文本第一行

• E::selection可改变选中文本的样式

• E::before和E::after

  ​ 在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

  E:after、E:before在旧版本里是伪元素，CSS3的规范里:用来表示伪类，::用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

  ":" 与 “::” 区别在于区分伪类和伪元素

3.4层次选择器

3.4.1 后代选择器（E F）

​ 说明：后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素，比如说:E F，前面E为祖先元素，Ｆ为后代元素，所表达的意思就是选择了Ｅ元素的所有后代Ｆ元素，请注意他们之间需要一个空格隔开。这里Ｆ不管是E元素的子元素或者是孙元素或者是更深层次的关系，都将被选中，换句话说，不论Ｆ在Ｅ中有多少层关系，都将被选中。

​ 所有浏览器都支的后代选择器。

3.4.2子元素选择器（E>F）

​ 说明：子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E>F所表示的是选择了Ｅ元素下的所有子元素Ｆ。这和后代选择器（Ｅ Ｆ）不一样，在后代选择器中Ｆ是Ｅ的后代元素，而子元素选择器Ｅ > F，其中Ｆ仅仅是Ｅ的子元素而以。

IE6不支持子元素选择器。

3.4.3相邻兄弟选择器（E+F）

​ 说明：相邻兄弟选择器可以选中紧跟在另一元素后的元素。不能选中被隔开的元素。

​ h1 + p {background: green;color: yellow; border: 1px solid #ccc;}

IE6不支持这个选择器

3.4.4 同用兄弟选择器（E~F）

​ 说明：通用兄弟元素选择器：给指定选择器后面的所有选择器选中的所有标签加样式。无论后面元素有没有被隔开都可以选中。

3.5其他选择器

​ only-child选中父元素中唯一的标签（比如有两个p标签，一个在div里面，一个随便在其他地方，使用这个选择器选中的是div中的p）

/* 
:first-of-type  	 选中同级别中同类型的第一个标签
:last-of-type   	 选中同级别中同类型的最后一个标签
:nth-of-type(n)   	 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type   	 选中父元素中唯一类型的某个标签
*/

root 选择文档的根元素 所谓根元素，是指位于文档树中最顶层结构的元素，在HTML页面中就是值包含着整个页面的html部分

4.CSS3的私有属性

​ 什么是浏览器私有属性前缀？

/*
CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。
以下是几种常用前缀
-webkit- 谷歌 -moz- 火狐 -ms- IE浏览器 -o- 欧朋
-khtml-（现在基本都没有用了，被-webkit-取代）

举例来说，一个CSS3圆角的代码是：
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
*/

5.CSS3新增属性

5.1文字阴影text-shadow

​ 语法：

div{
    text-shadow: h-shadow v-shadow blur color;
}
/*
h-shadow 必需。水平阴影的位置。允许负值。为正值，阴影在对象的右边，反之阴影在对象的左边。
v-shadow 必需。垂直阴影的位置。允许负值。如果为正值，阴影在对象的底部，反之阴影在对象的顶部。
blur 可选，模糊的距离。 这个值只能是正值。
color 可选，阴影的颜色。
*/

5.2盒子阴影box-shadow

​ 与文字阴影类似，可分别设置盒子阴影偏移量、模糊度、颜色（可设透明度）。

​ 如box-shadow: 5px 5px 5px #CCC

​ 1、水平偏移量 正值向右 负值向左；

​ 2、垂直偏移量 正值向下 负值向上；

​ 3、模糊度是不能为负值；

​ 4、inset可以设置内阴影；

​ 注：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果，增强立体感，符合渐进增强，实际开发中可以大胆使用

5.3英文换行word-break

​ break-all它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句。 2.keep-all文本不会换行，默认值

5.4圆角border-radius

​ 语法：

div{
	border-radius:none;
}
/*
border-radius是一种缩写方法。
border-top-left-radius：定义元素左上角圆角。
border-top-right-radius：定义元素右上角圆角。
border-bottom-right–radius：定义元素右下角圆角。
border-bottom-left-radius：定义元素左下角圆角。
*/

5.5颜色特性

​ 说明：CSS3新增加了rgba()创建color值;rgb(): rgb函数:r(red),g(green),b(blue)[计算机三原色]; 值可以为0-255任意整数或百分比; 如超出范围,取最近的有效值: 透明度为0-1之间的数值,0为全透明,1为全不透明,利用透明度可以做出很多好看的效果。