本文介绍了CSS的基本概念，包括内部样式表、外部样式表和行内样式的引入方式，以及选择器的使用，如标签选择器、class选择器和id选择器。此外，文章详细讲解了文字控制属性，如字体大小、行高、字体族以及文本对齐和修饰线。最后，提供两个案例展示了CSS在实际网页设计中的应用。
CSS（一）
一、定义
层叠式样式表（Cascading Style Sheets，简称CSS），是一种样式表，用于美化HTML文档
位置：title标签下方添加style双标签，style标签里面书写CSS代码。
二、CSS引入方式
-
内部样式表：写在style标签里，采用不同选择器
-
外部样式表：将样式表单独写成一个.css文件，然后HTML文件中在style标签外采用link标签引用
-
行内样式表（不常用）：写在标签的style属性值里面
<!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>CSS引入方式</title> <style> p{color: blueviolet;} </style> <link rel="stylesheet" href="./02.css"> <!-- link 在引用外部样式表 rel：关系，样式表 --> </head> <body> <p>内部样式表</p> <div>外部样式表</div> <span style="color:coral; font-size: smaller;">行内样式表</span> <!-- 行内样式表 一般配合JavaScript使用--> <!-- 外部样式表最常用 --> </body> </html>
三、选择器
1、标签选择器
选中某个标签，让该标签全部使用规定的样式
<style>
p{...}
</style>
选中所有同名标签意味着无法差异化
2、class选择器
<style>
.red{...}
.smallsize{....}
</style>
<body>
<p class="red smallsize">...</p>
</body>
同一个class所有标签都可以用，但是一个标签不可以同时用多次属性，但可以有多个属性值；
如：
<p class="red" class="smallsize">看能不能一个标签用多个类选择器</p> <p class="red smallsize">一个标签不能同时用多次同个属性，但可以用多个属性值</p>class名字要见名知意，多个单词可以用-连接
3、id选择器
与class类似，形式上有些许差别
<style>
#red{...}
#smallsize{....}
</style>
<body>
<p id="red">...</p>
</body>
值得注意的是，一个页面中，一个id选择器只能用一次，这是与class选择器不同的
4、适配符选择器
*{....}
适配符选择器会让选中所有标签，设置相同的样式，一般用于开发初期，清楚默认样式
四、盒子属性
| 属性 | 属性值 |
|---|---|
| width | 宽度，一般以px为单位 |
| height | 高度，一般以px为单位 |
| background-color | 颜色 |
五、文字控制属性
| 描述 | 属性 |
|---|---|
| 字体大小 | font-size |
| 字体粗细 | font-weight |
| 字体倾斜 | font-style |
| 行高 | line-height |
| 字体族 | font-family |
| 字体复合属性 | font |
| 文本缩进 | text-indent |
| 文本对齐 | text-align |
| 修饰线 | text-decoration |
| 颜色 | color |
字体大小
- 属性名：font-size
- 属性值：文字尺寸，PC 端网页最常用的单位 px
p {
font-size: 30px;
}
经验：谷歌浏览器默认字号是16px。
字体样式（是否倾斜）
作用：清除文字默认的倾斜效果
属性名：font-style
属性值
- 正常（不倾斜）：normal
- 倾斜：italic
行高
作用：设置多行文本的间距
属性名：line-height
属性值
- 数字 + px
- 数字（当前标签font-size属性值的倍数）
line-height: 30px;
/* 当前标签字体大小为16px */
line-height: 2;
行高 = 上间距 + 文字高度 + 下间距
行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。
单行文字垂直居中
垂直居中技巧：行高属性值等于盒子高度属性值
注意：该技巧适用于单行文字垂直居中效果
div {
height: 100px;
background-color: skyblue;
/* 注意：只能是单行文字垂直居中 */
line-height: 100px;
}
字体族
属性名：font-family
属性值：字体名
font-family: 楷体;
- font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找
- font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
font复合属性
使用场景：设置网页文字公共样式
复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。
font: 是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）
div {
font: italic 700 30px/2 楷体;
}
注意：字号和字体值必须书写，否则 font 属性不生效 。
文本缩进
属性名：text-indent
属性值：
- 数字 + px
- 数字 + em（推荐：1em = 当前标签的字号大小）
p {
text-indent: 2em;
}
文本对齐方式
作用：控制内容水平对齐方式
属性名：text-align
| 属性值 | 效果 |
|---|---|
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
text-align: center;
text-align本质是控制内容的对齐方式，属性要设置给内容的父级。
<style>
div {
text-align: center;
}
</style>
<div>
<img src="./images/1.jpg" alt="">
</div>
文本修饰线
属性名： text-decoration
| 属性值 | 效果 |
|---|---|
| none | 无 |
| underline | 下划线 |
| line-through | 删除线 |
| overline | 上划线 |
color 文字颜色
| 颜色表示方式 | 属性值 | 说明 |
|---|---|---|
| 颜色关键字 | 颜色英文单词 | red、green、blue… |
| rgb | rgb(0,0,0) | 红绿三三原色 |
| rgba | rgba(0,0,0,0.2) | a表示透明度，取值范围是0~1 |
| 十六进制 | #RRGGBB | #000000，#000，#ffcc00，#fc0 |
提示：只要属性值为颜色，都可以使用上述四种颜色表示方式，例如：背景色。
六、案例
1、新闻详情
<!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>新闻详情</title>
<link rel="stylesheet" href="./16.案例--新闻详情.css">
</head>
<body>
<h1>花样游泳世界杯埃及站：16岁小将杨顺诚摘得男子单人技术自选冠军</h1>
<span>来源：新华网 2023/05/14 15:42:18</span>
<p><strong>新华社</strong>北京5月14日电（记者周欣）当地时间13日，世界泳联花样游泳世界杯第三站在埃及揭幕，首次参加国际大赛的16岁北京小将杨顺诚摘得男子单人技术自选桂冠。</p>
<p>本站比赛众多名将缺席，男子单人技术自选共有7人参赛，杨顺诚在《大提琴之歌》为主题的背景音乐下，以232.5792分首次为中国队赢得花样游泳男子单人项目的世界杯分站赛金牌。哥伦比亚选手桑切斯和西班牙选手索托分获银牌和铜牌。</p>
<div class="pic"><img src="./Snipaste_2023-05-14_19-57-12.png" alt=""></div> <!--span用不了居中-->
<p>杨顺诚说：“赛前我想过拿金牌，但也没有想太多，毕竟第一次参加国际比赛有很多未知数。上场前我特别紧张，一直在埋头做动作，停不下来，还给自己加油打气。我告诉自己‘你没问题的，已经准备四五个月了，比赛就是去冲第一的’。”</p>
<p>“明天的自由自选比赛对于我来说是更大的挑战，对能力和难度完成的要求更高。我希望能够通过比赛锻炼提高自己，做最好的自己。”杨顺诚说。</p>
</body>
</html>
css样式表
h1{
font-weight: 400;
text-align: center;
font-size: 30px;
color: #333;
}
/*div{
text-align: center;
}*/
p{
text-indent: 2em;
font-size:18px;
color: #333;
}
span{
font-size:14px ;
color: #999;
}
.pic{
text-align: center;
}
2、CSS简介
HTML代码：
<!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>CSS简介</title>
<link rel="stylesheet" href="./17.案例--CSS简介.css" />
</head>
<body>
<h1>CSS（层叠样式表）</h1>
<p>
层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种
<a href="#">样式表</a> 语言，用来描述 HTML 或 XML（包括如
SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS
描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
</p>
<p>
<strong>CSS 是开放网络的核心语言之一</strong>，由 W3C 规范
实现跨浏览器的标准化。CSS 节省了大量的工作。
样式可以通过定义保存在外部.css
文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS
被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3
分成多个小模块且正在标准化中。
</p>
<ul>
<li>
CSS 介绍 如果你是 Web 开发的新手，请务必阅读我们的 CSS 基础 文章以学习
CSS 的含义和用法。
</li>
<li>
CSS 教程 我们的 CSS 学习区
包含了丰富的教程，它们覆盖了全部基础知识，能使你在 CSS
之路上从初出茅庐到游刃有余。
</li>
<li>
CSS 参考 针对资深 Web 开发者的 <a href="#">详细参考手册</a> ，描述了 CSS
的各个属性与概念。
</li>
</ul>
</body>
</html>
CSS样式：
h1{
text-align: left;
color: #333;
}
p{
color: #444;
font-size: 14px;
line-height: 30px;
text-indent: 2em;
}
a{
color: #0069c2;
}
li{
font-size: 14px;
line-height: 30px;
}
7505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
