CSS学习笔记1——导入、选择器、CSS优先级

最新推荐文章于 2024-07-24 16:49:00 发布

Dwi yn

最新推荐文章于 2024-07-24 16:49:00 发布

阅读量210

点赞数 1

分类专栏：标记语言学习文章标签： css html css3 html5

本文链接：https://blog.csdn.net/jgjfror/article/details/114485456

版权

标记语言学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

语法讲解

CSS的三种导入方式

行内导入

<h1 style="color: red">实验文字</h1>

内部导入

<head>
    <style>
        h1{
            color: yellow;
        }
    </style>
</head>
<body>
<h1>实验文字</h1>
</body>

外部导入

css文件

h1{
    color: green;
}

htnl文件

<head>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>实验文字</h1>
</body>

三种基础选择器

标签选择器

上文外部导入就是一种标签选择器，标签选择器会作用在所有标签上

类选择器

css文件

.lei{
    color: blue;
}

html文件

<h1 class="lei">实验文字</h1>

类选择器的核心是类，类可以复用在任何标签上，但不一定有效。

id选择器

css

#ID{
    color: orange;
}

html

<h1 id="ID">实验文字</h1>

原则上id是唯一的。id重复会报错，但可以编译运行。
※：id重复会干扰JS获取id。

CSS特性

摘要

覆盖原则：

在元素冲突时，后面的元素会覆盖前面的元素。
因为link通常写在前面，所以经常体现为：
行内导入>内部导入>外部导入

选择器优先级：

更精确的选择器会覆盖更粗糙的选择器，即
id选择器>类选择器>元素选择器
选择器优先级在覆盖原则之上

特例：

行内导入没有使用选择器，所以优先级最高；

!important是提权的元素，所以优先级更高。

详解

CSS就近原则&三大特性

标签介绍

< link>标签

<link rel="stylesheet" href="" hreflang="">

rel：当前文件与被链接文件的关系
href：被链接文件的位置的位置
hreflang：规定网站语言

注解

语言代码参考手册

地址一地址二

多语言网站优化和hreflang标签

地址一地址二

Dwi yn

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记1——导入、选择器、CSS优先级

语法讲解CSS的三种导入方式行内导入<h1 style="color: red">实验文字</h1>内部导入<head> <style> h1{ color: yellow; } </style></head><body><h1>实验文字</h1></body>外部导入css文件h1{
复制链接

扫一扫

专栏目录