CSS样式
课程目标
1.css引入方式（重点）
2.css选择器（重点）
3.css盒子模型（重点）
4.css3常见效果（重点）
级联样式表
css概述
层叠样式表其实就是对静态页面进行装饰，但是，特别要注意的点是：通常建议表现形式与页面内容分离（例如：人就是内容，穿着打扮就是表现形式）
css引入方式
行内样式
行内样式（将样式直接写在标签上），需要使用style属性
<!-- 行内样式 -->
<div style="color: green; border: 1px solid red;">每天叫醒我的不是闹钟，是梦想！！！</div>
<div style="color: green; border: 1px solid red;">每天叫醒我的不是闹钟，是梦想！！！</div>
<div style="color: green; border: 1px solid red;">每天叫醒我的不是闹钟，是梦想！！！</div>该方式可用于提高样式的优先级，多次使用会导致代码臃肿，不利于后期维护
内联样式
讲页面内容与表现形式进行分离，方便对样式进行统一管理
<!-- 我现在写css样式，是html标签吗？ 不是标签，样式在html基础书写 -->
<style>
/* 选择器 */
div{
color: brown;
border: 1px solid red;
}
p{
color: pink;
}
</style>
</head>
<body>
<div>每天叫醒我的不是闹钟，是梦想！！！</div>
<div>每天叫醒我的不是闹钟，是梦想！！！</div>
<div>每天叫醒我的不是闹钟，是梦想！！！</div>
<p>小面包</p>
<p>小cookie</p>
<p>小饼干</p>
</body>外联样式
对内联样式进行进一步的抽离，方便多个页面共用同一个样式，创建一个css文件，需要该样式的HTML直接引用样式即可
<head>
<meta charset="utf-8" />
<title></title>
<!-- 引入css样式： link -->
<link rel="stylesheet" type="text/css" href="css/01.css" />
<!-- 引入css样式：@import -->
<!--
<style>
@import url("css/01.css");
</style> -->
</head>
<body>
<div>每天叫醒我的不是闹钟，是梦想！！！</div>
<div>每天叫醒我的不是闹钟，是梦想！！！</div>
<div>每天叫醒我的不是闹钟，是梦想！！！</div>
<p>小面包</p>
<p>小cookie</p>
<p>小饼干</p>
</body>样式的优先级
<head>
<meta charset="utf-8">
<title></title>
<!-- 外联样式 -->
<link rel="stylesheet" type="text/css" href="css/01.css" />
<!-- 内联样式 -->
<style>
div{
color: red;
}
</style>
</head>
<body>
<!-- 就近原则： 行内样式 > 内联样式 == 外联样式 (后面覆盖前面)
注意事项： 今后尽量不要对同个html进行多个样式书写
如何选择三种样式写法？
1、如果样式是固定并且不修改并且很少情况，行内样式
2、如果样式针对当前html页面做的样式，并且量比较大的情况下， 内联样式
3、如果你的样式是通用，如果你的css代码很多，外联样式，需要创建一个css文件，引入
-->
<!-- 行内样式 -->
<div style="color: green;">每天叫醒我的不是闹钟，是梦想！！！</div>
</body>样式选择
三种样式引入方式，在实际开发过程中该如何选择
标签：01,样式,叫醒,梦想,CSS,闹钟,内联,css From： https://blog.51cto.com/u_16228353/72310411.如果是通用样式，就选择外联样式
2.当样式内容过多时，也会将样式单独抽离成一个.css文件，方便管理
3.当某个标签有特殊样式实现，且在页面中是不重复的，出现次数唯一的，就使用行内样式
4.除了上面的几种情况，通常使用的都是内联样式