CSS的加载方式及其使用方法

CSS (cascading style sheets)：层叠样式表，又称级联样式表、串接样式表、阶层式样式表，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。

首先介绍一下CSS工作原理：

css工作流程图

CSS加载方式

---

• 外部样式表
  新建一个CSS文件，然后通过html中的标签引入CSS样式

style.css为自己在外部创建的css文件

• 内部样式表
  将CSS放在HTML的
  • 通过@import语句引入
    引入方法有两种
  1. 在css中引入，@import直接引入CSS样式

  @import url（css文件路径）
  不加“url”也可

  2. 在html的

     注意：css文件尽量放在与html文件相同的文件夹下，否则css文件路径的书写容易出错

     • 内联样式
       在HTML标签中加入style属性（不推荐，它只对当前标签的样式进行设置）

     来来来

     CSS选择器

     ---

     选择器类型

     • 基础选择器

       1. *，通用符选择器，用于对所有的元素进行选择
       2. #，id选择器，对id为某特定值的元素进行选择（id属性定义过后只能使用一次，而同一个属性值的class属性可以多次使用）
       3. .class，类选择器，对某一类的元素进行选择
       4. element，元素选择器

     • 组合选择器

       1. E,F，匹配E和F两种选择器选中的所有元素
       2. E F，后代选择器，匹配E元素所有的后代元素F
       3. E>F，子元素选择器，匹配E元素的直接子元素F（即第一级子元素，其嵌套的子元素不会被选择）
       4. E+F 直接相邻选择器，匹配E元素后的同级第一个元素F
       5. E~F 普通相邻选择器，匹配E元素后的所有同级元素F
          注意：id和类选择器中间无分隔符，“.”和“#”可作为分隔符

     • 属性选择器
       E[attr]，匹配所有属性为[attr]的元素

     • 伪类选择器

       1. E：link，匹配所有为被点击的链接
       2. E：visited，匹配所有已被点击的链接
       3. E：hover，匹配鼠标悬浮其上的E元素
       4. E：active，匹配鼠标已经在其上按下但还没释放的E元素
       5. E：first-child，匹配其父元素的第一个子元素
       6. E：nth-child（n）：匹配其父元素的第n个子元素
       7. E：first-of-type，匹配其父元素下同类同级但不同标签的同一标签下的第一个元素
       8. E：nth-of-type（n），匹配其父元素下同类同级但不同标签的同一标签下的第n个元素
       9. E：focus，匹配获得当前焦点的E元素，表示元素获得光标焦点时使用的颜色，主要用于文本框输入文字时使用（鼠标松开时显示的颜色），当鼠标在输入框外其他部分点击时该样式消失，具体可参考baidu输入框。

       10：E：checked，匹配表单中被选中的radio或checkbox元素
       11：E::selection，匹配用户当前选中的元素

     • 伪元素选择器

       1. E::first-line，匹配元素内容的第一行
       2. E::first-letter，匹配元素内容的第一个字母
       3. E::before，在E元素之前加入生成的内容
       4. E::after，在E元素之后插入生成的内容

     E::before{
     content:"aaabbbxxx"
     }

     选择器的优先级

     若多条规则作用于同一元素上且赋予了不同的属性值，则需要考虑其优先级，优先级的顺序从1到9，权重大致情况下是依次减小的

     1. 在属性后使用！important会覆盖页面内任意位置定义的元素样式

     color:red!important

     2. 作为