目录
- ✨CSS的使用:
- 行内样式
- 内部样式
- 外部样式
- ✨CSS基本选择器:
- id选择器
- class选择器
- 标签选择器
- ✨优先级:
- 选择器的优先级
- 样式表的优先级
✨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>
</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>
运行结果:
✨优先级:
选择器的优先级
ID选择器 > 类选择器 > 标签选择器
当多个选择器作用在同一个标签上的时候,如果属性冲突,看优先级;如果不冲突,样式叠加生效。
样式表的优先级
行内样式 > 内部样式 >外部样式
同样,三个样式表中都有内容作用在同一个html标签的时候,如果属性冲突,看优先级;如果不冲突,样式叠加生效。