CSS

1.概念：Sascading Style Sheets 层叠样式表

  层叠：多个样式可以作用在同一个html的元素上，同时生效

2.好处：

  1.功能强大

  2.将内容展示和样式控制分离

    *降低耦合度

    *让分工协作更容易

    *提高开发效率

3.CSS的使用：css和html的集合方式

    1.内联样式：在标签内使用style属性指定css代码

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

    3.外部样式：

      1.定义css资源文件

      2.在head标签里，定义link标签，引入外部的资源文件。

  *注意：这三种方式，css作用范围越来越大，第一种不常用。

4.css语言：

  *格式：

    *选择器{

      属性名1：属性值1

      属性名2：属性值2

    }

  *选择器：筛选具有相似特征的元素

  *注意：每一对属性需要使用；隔开，最后一对属性可以不加。

5.选择器：筛选具有相似特征的元素

  *分类：

    1.基本选择器：选择器优先级1>2>3

      1.id选择器：选择具体的id属性值的元素,建议在一个html页面中id唯一。

        *语言：#id属性值（）

      2.类选择器：选择具有相同class属性值的元素

        *语法：.class属性值{ }          

      3.元素选择器：选择具有相同标签名称的元素

        *语言：标签名称{ }

        

    2.扩展选择器

        1.选择所有元素：

          *语法：*{ }

        2.并集选择器：

          *选择器1，选择器2{ }

        3.子选择器：筛选选择器1元素下的选择器2元素

          *语法：选择器1 选择器2{ }

        4.父选择器：筛选选择器2的父元素选择器1

          *语法：选择器1>选择器2{ }

        5.属性选择器：选择元素名称，属性名=属性值的元素

          *语法：元素名称[属性名=“属性值”]{ }

        6.伪类选择器：选择一些元素具有的状态

          *语法：元素：状态{ }

          *如：<a>

            *状态：

              *link：初始化的状态

              *visited：被访问过的状态

              *active：正在访问状态

              *hover：鼠标悬浮状态

6.属性：

  1.字体，文本

    *font-size：字体大小

    *color：文字颜色

    *text-align：对齐方式

    *line-higth

  2.背景

    background：设置背景颜色，背景图片

  3.边框：

    border：设置边框，符合属性

  4.尺寸：

    width：宽度

    height：高度

  5.盒子模型：控制布局

    margin：外边距

    padding：内边距

      *默认情况下，内边距会影响盒子的大小

    float：浮动  

      *left：

      *right：