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.盒子的显示模式如果是行内块，则不生效
4242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
