css引入： 1.内嵌式：在<head></head>中写<style></style> 2.外链式：<link rel="stylesheet" type="text/css" href="填写文件路径"> 3.行内式：<span style="color:"设置颜色";font-size:"设置字体大小">在标签后写css样式</span>
选择器： 1.标签选择器： span{ font-size:60px; } 格式： 标签名{ 属性名：值; } 2.类选择器： .class名{ 属性名：值; } 注意点：类选择器不能以数字开头，一般比较常用类选择器 一个类可以用于多个标签 一个标签可以使用多个类，但是多个类名之间必须用空格隔开 3.id选择器： #id名{ 属性名：值; } 注意点：每一个元素的id名不允许重复 4.层级选择器： ul li{ 属性名：值; } ul .class名{ 属性名：值; } 注意点：层级选择器之间用空格隔开 5.组选择器： div，span，p{ 属性名：值; } 注意点：每个选择器之间用，隔开 6.指定标签选择器： 标签名.class名{ 属性名：值; } 7.伪类选择器： div::after{ 属性名：值； }
div标签，span标签属性设置
div{ width:300px; height:300px; background:pink; } span{ width:300px; height:300px; background:green; }注意点：div设置宽高生效，并且换行 span标签设置宽高不生效，但是可以一行共存
块级标签模式修改： display：改变实现模式 inline-block行内快模式，可写宽高，可以一行共存 block块标签模式，宽高生效，自动换行 inline宽高不生效，可以一行共存
font标签复合属性写法： font：加粗 倾斜 字体大小/行高 字体类型 注意点：font的复合属性一定要有字体和字号
设置颜色的形式： 1.color：rbg(255,255,255); 2.background:red; 3.background:#fff或者#999；
雪碧图： no-repeat不平铺 repeat可设置x，y（先x后y）x设置水平平铺 y设置垂直平铺
边框设置：border 上边框border-top 下边框border-botton 左边框border-left 右边框border-right 可分开设置 设置边框颜色：border-color:red; 设置边框大小：border-width:1px; 设置边框样式：border-style:solid; 边框样式： solid实线 dotted点线 dashed虚线 double双线 复合写法： border：线的大小 颜色 线条的样式; 实例： border:2px solid pink;
内间距设置：padding 上边框padding-top 下边框padding-botton 左边框padding-left 右边框padding-right 写法： padding-top:20px; padding-right:30px; padding-bottom:40px; padding-left:50px; 复合写法： padding:20px 30px 40px 50px; 注意点：必须以顺时针方向 padding:20px 50px; 前面代表上下相同 后面代表左右相同 padding:50px; 表示上下左右都相同
外间距设置：margin 方式与padding相同 写法： margin:10px;
解决外边距塌陷问题： 兄弟关系： 不做任何处理
父子级关系： 1.超出隐藏：overflow:hidden; 2.添加边框：border:1px #fff solid; 3.在父级上添加空表格 .父级类名:before{ content:’ '; display:table; }
span设置margin，padding的问题： span设置margin，padding左右生效，上下不生效 解决方法： 设置显示模式 display:inline-block;
设置padding撑大盒子的问题： 解决方法： 设置内减模式 box-sizing:border-box;
版心居中： 设置margin： margin:0 auto; 注意点： 1.盒子必须有宽度 2.盒子的显示模式必须是块 3.盒子的显示模式如果是行内块，则不生效
