一、CSS介绍

1.1 什么是CSS

百度百科：

CSS即层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

说人话：

CSS通常称为CSS层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

1.2 CSS的作用

CSS 主要目的：控制网页中元素的样式。
CSS可以将将页面美化和HTML代码进行分离,提高代码的复用性。

降低耦合度。解耦
让分工协作更容易
提高开发效率。

　　只需要记住：html负责数据内容的展示，而CSS负责设置html页面中元素的样式。即CSS是网页的美容师。

二、CSS的使用

2.1 CSS与html的三种结合方式

2.1.1 内联样式(不常用)

在标签内使用style属性指定css代码

如：<div style="color:red;">hello css</div>

2.1.2 内部样式（常用）

在head标签内，定义style标签，style标签的标签体内容就是css代码

如：
<head>
   
    div{
        color:blue;
    }
    
 </style>

</head>

<body>

<div>hello css</div>

</body>

2.1.3 外部样式（常用）

定义css资源文件。

在head标签内，定义link标签，引入外部的资源文件

如：存在一个css文件a.css，文件内容如下
    div{
           color:green;
        }

然后在html页面引入a.css
<head>
   <link rel="stylesheet" href="css/a.css">     
</head>
<body>
    <div>hello css</div>
    <div>hello css</div>
</body>

2.2 CSS语法

格式

* 格式：
        选择器 {
            属性名1:属性值1;
            属性名2:属性值2;
            ...
        }
    * 选择器:筛选具有相似特征的元素
    * 注意：
        * 每一对属性需要使用“;”(分号为英文标点)隔开，最后一对属性可以不加“;”

2.3 CSS选择器分类

分类:

1.基础选择器

基础选择器
            1. id选择器：选择具体的id属性值的元素.（id必须在页面上面唯一）
                * 语法：#id属性值{}
            2. 类选择器：选择具有相同的class属性值的元素。
                * 语法：.class属性值{}
             3. 元素选择器：选择具有相同标签名称的元素
                * 语法： 标签名称{}

CSS优先级顺序：

按照选择器搜索精确度来编写:行内样式 > ID选择器 > 类选择器 > 元素选择器

2. 扩展选择器

扩展选择器：
            1. 选择所有元素：
                * 语法： *{}
            2. 并集选择器：
                * 选择器1,选择器2{}
        3. 后代选择器：筛选选择器1元素下的所有选择器2元素。（只要选择器的后代中有选择器2 ，无论选择器2嵌套多深都会被选中。）
            * 语法：  选择器1 选择器2{}
        4. 子选择器：筛选父选择器1的第一个子元素选择器2，第二个子元素选择器2不会被选择
            * 语法：  选择器1  选择器2{}
        
        5. 相邻兄弟选择器：可选择紧接在另一元素后的元素，且二者有相同父元素。
            * 语法：选择器1 + 选择器2 

        6. 属性选择器：选择元素名称，属性名=属性值的元素
            * 语法：  元素名称[属性名="属性值"]{}

       7. 伪类选择器：选择一些元素具有的状态。(通常用在a标签上)
            * 语法： 元素:状态{}
            * 如：
                * 状态：
                   * link：初始化的状态
                   * visited：被访问过的状态
                   * active：正在访问状态
                   * hover：鼠标悬浮状态</pre>

2.4 CSS常用的属性

1.字体、文本

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

2. 背景

背景：
    * background：

3.边框

边框
    * border：设置边框，符合属性

4.尺寸

尺寸
    * width：宽度
    * height：高度

5.浮动

* float：浮动
    * left
    * right
* clear: 清除浮动
    * both 
    * left 
    * right

6. 绝对定位

* position: 
    * absolute
    * top:
    * left:

7. 盒子模型：控制布局

为盒子模型赋值：顺时针 : 上右下左

* margin：外边距，控制盒子与盒子之间的距离
* padding：内边距,控制的是盒子内容的距离
    * 默认情况下内边距会影响整个盒子的大小
    * box-sizing: border-box;  设置盒子的属性，让width和height就是最终盒子的大小