CSS|CSS基础
一. CSS 简介
1. 什么是 CSS
CSS(Cascading Style Sheets) ，通常称为 CSS 样式表或层叠样式表
2. CSS 的作用
CSS 的作用就是用来规定每个 HTML 元素表现的样子, 比如
- 字体的大小
- 颜色
- 摆放位置...
CSS 也被称为网页的化妆师
3. CSS 的书写位置
- 外联
- 内嵌
- 行内
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
在目前的学习阶段, 为了调试方便, 我们将 CSS 写在 html 文件的<style>标签中
3. CSS 的基础语法
语法
<head>
<style>
选择器（选择的元素） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
主要由 选择器+声明块 组成
示例
将 h1 的字体改成红色
<style>
h1 {
color: red;
}
</style>
二. CSS 选择器
1. 什么是选择器
选择器的主要作用就是从一堆元素中选出特定的符合要求的元素
更多的选择器, 参考css 选择器手册
比如, 上图中有一堆小黄人, 现在需要统一改变单眼小黄人的颜色为红色, 该如何操作呢?
- 第一步: 选出所有的单眼小黄人
- 第二步: 修改颜色为红色
小结
- 第一步(选元素): 通过选择器, 找出符合要求的 HTML 元素()
- 第二步(改属性): 修改找出来的元素的属性
常见的选择器包括
- 元素选择器
- 类选择器
- id 选择器
更多选择器的用法, 见 CSS 手册CSS 手册
2. 基本选择器
(1) 元素选择器
作用
根据标签名, 将同一种标签元素选择出来
语法
标签名 { 属性: 值 }
示例
修改所有 p标签的颜色为红色
p*3>lorem10
<!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;
}
</style>
</head>
<body>
将所有p标签的颜色改为红色
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima,
consequuntur.
</p>
<p>
Facere, earum eum voluptates explicabo aut tempora eveniet voluptate. Eos!
</p>
<p>
Fugit cupiditate ea doloremque quidem obcaecati. Rerum quam explicabo
quod.
</p>
</body>
</html>
(2) 类选择器
作用
选择某一类元素, 该元素通过 class属性指定
语法
.类名 { 属性: 值 }
示例
div*5>lorem3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>类选择器</title>
<style>
.red {
color: red;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<div>Lorem, ipsum dolor.</div>
<div class="red">Facere, possimus laboriosam.</div>
<div class="blue">Ducimus, ea perferendis!</div>
<div class="red">Accusamus, accusantium dolores.</div>
<div>Eius, eaque magni.</div>
</body>
</html>
多类名使用空格隔开
(3) id 选择器
作用
选择某一个元素, 该元素通过 id属性指定
语法
#id名 { 属性: 值 }
示例
<p id="username"></p>
2. 复合选择器
(1) 后代选择器
作用
选择某一个元素的子孙后代, 使用 空格
语法
父选择器 子选择器 { 属性: 值 }
示例
<!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>
nav li {
color: red;
}
</style>
</head>
<body>
<!-- 主导航 -->
<nav>
<ul>
<li>Lorem.</li>
<li>Nobis!</li>
<li>Exercitationem?</li>
<li>Voluptas.</li>
<li>Nulla!</li>
</ul>
</nav>
<!-- 新闻列表 -->
<ul>
<li>Lorem.</li>
<li>Magni!</li>
<li>Sed?</li>
</ul>
</body>
</html>
(2) 并集选择器
作用
同时选择多个选择器, 使用逗号
语法
选择器1, 选择器2 { 属性: 值 }
(3) 交集选择器
作用
同时满足条件
语法
选择器1选择器2 { 属性: 值 }
需求
h1 和 p 都是应用的同一个类表示强调
但是我们希望 h1 的强调是红色, 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>
<style>
h1.important {
color: red;
}
p.important {
color: blue;
}
</style>
</head>
<body>
<h1 class="import">Lorem.</h1>
<p class="import">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit
molestias, odio doloremque ab neque numquam animi, ipsum qui natus aut
dignissimos quo nobis sequi architecto nemo tempore cum ipsa possimus!
</p>
</body>
</html>
(4) 伪类选择器
作用
选择同一元素的不同状态
语法
- a:link / 未访问的链接 /
- a:visited / 已访问的链接 /
- a:hover / 鼠标移动到链接上 /
- a:active / 选定的链接 /
示例
a {
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover {
/* :hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}
