文章目录
一、什么是CSS
CSS全称为Cascading style sheets,叫做层叠样式表。是一种用来为结构化文档(html文档、xml文档)添加样式(字体、颜色、间距等)的计算机语言。
二、什么是选择器?
选择器描述了要选中页面中的哪个标签,{ }里面的样式就是针对那些被选中的标签而生效。
三、基础选择器
3.1、标签选择器
标签选择器是写在style标签里的。格式是:标签名+{}。标签名是想要针对哪个标签进行样式改变,就写哪个标签名(html里含有的标签,可以是div标签、a标签、p标签…)。{ }里面可以写各种样式改变,例如字体大小、粗细、文字颜色、背景颜色…
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 标签选择器 */
div{
color: red;
font-size: 50px;
}
p{
color: green;
font-size: 100px;
}
</style>
<body>
<div>
JAVA
JAVA
JAVA
</div>
<div>
黑小虎
黑小虎
黑小虎
</div>
<p>
星黛露
星黛露
星黛露
</p>
<p>
玲娜贝儿
玲娜贝儿
玲娜贝儿
</p>
</body>
</html>
上述的例子中,有两个标签选择器,分别是
1、
div{
color: red;
font-size: 50px;
}
2、
p{
color: green;
font-size: 100px;
}
这两个标签分别对p标签的文字颜色、文字大小,div标签的文字颜色、文字大小做出改变。
上述html代码的网页效果: 可以看到对应的元素都已经被修改了样式,同时可以知道,标签选择器对对应的所有的便签都起作用。例如上述html代码中含有几个div标签 、p标签,则它们对应的代码都会被div、p 标签选择器里的代码改变样式。
3.2、类选择器
类选择器能够让相同的标签展示不一样的样式效果,并不像标签选择器一样会对对应的所有标签应用相同的样式效果。
类选择器的结构:.+选择器名字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择器中的 类选择器演示</title>
</head>
<style>
/* 类选择器,选择特定的标签来进行属性的设置,独特性从类选择器这里展示*/
.one{
color: blueviolet;
font-size: 100px;
}
.Two{
background-color: blue;
color: black;
font-size: 20px;
}
</style>
<body>
<div class="one">你好</div>
<div class="Two">再见</div>
<div>早上好</div>
</body>
</html>
上述的.one 和.Two都是类选择器,他们的应用方式是:需要对哪个标签生效,就使用class属性引入类选择器的英文名字(切记此处的.不需要写,只需要写英文名字),此时这个类选择器只会对引用它的标签生效,不会对其他跟引用类选择器一样的标签生效。
上述html代码的网页效果:
3.3、id选择器
每个标签都有一个id属性,id的值应该在页面中是唯一的,使用id选择器来选中到对应的标签上。
id选择器的格式:#+选择器名字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择器中的id选择器演示</title>
</head>
<style>
/* CSS选择器中的id选择器 */
#div-Id{
color: blue;
font-size: 60px;
}
#p-id{
color: aqua;
font-size: 100px;
}
</style>
<!-- html中每个元素都有一个id -->
<body>
<div id="div-Id">
咬人猫
咬人猫
咬人猫
</div>
<p id = "p-id">
水冰月
水冰月
水冰月
</p>
</body>
</html>
上述的#div-Id和#p-id都是id选择器,他们的应用方式是:需要对哪个标签生效时,就通过标签的id属性引入id选择器即可。
上述html代码的网页效果:
3.4、通配符选择器
通配符选择器是能够选中页面中的所有元素,可以让页面所有元素都被选中,通常用于干掉浏览器的默认样式:文本、默认颜色,字体大小、默认的段落间距…
通配符选择器的格式是:*+{ }
四、复合选择器
复合选择器是把多个基础选择器给组合起来了。
4.1、后代选择器
后代选择器是指:在指定的元素里面去筛选后代元素。
<ul>
<li> </li>
</ul>
ul 是 li 的父标签,li 是 ul 的子标签,所以 li 是 ul 的后代。
<ul>
<li>
<div> </div>
</li>
</ul>
ul 是 li 的父标签,li 是 ul 的子标签,li 是 ul 的父标签,div 是 li 的 子标签,因此 div 也是 ul 的子标签(孙子标签)。
后代选择器的格式:标签1 标签2 (标签n){ }
标签1 标签2 标签n 可以是标签选择器,也可以是类选择器,也可以是id选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器中的后代选择器演示</title>
</head>
<!-- 后代选择器 -->
<style>
/* 先找到 ul 再找到ul里面所有的li 将li标签样式全部改变*/
ul li {
color: red;
}
ol li{
color: blueviolet;
font-size: larger;
}
/* 搭配类选择器使用 ,这样写也是可以的!!*/
.one li{
color: purple;
font-size: 90px;
background-color: azure;
}
/* 或者 .one div*/
.one li div{
color: green;
}
</style>
<body>
<ul>
<li>咬人猫</li>
<li>咬人猫</li>
<li>咬人猫</li>
</ul>
<ol>
<li>咬人猫</li>
<li>咬人猫</li>
<li>咬人猫</li>
</ol>
<ul class="one">
<li>
<div>hello world!</div>
</li>
<li>花花</li>
<li>花花</li>
</ul>
</body>
</html>
上述html代码中含有四个后代标签选择器:分别是ul li 、ol li 、.one li 、.one li div
上述的后代选择器ul li 是针对
- 咬人猫
- 咬人猫
- 咬人猫
后代选择器ol li 是针对
- 咬人猫
- 咬人猫
- 咬人猫
后代选择器 .one li 是针对
-
hello world!
- 花花
- 花花
后代选择器.one li div 是针对
-
hello world!
- 花花
- 花花
上述html代码中的网页效果:
4.2、子选择器
子选择器和后代选择器类似,只是子选择器无法选择孙子标签以及孙子之后的标签。
以下是一个子选择器:
<style>
ul > li{
color:red
}
</style>
子选择器则是使用 > 表示这是子元素的关系。上述代码就只是在 ul 的子元素范围内,搜索 li ,不会搜索 li 里面的孙子元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器中的子选择器</title>
<!-- 只能选择子标签,无法选择子孙标签或者 孙子孙子辈标签 -->
</head>
<style>
ul>li{
color: rebeccapurple;
font-size: 80px;
}
ul>div{
color: aquamarine;
font-size: 100px;
}
</style>
<body>
<ul>
<li>
<div>咬人猫</div>
</li>
<li>咬人猫</li>
<li>咬人猫</li>
</ul>
</body>
</html>
上述html代码中,有两个子选择器,分别是ul > li,ul > div 。这两个子选择器只有 ul > li 该选择器会生效,因为 li 是 ul 的子类,ul > div 该选择器不会生效,因为 div 是 ul 的孙子辈。
上述html代码的网页效果:
4.3、并集选择器
并集选择器是:针对多个不同的选择器,应用相同的样式属性。
并集选择器格式:标签1,标签2(标签之间通过,分隔开),标签1,标签2…可以是标签选择器,也可以是id选择器,也可以是类选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS复合选择器中的并集选择器</title>
</head>
<!-- 并集选择器 -->
<style>
div,p{
color: brown;
font-size: 80px;
}
</style>
<body>
<div>咬人猫</div>
<div>咬人猫</div>
<div>咬人猫</div>
<p>水冰月</p>
<p>水冰月</p>
<p>水冰月</p>
</body>
</html>
上述html代码的网页效果:
4.4、伪类选择器
伪类选择器,是选中标签的不同状态。重点介绍两个基础伪类选择器:1、标签名:hover 鼠标放上去,标签状态发生改变。
2、标签名:active 点击后,标签状态发生改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
color: aqua;
font-size: 90px;
}
/* 伪类选择器 */
div:hover{
/* 鼠标一放上去就变化 */
color: red;
font-size: 20px;
}
/* 伪类选择器 */
div:active{
/* 鼠标一按就变化 */
color: blueviolet;
font-size: 200px;
}
button{
border: none;
background-color: gray;
color: white;
width: 100px;
height: 80px;
}
button:hover{
background-color: red;
}
</style>
<body>
<div>咬人猫</div>
<button type="button">这是一个按钮</button>
</body>
</html>
上述html代码的网页效果:
原始状态:
鼠标停放在button标签上时,button标签发生变化:按钮变成红色。
五、前端资料查询工具
这三个网页都是帮助我们学习前端或者其他一些编程技术的网站,在上面可以学习到许多知识。
5.1、mdn
网址:https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web
5.2、w3school
网址:https://www.w3school.com.cn/index.html
5.3、菜鸟教程
网址:https://www.runoob.com/