css：页面美化和布局控制

• 概念：层叠样式表
  层叠：多个样式可以作用在同一个html的元素上。同时生效
• 好处：

    1.功能强大

    2.将内容展示和样式控制分离
          降低耦合度，解耦
          让分工写作更容易
          提高工作效率

• css的使用：css与html结合方式

• 1.内联样式
  在标签内使用style属性指定css代码
  如：<div style="color:red;">hello css</div>

• 2.内部样式
  在head标签内，定义style标签，style标签的标签内容就是css代码

• 3.外部样式 *定义css资源文件 *在head标签内，定义link标签，引入外部的资源文件

注意：

• 1，2，3种方式 css作用范围越来越大
• 1方式不常用，2，3常用
• 3种格式可以写为：

<style>
       @import "css/a.css";
</style>

css语法：

格式：
选择器{
属性名1：属性值1；
属性名2：属性值2；
… }

• 选择器：筛选具有相似特征的元素
  注意：
  每一对属性需要使用；隔开，最后一对属性可以不加；
  分类：

1.基本选择器

                 1.id选择器，选择器具体的id属性值的元素
                         语法：#id属性值{}
                 2.元素选择器：选择具有相同标签名称的元素
                        语法：标签名称{}
                        注意：id选择器优先级高于元素选择器
                 3.类选择器：选择具有相同的class属性值的元素。
                         语法：.class属性值{}
                         注意：类选择器优先级高于id选择器

2.扩展选择器：

                1.选择所有元素：
                      语法：  *{}
                2.并集选择器：
                     选择器1，选择器2{}
                3.子选择器：筛选选择器1元素下的选择器2元素
                     语法：   选择器1  选择器2{}
                4.父选择器：
                     语法：   选择器1  >选择器2{}
                5.属性选择器：选择元素名称，属性名=属性值的元素
                    语法：   元素名称【属性名=“属性值”】{}
                6.伪类选择器：选择一些元素具有的状态
                    语法：元素：状态{}
                    如： `<a>`
                         状态：
                              link  ：初始化的状态
                              visited:被访问过的状态
                              active：正在访问的状态
                              hover：鼠标悬浮状态

属性

1. 字体、文本
   font-size:字体大小
   color：文本颜色
   text-align:对其方式
   line-height:行高

2. 背景
   background:

3. 边框
   border：设置边框，复合属性

4. 尺寸
   width:宽度
   height:高度

5. 盒子模型：控制布局
   margin：外边距
   padding：内边距
   默认情况下内边距会影响整个盒子的大小
   box-sizing:border-box：设置盒子的属性，让width和height就是最终盒子的大小

6. float：浮动

left

right