CSS引入方式和优先级

前端开发小马哥
1,684 阅读3分钟

本章内容

1.css引入的三种方式

css的样式可以写在哪些地方呢？从css样式代码插入的形式来看可以分为以下3种：

  • 内联式
  • 嵌入式
  • 外部式

内嵌式

css样式表把css代码直接写在现有的HTML标签中，如下代码

<p style='color:red;'>文字颜色为红色</p>

把对应的style属性，写在p标签的开始标签中。css样式代码要写在style=“”双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码

<p style='color:red;font-size:12px;'>文字颜色为红色</p>

嵌入式

现在有个新任务，把下面的文本中，小猿圈、IT技术免费学习平台这两个短语都修改为18px。如果用上节课我们学习的内嵌式的css样式的方法进行设置将是很头疼的事情（为每一个<span>标签加入style="font-size:18px;"语句，试想一下，如果有多个span呢？）。那么嵌入式css样式的编写就让我们很快的解决了这个问题。那么这节课讲解嵌入式css

嵌入式css样式，就是可以把css样式代码写在<style type='text/css'></style>标签之间。

统一设置span标签的样式：

<style type='text/css'>
    span{
        font-size:18px;
    }
</style>

嵌入式的css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。

外部式

大家试想一下，如果我们做一个类似淘宝那样的商城网站，那么随着项目需求的增多，我们的css代码量也会更庞大，越发到了后期，我们上述的内联式和嵌入式css样式的方式肯定是不行的，那我们应该怎么办? 这个时候，我们可以使用将我们的css代码编写到另一个单独的文件中，以为了后期方便维护我们的代码。那么这就是外部式css样式。

外部式css样式(也可称为外链式)就是把css代码写一个单独的外部文件中，这个css样式文件以".css"为扩展名，在<head>内（不是在style标签内）使用<link>标签将css样式文件链接到HTML文件内，如下代码：

<link rel="stylesheet" href="index.css" type="text/css">

  • css样式文件名称以有意义的英文字母命名，如main.css、index.css、base.css等。

  • rel="stylesheet"

    • rel:relationship的缩写，rel属性用于定义链接的文件和HTML文档之间的关系
    • stylesheet：文档的外部样式表

  • href：Hypertext Reference的缩写。意思是指定超链接(之前学习a标签的时候)目标的URL。是css代码的一种。href属性的值为样式表文件的地址。

  • <link>标签位置一般写在<head>标签之内

    ​

2.三种方法的优先级

上节课我们介绍完css的三种引入方式，有的童鞋问了，如果有一种情况：对于同一个元素我们同时用了三种方法设置css样式，那么哪种方法真正有效呢？

我们做个测试：

  1. 使用内联css设置”小猿圈“文字为红色。
  2. 然后使用嵌入式css设置文字为绿色
  3. 最后使用外部式设置文字为蓝色(index.css文件中设置)

最终发现”小猿圈“这个文本被设置为了粉色。

为什么呢？因为这三种引入方式是优先级的，谁的优先级高浏览器就会显示谁的样式属性

内联式>嵌入式>外部式

但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。

代码如下：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <!-- 嵌入式css样式的位置一定在外部式的后面 -->
    <link rel="stylesheet" href="index.css">
    <style type="text/css">
      p{
        color:green;
      }
    </style>
  </head>
  <body>
    <p style='color:red;'>
      小猿圈
    </p>
  </body>
</html>

总结：”就近原则“（离被设置元素越近优先级别越高）

什么是就近原则？

比如吃饭，前面三碗一样的饭排成一列，你肯定是吃最近的一碗，这就相当于你受那碗饭的控制

avatar
文章
阅读
粉丝