网易云课堂CSS

Cascading Style Sheet      css简写

各大浏览器的私有属性写在前面，标准的写在后面

-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);

inherit 不继承父级的       initial   默认继承      unset不设置，大多属性的都有这个值

@media描述响应式布局
@keyframes描述动画的执行过程
@font-face引入外部字体  

@import
@charset
@namespace
@page
@supports
@document

选择器

--属性选择器

[disabled]{}    //属性选择器
[type==button]{}
[class~=sports]{}    //选中class包含sports这个类的元素
[lang|=en]{}    //选中含有en字母的元素，只要含有就行
[href^="#"]{}    //选中以#开头的元素
[href$=pdf]{}    //选中以pdf结尾的元素
[href*="word"]{}    //选中包含word的元素

--伪类选择器

input:enabled{}    //一个元素可用的状态
input:disabled{}    //一个元素不可用的状态
input:checked{}    //选中的input

:first-child(){}    //第一个
:last-child(){}    //最后一个

:nth-child(even){}     //偶数
:nth-child(odd){}     //奇数

:nth-child(3n+1){}    //正着3n+1
:nth-last-child(3n+1){}    //倒数3n+1

:only-child{}    //选择只有一个的元素

span:only-of-type{}    //选中唯一的一个span

dd:first-of-type{}    //选中第一个这种类型的元素
dt:first-of-type{}    //选中最后一个这种类型的元素
dd:nth-of-type(even){}    //选中偶数个这种类型的元素
dt:nth-last-of-type(2n){}    //选中倒数偶数项这种类型的元素




:empty()   //选中没有子元素的标签 
:root()    //html根标签
:not()    //选中不包含选择器的元素
:target()    //选择被锚点选中为目标的元素
:lang()    //选中特殊值的元素



::first-letter{}    //选中第一个字符的
::first-line{}    //选中第一行的

//在元素前后添加点东西
::before{content:"before";}    //内容前面插入内容
::after{content:"after";}    //内容后面插入内容


::selection{}    //用于被用户选中的内容

--组合选择器

.main>h2{}    //mian第一级的h2标签
.main+h2{}    //兄弟选择器
h2~p{}    //h2后面所有的p标签

 

属性和值

inherited:yes||no是否可以继承

权重：

a = 行内样式；b = ID选择器的数量；c = 类、伪类和属性选择器的数量；d = 标签选择器和伪类选择器的数量

value = (a*1000) + (b * 100) + (c * 10) + d

改变优先级

改变先后顺序、提升选择器优先级、!important

对齐方式

line-height:3em;
line-height:300%;    //直接继承
line-height:3;    //先计算、 再继承，子元素改变字体大小高度会变

<p>文字：用color:transparent或者color:rgba(0,0,0,0)表示全透明</p>
<p>对齐：text-align:justify;文本对文本对齐</p>
<p>vertical-align:baseline(基线)    :sub(下标)    :super(上标)    
:top(对齐到当前这行最高点)    :text-top(对齐到文本最高点)    
:middle(垂直居中)    :bottom(对齐到当前这行最低点)     
:text-bottom(对齐到文本最低点)    
:20px(以vertical-align为起点往上走20px,-20往下走)    
:50%(百分比参照物是line-height)

//如果不对齐是字体本身的留白

文字格式

white-space

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

文字点：text-overflow:ellipsis;overflow-ellipsis;white-space:nowrap;

用word-wrap:break-word;不管单词多长，允许长单词自动换行
word-break:keep-all（不可以换行）    break-all（可以换行）

文字阴影：text-shadow:x轴偏移量    y轴轴偏移量   阴影模糊半径  阴影颜色（不写是文字颜色）;

文字下划线：text-decoration:【underline下划线】【overline下划线】【line-through下划线】可多个

鼠标形状可以是个自定义图片：cursor:【url路径】,pointer;

border-radius:0 5px 10px 15px / 20px 15px 10px 5px;不太规则圆角的书写方式，水平半径和垂直半径

overflow:visible（仍然显示） | scroll（显示滚动条） | auto（超出滚动条）

box-sizing:content-box（默认的padding和barder） | border-box（忽略padding和border） | inherit

box-shadow:4px（外阴影向右水平偏移） 2px（外阴影向下垂直偏移） 2px（模糊半径） 2px（阴影大小） red inset（内阴影）,3px 2px 1px 1px red;（可以多阴影）（不占空间）

轮廓描边   outline:5px dashed blue;（区别于border，不占空间,在border外）

======================================================================
背景

//多背景用逗号隔开

background:transparent;(全透明)

background-repeat:space; round(平铺)

background-attachment:scroll（背景不动）  |   fixed（整个窗口）  |  local（背景和内容一起动）

background-position:10% 20%;//表示容器上边的10%+本身的10%；容器左边的20%+本身的20%；当都是50%的时候就居中了

background-position:right 10px top 20px;右边10px 上边20px;

//线性渐变
background-image:linear-gradient(red,blue);//上下渐变
background-image:linear-gradient(red,green,blue);//上中下渐变
background-image:linear-gradient(red,green 20%,blue);//上中(20%)下渐变
background:linear-gradient(to top,red,blue);//上下渐变  
background:linear-gradient(to right,#3ca8a0,#70c0b6,#52b3aa);//左右三色渐变
background:linear-gradient(orangered,orange);//左上到右下渐变 
background-image:linear-gradient(0deg, red,blue);//从下到上渐变
background-image:linear-gradient(45deg, red,blue);//顺时针旋转45度渐变 

background-image:repeating-linear-gradient(red,blue 20px,red 40px);//上下渐变

------------------------------------------------------------------------------------------

//镜像渐变
background-image:radial-gradient(closest-side,red,blue);

 

background-image:radial-gradient(circle,red,blue);

 

background-image:radial-gradient(circle 100px,red,blue);

 

 

background-image:radial-gradient(red,blue);

 

background-image:radial-gradient(100px, 50px, red,blue);

 

圆心定位

background-image:radial-gradient(100px 50px at 0 0, red, blue)；

 

background-image:radial-gradient(red,green, 20%, blue);

 

background-image:radial-gradient(red,blue 20px,red 40px);

background-image:repeating-radial-gradient(red, blue 20px, red 40px);

-------------------------------------------------------------------------------------------------------------

背景图片的默认定位

background-origin:padding-box;

background-origin:border-box;

 background-origin:content-box;

 

background-clip:border-box;

background-clip:padding-box;

background-clip:content-box;

 

background-clip:content-box; background-origin:content-box;

background-size:cover;图片撑满整个容器

background-size:contain;图片不超过容器，尽可能的大

合并起来写

background：url("red.png") 0 0/20px 20px no-repeat, url("blue.png") 50% 50%/contain no-repeat content-box green;

=============================================================

布局

display:inline;默认宽度为内容宽度，不可设置宽高，同行显示 

display:inline-block;内容宽度，可以设置宽高，同行显示  

visibility:hidden;元素不显示，但是占宽高

adsolute、fixed绝对定位、固定定位的默认宽度是内容宽度 

float默认宽度是内容宽度,脱离文档流(不完全脱离)，向指定方向一直移动，所有的float的元素在同一文档流

清除浮动小技巧 

----------------------------------------------------------------------------------------------

display:flex;弹性布局

flex-direction;弹性的方向

<style>
    .container{ display: flex; background: green; margin: 10px;}
    .container.container1{ flex-direction:row-reverse;}
    .container.container2{ flex-direction:column;}
    .container.container3{ flex-direction:column-reverse;}
    .item{ background: red; margin: 10px; padding: 10px;}
</style>
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>
<div class="container container1">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>
<div class="container container2">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>
<div class="container container3">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

 

flex-direction:row                           | row-reverse               | column                    | column-reverse 

 

----------------------------------------------------------------------------------------------

flex-wrap:nowrap             |wrap          |wrap-reverse;弹性的换行

nowrap	默认值。规定灵活的项目不拆行或不拆列。
wrap	规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

flex-flow;弹性的流

flex-direction	row row-reverse column column-reverse initial                                                                                    inherit
flex-wrap	nowrap wrap wrap-reverse initial inherit

order;顺序

order : 1;  10 -1

=============================================================

设置其中一个元素的值，其它两个平分剩余空间

亦可平分css高度

 

左右对齐

column纵向

 

 

中心对齐

 

 

 

transform-rotate();旋转

transform-translate();移动偏移

transform-scale();缩放

transform-skew('y向x轴倾斜角度'，x轴向y轴倾斜)倾斜

连续操作（注意先后顺序，可能导致结果不一样）

 

设置坐标的轴心 transform-orrigin(X水平方向，Y垂直方向，Z方向(3d),);

 

3D变形，Y轴旋转3d旋转

设置透视角度

 

transform: scale(X轴放大,Y轴放大,Z轴放大)

 

 

flat扁平化  

 

过渡动画

执行动画的元素

执行时间 

贝塞尔曲线 ，执行加速

动画延迟时间 

 

动画简写

 

animation动画，这个可以自动执行，可以做多帧动画

动画执行时间

动画的加速减速或者匀速

动画执行次数，1次2次无限次

执行的方向，相反的，往返的，相反的往返

播放状态，暂停，播放中

 

动画延迟时间

保持第一帧状态，保持最后一帧的状态，2者皆有

 

简写

 

关键帧的定义