css总结

Posted 2021-11-26 fqh123

选择器：

id选择器：#id

类选择器：.class

标签选择器：p、div、h1、、、、

后代选择器：空格隔开，后面的元素是前面的子元素：#box li .a1

并集选择器：用逗号隔开:p,#box,.a

交集选择器：前面的标签是后面的元素的父元素：ul#a

子元素选择器：h2>em

属性选择器：[font]或[type="text"]或[href][alt]或a[href]

伪元素选择器 如：E:first-line，E:before，E：after

伪类选择器 如：E:first-child ，E:visited，E:focus，E:enabled

高级选择器：

：first-of-type

：last-of-type

：first-child

：last-child

：only-child

：only-of-type

：nth-child（n）    只按顺序选取元素

：nth-of-type（n）  指定元素在父元素中的第几个

盒模型

width、border-lleft、border-right、padding-left、padding-right、margin-left、margin-right

height、border-top、border-bottom、padding-top、padding-bottom、margin-top、margin-bottom

正常和模型：box-sizing：content-box；

怪异盒模型：box-sizing：border-box；

display属性

none、inline、inline-block、block

清除浮动：（防止父元素塌陷）

1、给父元素加固定高度或者加overflow：hidden；

2、clear：left、right、both

3、在所有浮动元素后加一个空div，加上clear：both；

4、伪元素清除浮动：

.clearfix:after {
                   content: ".";
                   visibility: hidden;
                   display: block;
                   height: 0;
                   clear: both;
            }

visibility:hidden：元素隐藏，但是还保存元素所占据的空间，display：none；不占据空间

定位

position：fixed、relative、absolute；

z-index：整数；为元素定义层数

!Important（将权重变为最大）

#content{
      height:960px !important;
      height:900px;
} 

@import导入样式      这种方式导入样式，先加载html，再加载css     link与其相反

@import url("global.css");
@import url(global.css);
@import "global.css";

圆角

border-radius：像素/百分比；

集合写法

#box{border-radius：10px 20px 30px 40px；}
左上、右上、右下、左下

#box{border-radius：10px 20px 30px；}
左上、右上和左下、右下

#box{border-radius：10px 20px；}
左上和右下、右上和左下

#box{border-radius：10px；}
四个角

css3背景

background:background-color ||background-image || background-repeat || background-attachment || background-position||background-size

background-image:url("图片的网址"); 背景图 
background: url(" 图片的网址 "); 背景 
background-color:#色码; 背景色彩 
background-position：默认值：0%  0%，可能值：top left ，center left等
background-repeat：默认值：repeat
scroll 拉动卷轴时，背景图片会跟着移动（缺省值） 
fixed 拉动卷轴时，背景图片不会跟着移动 
repeat 背景图片并排 
background-size：是css3规定的属性，50%为缩放图片；100px 50px：把图片调整到100像素宽，50像素高；cover：拉大图片，使其完全填满背景区；container：缩放图片，使其恰好适合背景区

background-position:X坐标 Y坐标

css3旋转

div{
    transform:rotate(7deg);
    -ms-transform:rotate(7deg);     /* IE 9 */
    -moz-transform:rotate(7deg);     /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
    -o-transform:rotate(7deg);     /* Opera */
}

css盒子阴影

box-shadow：h-shadow v-shadow blur spread color inset/outset；

v-shadow：必须，垂直阴影位置，允许负值（px）

h-shadow：必须，水平阴影位置，允许负值（px）

blur：可选，模糊度（px）

color：可选

inset/outset:可选，阴影内置还是外置，默认是outset

div{
    box-shadow: 10px 10px 5px #888888;
}

css3文字阴影

text-shadow

div{text-shadow:5px 2px 6px #000;} 

换行

test {word-wrap:break-word;}

css透明

1、background：rgba（0,0,0,0.5）           >=ie8

2、opacity：0.8;    取值为[0-1]

3、filer：alpha（opacity=80）；        取值为[0-100]       <ie8

4、transparent  用到任何一个带color值的属性上      background-color：transparent；

 

css3位移

transform：translate（10px 20px）；向右位移10px  向下位移20px

transform：translate（10px）；向x轴方向位移10px

transform：translateX（）

transform：translateY（）

transform：translateZ（）

transform：translate（x y）

transform：translate（x y z）

规定从电脑屏幕到你的脸的方向为Z轴正方形

css3缩放

transform：scale（0.5）整体缩小一半

transform：scale（x,y） 水平缩放x   垂直缩放 y

css3  3D效果

先声明时3D效果

　　　　　　　　/*声明3d效果*/
            transform-style:preserve-3d;
            -ms-transform-style:preserve-3d;
            -moz-transform-style:preserve-3d;
            -webkit-transform-style:preserve-3d;
            -o-transform-style:preserve-3d;
            /*透视度*/
            perspective:20000px;
            -ms-perspective:500px;
            -moz-perspective:500px;
            -webkit-perspective:500px;
            -o-perspective:500px;

            transform:rotateY(-45deg) rotateX(0deg) rotateZ(0deg);

transform:translate(x,y,z)

transform:rotate(x,y,z)

transform:scale(x,y,z)

css3过渡

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

和写

div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}

transition：属性名/all  、 过渡持续时间 、过渡曲线、延迟开始时间；（时间单位为s）

时间曲线值：linear、ease、ease-in、ease-out、ease-in-out

css3线性渐变（背景）

从左到右

#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); /* 标准的语法 */
}

从左上角到右下角的线性渐变：

#grad {
  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}

带有指定的角度的线性渐变：   规定上方为0deg  顺时针

从上到下

#grad {
  background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(180deg, red, blue); /* 标准的语法 */
}

下面的实例演示了如何创建一个带有彩虹颜色和文本的线性渐变：

#grad1 {
    height: 55px;
    background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */
}

一个重复的线性渐变：

#grad {
  /* Safari 5.1 - 6.0 */
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Opera 11.1 - 12.0 */
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Firefox 3.6 - 15 */
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* 标准的语法 */
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

 css3径向渐变

颜色结点均匀分布的径向渐变：

#grad {
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
  background: radial-gradient(red, green, blue); /* 标准的语法 */
}

径向渐变 - 颜色结点不均匀分布

#grad {
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
  background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}

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

#grad {
  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
  background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
}

css3元素定位原点

transform-origin：x y；

transform-origin：100%；一个值代表在x轴的右边，相当于right

transform-origin：0% 100%；原点在左下角

transform-origin：top 100%；原点在右上角

transform-origin：0% bottom；原点在左下角

transform-origin：top right；原点在右上角

transform-origin：center center；原点在中心

transform-origin：50% 50%；原点在中心

transform-origin：50px 50px；原点在（50px，50px）处

 css3动画

声明动画帧

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

@keyframes myfirst
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

将动画帧绑定到元素上

div
{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    /* Safari 与 Chrome: */
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

和写

div
{
    animation: myfirst 5s linear 2s infinite alternate;
    /* Safari 与 Chrome: */
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
}

动画帧、动画持续时间、播放曲线、延迟时间、播放次数、是否反向播放