css选择器介绍
01 css概念介绍
- 用于更改标签的视觉效果
02 css格式
- 选择器 {属性1：值1；属性2：值2}
03 三种样式
1.内联样式
-
直接写在标签的
style属性中。- 优点：简单明显
- 缺点：无法重复使用代码
<img src="image-20231212183411453.png" alt="图片加载失败">
<div style="color: blue">芙芙真可爱</div>
- 效果图
2.内部样式
-
在html文件的
<head> </head>标签域中，添加<style> <style>标签，将css代码书写其中。 -
优点：可以通过选择器重复使用代码
-
缺点：选择器的使用较为繁琐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fufu{
color: gold;
}
</style>
</head>
<body>
<img src="image-20231212183411453.png" alt="图片加载失败">
<div style="color: blue">芙芙真可爱</div>
<div class="fufu">芙芙爱吃通心粉</div>
</body>
</html>
- 效果图
3.外联样式
-
在html文件的
<head> </head>标签域中，通过<link>标签，引入一个.css文件，该文件的书写格式和【内部样式】相同。 -
可以通过选择器重复使用代码
- 优点：当项目中css属性过多时减少单个文件大小
-
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="fu.css">
<style>
.fufu{
color: gold;
}
</style>
</head>
<body>
<img src="image-20231212183411453.png" alt="图片加载失败">
<div style="color: blue">芙芙真可爱</div>
<div class="fufu">芙芙爱吃通心粉</div>
<div class="fu">水神芙宁娜</div>
</body>
</html>}
4.样式优先级介绍
- 内联 > 内部 / 外部
- 内联优先级最大
- 内部和外部优先级取决于css代码上下文顺序，靠后的大，会覆盖前一个选择器的相同属性。
04 三种选择器介绍
1.元素选择器
匹配到标签名相同的标签，更改样式。
语法：
- 标签：
<标签> </标签> - css：
标签名 { /* css代码 */ }
<style>
div{
color: royalblue;
}
span{
color: blue;
}
</style>
<body>
<div>水神</div>
<span>枫丹</span>
</body>
- 效果图
- 优点：同时设置所有同类型标签
- 缺点：无法单一设置，不常用
2.id 选择器
匹配到id名相同的标签，更改样式。
语法：
- 标签：
<标签 id="id名" > - css：
#id名 { /* css代码 */ }
注意：一个html文档中，不能出现两个同id的标签。
案例
<style>
#f1{
color: blue;
}
</style>
<body>
<div>
<h1 id="f1">水的国度</h1>
<h1 id="f1">枫丹</h1>
</div>
</body>
- 效果图
- 缺点：id值需要唯一，虽然现在不会有报错，但不符合规范
3.class 选择器
匹配到class名相同的标签，更改样式。
语法：
- 标签：
<标签 class="class名" > - css：
.class名 { /* css代码 */ }
<style>
.f2{
color: blue;
}
</style>
<body>
<div>
<h2 id="f1">审判庭</h1>
</div>
</body>
- 效果图
特点：
- 多个标签可以
class同名：一个选择器样式作用多个标签。 - 单个标签可以写多个
class值(空格隔开)：多个选择器样式，作用于一个标签，同属性设置会根据【css上下文顺序】覆盖。
