h5+css

CSS样式

课程目标

1.css引入方式（重点）

2.css选择器（重点）

3.css盒子模型（重点）

4.css3常见效果（重点）

1. 级联样式表

1.1 css介绍

引用百度百科

1.2 css概述

层叠样式表其实就是对静态页面进行装饰，但是，特别要注意的点是：通常建议表现形式与页面内容分离（例如：人就是内容，穿着打扮就是表现形式）

2. css引入方式

2.1 行内样式

行内样式（将样式直接写在标签上），需要使用style属性

<p style="color:red;">改变字体的颜色</p>
<p style="color:red;">改变字体的颜色</p>
<p style="color:red;">改变字体的颜色</p>

该方式可用于提高样式的优先级，多次使用会导致代码臃肿，不利于后期维护

2.2 内联样式

讲页面内容与表现形式进行分离，方便对样式进行统一管理

<style>
  div{
    color:deepskyblue;
    font-size: 20px;
  }
  p{
    color: darkslateblue;
  }
</style>

<div style="color: red;">内联样式，统一管理样式</div>
<div>内联样式，统一管理样式</div>
<div>内联样式，统一管理样式</div>
<hr>
<p>样式引入方式，选择性使用，不是一定要用某一种</p>
<p>样式引入方式，选择性使用，不是一定要用某一种</p>
<p>样式引入方式，选择性使用，不是一定要用某一种</p>

2.3 外联样式

对内联样式进行进一步的抽离，方便多个页面共用