CSS四种导入方式以及三种基本选择器

最新推荐文章于 2024-08-07 14:19:47 发布

雪夜里的枫叶

最新推荐文章于 2024-08-07 14:19:47 发布

阅读量95

点赞数

分类专栏： CSS 文章标签： html

本文链接：https://blog.csdn.net/weixin_47675736/article/details/115872565

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

三种常见的三种CSS样式导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
        <!--内部样式-->
        <style>
            h1{
            color:green;
            }
		</style>
    <!-- 外部样式 -->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
    
<!-- 优先级:就近原则 -->
<!-- 哪个样式离元素近就使用哪个样式 -->

<!-- 行内样式: 在标签元素中,编写一个style属性,编写样式即可 -->
<h1 style="color: yellow;">我是标题</h1>
</body>
</html>

拓展:外部样式两种写法

链接式:
html

1 <!-- 外部样式 -->
2 <link rel="stylesheet" href="css/style.css">

导入式
@import式CSS 2.1特有的!

<!-- 导入式 -->
<style>
   @import url("css/style.css");
</style>

@import对比link:
import会先加载html在加载css样式,link是CSS样式渲染好之后再一起加载出来，现在基本都是用link。

3种基本选择器

标签选择器:选择一类标签标签{}
类选择器 .class :选择所有class属性一致的标签,跨标签, .类名{}
id选择器 : 全局唯一, #id{}

优先级:

区分CSS导入方式,不遵循就近原则,
优先级为:id > class >标签

雪夜里的枫叶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS四种导入方式以及三种基本选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>  <style> h1{ color:green; } </style> &
复制链接

扫一扫

专栏目录