目录
基础入门
前面部分我们知道可以通过直接指定style属性来配置 DOM元素的样式, 比如:
<p style="color:red;font-size:20px;">这边显示该章节的内容……</p>
如果一个页面上 有多个元素都是用了这个样式, 那我们该怎么办?
这种时候我们就需要将样式独立出来, 单独写到一个保存在外部的 .css 文件中, 这就形成了css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
/* 1.id 2.tag 3.class 标签选择基于这三种选择*/
/* tag name: p,h,a */
p {
color:red;font-size:12px;
}
/*2 id getElementById，#*/
#first {
color:red;font-size:20px;
}
/*3 id getElementById，.*/
.second {
color:rgb(0, 255, 136);font-size:20px;
}
</style>
</head>
<body>
<p id="first">这边显示该整洁的内容</p>
<p class="second">test1</p>
<p>test2</p>
</body>
</html>
CSS语法
我们来看一个简单的例子: 对所有的p标签 使用下面定义的样式
/* 这是个注释 */
p {
color: red;
}
我们可以看到css的语法由2个部分组成:
- 选择器, 对应p, 用于选择样式生效的范围，也就是对那些元素生效
- 样式属性（style attribute), 也就是具体需要添加的样式是啥, 属性有key和value组成, 多个属性用;分开
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束, 比如上面
CSS选择器
详情请参考: CSS 选择器
基础选择器
基础选择器有3种:
- 标签, 标签名称, 比如 h1
- 类, 类名称, 比如 .className
- ID, 元素id, 比如 #id
标签选择器
以标签名开头，选择所有div元素, 比如前面的p标签选择器就是这种
比如下面是所有h1标签 都显示为红色
h1 {
color: red;
}
类选择器
给标签取class名，以点（.）加class名开头，选择所有该class名的元素
<h1 class="f12">基础标签</h1>
<style scoped>
.f12 {
font-size: 12px;
}
</style>
这是最常用的一种选择器
id选择器
给标签取id名，以#加id名开头，具有唯一性
<h2><a id="C4">章节 4</a></h2>
<style scoped>
#C4 {
color: blue;
}
</style>
群选择器
我们也可以组合使用, 一次选择多个元素，比如 h1, .f12,#C4 都选中, 语法: 以，分隔多个选中的元素
<style scoped>
h1,.f12,#C4 {
color: blue;
}
</style>
h1,span里面的逗号是或的意思，选择多个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
h1,span {
color:red;font-size: 12px;
}
</style>
</head>
<body>
<span>extra span</span>
<!--如何选中h1下面的span-->
<h1>
H1
<span>sub1</span>
<span>sub2</span>
</h1>
</body>
</html>
全局选择器
既然有多选，那就有全选, 语法: *
<style scoped>
* {
color: blue;
}
</style>
层级选择器
如果我们直接选择元素的话，可能会很多，并不能精确选中我们需要的元素, 因此我们就可以引入层级关系来选择, 比如 div元素下的p标签，而不是顶层p标签
总共有4种层级关系选择器:
- 子选择器: 父元素>子元素
- 包含选择器: 父元素 包含的元素
- 兄弟选择器: 当前元素～兄弟元素
- 相邻选择器: 当前元素+相邻元素
子选择器
用于已知父元素, 选择子元素, 具体语法: 以>隔开父子级元素，(模块名>模块名，修饰>前模块内的子模块)
比如列表下面的所有元素，我都把字体加粗
<ul id="list_menu" class="ul_class">
<li id="coffee">Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<style scoped>
ul>li {
font-weight: 600;
}
</style>