1、CSS
(1)特点
- 相同属性会覆盖,不同属性会叠加
(2)引入方式
- 外部样式:在head标签中使用link标签引入css文件
- 内嵌样式:在head标签中使用style标签进行书写
- 行内样式:在对应标签中添加style属性
1)外部样式
- W3C School文档:https://www.w3school.com.cn/tags/tag_link.asp
常用属性 | 描述 |
---|---|
type属性 | 定义链接文档类型 |
rel属性 | 定义当前文档与链接文档的关系 |
href属性 | 定义链接文档位置 |
① css代码
- 单独创建一个.css结尾的文件,写入以下内容(文件名称自定义)
/* 给div标签添加黑色实线线条和粉色背景颜色 */
div {
border:1px solid black;
background-color:pink;
}
/* 给p标签内容变为蓝色 */
p {
color:blue;
}
/* 给strong标签内容变为绿色 */
strong {
color:green;
}
② html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link href="./css/link.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<p>这是一个p标签</p>
<strong>这是一个strong标签</strong>
</div>
</body>
</html>
③ 运行效果
2)内嵌样式
① 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<!-- css代码 -->
<style>
/* 给div标签添加黑色实线线条和粉色背景颜色 */
div {
border:1px solid black;
background-color:pink;
}
/* 给p标签内容变为蓝色 */
p {
color:blue;
}
/* 给strong标签内容变为绿色 */
strong {
color:green;
}
</style>
</head>
<body>
<div>
<p>这是一个p标签</p>
<strong>这是一个strong标签</strong>
</div>
</body>
</html>
② 运行效果
3)行内样式
① 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<div style="border:1px solid black;background-color:pink;">
<p style="color:blue;">这是一个p标签</p>
<strong style="color:green;">这是一个strong标签</strong>
</div>
</body>
</html>
② 运行效果
2、简单选择器
注意
- 这里为了方便展示代码,统一使用内嵌样式进行书写,实际开发工作中提倡优先使用外部样式
(1)元素选择器(标签选择器)
① 语法格式
标签名 {
属性1:属性值;
属性2:属性值;
}
② 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
div {
border:1px solid black;
background-color:pink;
}
p {
color:blue;
}
</style>
</head>
<body>
<div>
<p>这是一个p标签</p>
</div>
</body>
</html>
③ 运行效果
(2)class选择器(类选择器)
- 按照类型,可以重复使用,例如:p标签和strong标签文本颜色统一设置为蓝色,创建一个类选择器即可
① 语法格式:
.类名 {
属性1:属性值;
属性2:属性值;
}
② 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
.box {
border:1px solid black;
background-color:pink;
}
.content {
color:blue;
}
</style>
</head>
<body>
<div class="box">
<p class="content">这是一个p标签</p>
<strong class="content">这是一个strong标签</strong>
</div>
</body>
</html>
③ 运行效果
(3)ID选择器
- id选择器,值唯一,不能重复使用
① 语法格式
#id名 {
属性1:属性值;
属性2:属性值;
}
② 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
#box {
border:1px solid black;
background-color:pink;
}
#content {
color:blue;
}
</style>
</head>
<body>
<div id="box">
<p id="content">这是一个p标签</p>
</div>
</body>
</html>
③ 运行效果
(4)通配符选择器
- 选中所有标签,所有标签都会受到影响,不过权重最低
① 语法格式:
* {
属性1:属性值;
属性2:属性值;
}
② 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
*{
color:blue;
font-size:25px;
}
</style>
</head>
<body>
<div>
<p>这是一个p标签</p>
<strong>这是一个strong标签</strong>
</div>
</body>
</html>
③ 运行效果
(5)选择器权重
名称 | 权重值 |
---|---|
!important | infinity |
行内样式 | 1000 |
ID选择器 | 100 |
class选择器 | 10 |
元素选择器 | 1 |
通配符选择器 | 0 |
(1) 选择器命名规则(适用于自定义名称的选择器)
- 不能以数字和特殊字符开头;
- 要以英文开头(或者拼音);
- 见名知意;
- 使用驼峰命名法(小驼峰/大驼峰)
(2) 选择器优先级及权重
- 选择器优先级:!important > 行内样式 > ID选择器 > class选择器 > 元素选择器 > 通配符选择器
- 权重相同的时候,先看先后顺序
- 权重不同的时候,看权重大小
- 权重可以叠加
3、组合选择器
(1)后代选择器
- 选中父级标签中的所有指定的子级标签
① 语法格式
父级 子级 {
属性1:属性值;
属性2:属性值;
}
② 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
div strong{
color:blue;
}
</style>
</head>
<body>
<div>
<strong>这是第一个strong标签</strong>
<p>这是第一个<strong>p</strong>标签</p>
<span>这是一个<strong>span标签</strong></span>
<p>这是第二个p标签</p>
<strong>这是第二个strong标签</strong>
</div>
</body>
</html>
③ 运行效果
(2)子代选择器
- 只选中选择器的后一代,跨代不选中
① 语法格式:
父级>子级 {
属性1:属性值;
属性2:属性值;
}
② 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
div>strong{
color:blue;
}
div>strong{
color:green;
}
</style>
</head>
<body>
<div>
<strong>这是第一个strong标签</strong>
<p>这是第一个<strong>p</strong>标签</p>
<span>这是一个<strong>span标签</strong></span>
<p>这是第二个p标签</p>
<strong>这是第二个strong标签</strong>
</div>
</body>
</html>
③ 运行效果
(3)同级选择器
- 同级选中,只选择后面出现的元素,前面的不选中
① 语法格式:
元素~元素 {
属性1:属性值;
属性2:属性值;
}
② 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
strong~p{
color:blue;
}
</style>
</head>
<body>
<div>
<p>这是第一个p标签</p>
<p>这是第二个p标签</p>
<strong>这是第一个strong标签</strong>
<p>这是第三个p标签</p>
<span>这是一个span标签</span>
<p>这是第第四个p标签</p>
<span>这是一个span标签</span>
<p>这是第五个p标签</p>
</div>
</body>
</html>
③ 运行效果
(4)相邻选择器
- 选中同级的下一个元素
① 语法格式:
元素+元素 {
属性1:属性值;
属性2:属性值;
}
② 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
p+strong{
color:blue;
}
</style>
</head>
<body>
<div>
<p>这是第一个p标签</p>
<p>这是第二个p标签</p>
<strong>这是第一个strong标签</strong>
<strong>这是第二个strong标签</strong>
<strong>这是第三个strong标签</strong>
</div>
</body>
</html>
③ 运行效果
(5)交集选择器
- 例如:选中div中,既有p,也有.one类的元素
① 语法格式:
div span.one {
属性1:属性值;
属性2:属性值;
}
② 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
div p.one{
color:blue;
}
</style>
</head>
<body>
<div>
<p>这是第一个p标签</p>
<p class="one">这是第二个p标签</p>
<p>这是第三个p标签</p>
<p class="one">这是第四个p标签</p>
<p>这是第五个p标签</p>
</div>
</body>
</html>
③ 运行效果
(6)伪类选择器
- 当鼠标移入的时候,被选中的当前元素,设定为某种状态
① 语法格式:
选择器:hover {
属性1:属性值;
属性2:属性值;
}
② 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
div {
width:300px;
height:300px;
background-color:aqua;
}
div:hover{
background-color:pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
③ 运行效果
打开时颜色
鼠标移入时颜色
(7)伪元素选择器
伪元素特点:
- 能被CSS选中和修改,但是没有html结构
- 天生就是‘行内元素’,通过CSS选中并修改
- 特性和‘行内元素’一致
(1)before
- 在选中的元素前面添加内容
① 语法格式:
选择器:before {
content:"内容"
属性1:属性值;
属性2:属性值;
}
② 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
p:before{
content:"这是before添加的内容";
color:blue;
}
</style>
</head>
<body>
<p>这是一个p标签</p>
</body>
</html>
③ 运行效果
(2)after
- 在选中的元素后面添加内容
① 语法格式:
选择器:after {
content:"内容"
属性1:属性值;
属性2:属性值;
}
② 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
p:after{
content:"这是after添加的内容";
color:blue;
}
</style>
</head>
<body>
<p>这是一个p标签</p>
</body>
</html>
③ 运行效果
更多选择器学习,请参考官方文档
https://www.apiref.com/css-zh/index.htm