层叠样式表(Cascading Style Sheets)。
CSS能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果。能够做到页面的样式和结构分离。
选择器 + {一条/N条声明}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
/* 设置字体颜色 */
color: red;
/* 设置字体大小 */
font-size: 30px;
}
</style>
</head>
<body>
<p>One Piece</p>
</body>
</html>
展示结果:
注意:
写在 style 标签中。嵌入到 html 内部。理论上来说style放到html的哪里都行。但是一般都是放到 head 标签中。
优点:这样做能够让样式和页面结构分离。
缺点:分离的还不够彻底,尤其是CSS内容多的时候。
前面写的代码主要都是使用了这种方式。实际开发中不常用。
通过style属性,来指定某个标签的样式。
只适合于写简单样式。只针对某个标签生效。
缺点:不能写太复杂的样式。
这种写法优先级较高,会覆盖其他的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div style="color:skyblue">One Piece是真实存在的!!!</div>
</body>
</html>
展示结果:
可以看到,red颜色被覆盖了。
实际开发中最常用的方式。
<link rel="stylesheet" href="[CSS文件路径]">
创建test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>One Piece是真实存在的!!!</div>
</body>
</html>
创建style.css
div {
color: skyblue;
}
展示结果:
注意:不要忘记link标签调用CSS,否则不生效。
优点:样式和结构彻底分离了。
缺点:受到浏览器缓存影响,修改之后不一定立刻生效。
关于缓存:
这是计算机中一种常见的提升性能的技术手段。
网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取的。如果频繁访问该网站,那么这些外部资源就没必要反复从服务器获取。就可以使用缓存先存起来(就是存在本地磁盘上了)。从而提高访问效率。
可以通过 ctrl + F5 强制刷新页面,强制浏览器重新获取css文件。
1. 紧凑风格
p { color: red; font-size: 30px;}
2. 展开风格
p {
color: red;
font-size: 30px;
}
样式大小写
虽然CSS不区分大小写,我们开发时统一使用小写字母。
空格规范
选中页面中指定的标签元素。
要先选中元素,才能设置元素的属性。就好比SC2,War3这样的游戏,需要先选中单位,再指挥该单位行动。
以下内容只是CSS2标准中支持的选择器,在CSS3中还做出了一些补充。
1. 基础选择器:单个选择器构成的。
2. 复合选择器:把多种基础选择器综合运用起来。
特点:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: red;
}
div {
color: green;
}
</style>
</head>
<body>
<p>王路飞</p>
<p>王路飞</p>
<p>王路飞</p>
<div>刘索隆</div>
<div>刘索隆</div>
<div>刘索隆</div>
</body>
</html>
展示结果:
特点:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.blue {
color: skyblue;
}
</style>
</head>
<body>
<div class="blue">王路飞</div>
<div>王路飞</div>
</body>
</html>
展示结果:
语法细节:
代码示例:使用多个类名。
注意:
一个标签可以同时使用多个类名。这样做可以把相同的属性提取出来,达到简化代码的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 150px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div>
</body>
</html>
展示结果:
和类选择器类似。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#shh {
color: pink;
}
</style>
</head>
<body>
<div id="shh">沈哈哈</div>
</body>
</html>
展示结果:
类比:
姓名是类选择器,可以重复。
身份证号码是id选择器,是唯一的。
使用*的定义,选取所有的标签。
* {
color: red;
}
页面的所有内容都会被改成红色。不需要被页面结构调用。
选择器 | 作用 | 特点 |
---|---|---|
标签选择器 | 能选出所有相同标签 | 不能差异化选择 |
类选择器 | 能选出一个或多个标签 | 根据需求选择,最灵活,最常用 |
id选择器 | 能选出一个标签 | 同一个id在一个HTML中只能出现一次 |
通配符选择器 | 选择所有标签 | 特殊情况下使用 |
又叫包含选择器。选择某个父元素中的某个子元素。
元素1 元素2 {样式声明}
代码示例:把ol中的li修改颜色,不影响ul。
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li>王路飞</li>
<li>王路飞</li>
<li>王路飞</li>
</ul>
<ol>
<li>刘索隆</li>
<li>刘索隆</li>
<li>刘索隆</li>
</ol>
</body>
</html>
style.css
ol li {
color: red;
}
展示结果:
代码示例:元素2不一定非是儿子,也可以是孙子。
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li>王路飞</li>
<li>刘索隆</li>
<li>
<a href="#">山治君</a>
</li>
</ul>
</body>
</html>
style.css
ul li a {
color: yellow;
}
/* 或者 */
ul a {
color: yellow;
}
展示结果:
代码示例:可以是任意基础选择器的组合。(包括类选择器,id选择器)
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ol class="one">
<li>王路飞</li>
<li>山治君</li>
<li>
<a href="#">刘索隆</a>
</li>
<li>
<a href="#">刘索隆</a>
</li>
<li>
<a href="#">刘索隆</a>
</li>
</ol>
</body>
</html>
style.css
.one li a {
color: green;
}
展示结果:
和后代选择器类似,但是只能选择子标签。
元素1>元素2 { 样式声明 }
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="two">
<a href="#">王路飞</a>
<p><a href="#">刘索隆</a></p>
</div>
</body>
</html>
后代选择器的写法,会把“王路飞”和“刘索隆”都选中。
style.css
.two a {
color: red;
}
展示结果:
子选择器的写法,只选“王路飞”。
style.css
.two>a {
color: red;
}
展示结果:
用于选择多组标签(集体声明)。
元素1, 元素2 { 样式声明 }
代码示例:
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>王路飞</div>
<h3>刘索隆</h3>
<ul>
<li>山治君</li>
<li>山治君</li>
</ul>
</body>
</html>
1. 把“王路飞”和“刘索隆”颜色改成红色。
style.css
div, h3 {
color: red;
}
展示结果:
2. 把“山治君”一起改成红色。
style.css
div,
h3,
ul>li {
color: red;
}
展示结果:
1. 链接伪类选择器
示例:
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#">王路飞</a>
</body>
</html>
style.css
a:link {
color: black;
/* 去掉 a 标签的下划线 */
text-decoration: none;
}
a:visited {
color: green;
}
a:hover {
color: red;
}
a:active {
color: skyblue;
}
如何让一个已经被访问过的链接恢复成未访问的状态?
清空浏览器历史记录即可。ctrl + shift + delete
注意:
a {
color: black;
}
a:hover {
color: red;
}
2. :focuse伪类选择器
选取获取焦点的input表单元素。
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="three">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
</body>
</html>
style.css
.three>input:focus {
color: red;
}
展示结果:
此时被选中的表单字体就会变成红色。
选择器 | 作用 | 注意事项 |
---|---|---|
后代选择器 | 选择后代元素 | 可以是孙子元素 |
子选择器 | 选择子元素 | 只能选亲儿子,不能选孙子 |
并集选择器 | 选择相同样式的元素 | 更好的做到代码重用 |
链接伪类选择器 | 选择不同状态的链接 | 重点掌握a:hover的写法 |
:focuse伪类选择器 | 选择被选中的元素 | 重点掌握input:focus的写法 |
互三啦!!!