HTML_CSS的基本选择器的使用及其作用范围和优先级-编程知识

HTML_CSS的基本选择器的使用及其作用范围和优先级

✨CSS的使用：

根据定义CSS的位置不同，分为行内样式、内部样式和外部样式

行内样式

也称为内联样式
直接在标签中编写样式，通过使用标签内部的style属性；

一般在测试的时候使用居多：
语法：
<标签 style="样式1：值1;样式2：值2;....样式N：值N;">hello my css</标签>
案例：
<div style="color: red; width: 100px; height: 100px;background-color: #acacac" >第一个div</div>

运行结果：

在这里插入图片描述

弊端：只能对当前的标签生效，没有做到内容和样式相分离，耦合度太高。

内部样式

定义在head标签内，通过style标签，该标签内容就是CSS代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>div{color: red;}
</style>
<body>
<div>第一个div</div>
</body>
</html>

外部样式

1、提前定义css资源文件
2、在head标签内，定义link标签引入外部样式文件。

try.css文件定义在与html页面同级的css文件夹中例如：
在这里插入图片描述
写入：

div {
color: red;
}

html文件中写入：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="demo1.css">
</head><body>
<div>第一个div</div>
</body>
</html>

同样的样式作用在同一个标签身上：就近原则；不同样式作用在同一个标签身上:叠加生效。

✨CSS基本选择器：

筛选具有相似特征的元素

id选择器

选择具有相同id属性值的元素，建议html页面中的id值唯一

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!-- id选择器 --><style>#myDiv{color: aqua;}</style></head><body><div id="myDiv">文字1</div><div id="myDiv">文字2</div></body>
</html>

class选择器

选择具有相同的class属性值的元素

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!-- class选择器 --><style>.myClass{color: #800080;}</style></head><body><div class="myClass">文字1</div><div class="myClass">文字2</div></body>
</html>

标签选择器

选择具有相同标签名称的元素。

定义选择器语法：标签名称{}；

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!-- 标签选择器 --><style>p{color: chartreuse;}</style></head><body><p>文字1</p><p>文字2</p></body>
</html>