CSS3

2019-03-26 本文已影响0人致自己_cb38

一、CSS3

css：层叠样式表。
css3的组成模块：
选择器
盒模型
背景和边框
文字特效
2D/3D转换
动画
多列布局
用户界面

二、选择器

1．基本选择

1)通配符选择器（*）
2)id选择器（#）
3)class选择器（.）
4)标签选择器（element）

2．群组选择器(并列)

selector,selector{

}

3．层次选择器

1)后代选择器（里面）

selector selector{

}

2)子代选择器

selector>selector{

}

3)相邻兄弟选择器（只能向后）

selector+selector{

}

4)普通兄弟选择器（只能向后）

selector~selector{
}

4．伪类选择器

1)hover
鼠标悬浮
能够使用css实现的hover操作不用js
2)focus
鼠标焦点
3)link
默认的超链样式
4)active
点击的一瞬间
5)visted
访问过之后

5．目标伪类选择器

target 选择器 --- 结合锚点

6．UI元素状态伪类选择器语法

1)：checked
2)：enabled
3)：disabled

7．结构伪类

1)E:root
查找当前元素所在的根节点。HTML
2):first-child 与 :last-child

在某一个层级中第一个出现的符合选择器选择的元素标签。
注意：child不是指儿子，而是指选择出来的标签里面的元素。
div：first-child 选出来的div ，哪一个是作为第一个在某一个层级中出现的。只要在同一个层级种在这个标签之前有其他标签，那么这个标签就不会被选择出来。
3)E F:nth-child(n) 与 :nth-last-child(n)
选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.
注解：在E里面找第n个标签，如果这个标签是F，那么这个标签就会被选择。
注意：last表示不是最后一个，而是从后向前数。
4)E F:nth-of-type(n) 与：nth-last-of-type(n)
选择父元素内具有指定类型的第n个E元素
5)E:first-of-type 与 E:last-of-type
在子元素中寻找第一个或者最后一个E元素。
6)only-child 与 only-of-type 与empty
选择父元素只包含一个子元素，且该子元素匹配E元原。
选择父元素只包含一个同类型子元素，且该子元素匹配E元素
选择没有子元素的元素，而且该元素也不包含任何文本节点
“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

8．否定 not

9．属性选择器

1)[attr=value]
属性等于value
2)[attr^=value]
属性值以value开头
3)[attr$=value]
属性值以value结束
4)[attr~=value]
包含
5)[attr*=value]
模糊匹配
6)[attr|=value]
用于选取带有以指定值开头的属性值的元素，该值必须是整个单词
7)[attr]
包含有这个属性的标签元素

10．伪元素选择器

1)：：after
在元素的最后添加一个新的标签
2)：：before
在元素的最前面添加一个标签
3)：selection
用于选中的部分
4)：：first-letter
第一个字母
5)：：first-line
第一行文字

三、优先级

1、级优先级！important 不允许覆盖。

行级优先级 -----不允许使用

2、级优先级 id选择器>class选择器

3、级优先级属性>标签

四、盒子模型

布局就是使用盒子模型。

1) 标准盒子模型

视觉宽度 = width + padding2 + border2

image.png

2) 怪异盒子模型

视觉宽度 = 宽度 = width

image.png

五、2D变换

1、transform：2D变换

浏览器兼容前缀：

-webkit- chrome , safari

-moz- FF firefox

-ms- IE

-o- opera 欧朋

CSS3的浏览器兼容：

transform : translate(20px,20px);

-webkit-transform : translate(20px,20px);

-o-transform : translate(20px,20px);

-ms-transform : translate(20px,20px);

-moz-transform : translate(20px,20px);

1) transform-orgin

改变旋转中心位置

2) translate translateX translateY translateZ

相当于相对定位。

transform：translate（x,y）;

image.png

3) rotate rotateX rotateY rotateZ

旋转

transform：rotate(30deg);

image.png

2、 scale() scaleX scaleY scaleZ

缩放;一个参数表示x,y相同的倍数

transform:scale(X倍数,Y倍数);

image.png

3、 skew（） skewX skewY

扭曲，倾斜。

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

transform:skew(xdeg , ydeg);

image.png

4、 matrix()

matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

六、过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

transition：四个参数如下。

transition-property： 变换的属性

transition-duration： 花费的时间

transition-timing-function： 动画效果

transition-delay： 延时

image.png

七、动画

结合CSS函数。

@keyframes

@keyframes animate_name{
    from{

    }
    to{

    }
}

@keyframes animate_name{
     10%{

      }
       20%{

      }
      100%{

      }
}

格式

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

image.png

正面屏幕：x轴正后负前，y轴正右负坐，translatez垂直屏幕，rotatey画圈

1. rotateX, rotateY
1. rotateZ
1. rotate3d(x,y,x,deg)
1. scaleX
1. scaleY
1. scaleZ
1. scale3d
1. translateX
1. translateY
1. translateZ
1. translate3d
1. perspective：3d视角距离
- perspective-origin（x,y）
  - perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
  - 当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。
  - 注释：该属性必须与 perspective属性一同使用，而且只影响 3D 转换元素。
1. backface-visibility

背向屏幕的时候是否可见 hidden | visible

1. animation-fill-mode

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

1. transform-style

transform--style属性指定嵌套元素是怎样在三维空间中呈现。

注意：使用此属性必须先使用 transform属性.

image.png

八、边框

1、border ：1px solid #ccc;

border-top|border-left | border-bottom | border-right

border-width

border-style

border-color

2、圆角 border-box

border-radius： 百分比，像素单位。 多个值。

border-radius：50%； 圆的实现

border-top-left-radius: 左上角

border-bottom-right-radius: 右下角

border-radius的参数个数：
- 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
- 一个值：四个圆角值相同
- 注意：圆角只是改变了容器的形状，没有改变容器的大小以及占位。如果容器中具有文本，那么文本不受圆角的影响。

3、border-image

类似于CSS中的background（背景）属性。例如：background:url(xx.jpg) 27px no-repeat;指的是图片(url(xx.jpg))，位置(27px)，重复性(no-repeat)。
border-image与此类似，border-image包括图片，剪裁位置（与background位置一样，也是数值，也支持百分值），重复性。

border-image: source slice/width/outset repeat|initial|inherit;

image.png

九、box-shadow：盒子阴影

image.png

box-shadow:-10px -10px 20px 10px green;

image.png

实现具有边框透明度的内容区域，使用同一张图片。**

使用box-shadow设置一个阴影，阴影也会具有背景图片。
使用定位，下面的稍大具有透明度。
边框实现背景图，需要对背景图进行移动位置。
让背景图片从边框开始铺 background-origin，设置边框颜色的透明度为半透明 rgba()。

十、CSS计算函数 calc（）

div{

     width:200px;

     height:200px;

     background: red;

     /*margin:-100px auto;*/

     position: relative;

     top:calc(50% - 100px);

}

注意：calc（）函数里面的运算符号两边必须加上空格。

十一、垂直居中的实现方式

定位+计算
定位+margin
垂直居中的四边定位方式：

image.png

十二、背景图片

1、背景图片地址

background-image:url()

可以加载多个背景图片，每一个背景图片都是需要一个url。中间使用逗号隔开。对应的其他背景属性比如大小，重复也都是需要逗号隔开表示多个。

2、背景图片的位置

background-Origin：定位从哪里开始铺

background-position: 定位图片的位置

image.png

3、背景图片的剪切位置

background-clip: border-box | content-box | padding-box.

可以结合background-origin一起使用。用于切割背景图片显示的位置。

4、background-attachment

设置背景图像是否固定或者随着页面的其余部分滚动

body { 
  background-image: url(bgimage.gif); 
  background-attachment: fixed;
}

image.png

十三、渐变色

所有使用到颜色的地方都可以使用渐变色

线性渐变： linear-gradient

径向渐变：radial-gradient

渐变的颜色可以设置多个，至少要有俩个表示过度的节点。每一个颜色之间使用逗号隔开。

1、线性渐变

linear-gradient（方向，颜色，颜色。。。）;

#grad {

  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */

  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */

  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */

  background: linear-gradient(to right, red , blue); /* 标准的语法 */

}

说明：标准属性方向里面需要有to关键字，表示终点。
起点和终点可以是上下左右，也可以是顶点。也可以是一个角度（180deg）。

image.png

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

重复线性渐变

background: repeating-linear-gradient(red, yellow 10%, green 20%);

说明：20%表示线性渐变占用的宽度，其他的宽度使用平铺的方式覆盖。

2、径向渐变

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

1) 形状：

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

2) 尺寸：

closest-side

farthest-side

closest-corner

farthest-corner

3) 重复的径向渐变

repeating-radial-gradient()

十四、文本

1、text-shadow：文本阴影

文字阴影效果，具有偏移量

text-shadow: h-shadow v-shadow blur color;

image.png

2、text-overflow:文字溢出

image.png

案例：

1)单行文本超出显示省略号。

overflow: hidden;  // 超出隐藏
white-space: nowrap; // 强制不换行
text-overflow: ellipsis; // 文本超出显示省略号

2)多行文本超出显示省略号。

text-overflow:ellipsis;

display:-webkit-box;  /** 设置显示属性为伸缩盒子 **/

-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/

-webkit-line-clamp: 3;  /** 能够显示的行数 **/

overflow: hidden;

3、word-wrap：单词折叠

word-wrap：normal | break-word；

4、文本最后一行对其方式

text-align-last: auto|left|right|center|justify|start|end|initial|inherit;

image.png

十五、CSS字体

字体：特殊的图片。但是不是图片。

//定义一个字体

@font-face{

  font-family: 名字；

  src:路径；

}

//使用

div{

  font-family： 定义好的名字；

}

应用：字体图标

阿里巴巴矢量图库：

@font-face {

    font-family: 'iconfont';

    src: url('iconfont.eot');

    src: url('iconfont.eot?#iefix') format('embedded-opentype'),

    url('iconfont.woff2') format('woff2'),

    url('iconfont.woff') format('woff'),

    url('iconfont.ttf') format('truetype'),

    url('iconfont.svg#iconfont') format('svg');

}

.iconfont {

    font-family: "iconfont" !important;

    font-size: 16px;

    font-style: normal;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}

image.png

十六、用户界面

1、box-sizing

定义盒子模型。

标准盒子：content-box

怪异盒子：border-box

2、resize 调整大小

resize: none|both|horizontal|vertical:

3、outline 轮廓线

轮廓线类似于边框，但是与边框不同。默认的轮廓线不占据空间，而边框占据空间。

设置轮廓线：

outline： 1px solid #ccc;

设置轮廓线与边框之间的距离:

outline-offset: 2px ;

十七、图片

1、图片圆角

之前：

<div><img src=””></div>

div{

    width:200px;

    height:200px

    border-radius:50%;

    overflow:hidden;

}

div>img{

    width:100%;

    height:100%;

}

现在：

img{

    width:200px;

    height:200px;

    border-radius:50%;

}

十八、响应式图片

响应式：根据屏幕宽度去改变显示状态。

图片要做到响应式，只需要设置宽度（百分比），高度自动（auto）。

十九、滤镜

CSS filter 属性用为元素添加可视效果 (例如：模糊与饱和度) 。

滤镜参考手册：http://www.runoob.com/cssref/css3-pr-filter.html

CSS3

一、CSS3

二、选择器

1．基本选择

2．群组选择器(并列)

3．层次选择器

4．伪类选择器

5．目标伪类选择器

6．UI元素状态伪类选择器语法

7．结构伪类

8．否定 not

9．属性选择器

10．伪元素选择器

三、优先级

四、盒子模型

1) 标准盒子模型

2) 怪异盒子模型

五、2D变换

1、transform：2D变换

1) transform-orgin

2) translate translateX translateY translateZ

3) rotate rotateX rotateY rotateZ

2、 scale() scaleX scaleY scaleZ

3、 skew（） skewX skewY

4、 matrix()

六、过渡

七、动画

八、边框

1、border ：1px solid #ccc;

2、圆角 border-box

3、border-image

九、box-shadow：盒子阴影

十、CSS计算函数 calc（）

十一、垂直居中的实现方式

十二、背景图片

1、背景图片地址

2、背景图片的位置

3、背景图片的剪切位置

4、background-attachment

十三、渐变色

1、线性渐变

重复线性渐变

2、径向渐变

1) 形状：

2) 尺寸：

3) 重复的径向渐变

十四、文本

1、text-shadow：文本阴影

2、text-overflow:文字溢出

案例：

3、word-wrap：单词折叠

4、文本最后一行对其方式

十五、CSS字体

十六、用户界面

1、box-sizing

2、resize 调整大小

3、outline 轮廓线

十七、图片

1、图片圆角

十八、响应式图片

十九、滤镜

猜你喜欢

热点阅读