CSS
- 层叠样式表 Cascading Style Sheet
注释
- 单行注释
- 多行注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/
CSS的语法结构
- 选择器 {属性1: 属性值1}
CSS的三种使用方式
- 通过link标签映入外部CSS文件
<link rel="stylesheet" href="test.css">
- 直接在head内通过style标签写CSS代码
<head>
<style>
h1 {
color: red;
}
</style>
</head>
- 行内式 , 通过在body内的标签内部的style属性
<h1 style="color: red">bigb</h1>
标签查找
基本选择器
-
标签选择器
-
id选择器
-
类选择器
-
通用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style>
span {
color: darkred;
}
#d1 {
color: darkgreen;
}
.c1 {
color: darkblue;
}
* {
color: darkgoldenrod; /*会覆盖上面的样式*/
}
</style>
</head>
<body>
<span>这是一个span标签</span>
<div id="d1">这是一个div标签</div>
<p class="c1">这是一个p标签</p>
</body>
</html>
组合选择器
-
div span 后代选择器
- 只要是在div中的span, 不管是第几层, 都能找到
-
div>span 儿子选择器
- 只能找到div下一层级的span标签
-
div+span 毗邻选择器
- 下面紧挨的一个span标签
-
div~span 弟弟选择器
- 同层级下面所有的span标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style>
div span {
color: darkred;
}
</style>
</head>
<body>
<div>这是一个div标签1
<span>这是一个在div标签1中的span标签1</span>
<span>这是一个在div标签1中的span标签2</span>
<p>
<span>这是一个在div1下面的p标签中的span标签</span>
</p>
<span>这是一个在div标签1中的span标签3</span>
</div>
<span>这是div后面的span标签1</span>
<p>这是一个p标签</p>
<span>这是div后面的span标签2</span>
</body>
</html>
属性选择器
- 任何标签都有自己的默认属性, 如id, class等
- 我们也可以自行给标签添加属性, 因此也可以通过这些自添加的属性查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/**[username] {*/
/*color: darkred;*/
/*}*/
*[username="bigb"] {
color: darkred;
}
</style>
</head>
<body>
<p username="bigb">p标签1</p>
<p username="blake">p标签2</p>
<p username="black">p标签3</p>
</body>
</html>
伪类
- 伪类用于向某些选择器添加特殊效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style>
a:link {color: red;} /*未访问的连接*/
a:visited {color: darkgrey;} /*已访问的连接*/
a:hover {color: darkgreen;} /*鼠标悬浮在连接上*/
a:active {color: darkblue} /*点击连接*/
</style>
</head>
<body>
<a href="https://baidu.com">click here to search</a>
</body>
</html>
伪元素
- 伪元素用于向某些选择器添加特殊效果
- first-litter, first-line, before, after
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素</title>
<style>
p:first-letter {
font-size: 40px;
color: darkred;
}
p:before {
content: "***";
color: darkgreen;
}
p:after {
content: "???";
color: darkgreen;
}
</style>
</head>
<body>
<p>sometime I rock sometime I roll sometime it's not me is control.</p>
</body>
</html>
选择器优先级
- 选择器相同时, 就近原则(覆盖)
- 选择器不同时, 行内 > id > 类 > 标签