CSS的作用和创建引入方式、CSS优先级、选择器

1.作用:修饰美化网页

2.语法组成:选择器{声明}/选择器{属性1:属性值1;属性2:属性值2}

        - 选择器:修饰的对象

        - {声明}包含属性和属性值

        - 属性和属性值之间需要使用冒号相连

        - 当有多个声明的时候,每个声明之间需要使用分号隔开

CSS样式表的创建方式:行内、内部、外部

    语法组成:选择器{属性:属性值}

    一:行内式样式表创建

    1.需要在标签内部创建样式表

    2.书写style属性,在属性值里面书写声明即可

    二:内部样式表的创建

    1.需要在头部文件中创建style标签

    2.在标签内书写规范的css语法即可

    三:外部样式表的创建

    1.在外面创建一个后缀名为.css的文件

    2.在文件中书写规范的css代码即可

    3.需要引入外部的样式表

        - 第一种方式(常用): link标签

        - 第二种方式(了解):

            - 需要在头部中创建style标签

            - 在标签里面书写 @import url('路径')

    4.注意外部引入的区别

        - link标签引入的时候HTML和CSS同时加载

        - @import方式引入先加载HTML后加载CSS

        - @import方式在后期学习模块化开发按需引入很常用

三种样式表的使用场景

        - 行内样式表 使用的很少（用于调整样式）

        - 内部样式表 作用于当前文件 案例

        - 外部样式表 作用于多个文件 项目 维护方便 复用

浏览器常见的CSS错误提示

    1.黑色实现划掉属性:表示属性有相同的 优先级高的把优先级低的给覆盖了

    2.黄色的三角形和白色的感叹号:表示当前css代码写错了

CSS的选择器

基本选择器的分类:标签、class、id、通配符、群组选择

    一.标签选择器

    1.语法:可以把HTML中的所有标签看成是选择器进行选择修饰

    2.常见的标签选择器:div、p、span、ul、li、ol...

    二:id选择器

    1.语法

        - 需要在标签内添加id属性和属性值

        - 在样式表中通过 #id属性值{}

    2.作用:在网页布局中通常用来表示网页的最外围结构,建议在一块布局中只使用一次

    三:class选择器(类选择器)

    1.语法

        - 需要在标签内添加class属性和属性值

        - 在样式表中通过 .class属性值{}

    2.作用:没有强制的要求 可以用来设置一类或者是单个需要添加样式的声明

    四:通配符(选择到页面中的所有标签)

    1.语法: *{margin:0;padding:0} 内外边距(盒模型)

    2.作用:页面布局中浏览器和标签都是有默认间距的 8px

    五:群组选择器

    1.语法:选择器1,选择器2,选择器3{声明}

    2.作用:选择到相同声明的选择器放在一起书写 简写代码

层级选择器的使用:后代选择器(包含)、子级选择器、相邻一个兄弟、相邻全部兄弟

    一:后代选择器(包含选择器)

    1.语法:父级选择器 子级选择器{声明}

    2.作用:可以通过父级元素选择到相对应的子级选择器

    二:子代选择器

    1.语法:父级选择器>子级选择器

    2.作用:选择到父级元素下面的直接子级元素 

    三:相邻一个兄弟

    1.语法:兄弟标签+下一个相邻兄弟

    2.作用:表示通过哥哥选择到后面的一个兄弟

    四:相邻所有兄弟

    1.语法:兄弟标签~后面所有相邻兄弟

    2.作用:表示通过哥哥选择到后面的所有兄弟

CSS的优先级

行内样式表的优先级最高,外部和内部取决于书写顺序在下面的优先级更高 => 就近原则

选择器的优先级（权重）

权重:表示选择器的使用优先级 在css语言中可以使用四位数字表示权重 0000

    1.标签选择器:0001

    2.class选择器:0010

    3.id选择器:0100

    4.行内样式表:1000

    5.通配符:0000

    6.群组选择器:根据情况各自计算 #name,.name{}

    7.后代选择器:相加 ul li{} （前后选择器的权重相加）

    CSS的中文翻译:层叠样式表

    1.什么是层叠性:当修饰的对象有多个选择器的时候 可以选择不同选择器中的属性

    2.当属性相同的时候会根据权重进行选择

    2.当属性不同的时候会进行样式的叠加