2019-03-03

CSS3

选择器

属性选择器

属性选择器：属性是相对于标签而言。所谓属性选择器就是根据指定名称的属性的值来查找元素

E[attr]:查找指定的拥有attr属性的E标签。
E[attr=value]:查找拥有指定的Attr属性并且属性值为value的E标签。
E[attr*=value]:查找拥有指定的attr属性并且属性值中包含(可以在任意位置)value的E标签。
E[attr^=value]:查找拥有指定的attr属性并且属性值以value开头的E标签。
E[attr$=value]:查找拥有指定的attr属性并且属性值以value开结束的E标签。

兄弟选择器

兄弟伪类：

+: 获取当前元素的相邻的满足条件的元素

~: 获取当前元素后的满足条件的所有元素

伪类选择器

相当于父元素的伪类

E:first-child:查找E元素的父级元素中的第一个E元素。在查找时并不会限制查找元素的类型

E:last-child: 查找E元素的父级元素的最后一个指定类型的元素

E:nth-child(n) : 查找E元素的的父元素的第n个元素

E:nth-last-of(n):查找E元素的的父元素的第n个元素

E:target : 可以以锚点为目标元素的样式，当目标元素被触发为当前锚链接目标时，调用此伪类样式

伪元素选择

重点：E::before、E::after

是一个行内元素，须要转换成块:display:block; fload;** position:
必须添加content,哪怕不设置内容，也须要content:””,不然样式不会显示出来
E::before :定义在一个元素的内容之前插入content属性定义的内容与样式
E::after : 定义在一个元素的内容之后插入content属性定义的内容与样式

E::first-letter 文本第一字母或字
E::first-line 文本第一行
E::selection 可改变选中文本的样式

线性渐变

添加渐变：渐变不是一个单一的事件，它产生的是图像，所以须要background

linear-gradient线性渐变指延着某条直线朝一个方向产生渐变的效果

语法：linear-gradient(方向,开始颜色位置,颜色2 位置,颜色3 位置…);
- to left：设置渐变为从右到左。相当于: 270deg;
- to right：设置渐变从左到右。相当于: 90deg;
- to top：设置渐变从下到上。相当于: 0deg;
- to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。也可以直接指定度数，如45deg
radial-gradient 径向渐变指从一个中心点沿着四周产生渐变效果

语法：radial-gradient(形状,大小坐标, 颜色1,颜色2…)

背景样式

设置背景平铺

round：会将图片经行缩放之后在平铺

space：图片不会缩放平铺，只是会在图片之间产生相同的间距值

设置在滚动容器的背景行为：跟随滚动/固定

fixed: 背景图片的位置固定不变

scroll: 当滚动容器的时候，背景图片也会跟随滚动

local和scroll的区别：前提是当前滚动容器的内容

local:背景图片会跟随内容一起滚动

scroll: 背景图片不会跟随内容一起滚动

background-size属性

div{
            width: 300px;
            height: 500px;
            border: 1px solid red;
            /*添加背景*/
            background-image: url("../images/bg-img.jpg");
            /*background-image: url("../images/share1.png");*/
            background-repeat: no-repeat;
            /*设置背景图片的大小  宽度/高度   宽度/auto(保持比例自动缩放)
            建议：在使用这个属性之前需确定宽高比与容器的宽高比是否一致，否则会造成图片失真变形*/
            /*background-size: 300px 500px;*/
            /*background-size: 300px;*/
            /*设置百分比，是参照父容器可放置内容区域的百分比*/
            /*background-size: 50% 50%;*/
            /*设置contain:按比例调整图片大小，使用图片宽高自适应整个元素的背景区域，使图片全部包含在容器内
            1.图片大于容器：有可能造成容器的空白区域,将图片缩小
            2.图片小于容器：有可能造成容器的空白区域，将图片放大*/
            /*background-size: contain;*/

            /*cover:与contain刚好相反，背景图片会按比例缩放自 适应整个背景区域，如果背景区域不足以包含所有背景图片，图片内容会溢出
            1.图片大于容器：等比例缩小，会填满整个背景区域，有可能造成图片的某些区域不可见
            2.图片小于容器：等比例放大，填满整个背景区域，图片有可能造成某个方向上内容的溢出*/
            background-size: cover;
        }

background-origin

作用：background-orgin 属性规定backgrund-positon属性相对于什么位置来定位。默认值是left top 左上角
语法: background-orgin: padding-box|border-box|content-box
属性值说明：
- border-box:从border的位置开始填充背景，会与border重叠
- padding-box:从padding的位置开始填充背景，会与padding重叠
- content-box:从内容的位置开始填充背景

background-clip

作用：设置内容的裁切，设置的是裁切控制的是显示
属性说明
- border-box:显示border及以内的内容
- padding-box:显示padding及以内的内容
- content-box:显示content及以内的内容

过渡

添加过渡效果:过渡效果执行完毕后，默认会还原到原始状态

transition-property:添加过渡效果的属性名称
transition-duration:渡过效果耗时以秒作为当为
transition-timing-function:设置时间函数–控制运动的速度
transition-delay:过渡效果的延迟
简写:transition:属性名称过渡时间时间函数延迟

transform

使用transform实现元素的移动，移动是参照元素的左上角，执行完毕后会回复到原始状态。

如果只有一个参数就代表x方向

如果有两个参数就代表x/y方向

缩放：scale 实现缩放 1指不缩放， >1放大 <1缩小参照元素的几何中心

如果只有一个参数就代表x和y方向都等比的缩放，如果有2个参数就分别向各自的方向缩进

旋转：rotate

斜切：skew

动画

添加动画效果

animation-name: 指定动画名称
animation-duration: 设置动画总耗时
animation-interation-count:设置动画的播放次数，默认为1，可以指定具体的数值，也可以指定infinite(无限次数)
animation-direction:alternate 设置交替动画
animation-delay:设置动画的延迟
设置动画结束时的状态:默认情况下动画结束后会回到原始状态
- animation-fill-mode:

forwards:会保留动画结束时的状态，在有延迟的情况下并不会立即会到原始状态
backwards:不会保留动画结束时的状态，在添加了动画延迟的情况下，动画结束后会回到初始状态
both:会保留动画结束时的状态，在有延迟的状态下也会立刻进入动画的初始状态

animation-timing-function:动画的时间函数
animation-play-state:设置动画的播放状体 paused:暂停 running:播放

多列布局

常用属性

column-count:属性设置列的具体个数
column-width:属性控制列的宽度
column-gap:两列之间的缝隙间隔
column-rule:规定列之间的宽度、样式和颜色
column-span:规定元素应横跨多少列

伸缩布局

本文标题:CSS3

文章作者:Super Deng

发布时间:2019-03-03, 18:05:55

最后更新:2019-03-06, 19:46:14

原始链接:http://yoursite.com/2019/03/03/CSS3/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。