CSS的三种引入方式及优先级

1、行内样式

行内引入即直接在HTML的标签内写入style属性


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行内式title>
head>
<body>
    <a href="http:\\www.baidu.com" style="font-size: 30px;">百度一下a>
    <br>
    <div class="cl1" style="color: rgb(10, 243, 29);">小黑div>
body>
html>

在这里插入图片描述
适用于测试或是需要单独标注的样式。
缺点:代码混乱。

2、内嵌样式

内嵌样式是在 head 标签中写入 style 标签,将 css 样式写入 style 标签内部


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内嵌式title>
head>
<style>
    .cl1{
        color: rgb(247, 4, 37);
        font-size: 20px;
    }
    .cl2{
        color: fuchsia;
        font-size: 40px;
    }
style>
<body>
    <a class="cl1" href="http:\\www.baidu.com">百度一下a>
    <br>
    <div class="cl2">小黑div>
body>
html>

CSS的三种引入方式及优先级_第1张图片
内嵌式使用类名区分来对标签应用样式。
缺点:文本与样式写入同一文件,代码功能不够具体。

3、导入文件

导入文件式是将HTML代码与CSS代码分离开,写入不同文件,再使用 link 标签将CSS文件导入使用即可

CSS文件:

a{
    font-size: 30px;
    color: crimson;
}
.cl1{
    font-size: 20px;
    color: rgb(226, 241, 7);
}

HTML文件:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css1title>
    <link rel="stylesheet" href="CSS1.css">
head>
<body>
    <a href="http:\\www.baidu.com">百度一下a>
    <br>
    <div class="cl1">小黑div>
body>
html>

CSS的三种引入方式及优先级_第2张图片
推荐使用这种方法。

优先级

内部样式 > 内嵌样式 > 文件导入

可用“就近原则”来概括:

  1. 内部样式就在标签内,离标签最近,所以优先级最高;
  2. 嵌入样式在同一文件内,但是离标签比较远,优先级居中;
  3. 文件导入式不在同一文件,因此优先级最低。

(学习整咯,若有问题请指出。)

你可能感兴趣的:(HTML,&,CSS,&,JS)