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/)