第一章：CSS基础---认识CSS、CSS选择器、css语法声明的格式、css代码、外部样式表、样式表套用

<1..认识CSS>

css(Cascading Style Sheet): 层叠样式表

    样式表

        1. 行内样式表(内联样式表)

            - <标签名 style="css样式代码"></标签名>

        2. 内部样式表

        3. 外部样式表

css样式代码格式

    css属性名:css属性值;css属性名:css属性值;

css样式

    宽度 width:数值px;  单位必须要加,0可以不加单位

    高度 height:数值px; 单位必须要加,0可以不加单位

    字体颜色 color:颜色单词;

    背景色 background-color:颜色单词;

内部样式表

    1. 生成一个style的双标签,放到head标签里面

    2. 利用选择器+声明的方式将样式都放到style标签内

css语法格式

    选择器{

        css样式代码---声明

        css属性名:css属性值;---声明

    }   

<2..CSS选择器>

（1）标签选择器: 通过标签名去选择  标签名{}

（2）id选择器   #id名{}

        id名:  类似于人的身份证号,唯一性,不允许重复的

（3）class(类)选择器    .class名{}

         class名

             类似于人的名字

                 - 可以重复,标签的样式一样的话,可以起相同的名字

                 - 一个人可以拥有多个名字的

             id名和class名

                 1. 不要以数字打头

                 2. 使用英文

                 3. 尽量用小写字母

                 4. 见名知义

 （4）通配选择器  *{}  *:选择器到当前文件所有的标签及内容

             主要的功能是去掉标签自带的样式(间距)

                  *{

                  margin:0

                 padding:0

                  }

 （5）后代选择器

             选择器 选择器{}

                 - 选择器可以混搭

                 - 选择器个数不限制

                 - 选择器可以跨代

（6）群组选择器---如果大家拥有共同的样式,可以放到一个组里面

             选择器,选择器{}

                - 选择器的个数不限制

                - 选择器种类不限制

                - 选择器可以混搭

（7）选择器的权重值

        行内样式表 1000

        id选择器 100

        class选择器 10

        标签选择器 1

        通用选择器 0

                - 后代选择器和交集选择器的权重值是由每个选择器权重值相加

                - 权重值相同的时候根据就近原则

                - 群组选择器的权重只看和自己本身相关的选择器

                - 选择器权重越高,样式优先显示的

        如果选择器格式错误，在控制台的样式面板中是不会显示的

        如果样式被划掉，且不带感叹号，就说明是权重问题

        层叠: 当用不同的选择器，选择同一个元素，设置了相同的属性，但是设置了不同的属性值，会产生冲突，根据权重优先显示样式，如果没有冲突的话，样式是可以正常显示的

<3..css语法声明的格式>

    1. css属性名和css属性值之间用:隔开

    2. 每条声明结束后要用;结尾

    3. 最后一条声明可以不带;

<4..css代码>

    1. 不能加代码之外的内容

    2. 如果要加代码之外的内容需要注释 /**/

    3. span 双标签 小文本 类似于b/i可以在同一行显示,span不带任何自带样式

    4. div 板块标签 类似于p标签独占一行, div不带任何自带样式

<5..外部样式表>

    1. 在html文件外面创建.css文件,在该文件中使用选择器+声明直接写样式,如果出现代码之外的内容需要注释 /**/

    2. 在html文件的head标签内用link标签将css文件引入

    <link rel="stylesheet" href="css/外部样式表.css">

    rel: 当前关联的文件类型 stylesheet: 样式表

    href: 路径(css路径)

<6..样式表套用>

    权重(股份占比)--样式有冲突的时候才需要看权重

        1. 权重越高 优先级越高 样式会优先显示

        2. 同时存在多个内部样式或者同时存在多个外部样式表，根据就近原则

        3. 同时存在行内和内部和外部的时候，行内样式表优先级最高，内部和外部根据就近原则