HTML5+CSS3学习笔记（二）
本系列更多文章，可以查看专栏 HTML+CSS学习笔记
文章目录
一、网页的样式（CSS）
CSS-层叠样式表，用于设置网页中元素的样式。主要分为：内联样式、内部样式表和外部样式表。
| CSS位置 | 用法 | 优先级 |
|---|---|---|
| 内联样式 | 添加至标签的开始部分中，使用style=“”，在引号中定义样式 | 高 |
| 内部样式表 | 在head标签中，添加style标签，在标签中定义样式 | 中 |
| 外部样式表 | 在外部以.css为后缀的文件中定义样式，通过在head标签中添加link标签来引入外部css文件 | 低 |
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS基础</title>
<!-- 第三种方式：外部样式表，添加样式 -->
<link rel="stylesheet" href="./style2-1.css">
<!-- 第二种方式：内部样式表，添加样式 -->
<style>
span{
font-size: 40px;
color:green;
}
</style>
</head>
<body>
<!-- 第一种方式：内联样式，添加样式 -->
<p style="font-size:20px;color:red;">内联样式效果</p>
<span>内部样式表效果</span>
<h1>这里是外部样式表效果</h1>
</body>
</html>
css的注释格式为 /*注释部分*/
/* 此文件名称为"style.css",位于与上述html文件同一级目录下 */
h1 {
color: blue;
}
展示效果如下图所示：
二、简单/常用选择器
在{}内部定义样式，{}前面的格式决定使用的选择器
| 简单选择器 | 格式 | 优先级 | 示例 |
|---|---|---|---|
| 通配选择器 | *{} | 0 | *{} |
| 元素选择器 | 元素名{} | 1 | p{}，h1{}等 |
| 类选择器 | .类名{} | 2 | .class1{}，.class2{}等 |
| id选择器 | #id名{} | 3 | #id1{}，#id2{}等 |
简单选择器优先级（从高到低）：id选择器>类选择器>元素（类型）选择器>通配选择器
关于颜色单位的扩展知识
- 固定名称：green、yellow、red、blue……
- HEX值：#000000，两个一组，共三组十六进制数，分别表示红绿蓝，每组取值范围为00-ff
示例：当每组两位均相同时，可以简化成三位，如#bbffaa与#bfa表示同一种颜色
- RGB值：rgb(红色取值,绿色取值,蓝色取值)，取值范围在[0,255]
示例：红色rgb（255,0,0），黑色rgb（0,0,0），白色rgb（255,255,255）等
- RGBA值：rgba(红色取值,绿色取值,蓝色取值,透明度)，透明度取值[0,1]
示例：半透明黑色rgba（0,0,0,0.5)，黑色rgb（0,0,0,1)，完全透明黑色rgb（0,0,0,0)等
- HSL值：hsl(色相,饱和度,亮度)
- HSLA值：hsla(色相,饱和度,亮度,透明度)
简单选择器练习代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单/常用选择器</title>
<style>
/* 1.通配选择器：网页中所有元素 */
* {
color: rgba(0, 0, 0, 0.3);
}
/*
2.元素（类型）选择器：根据名称
- 定义样式时使用标签名{}的格式，例如p{},div{},h1{}等
*/
p {
color: black;
background-color: #bfa;
}
/*
3.类选择器：根据类
- 定义样式时使用.类名{}的格式，例如.yellow{}等
*/
.yellow {
color: hsl(267, 30%, 60%);
background-color: yellow;
}
/*
4.id选择器：根据id
- 定义样式时使用标签名{}的格式，例如p{},div{},h1{}等
*/
#red {
color: #fff;
background-color: red;
}
</style>
</head>
<body>
<h1>css基础</h1>
<p>简单选择器</p>
<p class="yellow">类选择器</p>
<p id="red" class="yellow">id选择器</p>
</body>
</html>
展示效果如下图所示[仅使用通配选择器时]：
展示效果如下图所示[使用通配选择器和元素选择器时]：
展示效果如下图所示[使用通配选择器、元素选择器和类选择器时]：
展示效果如下图所示[使用通配选择器、元素选择器、类选择器和id选择器时]：
三、复合选择器
- 交集选择器
- 并集选择器 / 选择器分组
- 关系选择器
- 属性选择器
- 伪类选择器
1. 交集选择器
交集选择器：
- 作用： 选中同时符合多个条件的元素
- 格式：
选择器1选择器2……选择器n{}- 注： 若存在元素选择器，则必须作为选择器1
交集选择器练习代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<style>
/* red类选择器*/
.red{
background-color:red;
}
/* 交集选择器1【元素+类】 */
div.red{
background-color:pink;
}
/* 交集选择器2【类+类】 */
.red.blue{
background-color:purple;
}
</style>
</head>
<body>
<div class="red">我是red类的div</div>
<p class="red">我是red类的p</p>
<div class="blue red">我是blue类也是red类的div</div>
</body>
</html>
1.使用red类选择器，将所有red类的内容的背景颜色变成红色，字体大小变成50px
2.之后，使用交集选择器1【元素+类】，将所有red类的div标签的内容的背景颜色变成粉色
3.之后，使用交集选择器2【类+类】，将所有既是red类也是blue类的内容的背景颜色变成紫色
2. 选择器分组 / 并集选择器
并集选择器 / 选择器分组
- 作用： 同时选择多个选择器的元素
- 格式：
选择器1,选择器2,……,选择器n{}
并集选择器练习代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>并集选择器</title>
<style>
/* red类选择器 */
.red{
background-color:red;
font-size: 50px;
}
/* 并集选择器 */
.blue,div.red{
font-size: 10px;
}
</style>
</head>
<body>
<div class="red">我是red类的div</div>
<p class="red">我是red类的p</p>
<div class="blue red">我是blue类也是red类的div</div>
</body>
</html>
1.使用red类选择器，将所有red类的内容的背景颜色变成红色，字体大小变成50px
2.之后，使用并集选择器将所有是blue类或者是red类的div标签的内容字体大小变成10px
3. 关系选择器
父元素、子元素、兄弟元素、祖先元素和后代元素需自行了解。
一般子元素、后代元素都会继承父元素或祖先元素的样式，除了背景等，可以查阅文档了解更多。
(1)子元素选择器【选择子元素】
- 作用：选择某一元素的子元素，某一元素可为其他选择器指定
- 格式：
父元素 > 子元素
(2)后代选择器【选择后代元素】
- 作用：选择某一元素的后代元素
- 格式：
祖先元素 空格 后代元素
(3)兄弟选择器【选择相邻的后第一个兄弟元素】
- 作用：选择某一元素的后面的相邻的兄弟元素
- 格式：
相邻兄弟元素的第一个元素 + 相邻兄弟元素的第二个元素
(4)兄弟选择器【选择相邻的后所有兄弟元素】
- 作用：选择某一元素的后面所有的兄弟元素
- 格式：
兄弟元素的第一个 ~ 后面的兄弟元素
以上格式中的>，+，空格，~的左右两边均可有空格
关于常用单位的扩展知识
| 单位 | 定义 | 特点 |
|---|---|---|
| px | 像素相对于显示器屏幕分辨率而言的，1px即屏幕分辨率最小分割 | 若适应大屏幕，可能就在小屏幕上不适配 |
| % | 相对于父元素的单位 | 可在width、height、font-size等属性中使用 |
| em | 相对于当前元素1font-size的单位 | 1em=1font-size，默认的font-size为16px |
| rem | 相对于根元素的单位 | 1rem等于html元素的font-size大小 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关系选择器</title>
<style>
/* id选择器 */
#ancestor{
background-color: #bfa;
width:1000px;
height:500px;
}
/* 子元素选择器 */
#ancestor > .father{
font-size:16px;
background-color: skyblue;
width:50%;
height:50%;
}
/* 后代选择器 */
#ancestor span{
font-size:2em;
background-color:green;
}
/* 兄弟选择器1 */
.father + p{
background-color: gray;
}
/* 兄弟选择器2 */
.father ~ p{
color:red;
}
</style>
</head>
<body>
<div id="ancestor">
我是祖先元素，背景是黑色的
<p>我是父元素前面的兄弟元素</p>
<p class="father">
我是ancestor的子元素，我是father类<br>
<span>这里是father类元素的子元素，也是ancestor元素的后代元素</span>
</p>
<p>我是father类元素后面的第一个兄弟元素</p>
<p>我是father类元素后面的第二个兄弟元素</p>
<p>我是father类元素后面的第三个兄弟元素</p>
<span>testtesttest</span>
</div>
<p class="father">我是ancestor外的father类</p>
</body>
</html>
展示效果如下图所示[仅使用id选择器时]：
展示效果如下图所示[使用id选择器和子元素选择器时]：
展示效果如下图所示[使用id选择器、子元素选择器、后代选择器时]：
展示效果如下图所示[使用id选择器、子元素选择器、后代选择器、兄弟选择器1时]：
展示效果如下图所示[使用上述所有选择器时]：
4. 属性选择器
属性选择器
- [属性名] 选择含有指定属性的元素
- [属性名=属性值] 选择含有指定属性和属性值的元素
- [属性名^=属性值] 选择指定属性名的属性值以指定值开头的元素
- [属性名$=属性值] 选择指定属性名的属性值以指定值结尾的元素
- [属性名*=属性值] 选择指定属性名的属性值包含指定值的元素
属性选择器练习代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/* 属性选择器1:指定属性名*/
p[title] {
font-size: 30px;
color: orange;
}
/* 属性选择器2:指定属性名的属性值*/
p[title='abc'] {
color: blue;
}
/* 属性选择器3:指定属性值开头*/
p[title^='abc'] {
background-color: orchid;
}
/* 属性选择器4:指定属性值结尾*/
p[title$='abc'] {
font-weight: bold;
}
</style>
</head>
<body>
<p title="abc">值为abc</p>
<p title="abchello">值为abc开头</p>
<p title="goodbyeabc">值为abc结尾</p>
<p title="TabcT">值中间为abc</p>
<p>不含title属性</p>
</body>
</html>
展示效果如下图所示：
5. 伪类选择器&伪元素
5.1 伪类选择器
此部分笔记于2022.08.06进行更新，之前理解有误，进一步了解可以参考 HTML5+CSS3学习笔记（八）伪类选择器first-child、first-of-type、nth-child(n)
伪类选择器
- 用来描述一个元素的特殊状态，不是实际的类
- 格式:一般以
:开头
以下结合li标签，对伪类选择器进行解释
li:first-child选中所有元素的第一个子元素，且第一个子元素必须为li标签li:first-of-type选中所有元素的第一个li子元素（实际上的第一个子元素是什么无所谓）
li:last-child选中所有元素的最后一个子元素，且最后一个子元素必须为li标签li:last-of-type选中所有元素的最后一个li子元素（实际上的最后一个子元素是什么无所谓）
p:nth-child(n)n可为关键词、数字或表达式，具体可以参照上方博客p:nth-of-type(n)n可为关键词、数字或表达式，具体可以参照上方博客
伪类选择器练习代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/* 伪类选择器练习1 */
ol li:first-child {
color: red;
}
/* 伪类选择器2 */
ol li:first-of-type {
color: green;
}
/* 伪类选择器3 */
ul>li:nth-child(3) {
color: blue;
}
/* 伪类选择器4 */
ul>li:nth-of-type(3) {
color: pink;
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<span>ul列表</span>
<li>First-第1项列表项</li>
<li>Second-第2项列表项</li>
<div>
<ol>
ol列表<br>
<span>span是ol第一个子元素</span>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ol>
</div>
<li>Third-第3项列表项</li>
<li>Fourth-第4项列表项</li>
</ul>
</body>
</html>
展示代码如下图所示：
- 由于ul列表的第一个子元素不是li，而是span，所以伪类选择器1（first-child）设置第一个li颜色变为红色，无法生效。
- ol列表虽然第一个元素不是li，但伪类选择器2（first-of-type）设置第一个li颜色变为绿色，可以生效。
- 伪类选择器3（nth-child(3)），设置ul列表中第三个子元素，且第三个元素是li标签，则设置li颜色变为蓝色，可以生效。
- 伪类选择器4（nth-of-type(2），设置ul列表中第三个li子元素，则设置li颜色变为粉色，可以生效。
部分其它伪类选择器：【 以下不仅仅用于超链接a标签】
注：1. a:link必须在第一个，因为表示未激活时的样式，不能被其它状态的样式覆盖
2. a:hover必须在a:active之前，因为悬停状态出现后，才可以进行点击，此顺序是为了防止点击的状态覆盖了悬停状态样式
:link未被访问的链接的样式:visited已经访问过的链接的样式:hover鼠标悬停在链接上方的样式:active链接被点击状态的样式
5.2 伪元素
伪元素
- 用来描述一个元素的特殊状态，不是实际的类
- 格式: 一般以
::开头::before在每个元素之前插入内容，不会被选中::after在每个元素之后插入内容，不会被选中::first-letter匹配每个指定元素中的内容的首字母::first-line匹配每个指定元素中的内容的首行
四、选择器优先级
| 类型 | 优先级 | 优先级数值 |
|---|---|---|
| 子元素的继承样式 | 无优先级 | 不参与计算 |
| 通配选择器 | 0 | 0 |
| 元素选择器 | 1 | 1 |
| 伪元素选择器 | 1 | 1 |
| 类选择器 | 2 | 10 |
| 属性选择器 | 2 | 10 |
| 伪类选择器 | 2 | 10 |
| ID选择器 | 3 | 100 |
| 内联样式 | 4 | 1000 |
| !import | 5 | 顶级优先级 |
- 优先级数字越大，级别越高；优先级数值越大，优先级越高。
- 当样式发生冲突时，应用哪个样式由选择器优先级决定。
- 分组选择器比较优先级时，需要将所有优先级数值进行相加计算，但是优先级数值总和始终不会超过下一级优先级数值。
- 如果优先级计算后相同，此时优先级使用位置靠下的样式（覆盖）。
结尾
如有错误，欢迎评论区指正。
更多其它知识可查询在线文档：[w3school在线教程链接](https://www.w3school.com.cn/)
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
