CSS 注释
/*单行注释*/
/*
多行注释
多行注释
多行注释
...
*/
通常我们在写 CSS 样式的时候也会用注释来划定样式区域（因为 HTML 代码多所以对应的CSS代码会很多）
/* 这是首页的 CSS 样式文件 */
/*顶部导航栏样式*/
...
/*左侧菜单栏注释*/
...
/*右侧菜单栏注释*/
...
CSS 语法结构
选择器 {
属性1: 值1;
属性2: 值2;
属性3: 值3;
...
}
CSS 三种引入方式
行内式
<h1 style="color: green;">123</h1>
link 引入
<link rel="stylesheet" href="03-MyCSS.css">
style
<style>
h1 {
color: red;
}
</style>
CSS 基础选择器
id 选择器
<head>
<style>
#p1 {
color: yellow;
}
</style>
</head>
<body>
<p id="p1">我叫奥特曼</p>
</body>
类选择器
<head>
<style>
.p2 {
color: aqua;
}
</style>
</head>
<body>
<p class="p2">我叫abc</p>
</body>
元素（标签）选择器
<head>
<style>
div {
color: #A00300;
}
</style>
</head>
<body>
<div>aoteman</div>
</body>
通用选择器
<head>
<style>
* {
color: green;
}
</style>
</head>
<body>
<h1>123</h1>
<p id="p1">我叫奥特曼</p>
<p class="p2">我叫abc</p>
<div>aoteman</div>
<h1>123</h1>
</body>
基础选择器代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
color: green;
}
#p1 {
color: yellow;
}
.p2 {
color: aqua;
}
div {
color: #A00300;
}
</style>
</head>
<body>
<h1>123</h1>
<p id="p1">我叫奥特曼</p>
<p class="p2">我叫abc</p>
<div>aoteman</div>
<h1>456</h1>
</body>
</html>
CSS 组合选择器
'''
在前端 我们将标签的嵌套用亲戚关系来表述层级
<div>div
<p>div</p>
<p>div p
<span>div p span</span>
</p>
<span>span</span>
<span>span</span>
</div>
div 里面的 p span 都是 div 的后代
p 是 div 的儿子
p 里面的 span 是 p 的儿子 是 div 的孙子
div 是 p 的父亲
'''
后代选择器
div span {
color:red;
}
儿子选择器
div>span {
color: red;
}
毗邻选择器
div+span { /*同级别紧挨着的下面的第一个*/
color: red;
}
弟弟选择器
div~span { /*同级别，下面所有的标签*/
color: red;
}
组合选择器代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div~span {
color: red;
}
</style>
</head>
<body>
<span>span1</span>
<span>span2</span>
<div>div
<p>div</p>
<p>div p
<span>div p span</span>
</p>
<span>span</span>
<span>span</span>
</div>
<span>span</span>
<span>span</span>
</body>
</html>
CSS 属性选择器
含有某个属性值
<head>
<style>
[aoteman] {
color: aqua;
}
</style>
</head>
<body>
<div aoteman="1">aoteman</div>
<p aoteman="1">奥特曼</p>
<h1 aoteman="2">alterman</h1>
<span aoteman="3">123</span>
</body>
指定属性值为特定值的标签样式
<head>
<style>
[aoteman="1"] {
color: red;
}
</style>
</head>
<body>
<div aoteman="1">aoteman</div>
<p aoteman="1">奥特曼</p>
<h1 aoteman="2">alterman</h1>
<span aoteman="3">123</span>
</body>
某个标签的特定属性值
<head>
<style>
span[aoteman="3"] {
color: green;
}
</style>
</head>
<body>
<div aoteman="1">aoteman</div>
<p aoteman="1">奥特曼</p>
<h1 aoteman="2">alterman</h1>
<span aoteman="3">123</span>
</body>
属性选择器代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[aoteman] {
color: aqua;
}
[aoteman="1"] {
color: red;
}
span[aoteman="3"] {
color: green;
}
</style>
</head>
<body>
<div aoteman="1">aoteman</div>
<p aoteman="1">奥特曼</p>
<h1 aoteman="2">alterman</h1>
<span aoteman="3">123</span>
</body>
</html>
分组和嵌套
div,p,span { /*逗号表示并列关系*/
color: greenyellow;
}
#d1,.c1 {
color: blue;
}
分组和嵌套代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div,p,span {
color: greenyellow;
}
#d1,.c1 {
color: blue;
}
</style>
</head>
<body>
<div id="d1">div</div>
<p class="c1">p</p>
<span>span</span>
</body>
</html>
伪类选择器
a:link { /*访问之前的状态*/
color: red;
}
a:hover { /*鼠标悬浮态*/
color: aqua;
}
a:active { /*鼠标点击不松开的状态 激活态*/
color: black;
}
a:visited { /*访问之后的状态*/
color:grey;
}
伪类选择器代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link {
color: red;
}
a:hover {
color: aqua;
}
a:active {
color: black;
}
a:visited {
color:grey;
}
</style>
</head>
<body>
<a href="https://www.sougou.com">点我</a>
</body>
</html>
伪元素选择器
p:first-letter {
font-size: 48px;
color: orange;
}
p:before { /*在文本开头 同 CSS 添加内容 用户无法选中*/
content: "那就这样吧";
color: blue;
}
'''
before 和 after 通常都是来清楚浮动带来的影响，父标签塌陷的问题
'''
伪元素选择器代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:first-letter {
font-size:48px;
color: red;
}
p:after {
content: "123";
color: yellow;
}
p:before {
content: "456";
color: yellow;
}
</style>
</head>
<body>
<p>奥特曼</p>
</body>
</html>
选择器的优先级
选择器相同的情况下
/*
1. 选择器相同，书写顺序不同
就近原则：谁离标签近就听谁的
*/
p {
color: red;
}
p {
color:green;
}
选择器不相同的情况下
/*
2. 选择器不同 ...
行内选择器 > id选择器 > 类选择器 > 标签选择器
精确度越高越有效
*/
#c1 {
color: red;
}
.d1 {
color: green;
}
p {
color: orange;
}
选择器优先级代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
color: red;
}
p {
color:green;
}
#c1 {
color: red;
}
.d1 {
color: green;
}
p {
color: orange;
}
</style>
</head>
<body>
<p style="color: blue">奥特曼</p>
<p class="d1" id="c1" style="color: blue">见了鬼</p>
</body>
</html>
