13.CSS学习（四）

上一篇：12.CSS学习（三）

CSS3

   CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块css3优点

层次选择器

• E F，后代选择器。它可以选择E后面的所有的F元素（子元素、孙子、重孙子…）

• E > F，选择匹配的F元素，并且匹配的F元素是E的子元素。

  子选择器只能选择儿子辈的。

• E+F，兄弟相邻选择器，选择匹配的F元素且匹配的F元素位于匹配的E元素的后面（同辈的，兄弟）。

• E~F，兄弟选择器，选择匹配的F元素，且位于匹配的E元素后面的所有的F元素都会被匹配上。

属性选择器

这里属性指的是HTML标签的属性

• E[attr]，选择匹配具有attr属性的E元素。

• E[attr='val']，选择匹配具有attr属性的E元素并且attr对应的值为val。

  • val的值会区分大小写。

• E[attr*='val']，选择匹配E元素，且E元素定义了attr，并且任意位置包含val

• E[attr^='val']，选择匹配的E元素，且E元素定义了attr并且val在值的开头的位置。

• E[attr$='val']，选择匹配的E元素，且E元素定义了attr并且val在值的结尾的位置。

正则表达式中^和$也是用来表示以xxx开头，以xxx结尾。

• E:first-child, 选择父元素的第一个子元素并且元素为E的元素。

• E:first-of-type，选择父元素中第一个出现的E元素。

• E:last-child，选择父元素的最后一个子元素，且元素为E。

• E:last-of-type，选择父元素最后一个E元素。

• E:nth-child(n)

• E:nth-of-type(n)

  n的值可以是数字、关键字、公式

  • 数字

  • 关键字

    • odd，奇数
    • even，偶数

  • 公式

    必须得用n。你可以写为3n。3、6、9…

• E:focus，选择匹配的E元素，且匹配的元素获得焦点的时候。

• E:target，选择匹配的E元素，且E元素被锚点指向。

• E:checked，用在单选、复选框，被选中的时候生效。

伪元素选择器

• E::before，选择匹配的E元素，在E元素的内部插入内容（在开始标签后面插入内容）
• E::after，选择匹配的E元素，在E元素的内部插入内容（在结束标签前面插入内容）

在E::before和E::after中需要使用content属性来插入内容（这种方式是使用CSS来插入，而不是HTML标记插入）

content：值

• 字符串
• url(图像地址)，插入一张图片
• attr(属性名)，将标签的某个属性名对应的值作为内容插入

__注意： __

1. content中的内容不会搜索引擎收录、抓取。所以我们用它来做修饰。
2. 生成的内容是一个行内元素，但是可以使用display进行修改。
3. 只要属性能够被继承，生成的内容就会从它依附的元素上继承属性值。

权重值

• ID：100
• 类、属性、伪类：10
• 标签：1
• 通用：0
• 层次选择器拆分开然后相加进行计算。
• 行内样式1000

圆角

元素边框的叫是直，可以使用border-radius属性把角变的圆滑一些。

格式：border-radius:value，同时应用在四个角上

• px，像素
• %，按照元素宽度、高度的百分比进行计算。

生成的原理：生成了指定水平半径和垂直半径的圆形或椭圆形。

格式2：border-radius:左上\右下 右上\左下

格式3：border-radius:左上 右上、左下 右下

格式4：border-radius:左上 右上 右下 左下

格式5：border-top-left-radius

格式6：border-top-right-radius

格式7：border-bottom-right-radius

格式8：border-bottom-left-radius

阴影

我坚信一句话“使你痛苦的，必将使你强大”，只要消除心理阴影，就是全新的自己

在CSS3中提供了两种阴影效果：文本阴影与盒子阴影

文本阴影

• 文本阴影语法：
• text-shadow：none | length{2,3} color;
  1. none： 无阴影，默认
  2. 第1个长度值：阴影水平偏移值。可为负值
  3. 第2个长度值：阴影垂直偏移值。可为负值
  4. 第3个长度值：可选，阴影模糊值。
  5. color： 设置阴影的颜色 16进制颜色值 关键字 rgb rgba

可以设定多组效果，每组参数值以逗号分隔

text-shadow: 水平偏移量 垂直偏移量 阴影模糊值 颜色(rgba)，
             水平偏移量 垂直偏移量 阴影模糊值 颜色(rgba)，
             水平偏移量 垂直偏移量 阴影模糊值 颜色(rgba);
h1{
    font-size: 60px;
    line-height: 120px;
    text-align: center;
    background-color: #000;
    color: #ccc;
    text-shadow: 2px 2px red, 4px 4px blue,6px 6px green;
    text-shadow: -2px -2px 2px #999, -4px -4px 2px #666;
    text-shadow: 0 0 20px rgba(209,12,212,1), 0 0 40px rgba(209,12,212,.8), 0 0 60px rgba(209,12,212,.6), 0 0 80px rgba(209,12,212,.4);
}

盒子阴影

• 盒子阴影语法：
• box-shadow：none | length{2,4} color inset;
  1. none： 无阴影，默认
  2. 第1个长度值：阴影水平偏移值。可为负值
  3. 第2个长度值：阴影垂直偏移值。可为负值
  4. 第3个长度值：可选，阴影模糊值。
  5. 第4个长度值：可选，阴影外延值。
  6. color： 设置阴影的颜色 16进制颜色值 关键字 rgb rgba
  7. inset：内阴影，默认为外阴影

可以设定多组效果，每组参数值以逗号分隔

text-shadow: 水平偏移量 垂直偏移量 阴影模糊值 阴影外延值 颜色(rgba)，
             水平偏移量 垂直偏移量 阴影模糊值 阴影外延值 颜色(rgba)，
             水平偏移量 垂直偏移量 阴影模糊值 阴影外延值 颜色(rgba);
div{
    width: 400px;
    height: 140px;
    background-color: #eee;
    margin: 50px auto;
    box-shadow: 5px 5px 10px green;
    box-shadow: 5px 5px 10px 2px blue, 10px 10px 20px 4px pink;
    box-shadow: 0 0 50px 10px pink inset;
}

背景

在CSS3中 background 新增了一些属性设置

background-size 背景大小

• background-size: length | percentage | cover | contain;
  1. length 设置背景图片高度和宽度
  2. percentage 相对于背景定位区域的百分比
  3. cover 等比缩放到完全覆盖容器
  4. contain 等比缩放到容器的最大尺寸

background-origin 背景原点

• background-origin：border-box | padding-box | content-box;
  1. border-box 背景图在border位置开始显示
  2. padding-box 背景图在padding位置开始显示，默认
  3. content-box 背景图在content位置开始显示

background-clip 背景裁剪

• background-clip：border-box | padding-box | content-box | text;
  1. border-box 裁剪掉border区域以外的部分，默认
  2. padding-box 裁剪掉padding区域以外的部分
  3. content-box 裁剪掉content区域以外的部分
  4. text 裁剪掉文本区域以外的部分(-webkit-)

background-image 背景图片

CSS3允许在元素上添加多个背景图，用逗号隔开

div {
    background-image: url(01.png), url(02.png);
    background-position: left top, left bottom;
    background-repeat: no-repeat, repeat;
}
div {
    background: url(01.png) left top no-repeat, url(02.png) left bottom repeat;
}

滤镜

滤镜主要用来实现图像元素的各种效果

语法：filter: value
value的值有以下几种：

1. none 默认值，没有效果
2. blur() 模糊度，0为不模糊，使用px作为单位，值越大越模糊
3. grayscale() 灰度，值为0时没有变化，值为1时完全变成灰度图像
4. opacity() 透明度，0表示完全透明，1表示不对元素做任何修改
5. sepia() 深褐色，为0时没有变化，为1是全褐色
6. invert() 反向处理像素，为0时没有变化，为1时颜色反转
7. brightness() 亮度，0%为纯黑色，100%元素没有变化，大于100%比元素原有的亮度更亮
8. contrast() 对比度，为0%时变成纯灰色，为100%时没有变化，大于100%时才会得到更大的对比度
9. saturate() 饱和度，为0%时得到灰色，为100%时没有变化，大于100%时才会得到更大的饱和度

• 可以使用多个滤镜效果：filter: blur(2px) grayscale(0.5);

几个透明度设置的区别

• filter: opacity(); 一般用在图像元素上
• opacity: 0.5; 用于设置元素的文本和背景的透明度，通常用在淡入淡出动画上
• rgba(0,0,0,0.5) 用于设置背景透明，里面的内容不透明（如 遮罩图层）

动态计算函数

• calc()用于动态计算长度值
• 可以计算 + - * /
• 注意: 运算符前后一定要有空格

渐变

• 渐变指的是一个颜色到另外一个颜色的平滑过渡，一般用于设置背景渐变
• 渐变有两种：线性渐变 和 径向渐变

线性渐变

• 线性渐变（linear-gradient）是沿着一条线进行填充得到的渐变（这条线贯穿整个元素的中心点，这条线称为梯度线）
• 默认将多个颜色平均分配在梯度线上
• 如果排布的颜色不到梯度线的末端就会将最后一个颜色一直延伸下去
  语法：linear-gradient(direction, color-stop1, color-stop2, ...);
  方向direction的值如下：
  • to bottom，默认，从上到下
  • to top，从下到上
  • to left，从右到左
  • to right，从左到右
  • to left top，从右下角到左上角
  • to left bottom，从右上角到左下角
  • to right top，从左下角到右上角
  • to right bottom，从左上角到右下角

div{
    width: 500px;
    height: 200px;
    border: 1px solid #000;
    margin: 20px auto;
    background: linear-gradient(red,blue);
    background: linear-gradient(to right bottom,red,blue);
    background: linear-gradient(to right,red 0%,blue 100%);
    background: linear-gradient(to right,red 25%,blue 50%,green 75%);
}

径向渐变

• 径向渐变（radial-gradient）是沿着一个中心点向四周扩展颜色得到的渐变
• 正方形元素径向渐变默认是圆形，长方形元素径向渐变默认是椭圆形
  语法：radial-gradient(shape size at position, color-stop1, color-stop2, ...);
  • shape 参数定义了形状，circle 表示圆形，ellipse 表示椭圆形
  • size 参数定义了渐变的大小，如果是一个值，值为半径，得到的是圆形渐变；如果是两个值，第一个值为椭圆的宽度的一半，第二个值为椭圆的高度的一半，得到的是椭圆形渐变
  • at position 置径向渐变的中心点位置，默认在元素中心 at center center

div{
    width: 400px;
    height: 200px;
    border: 1px solid #000;
    margin: 20px auto;
    background: radial-gradient(#fff,#000);
    background: radial-gradient(circle 120px,#fff,#000);
    background: radial-gradient(150px at 50px 50px,#fff,#000);
    background: radial-gradient(ellipse 200px 80px,red 50%,blue 80%);
}

在线调试工具：

1. https://www.css88.com/tool/css3Preview/Box-Shadow.html
2. https://www.colorzilla.com/gradient-editor/

重复渐变

• 重复渐变是在梯度线上不断循环排布颜色，最后一个颜色的长度用于定义图像的整体长度，超过该长度之后开始循环排布颜色

div{
    background: repeating-linear-gradient(to right,red,blue,green 33.333%);

    background: repeating-radial-gradient(red,blue 18%);
}

css3 变量

• 方便复用某个值
• 定义变量使用–开头，如：–color:#D63A30;
• 使用变量：background: var(–color);
• 变量定义和使用必须在{}中

倒影

• -webkit-box-reflect: 位置[上下左右] 间距 渐变;
• 在倒影中使用渐变，主要是控制倒影的模糊度，渐变颜色对倒影没有影响

设置盒模型

• 盒模型是指在css布局中，每一个元素都被看成一个盒子，拥有盒子一样的造型和平面空间
• 盒模型的组成部分：内容+padding+border+margin
• 标准盒模型和怪异盒模型（IE）
• 标准盒模型元素在浏览器中所占空间总宽度：width+左右padding+左右border+左右margin
• 怪异盒模型元素在浏览器中所占空间总宽度：width+左右margin
• box-sizing: border-box怪异盒模型 / content-box标准盒模型

过渡

过渡是元素从一种样式逐渐改变为另一种样式的效果

定义过渡的属性

• transition-property：all | none | property1,property2 ...;
  1. all 默认值，所有可以进行过渡的css属性
  2. none 不指定过渡的css属性
  3. property 指定要进行过渡的css属性，如：width, height, left …
  4. 如果过渡的属性有多个，以逗号进行分隔

定义过渡持续时间

• transition-duration：time[ ,time ]...;
  1. time 指定元素过渡的持续时间，默认值 0 表示没有过渡效果
  2. 如果提供多个属性值，以逗号进行分隔
  3. 值可以是s或ms，如：0.2s, 200ms

定义过渡效果

• transition-timing-function：effect;
  1. effect为动画效果，默认值 ease
  2. ease 平滑过渡，等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
  3. linear 线性过渡，等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
  4. ease-in 由慢到快，等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
  5. ease-out 由快到慢，等同于贝塞尔曲线(0, 0, 0.58, 1.0)
  6. ease-in-out 由慢到快再到慢，等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
  7. cubic-bezier(number, number, number, number) 自定义贝塞尔曲线
• 贝塞尔曲线在线调试： https://cubic-bezier.com/

定义过渡延迟时间

• transition-delay：time[ ,time ]...;
  1. time 指定元素过渡的持续时间，默认值 0 表示立即执行
  2. 如果提供多个属性值，以逗号进行分隔
  3. 值可以是s或ms，如：0.2s, 200ms

简写

• transition: property duration timing-function delay;
• 示例：transition: all 0.5s ease-in 0.1s;

动画

动画是元素的样式逐帧改变，连续播放形成的活动影像

关键帧

• 关键帧的作用是定义元素状态变化的各个阶段
• 可以使用from和to他们分别表示0%和100%
• 25%,75% 表示的是动画进行到 25% 和 75% 时候的值

@keyframes 动画名称{
    /* 动画起始帧 */
    from { Properties:Properties value; }
    /* 动画过程帧 */
    Percentage { Properties:Properties value; }
    /* 动画结束帧 */
    to { Properties:Properties value; }
}
/* 示例 */
@keyframes move{
   0% { margin-left: 100px; background: green; }
   40% { margin-left: 150px; background: orange; }
   60% { margin-left: 75px; background: blue; }
   100% { margin-left: 100px; background: red; }
}

定义动画名称

• animation-name: move;
  1. move 是keyframes定义的动画名称

定义动画持续时间

• animation-duration: time;
  1. time值可以是s或ms，如：2s, 2000ms

定义动画效果

• animation-timing-function: effect;
  1. effect为动画效果，默认值 ease
  2. ease 平滑过渡，等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
  3. linear 线性过渡，等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
  4. ease-in 由慢到快，等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
  5. ease-out 由快到慢，等同于贝塞尔曲线(0, 0, 0.58, 1.0)
  6. ease-in-out 由慢到快再到慢，等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
  7. cubic-bezier(number, number, number, number) 自定义贝塞尔曲线
  8. step-start 以一帧一帧的方式进行动画（没有过度效果）
• 贝塞尔曲线在线调试： https://cubic-bezier.com/

定义动画延迟时间

• animation-delay: time;
  1. 默认值 0 表示立即执行
  2. time值可以是s或ms，如：2s, 2000ms

定义动画播放次数

• animation-iteration-count: 2;
  1. 默认值 1 表示播放一次
  2. 设置 infinite 表示无限次

定义动画播放方式

• animation-direction: normal;
  1. normal 正常播放
  2. reverse 反向播放
  3. alternate 轮流播放

定义动画播放之前之后的状态

• animation-fill-mode: forwards | backwards | both ;
  1. none：默认值，不设置动画状态，从初始状态到动画结束，返回初始状态
  2. forwards：从初始状态到动画结束，保持当前结束状态
  3. backwards：从开始状态到动画结束，返回初始状态
  4. both：从开始状态到动画结束，保持当前结束状态

定义动画播放/暂停的状态

• animation-play-state: paused | running ;
  1. running：播放动画，默认值
  2. paused：暂停动画

动画缩写

animation: name || duration || timing-function || delay || iteration-count || direction || fill-mode || play-state

/* 示例： */
div { animation: move 5s linear 0.5s infinite reverse forwards; }

animation 对比 transition

• 过渡：通常需要通过事件来触发，是简单的动画效果，只有开始和结束两帧
• 动画：可以通过事件触发，也可以自动触发，对元素变化有更多的控制权，可以定义多帧
• 一组或多组过渡效果构成一个完整动画效果

转换

• transform 属性应用于元素的2D或3D转换
• 该属性允许将元素旋转，倾斜，缩放，移动

rotate 旋转

1. rotate(angle) 定义 2D 旋转，在参数中规定角度，单位deg 360deg = 1turn ≈ 6.28rad
2. rotateX(angle) 定义沿着 X 轴的 3D 旋转
3. rotateY(angle) 定义沿着 Y 轴的 3D 旋转
4. rotateZ(angle) 定义沿着 Z 轴的 3D 旋转
5. rotate3d(x,y,z,angle) 定义 3D 旋转，x y z 为0~1之间的数值，矢量值

skew 倾斜

1. skewX(angle) 定义沿着 X 轴的 2D 倾斜转换
2. skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换
3. skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换

scale 缩放

1. scale(x[,y]?) 定义 2D 缩放转换
2. scaleX(x) 通过设置 X 轴的值来定义缩放转换
3. scaleY(y) 通过设置 Y 轴的值来定义缩放转换
4. scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换
5. scale3d(x,y,z) 定义 3D 缩放转换

translate 移动

1. translate(x,y) 定义 2D 移动转换
2. translateX(x) 定义沿着 X 轴的 2D 移动转换
3. translateY(y) 定义沿着 Y 轴的 2D 移动转换
4. translateZ(z) 定义沿着 Z 轴的 3D 移动转换
5. translate3d(x,y,z) 定义 3D 移动转换

当元素有两个或两个以上的转换方法，语句顺序会不会影响最终的效果呢？

项目中混合使用：translate：scale（0.8,0.8）rotate (45deg)        //  直接拼接写属性即可

定义转换元素的原点位置

• transform-origin 属性改变被转换元素的原点位置
• transform-origin: x y z; 默认为中心点 center center
  1. X：视图被置于 X 轴的何处, 值：length | left | center | right | %
  2. Y：视图被置于 Y 轴的何处, 值：length | top | center | bottom | %
  3. Z：视图被置于 Z 轴的何处, 值：length
  4. 2D 转换元素能够改变元素 x 和 y 轴
  5. 3D 转换元素还能改变其 Z 轴

transform-origin: center center;
transform-origin: 50px 50px;
transform-origin: left top;
transform-origin: 50% 50%;

3D转换设置

• transform-style: preserve-3d; 在父级设置，对相应变化的子元素使用3D效果
• perspective: number | none; 定义 3D 元素距视角点的距离(视距 景深概念)
  1. 默认值: none
  2. number 元素距视角点的距离，以像素计
• perspective-origin: x y; 设置 3D 元素的视角点位置
  1. x y 默认值：center（50%）
  2. 可以设置 top | bottom | left | right | center | length | %

背面是否可见

• backface-visibility: visible | hidden;
  1. visible 转换元素背面可见
  2. hidden 转换元素背面不可见

下一篇：14.CSS学习（五）

友情推荐：全栈大佬笔记     Android领域肥宅