css 基础
- css 是什么?
css 是层叠样式表
功能:元素样式(元素长什么样)和元素布局(元素应该放在哪里) 元素样式的来源
1.浏览器默认样式(又叫用户代理样式)
|样式|定义|
|——-|——-|
|用户代理样式|浏览器默认样式|
|用户自定义样式|我们的编程目标|
权重 | 样式 | 代码 |
---|---|---|
3 | 行内样式 | style=”…”; |
2 | 内部样式/文档样式 | \<style> |
1 | 外部样式 | .css 文件 |
0 | 默认样式 | —- |
示例代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h2>hello word</h2>
</body>
</html>
style="";
- 样式来源除了与优先级有关系还与书写顺序有关
写到后面的会覆盖前面的
css 工作流:1.找到元素 2.设置样式
选择器
选择器{一个或多个样式声明}
| 序号 | 选择器/selector | 代码 | 说明: |
| —— | ———————- | ———————— | —————————————— |
| 1 | 标签选择器 |h1
{} | 直接使用标签进行选择 |
| 2 | 属性选择器 |[...],id,class
| 通过标签的属性进行选择 |
| 3 | 群组选择器 |h1,h2,h3
| 选择多个元素进行声明 |
| 4 | 通配选择器 |*
| 选中某个标签下所有的标签元素 |
| 5 | 上下文选择器 |*
| 选中某个标签下所有的标签元素 |1.标签选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<div>
<h1>hello word</h1>
</div>
</body>
</html>
2.属性选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
h1.h1{
color: green;
}
h1 {
color: red;
}
</style>
</head>
<body>
<div>
<h1>hello word</h1>
<h1 class="h1">hello word</h2>
</div>
</body>
</html>
3.群组选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
h1.h1,h1{
color: green;
}
/* h1 {
color: red;
} */
</style>
</head>
<body>
<div>
<h1>hello word</h1>
<h1 class="h1">hello word</h2>
</div>
</body>
</html>
4.通配选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html body div * {
color: green;
}
/* h1.h1, */
/* h1 {
color: red;
} */
</style>
</head>
<body>
<table>
<div>
<h1>hello word</h1>
<h1 class="h1">hello word</h2>
</div>
</table>
</body>
</html>
5.上下文选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.list .item.one + * {
border: 1px solid #000;
}
</style>
</head>
<body>
<ul class="list">
<li class="item">item1</li>
<li class="item">item2</li>
<li class="item">
item3
<ul class="list one">
<li class="item one">item3-1</li>
<li class="item">item3-2</li>
<li class="item">item3-3</li>
</ul>
</li>
<li class="item">item4</li>
<li class="item">item5</li>
<li class="item">item6</li>
<li class="item">item7</li>
<li class="item">item8</li>
</ul>
</body>
</html>
- 继承
inherit
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.div {
width: 100px;
height: 50px;
border: 1px solid #000;
color: red;
}
.p {
color: green;
color: inherit;
}
</style>
</head>
<body>
<div class="div">
<p class="p">tag p</p>
</div>
</body>
</html>
选择器的权重
- 权重分析
两个 p 标签权重都是 0,0,1
写在后面的样式生效,如果我们想要让写在前面的 p 标签蓝色生效,就需要提权
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p {
color: blue;
}
p {
color: red;
width: 100px;
height: 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<p>选择器的权重</p>
</div>
</body>
</html>
这里我们在\<style>里把写在上方的 p 标签的样式提权,可以这么做
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 权重:0,0,4 */
html body div p {
color: blue;
}
/* 权重:0,0,3 */
body div p {
color: blueviolet;
}
/* 权重:0,0,2 */
div p {
color: burlywood;
}
/* 权重:0,0,1 */
p {
color: red;
width: 100px;
height: 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<p>选择器的权重</p>
</div>
</body>
</html>
这里我们可以看出这四种写法权重都不同,也就代表着每个 tag 的权重都为 1,权重越高越优先
我们再来看另一种权重,类权重(class)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 权重(0,1,1) */
p.p {
color: blue;
}
/* 权重(0,1,0) */
.p {
color: green;
}
/* 权重:0,0,1 */
p {
color: red;
width: 100px;
height: 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<p class="p">选择器的权重</p>
</div>
</body>
</html>
这里我们可以看到同样都是选择的同一个 p 标签但是权重各不同,写在最上方的 p.p 权重最高
我们再来看一个 id 选择器的权重
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 权重(1,0,0) */
#p {
color: hotpink;
}
/* 权重(0,1,1) */
p.p {
color: blue;
}
/* 权重(0,1,0) */
.p {
color: green;
}
/* 权重:0,0,1 */
p {
color: red;
width: 100px;
height: 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<p class="p" id="p">选择器的权重</p>
</div>
</body>
</html>
这里使用了 id 选择器,权重直接变成了(1,0,0)
- 总结
选择器的权重和标签,id,class 的数量有关系权重越高优先级越大
序号 | 选择器 | 标识 | 权重 |
---|---|---|---|
1 | 标签 | tag | (0,0,1) |
2 | class | “.” | (0,1,0) |
3 | id | “”#”” | (1,0,0) |
为什么不推荐使用 Tag 和 id 做选择器?
不推荐使用 Tag 的原因
Tag 的数量优先,class 可以自定义,发挥的空间要远大于 Tag不推荐使用 id 的原因
经过选择器的分期我们就可以得出为什么不使用 id 作为选择器,就是因为 id 的权重太高!!!