一、方式
1、css文件方式
1.文件
html：
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="9.css" type="text/css">
</head>
<body>
<div>内容</div>
</body>
9.css
div{
background-color:yellow;
}
2、行内方式
<div style='background-color:red;'>内容</div>
3、选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color:yellow;
}
</style>
</head>
<body>
<div>内容</div>
</body>
二、css常见选择器
1、标签选择器
2、id选择器
3、类别选择器
4、通用选择器
5、包含选择器
6、分组选择器
7、伪类选择器
标签优先级：
行内样式-id选择器-类选择器-标签选择器-通用选择器
三、css属性
css的排版属性
1、边框
border:1px solid red;边框线的宽度，样式，颜色
width：文本框的宽度
height：文本框的高度
2、文本
text-align：文本对齐
- center：居中
- left：左对齐
- right：右对齐
line-height：文本的行高
text-decoration:文本的修饰
- uderline:定义文本下的线，
- overline:文本上的线，
- line-through:穿过文本的线，
- blink:定义闪烁的文本
- color:文字颜色，配色表：http://webcolor.chrafz.com/
- font-size:字号
3、背景
background-color:背景颜色
background-image:url('tupian.png');背景图像
background-position:背景位置,例如15案例
- background-position-x:100px;
- background-position-y:100px;
css的布局属性：
1、float:浮动
left：控制div向左浮动
right：向右浮动
2、margin：外边距，对外元素的距离，用来控制元素本身的浮动位置
margin 10px 20px 30px 40px：四边距
- margin-top：上边距
- margin-bottom：下边距
- margin-left：左边距
- margin-right：右边距
margin：0 auto：上下0，其他自动
2、padding：内边距，是对内元素，用来控制内部元素的位置
padding：四边距
padding-top：上边距
padding-bottom：下边距
padding-left：左边距
padding-right：右边距
3、display：
block：将元素变成块级标签，可以设置高度和宽度
inline：将元素变成行内标签，不能设置高度和宽度
inline-block：同时具有两种
none：标签消失
<span style="background-color: blue;500px; height: 20px;display:inline-block;">内容</span>
4、overflow：溢出处理属性
overflow:垂直和水平方向
overfow-x:设置水平方向
overfow-y:设置垂直方向
- hidden：内容会被修剪，并且其余内容是不可见的。
- scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
5、自适应相应
min-width：400px 网页大小最小缩小到400px，就会出现滚动条
max-width：