css总结

1.基础语法：定义属性大于1的时候用分号隔开，如果有的值大于一个单词用引号包裹。

2.css背景：

background-attachment：背景图像是否随着页面滚动 。fixed设置不滚动。

background-color：设置背景颜色

background-image：把图片设置为背景 background-image：url（“bg.jpg”）背景图片使用要调用url

background-position：设置背景图片的起始位置。例right：代表right和center就是单独的right实际隐藏了center，其他元素也是这样，可以通过自己设置来改变，还可以通过px和所占百分比改变。

background-repeat：设置背景图片是否以及如何重复

background-size：规定背景图片尺寸

background-origin：规定背景图片定位区域

background-clip：规定背景图片的绘制区域

3.文本：

color：文本颜色 lineheight：行高

text-align：对齐元素中的文本。

text-indent：缩进元素中的首行

text-decoration：向文本添加修饰，可以去掉下划线

text-transform：设置元素中的字母

text-shadow：向文本添加阴影。text-shadow: 5px 5px 5px #ff00ff。一共有4个值，分别是阴影据左5px，阴影距上5px，阴影清晰度5px（0最清晰），颜色。

word-wrap：规定文本的换行规则。normal为自动换行，要设置其宽度。

4.字体：

font-family;设置字体的样式系列

font-size：字体大小

font-style：字体风格 。italic，oblique：斜体

font-weight:字体粗细

引入自己电脑的字体：@font-face{

font-family： myfont；

src：url（）；}

div{

font-family： myfont；}

5.链接：

a:link：未被访问的链接

a:visited：已访问的链接

a:hover：鼠标指针位于链接上方

a:active：链接被点击时刻

text-decoration：多用于去掉链接的下划线

 

6.列表：

list-style：简写列表项。

list-style-image：列表项图像。图片引用要用到url

list-style-position：列表标志位置。inside： 在里面，占用li。outside：在外面，不占用li。无太大差别

list-style-type：列表类型。

7.表格：

border：外边框。border: 1px solid #ff00ff。必须加solid，才会有边框。

border-collapse：collapse。折叠边框，使其为一个边框。

8.轮廓：

outline：设置轮廓属性

outline-color：设置轮廓颜色

outline-style：设置轮廓样式，就是包裹块的线或点之类。groove：实线。double：双实线。dotted：虚线

outline-width：设置轮廓宽度

9.css定位：

position：把元素放在一个静态的static（无偏移量，会滚动走）、相对的relative、绝对的absolute（不会占位置，可能与其他元素重合）、或固定的fixed位置中（图片不会滚动走）。

top/left/right/bottom：元素向上/左/右/下的偏移量

z-index：设置元素的堆叠顺序。

10.css浮动：

float：浮动，设置同一行位置。left/right：元素向左/右浮动。none：不浮动。inherit：从父级继承浮动属性

clear：清除浮动。值同上

11.css内边距：在content外，边框内

padding：设置所有边距。padding：100px，上下左右全为100px。

padding：bottom；padding-left；padding-right；padding-top。

12.css边框：

border：外边框。border: 1px solid #ff00ff。必须加solid，才会有边框。

border-collapse：collapse。折叠边框，使其为一个边框。

border-style：边框的样式

border-left-style：左边框样式

border-top-style：上边框样式

border-right-style：右边框样式

border-bottom-style：下边框样式

border-width：边框的宽度

单边框宽度：border-top/right/left/bottom-width

border-color：边框颜色。

单边框颜色：border-top/right/left/bottom-color

border-radius：圆角边框。border-radius：10px。

box-shadow：边框阴影。box-shadow：10px 10px 5px red。

border-image:边框图片

13.css外边距

margin：设置所有边距。同padding也可分别设置边距。margin：0px auto。上下和左右

14.外边框合并：意思就是当有两个模块是他们之间的距离不会按照margin设置的来叠加，而是取其中的最大值。

15.对齐操作

margin属性进行水平对齐。margin：0px auto。设置左右为auto自适应，就会居中

position属性左右对齐，设置距左/右的距离

float进行左右对齐。

16.尺寸操作

height元素高度；width：元素高度

max-height：最大元素高度min-height；max-width；min-width

line-height：设置行高

17.分类操作

clear：清除浮点

cursor：规定指向某元素上时显示的指针类型

display：设置是否以及如何显示元素。可以把列变成行

float：定义元素朝什么方向浮动

position：把元素放在一个静态的static（无偏移量，会滚动走）、相对的relative、绝对的absolute（不会占位置，可能与其他元素重合）、或固定的fixed位置中（图片不会滚动走）。

visibility：设置元素是否可见

18图片：

一些操作前面有的。

opacity：设置透明度。1完全不透明，0完全透明。

19选择器：

元素选择器：直接调用某一个元素

选择器分组：调用多个选择器，并用逗号将它们隔开

类选择器：div调用class设置类名。三种方式1 .class。2 a.class调用a中的class。3 .class.class。让class等于之前有过的元素选择器，让其拥有他们的样式。如class=“p1 p2”

id选择器：div调用id设置id名.1、同一个id在文档中只能使用一次，类选择器可以多次使用

2、id选择器不能结合使用。3、当使用js时，需要用到id。

属性选择器：直接调用某一个元素的属性进行设值。调用时要加上[]符号。在匹配时属性和属性值必须完全对应。可以通过~来设置含有这个单词的属性值，例title=“title t”、title=“title tit“，通过调用[title~]设置。

后代选择器：页面有重名的选择器，看他们所处在那个选择器中，通过那个选择器可以一层层调用或者直接调用该选择器用空格隔开

相邻兄弟选择器：选择紧接在另一个元素后，二者有相同父级，所接的元素不会变化

子元素选择器：只能通过>选择子代的选择器。

20、动画-2D，3D转换：现在的浏览器已经支持动画转换，所以不用自己调用设置。都是通过transform直接设置

2D：translate（）：移动x轴，y轴。transform：translate（100px，100px）；

rolate（）：旋转，参数是角度。transform：rolate（100deg）

scale（）：缩放，分别是宽度和高度。transform：scale（2，1）

skew（）：倾斜，参数分别是围绕x轴旋转和围绕y轴旋转。transform：skew（20deg，20deg）

matrix（）：矩阵，不清楚目前

3D：

rotateX（）：围绕x轴偏转。transform：rotateX（100deg）

rotateY（）：同上

21动画-过渡效果：通过设置调用div之类的该模块：hover，使鼠标在其上方后开始进行设置变化

transition：设置四个过渡属性。例：transition：width 2s，height 2s，transform 2s；分别是宽度改变时间2秒，高度改变时间2秒，变化时间2秒

transition-delay：过渡效果开始时间，指的是等待的时间

transition-property：过渡名称

transition-duration：过渡花费时间

transition-timing-function：过渡效果时间曲线

22动画-动画：一般将块设置为相对位置，好进行移动。

animation：动画。例animation：anim 5s （infinite alternate）。

分别是动画名与动画时间以及反方向返回，在进行循环。通过调用@keyframes anim

@keyframes anim{

0%{background: red;left:0;top:0px}
25%{background: darkmagenta;left:150px;top:0px}
50%{background: burlywood;left:150px;top:150px}
75%{background: aliceblue;left:0px;top:150px}
100%{background: red;left:0px;top:0px}

}分别设置每个阶段的变化

23动画-多列

column-count：分列数量

column-gap：分列之间的距离

column-rule：分列之间的线。例：column-rule：5px outset red；线的宽度，及颜色，outset要加不知原因