css小知识点：样式引入优先级

最新推荐文章于 2023-07-04 08:13:00 发布

M_Estelle

最新推荐文章于 2023-07-04 08:13:00 发布

阅读量276

点赞数

分类专栏：前端小知识点文章标签： css html

本文链接：https://blog.csdn.net/M_Estelle/article/details/118145395

版权

前端小知识点专栏收录该内容

22 篇文章 0 订阅

订阅专栏

引入方式：

1.行内样式：行内样式也叫内联样式，使用style属性引入CSS样式

如：

 <p style="color:red;font-size: 30px;">p段落通过行内样式引入CSS样式</p>

2.内联样式表：内部样式表在<head>标签里面使用<style>标签书写CSS代码。

如：

<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>
    <!--内部样式表-->
    <style type="text/css">
    div{
    color:red;
    }
    </style>
</head>

3. 外部样式表：外部样式表表示CSS样式不写在HTML代码中，而是单独写在扩展名为.css的样式表中。

HTML文件引用扩展名为.css的样式表，有两种方式：

（1）、链接式

如：

<link rel="styleSheet" type="text/css" href="CSS文件的路径（包括文件路径和css文件名）" />

（2）、导入式

如：

<style type="text/css">
      @import url("style.css");
</style>

优先级：行内优先级最高，其他的就近原则，即谁离代码近，谁的优先级比较高。

M_Estelle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css小知识点：样式引入优先级

引入方式：1.行内样式：行内样式也叫内联样式，使用style属性引入CSS样式如： <p style="color:red;font-size: 30px;">p段落通过行内样式引入CSS样式</p>2.内联样式表：内部样式表在<head>标签里面使用<style>标签书写CSS代码。如：<head> <meta charset="UTF-8"> <meta name="viewport
复制链接

扫一扫