css引入方式

CSS 引入方式

行内式

直接写在标签（元素）内，通过标签属性 style 引入------工作中不用

<div style="color:red;">行内式</div>
div 标签 style 标签属性名 "color:red;" 标签属性值

内嵌式

将 CSS 代码放在 style 元素内，在通过 CSS 选择器来选择 HTML 元素，把 CSS 样式添加给这个元素

style 元素一般都会放在 head 元素内，在 title 标题的后面

<style>
  div {
    color: red;
  }
</style>
<div>内嵌式</div>

外链式

将 CSS 代码单独放在一个 CSS 文件中，在通过 link 标签进行引入

link 标签一般放在 head 元素内，放在 title 标题的后面
在项目中经常使用

<link rel="stylesheet" href="CSS.css" type="text/css" /> link 标签
rel="stylesheet" 样式表，不可缺少 href="" CSS文件地址、路径 type="text/css" 类型
可以不写，建议写全

导入式

'import' "CSS 文件地址"; 都是引入一个单独的 CSS 文件

@import 放在 style 元素内
@import 既不是标签，也不是 CSS 样式，是一条声明语句
@import

<style>
  @import 'CSS.css';
</style>

外链式和导入式的区别（3 条）

加载顺序：外链式：同步加载 HTML 结构和 CSS 样式导入式：先加载 HTML 结构，加载完成后再加载 CSS 样式
引入方式：外链式：使用 link 标签引入导入式：@import 不是标签也不是 CSS 样式，只是一条声明语句
当使用 javascript 控制 DOM 去改变 css 样式的时候，只能使用 link 标签，因为 import 是不能被 DOM 控制的。

link 和@import 虽然都是引入外部的 css 文件，区别 link 是 html 标签，@import 完全是 css 提供的方式，要写在 css 文件或者 style 标签中。他们的加载顺序也是有区别的，当一个页面被加载的时候，link 引用的 css 文件会被同时加载，而@import 引入的 css 文件会等页面全部下载完后再加载。当使用 javascript 控制 DOM 去改变 css 样式的时候，只能使用 link 标签，因为 import 是不能被 DOM 控制的。

CSS 选择器

语法：CSS 选择器{CSS 样式（CSS 属性名：CSS 属性值；）}

CSS 属性名和属性值之间用冒号":"隔开，用分号";"结束 ![Alt text]

CSS 选择器的分类

1、标签选择器

直接把 HTML 标签当做选择器来用权重：1

标签选择器会选择 HTML 标签中所有的相同的标签

<style>
  （匹配所有的div标签） div {
    color: red;
  }
</style>

<div>div1</div>

<span>区分行内小模块</span>

<p>段落</p>

<div>div2</div>

2、类选择器

将 HTML 元素后面添加一个 class 标签属性，利用标签属性值当做选择器来用，在标签属性值前面加一个点"." 权重：10

标签属性值（类名）可以重复使用标签属性值（类名）客户以有多个，标签属性值（类名）之间用空格隔开标签属性值：不能是数字，不能以数字开头，不能是中文

<style>
  /*类选择器*/
  .div1 {
    color: yellow;
  }
  .title {
    color: green;
  }
</style>

<div class="div1">div1</div>
<p class="div1 title">段落</p>

3、id 选择器

将 HTML 元素后面添加一个 class 标签属性，利用标签属性值当做选择器来用，在标签属性值前面加一个点"#" 权重：100

id 选择器具有唯一性，不能重名 id 选择器是配合 JS 来使用的

<style>
  #div2 {
    color: red;
  }
</style>
<div class="div1" id="div2">div标签</div>
<p id="div2">错误的 id唯一</p>

4、通配符选择器

匹配了所有的 HTML 元素语法：{CSS 属性名：CSS 属性值} 权重：0<<1

在项目中，通配符选择器不用。它匹配了所有的 HTML 标签，比较消耗性能。

<style>
  * {
    margin: 0;
    padding: 0;
  }
</style>

5、后代选择器(派生选择器)

在一个根元素（大盒子）的范围内，查找它的后代元素语法：祖辈选择器后代元素{} 权重：所有选择器权重相加之和

后代选择器之间用空格隔开

.box ol li a span{ color:blue; }

6、分组选择器

将同一份 CSS 样式分别给了不同的 HTML 元素，并给这个元素添加 CSS 样式语法：选择器 1,选择器 2,选择器 3{CSS 样式} 权重：独立计算的，不会叠加

h2,div,p{ color:red; }

7、标签属性选择器

利用标签属性名和标签属性值来当做选择器来使用。选择 HTML 元素语法：[标签属性名]{CSS 样式} [标签属性名=标签属性值]{CSS 样式} 权重：10

如果遇到 HTML 元素中带有 class 标签属性时，一般都用类选择器来选择 HTML 元素，不会使用标签属性选择器

[class]{ color: red; } [class=div1]{ color: green; } [title]{ color: gray; }
[title=div2]{ color: pink; }
<div class="div1" title="div2">div元素</div>

8、交集选择器

两种选择器同属一个元素时，可以用交集选择器来准确选择 HTML 元素权重：所有选择器相加之和

交集选择器的组成：标签选择器和类选择器、标签选择器和标签属性选择器、标签选择器和 id 选择器、类选择器和标签属性选择器

div.div1{ color: red; } div[title]{ color: green; } .div1[title]{ color:
deeppink; }
<div class="div1" title="div2">div元素</div>

9、子级选择器

存在于包含关系的元素选择，通过父级来选择子级语法：父级选择器>子级选择器{CSS 样式} 权重：所有选择器权重之和

<style>
  ol > li > a > span {
    color: red;
  }
</style>

<div class="box">
  <ol>
    <li>
      <a href="">
        <span> span1元素 </span>
      </a>
    </li>
  </ol>
  <ul>
    <li>
      <a href="">
        <span>span2元素</span>
      </a>
    </li>
  </ul>
</div>

10、伪类选择器

给 HTML 元素添加某种状态，例如：鼠标经过时的状态，鼠标点击时的状态、鼠标点击后的状态权重：10（一般不会计算）

伪类选择器在项目中常用的状态是a:hover{}鼠标经过时的状态

a:link { } //默认的状态---被高版本浏览器废弃 a:hover { }
//鼠标经过时的状态----常用 a:active { } //鼠标点击时的状态 a:visited { }
//鼠标点击后的状态

11、伪元素---after

通过 CSS 代码向指定的元素内添加假的（HTML 中不存在）的内容

:before 在指定元素所有内容的前面;11、伪元素---afterCSS 代码向指定的元素内添加假的（HTML11、伪元素---afterCSS 代码向指定的元素内添加假的（HTML11、伪元素---afterCSS 代码向指定的元素内添加假的（HTML11、伪元素---afterCSS 代码向指定的元素内添加假的（HTML11、伪元素---afterCSS 代码向指定的元素内添加假的（HTML :affter 在指定元素所有内容分的后面
用伪元素需要保证两个前提： 1、必须带有; display:block 这个 CSS 属性 2、必须带有 content="";属性，content 内容可以为空。
伪元素经常常用的是:after这个属性 :after一般在清除浮动带来的影响中使用

<style>
  .box:before {
    display: block; /*块级元素*/
    content: '我是哥哥';
  }
  .box:after {
    display: block;
    content: '我是弟弟';
  }
</style>