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者皆有
简写
关键帧的定义