前端学习-CSS3篇

CSS3 新增选择器

子级选择器

子级选择器用于选取带有特定父元素的元素。
书写语法:element1 > element2
注意:如果 element2 元素不是父元素 element1 的直接子元素，则不会被选择。
> 符号之前书写父级的选择器，> 符号之后写子级选择器，必须满足父子级关系才能选中标签。

div > p {
    color: red;
}

兄弟选择器

相邻兄弟选择器

相邻兄弟选择器可以用于选择紧接在另一个元素后的兄弟元素，而且二者有相同的父元素。 书写语法:E1 + E2。
注意:
a)选中的是紧跟在 E1 之后的同级元素 E2。
b)只能选中紧跟在后面的一个 E2 元素。
c)二者有相同的父元素。

h1 + p {margin-top:50px;}

其他兄弟选择器

其他兄弟选择器匹配同一个父元素中在 element1 后面的所有 element2 元素。 书写语法:element1 ~ element2
注意:
a)选择 element1 之后出现的所有 element2。
b)两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。
c)~ 符号前后可以添加空格书写。

h2 ~ p{
    background:#ff0000;
}

结构伪类选择器

nth-child(n)

n 可以是数字，关键字和公式
n 如果是数字，就是选择第 n 个

常见的关键词 even 偶数 odd 奇数
常见的公式如下 ( 如果 n 是公式，则从 0 开始计算，n是从 0 ，1，2，3.. 一直递增)
但是第 0 元素或者超出了元素的个数会被忽略

E:nth-child(n) 和E:nth-of-type(n) 的区别

E:nth-child(n) 匹配父元素的第 n 个子元素 E，同时需要满足两个条件。
E:nth-of-type(n)匹配同类型中的第n个同级兄弟元素E，会忽视其他同级的非同类型元素。

伪元素选择器

h5 写法和传统写法区别

1.单冒号E:before
2.双冒号E::before
浏览器对以上写法都能识别，双冒号是 h5 的语法规范。

伪元素的注意事项

伪元素只能给双标签添加，不能给单标签添加
伪元素的冒号前不能有空格，如 E ::before 这个写法是错误的
伪元素里面必须写上属性content:"";
before和after创建一个元素，但是属于行内元素。
因为在DOM里面看不见刚才创建的元素，所以我们称为伪元素。

属性选择器

属性选择器用来选择包含指定属性的标签

选择器权重

基础选择器:id 选择器 > 类选择器 > 标签选择器 > *
伪类选择器、属性选择器的权重等于类选择器。
伪元素选择器的权重等于标签选择器。

CSS3 盒模型

CSS3 中可以通过 box-sizing 来指定盒模型，这样我们就可以设置如何计算一个元素的总宽度和总高度。

content-box

默认值，标准盒子模型，盒模型是外扩的。
width 与 height 只包括内容的宽和高。
在 width 和 height 之外绘制元素的内边距和边框。

border-box

怪异模式，盒模型是内减的。
width 和 height 属性包括内容，内边距和边框，但不包括外边距。
为元素指定的任何内边距和边框都将在已设定的 width 和 height 内进行绘制。

边框圆角

属性名:border-radius
作用:设置边框的圆角。
属性值:可以是像素值，或者百分比，百分比参考的是盒子整体宽度、高度的百分比。

单一属性

border-top-left-radius: 半径;
border-top-right-radius: 半径;
border-bottom-right-radius: 半径;
border-bottom-left-radius: 半径;

简写方法

border-radius 相当于四个单一属性的简写方法，类似 padding 也可以有四种值的写法。
border-radius: 左上角 右上角 右下角 左下角;
border-radius: 左上角 右上角和左下角 右下角 ;
border-radius: 左上角和右下角 右上角和左下角 ;
border-radius: 四个角相同;

/ 的属性值写法

border-radius 属性值中出现了 / 斜线，那么 / 前面可以设置水平方向四种值的写法，/ 后面可以设置垂直方向四种值的写法。

文字阴影

在 CSS3 中，text-shadow 可向文本应用阴影。通过属性值能够规定水平阴影、垂直阴影、 模糊距离，以及阴影的颜色:

文字阴影语法

text-shadow 属性向文本添加阴影，属性值有2-3个长度值和一个可选的颜色值进行规定，省略的长度是 0。

h1 {
    text-shadow:3px 4px 4px #FF0000;
}

多层阴影

text-shadow 属性也可以向文本添加多个阴影，逗号分隔多个阴影的属性值。
注意:多阴影中，先写的阴影压盖在后写的阴影上。

h1 {
	text-shadow:3px 3px 3px #FF0000,
        	    6px 6px 3px #00FF00,
                9px 9px 3px #0000FF;
}

边框阴影

在 CSS3 中，box-shadow 属性用于对盒子边框添加阴影。

边框阴影语法

box-shadow 属性向盒子添加阴影，属性值有2-4 个长度值、可选的颜色值以及可选 的 inset 关键词来规定，省略的长度是 0。

img {
    border:10px solid orange;
    box-shadow:3px 3px 5px 4px rgb(0,0,0);
}

多层阴影

box-shadow 属性也可以向盒子添加多个阴影，逗号分隔多个阴影的属性值。
注意:多阴影中，先写的阴影压盖在后写的阴影上。

img {
    border:10px solid orange;
    box-shadow:3px 3px 5px 4px rgb(255,0,0),
               7px 7px 5px 4px rgb(0,255,0),
               10px 10px 5px 4px rgb(0,0,255);
}

过渡属性

属性名:transition
作用:在不使用 Flash 动画或 JavaScript 的情况下，使用 transition 可以实现补间动画(过渡效果)， 并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指)，那么A和B之间就可以实 现平滑的过渡的动画效果。
transition:过渡的属性 过渡时间 运动曲线 延时时间

单一属性写法

transition-property

过渡的属性
none 表示没有属性过渡
all 表示所有变化的属性都过渡
属性名使用具体的属性名，多个属性名中间逗号分隔

transition-duration

过渡的时间
过渡时间:以s秒为单位。
延时时间:以s秒为单位。0s也必须加单位。

transition-timing-function

时间曲线

2D转换

属性名:transform
作用:对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
属性值:多种转换方法的属性值，可以实现不同的转换效果。

位移 translate()

transform 的属性值为 translate() 时，可以实现位移效果。

缩放 scale()

transform 的属性值为 scale() 时，可以实现元素缩放效果。

旋转 rotate()

transform 属性值设置为 rotate() 时，实现元素的旋转。

书写语法:
rotate(数字deg) 其中，deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转。2D的旋转只有一个属性值。
注意:元素旋转后，坐标轴也跟着发生转变。
因此，多个属性值同时设置给 transform 时，书写顺序不同导致的转换效果有差异。

倾斜 skew()

transform 属性值设置为 skew() 时，实现元素的倾斜。
书写语法:
transform: skew(数字deg,数字deg);
两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个数值不写默认为0。

transform-origin 属性

作用:设置调整元素的水平和垂直方向原点的位置。
调整元素的基准点。
属性值:包含两个，中间使用空格分隔。

3D 转换

transform属性不止能实现2D转换，也可以制作3D立体转换效果，比普通的x、y轴组成 的平面效果多了一条 z 轴.

透视

电脑显示屏是一个 2D 平面，图像之所以具有立体感(3D效果)，其实只是一种视觉呈现， 通过透视可以实现此目的。
透视可以将一个 2D 平面，在转换的过程当中，呈现 3D 效果。
透视特点:近大远小。 注意:并非任何情况下需要透视效果，根据开发需要进行设置，如果需要展示 z 轴的变化， 则设置透视效果。

透视属性 perspective

属性名:perspective
作用:设置在 z 轴的视线焦点的观察位置，从而实现 3D 查看效果。
属性值:像素值，数值越大，观察点距离 z 轴原点越远，图形效果越完整且接近原始尺寸。
注意:透视属性需要设置给 3D 变化元素的父级。

3D 旋转

3D旋转比2D旋转更复杂，需要分别对三个方向的旋转角度值: 属性值:

注意:属性值的角度区分正负，正数表示沿对应坐标轴顺时针方向旋转，负数表示沿对应坐标轴逆时针 方向旋转。

3D 位移

类似的，位移也分为三个方向的移动:

属性值为像素值或百分比，正负表示位移的方向。正值向对应轴的正方向移动，负值向对应轴的负方向移动。

transform-style属性

用于设置被嵌套的子元素在父元素的 3D 空间中显示，子元素会保留自己的 3D 转换坐标轴。

属性值:
flat:所有子元素在 2D 平面呈现
preserve-3d:保留 3D 空间

3D 元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置
transform-style: preserve-3d，来使其变成一个真正的 3D 图形。
一般来说，该属性设置给 3D 变换图形的父级元素。

动画

css3 中提供了自己的动画制作方法，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
css3 动画制作分为两步:创建动画、绑定动画。

@keyframes 规则

@keyframes 规则用于创建动画。

在 @keyframes 中规定某项 CSS 样式，就能创建由从一种样式逐渐变化为另一种样式的效果。
可以改变任意多的样式任意多的次数。

需要使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。

 @keyframes move {
      from {
        transform: translateY(0);
      }
      to {
        transform: translateY(100px);
      }
 }
    
@keyframes move {
      0% {
          transform: translate(0,0);
      }
      50% {
          transform: translate(500px,500px)  rotate(180deg);
      }
      100% {
          transform: translate(0,0)  rotate(360deg);
      }
}

animation 属性

需要将 @keyframes 中创建的动画捆绑到某个选择器，否则不会产生动画效果。
animation 属性用于对动画进行捆绑。
语法:

div {
    animation: move 5s linear 0s infinite;
    /*动画名称 过渡时间 速度曲线 延时时间  动画次数 ;*/
}

其中必须设置动画名称和过渡时间，其他属性值可以根据需求设置。

单一属性列表