css

1.css：层叠样式表

             样式通常存储在样式表中，用link链接                                                外联样式表

             把样式添加到 HTML 中，是为了解决内容与表现分离的问题，用style链接      内嵌样式表

             用style链接，内部加@import url（css/1.css）             导入式样式表

             直接写在标签后面                                                 行内样式表

             多个样式定义可层叠同一个css                   行内样式表>内嵌样式表权重

             所有的样式表遵循就近原则

2.id 选择器：可以为标有特定 id 的 HTML 元素指定特定的样式。以#来定义，        权重100%

3.class选择器：描述一组元素的样式，class可以在多个元素中使用。以.来定义。               权重10%

                                                                                                                                       标签权重1%

4.背景：background-color      背景颜色

              background-image        背景图片    用url链接

              background-repeat          背景图片是否重复

               background-attachment       背景图像是否固定或者随着页面的其余部分滚动。

               background-position   设置背景图像的起始位置            background-position-x         background-position-y  

                background-image：cover        背景图片充满盒子

5.文本：   color          设置文本颜色

                 line-height        设置行高

                  text-align    对齐元素中的文本         center居中            left    左          right    右          top   上         bottom  下

                  text-decoration     向文本添加修饰        none    去掉下划线               line-through     删除线

                   text-shadow     设置文本阴影     10px   8px     4px     red          10px  x轴移动位置      8px  y轴移动位置     

                                                                                                                          4px  模糊程度            red    阴影颜色

6.字体： font-size     字体大小 

               font-family    字体系列

               font-style   字体样式                  italic  斜体

                font-weight    字体的粗细

7.伪类：链接样式：a:link ： 正常，未访问过的链接

                               a:visited ：用户已访问过的链接

                               a:hover ： 当用户鼠标放在链接上时                         

                                a:active ： 链接被点击的那一刻

                       “爱恨准则”

8.盒子距离：margin(外边距) ：清除边框外的区域，外边距是透明的。

                     border(边框) ： 围绕在内边距和内容外的边框。

                     padding(内边距) ： 清除内容周围的区域，内边距是透明的

                     margin：0 auto      盒子居于中间        0是上下       auto是左右

9.边框样式（border-style）：dotted: 定义一个点线边框

                                                   dashed: 定义一个虚线边框

                                                    solid: 定义实线边框

                                                     double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

10.边距属性：margin-bottom设置元素的下外边距。

                       margin-left设置元素的左外边距。

                       margin-right设置元素的右外边距。

                        margin-top设置元素的上外边距。

11.填充属性：padding-bottom设置元素的底部填充。

                       padding-left设置元素的左部填充。

                       padding-right设置元素的右部填充。

                       padding-top设置元素的上部填充。

12.尺寸：width设置元素的宽度。

                 height设置元素的高度。

13.块级元素与行级元素的互换：

             行级元素变成块级元素：给其行级元素加 display：block属性

             块级元素变成行级元素：给其块级元素加 display：inline属性

            行内块级元素：display：inline-block

14.子级元素单独调整：a.给子级元素加float：left属性

                                       b.给父级元素加 overflow：hidden     再给自己加margin-top或者margin-left调整其位置

15.定位：绝对定位：absolute和fixed              fixed固定不动

                相对定位：relative       相对于其原来位置

                调整位置时，先给父级元素加position：relative再给其子级元素加position：absolute

16.z-index：z轴的大小 层叠，越大其元素越靠前

17.关键帧：原盒子：position：absolute

                                   animation：pao 2s|（时间）   infinite（无穷，多次）  linear（线性）

                   @keyframes  pao  {    from{ left：0px       top：0px}

                                                           to{left：1000px      top：0px}              }

18.浮动：float

              元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

              一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

              浮动元素之后的元素将围绕它。

              浮动元素之前的元素将不会受到影响。

              如果图像是右浮动，下面的文本流将环绕在它左边

              清除浮动：a.墙内外法：元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性

                                    指定元素两侧不能出现浮动元素。

                                 b.给其上个元素加height

                                 c.给其上个元素加overflow：hidden

19.圆角：border-radius 属性，可以给任何元素制作 "圆角”

                border-radius所有四个边角 border-*-*-radius 属性的缩写

                  border-top-left-radius定义了左上角的弧度

                  border-top-right-radius定义了右上角的弧度

                 border-bottom-right-radius定义了右下角的弧度

                   border-top-left-radius定义了左下角的弧度

20.旋转：transform：rotate（45deg）        旋转45度

                transform-origin：10px      500px             旋转中心的设置

21. list-style：去掉列表的点

22.cursor：pointer    鼠标放上去是小手

23.鼠标放上去图像变大：原盒子 .box：{ transition：all 0.5s}                       设置变化时间

                                          效果    .box：hover{transform：scale(1.5)}                设置放大倍数