引入方式
1. 行内样式表（行内式）
<div style="color:red;">行内样式 设置颜色为红色</div>
2. 内部样式表(嵌入式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.outBox {
color: green;
}
</style>
</head>
<body>
<div class="image_box">
<div style="color:red;">行内样式 设置颜色为红色</div>
<div class="outBox">内部样式表 颜色绿色</div>
</div>
</body>
</html>
3. 外部样式表（链接式）
<link rel="stylesheet" href="style.css">
1. 在HTML页面中，使用<link>标签引入这个文件
2. <link rel="stylesheet" href="css文本路径">
3. 结构和样式分离
元素显示模式
1. 块元素
<h1~h6>,<p>,<div>,<ul>,<ol>,<li>
1. 一行只能放一个块元素
2. 可以设置宽度，高度
3. 默认宽度是容器的100%
4. 可以包含任何标签
注意：
<p>标签里面不能放块级元素，特别不能放<div>
h1~h6也是文字类块级标签，不能放其他块级元素
2. 行内元素
<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<u>,<span>
1. 一行可以放多个行内元素
2. 不能直接设置宽度高度
3. 本身内容的宽度
4. 只能容纳文本或者其他行内元素
注意：
链接里面不能再放链接
特殊情况链接<a>里面可以放块级元素
但是给<a>转换一下模式最安全
3. 行内块元素
<img/>,<input/>,<td>
1. 同时具有块元素和行内元素的特点
2. 一行可以放多个行内元素
3. 可以设置宽度，高度,外边距及内边距
4. 本身内容的宽度
4. 元素显示模式转换
1. display:block; 转换为块元素
2. display:inline; 转化为行内元素
3. display:inline-block; 转化为行内块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.outBox {
color: green;
}
</style>
</head>
<body>
<div class="image_box">
<h1 style="background:red;">我是行元素 我占一行</h1>
<div style="background:skyblue;">
我是行元素 我可以放很多 行内元素
<em style="color:green">1</em>
<em style="color:red">2</em>
<em style="color:blue">3</em>
</div>
<input placeholder="我是行内块元素" style="width:200px; height:80x;" />
</div>
</body>
</html>
