简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > CSS的三种引入方式以及优先级-2019年7月3日
Blogger Information
Blog 29
fans 0
comment 0
visits 19486
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS的三种引入方式以及优先级-2019年7月3日
blog
Original
1572 people have browsed it

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

下面我将分享一个小案例来实现CSS的三种引入方式与优先级的比较:

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="2.css">
    <style>
        p{
            color:green;
        }
    </style>
</head>
<body>
<h3>前端</h3>
<p style="color:red">HTML</p>
<p>CSS</p>
<p>Javascript</p>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

p{
    color:blue;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

1.png

上述代码中涉及知识点注释总结:

  1. CSS常见的三种引入方式:内联样式:在标签后加style 如<p style="color:red">HTML</p>，内部样式:在<head>标签内写入 如:<style>
       p{
           color:green;
       }
    </style>,外部样式:引入外部.css文件,如<link rel="stylesheet" href="2.css">

  2. 优先级:从上述代码中可以看出优先级为 : 内联样式 > 内部样式 > 外部样式

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！