【CSS3】练气篇
目录
- CSS 基本概念
- CSS 的定义
- CSS 的作用
- CSS 语法
- CSS 引入方式
- 内部样式表
- 外部样式表
- 行内样式表
- 选择器
- 基础选择器
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
- 画盒子
- 文字控制属性
- 字体大小
- 字体粗细
- 字体倾斜
- 行高
- 字体族
- font 复合属性
- 文本缩进
- 文本对齐
- 文本修饰线
- 文字颜色
CSS 基本概念
CSS 的定义
CSS（Cascading Style Sheets）即层叠样式表，是一种用于描述网页呈现样式的标记性语言，主要用于定义 HTML（超文本标记语言）或 XML（可扩展标记语言）文档的显示风格。
CSS 的作用
CSS 可以用来设置网页元素的字体、颜色、大小、布局、背景等各种样式属性。通过将样式与内容分离，使得网页的维护和更新更加容易，同时也提高了网页的性能和用户体验。例如，通过 CSS 可以将整个网站的标题字体统一设置为某种特定的字体和大小，而无需在每个 HTML 文件中单独设置。
CSS 语法
CSS 语法由选择器（Selector）和声明块（Declaration Block）组成。
选择器{
属性名 : 属性值;
}
选择器用于指定要应用样式的 HTML 元素，声明块则包含一个或多个属性 - 值对，用于定义元素的样式。
p {
color: blue;
font-size: 16px;
}
上述代码中，p是选择器，表示要选择所有的<p>标签元素；color: blue;和font-size: 16px;是声明块中的属性 - 值对，分别设置了文本颜色为蓝色和字体大小为 16 像素。
CSS 引入方式
内部样式表
将 CSS 代码写在 HTML 代码中：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
p{
color: red;
}
</style>
</head>
<body>
<p>内部样式表</p>
</body>
</html>
注意事项：
- CSS 应该写在 HTML 中 title 标签的下方
- CSS 代码要写在
<style></style>块中
外部样式表
CSS 代码写在单独的 CSS 文件中（.css），在 HTML 中使用 link 标签引入：<link rel = "stylesheet" href = "css文件相对路径">：
p{
color: green;
}
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
<p>外部样式表</p>
</body>
</html>
行内样式表
CSS 写在标签的 style 属性值里：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
</head>
<body>
<p style="color: purple;">外部样式表</p>
</body>
</html>
选择器
基础选择器
标签选择器
标签选择器：使用标签名作为选择器 → 选中同名标签设置相同样式
语法格式：
标签名{
属性名 : 属性值;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
p{
color: red;
}
</style>
</head>
<body>
<p>这是第一行字</p>
<div>这是第二行字</div>
<p>这是第三行字</p>
<div>这是第四行字</div>
<p>这是第五行字</p>
</body>
</html>
注意事项：选中同名标签设置相同的样式，无法差异化同名标签的样式
类选择器
作用：查找标签，差异化设置标签的显示效果
步骤：
- 定义类选择器 → .类名
- 使用类选择器 → 标签添加 class = “类名”
语法格式：
.类名{
属性名 : 属性值;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.red{
color: red;
}
</style>
</head>
<body>
<p>这是第一行字</p>
<p class="red">这是第二行字</p>
<p>这是第三行字</p>
<p class="red">这是第四行字</p>
<p>这是第五行字</p>
</body>
</html>
注意事项：
- 一个类选择器可以给多个标签使用
- 一个标签可以使用多个类名，class 属性值写多个类名，类名之间用空格隔开
id 选择器
作用：查找标签，差异化设置标签的显示效果
步骤：
- 定义 id 选择器 → #id 名
- 使用 id 选择器 → 标签添加 id = “id 名”
语法格式：
#id 名{
属性名 : 属性值;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
#red{
color: red;
}
</style>
</head>
<body>
<p>这是第一行字</p>
<p id="red">这是第二行字</p>
<p>这是第三行字</p>
<p>这是第四行字</p>
<p>这是第五行字</p>
</body>
</html>
注意事项：同一个 id 选择器在一个页面只能使用一次
通配符选择器
作用：查找页面所有标签，设置相同样式
通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式
语法格式：
*{
属性名 : 属性值;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
*{
color: yellow;
}
</style>
</head>
<body>
<p>这是第一行字</p>
<p>这是第二行字</p>
<p>这是第三行字</p>
<p>这是第四行字</p>
<p>这是第五行字</p>
</body>
</html>
画盒子
目标：使用合适的选择器画盒子
新属性：
| 属性名 | 说明 |
|---|---|
| width | 宽度 |
| height | 高度 |
| background-color | 背景色 |
如图，《关雎》的宽为 360、高为 125，背景色为红色；《蒹葭》的宽为 700、高为75，背景色为蓝色，按照该要求画盒子
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.first{
width: 360px;
height: 125px;
background-color:red;
}
.second{
width: 700px;
height: 75px;
background-color:blue;
}
</style>
</head>
<body>
<div class="first">
<ul>
<li>关关雎鸠，在河之洲。窈窕淑女，君子好逑。</li>
<li>参差荇菜，左右流之。窈窕淑女，寤寐求之。</li>
<li>求之不得，寤寐思服。悠哉悠哉，辗转反侧。</li>
<li>参差荇菜，左右采之。窈窕淑女，琴瑟友之。</li>
<li>参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</li>
</ul>
</div>
<div class="second">
<ul>
<li>蒹葭苍苍，白露为霜。所谓伊人，在水一方。溯洄从之，道阻且长。溯游从之，宛在水中央。</li>
<li>蒹葭萋萋，白露未晞。所谓伊人，在水之湄。溯洄从之，道阻且跻。溯游从之，宛在水中坻。</li>
<li>蒹葭采采，白露未已。所谓伊人，在水之涘。溯洄从之，道阻且右。溯游从之，宛在水中沚。</li>
</ul>
</div>
</body>
</html>
文字控制属性
字体大小
属性名：font-size
属性值：文字尺寸，PC 端网页最常用的单位 px（像素）
格式：
选择器{
font-size: 30px;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.bigger{
font-size: 30px;
}
</style>
</head>
<body>
<p>这是一段普通文字</p>
<p class="bigger">这是一段加大了的文字</p>
</body>
</html>
结果如下：
字体粗细
属性名：font-weight
属性值：
- 正常：normal（400）
- 加粗：bold（700）
格式：
选择器{
font-weight: normal;
font-weight: 400;
font-weight: bold;
font-weight: 700;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
h3{
font-weight: normal;
}
p{
font-weight: bold;
}
h4{
font-weight: 400;
}
div{
font-weight: 700;
}
</style>
</head>
<body>
<h3>这是h3标签</h3>
<p>这是一句文字</p>
<h4>这是h4标签</h4>
<div>这是一段文字</div>
</body>
</html>
结果如下：
字体倾斜
作用：清除文字默认的倾斜效果
属性名：font-style
属性值：
- 正常：normal
- 倾斜：italic
格式：
选择器{
font-style: normal;
ront-style: italic;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.normaldemo{
font-style: normal;
}
.italicdemo{
font-style: italic;
}
</style>
</head>
<body>
<em>这是一段倾斜的字</em>
<br>
<em class="normaldemo">这是一段倾斜的字使用 font-style 后的效果</em>
<div>这是一段正常的字</div>
<div class="italicdemo">这是一段正常的字使用 font-style 后的效果</div>
</body>
</html>
结果如下：
行高
作用：设置多行文本的间距
属性名：line-height
属性值：
- 数字 + px
- 数字（当前标签 font-size 属性值的倍数）
格式：
选择器{
line-height: 2;
line-height: 30px;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
.style1{
line-height: 40px;
}
.style2{
line-height: 2;
}
</style>
</head>
<body>
<div style="width: 400px;background-color: red;">生命的意义就是在于奋斗，人生的意义则在于积累。不要乞求太多，每天一点点就足够了。所有的失望和不满都是来自于我们自身的贪婪。保持一个平静的心态，我们就会拥有整个世界</div>
<div style="width: 400px;background-color: gray;" class="style1">生命的意义就是在于奋斗，人生的意义则在于积累。不要乞求太多，每天一点点就足够了。所有的失望和不满都是来自于我们自身的贪婪。保持一个平静的心态，我们就会拥有整个世界</div>
<div style="width: 400px;background-color: green;" class="style2">生命的意义就是在于奋斗，人生的意义则在于积累。不要乞求太多，每天一点点就足够了。所有的失望和不满都是来自于我们自身的贪婪。保持一个平静的心态，我们就会拥有整个世界</div>
</body>
</html>
结果如下：
注意事项：
- 行高 = 文本高度 + 上间距 + 下间距
- 行高测量方法：从一行文字的最顶端（最低端）量到下一行文字的最顶端（最低端）
利用行高进行垂直居中：
技巧：行高属性等于盒子高度属性
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
height: 100px;
background-color: red;
line-height: 100px;
}
</style>
</head>
<body>
<div>生命的意义就是在于奋斗，人生的意义则在于积累。不要乞求太多，每天一点点就足够了。所有的失望和不满都是来自于我们自身的贪婪。保持一个平静的心态，我们就会拥有整个世界</div>
</body>
</html>
结果如下：
注意事项：只能是单行文字垂直居中
字体族
属性名：font-family
属性值：字体名
格式：
选择器{
font-family: "楷体";
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
font-family: "楷体";
}
</style>
</head>
<body>
<div>将进酒</div>
</body>
</html>
结果如下：
font 复合属性
复合属性：属性的简写方式，一个属性对应多个值的写法，各属性值之间用空格隔开
font：是否倾斜 是否加粗 字号/行高 字体（必须按照顺序书写）
注意事项：字号和字体值必须书写，否则 font 属性不生效
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
font: italic bold 30px/2 "楷体";
}
</style>
</head>
<body>
<div>君不见黄河之水天上来，奔流到海不复回。</div>
<div>君不见高堂明镜悲白发，朝如青丝暮成雪。</div>
<div>人生得意须尽欢，莫使金樽空对月。</div>
<div>天生我材必有用，千金散尽还复来。</div>
<div>烹羊宰牛且为乐，会须一饮三百杯。</div>
</body>
</html>
结果如下：
文本缩进
属性名：text-indent
属性值：
- 数字 + px
- 数字 + em（推荐：1em = 当前标签的字号大小）
格式：
选择器{
text-indent: 2em;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
p{
text-indent: 2em;
}
</style>
</head>
<body>
<p>我们可以度过美好时光，也可以虚度光阴，但我希望你活得精彩。
我希望你能看到令你惊叹的事物，我希望你体会从未有过的感觉，
我希望你遇见具有不同观点的人，我希望你的一生能让自己过得自豪。
如果你发现你的生活并非如此，我希望你能有勇气重新来过。
你是独特的，但你必须向统一让步；
你是自由的，但你必须向禁忌妥协。
因为你渴望亲近群体，渴望他们的接受。
你害怕被群体驱逐。因而你是孤独的，你是独特但孤独的心魂。
生来如此。
生，就是这样，永远都是这样。</p>
</body>
</html>
结果如下：
文本对齐
作用：控制内容水平对齐方式
属性名：text-align
属性值：
- left：左对齐（默认）
- center：居中对齐
- right：右对齐
格式：
选择器{
text-align: center;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
p{
text-indent: 2em;
text-align: center;
}
</style>
</head>
<body>
<p>我要留下昨晚做的梦，</p>
<p>把它保存在冰箱里。</p>
<p>很久很久以后的一天，</p>
<p>当我变成一个白发老翁，</p>
<p>便要取出我冻结的美梦，</p>
<p>把它融化，把它烧开，</p>
<p>然后我就慢慢坐下，</p>
<p>用它来浸泡我的一双苍老冰冷的脚。</p>
</body>
</html>
结果如下：
注意事项：居中的是文字内容，并不是标签
图片水平居中方式：
text-align本质是控制内容的对齐方式，属性要设置给内容的父级
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
text-align: center;
}
</style>
</head>
<body>
<div>
<img src="./img/image.png" alt="">
</div>
</body>
</html>
结果如下：
文本修饰线
属性名：text-decoration
属性值：
- none：去掉文本修饰线
- underline：下划线
- line-through：删除线
- overline：上划线
格式：
选择器{
text-decoration: none;
}
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
a{
text-decoration: none;
}
p{
text-decoration: underline;
}
div{
text-decoration: line-through;
}
span{
text-decoration: overline;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">去掉a标签访问百度的下划线</a>
<p>给这行字加下划线</p>
<div>把这行字删了</div>
<span>给这行字加上划线</span>
</body>
</html>
结果如下：
文字颜色
属性名：color
属性：
| 颜色表示方式 | 属性值 | 说明 | 使用场景 |
|---|---|---|---|
| 颜色关键字 | 颜色英文单词 | red、green、blue… | 学习测试 |
| rgb 表示法 | rgb(r, g, b) | rgb 表示红绿蓝三原色，取值：0 - 255 | 了解 |
| rgba 表示法 | rgba(r, g, b, a) | a 表示透明度，取值：0 - 1 | 开发使用，实现透明色 |
| 十六进制表示法 | #RRGGBB | #000000，#ffcc00，简写：#000，#fc0 | 开发使用（从设计稿复制） |
代码示例：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
h1{
color: red;
}
h2{
color: rgb(0, 0, 255)
}
h3{
color: rgba(4, 94, 67, 0.5)
}
h4{
color: #FFAACC;
}
</style>
</head>
<body>
<h1>颜色关键字</h1>
<h2>rgb表示法</h2>
<h3>rgba表示法</h3>
<h4>十六进制表示法</h4>
</body>
</html>
结果如下：
