B站《前端Web开发HTML5+CSS3+移动web视频教程》第三天的课程：基础选择器、文字控制属性
css_1">一、关于css基础
1.CSS定义
CSS是层叠样式表的缩写，是一种样式表语言，用来描述HTML的美化内容。
2.书写方式
选择器 {属性名：属性值；}属性名和属性值成对出现，这样的一对叫做键值对。
title标签下方添加style双标签，style标签里面书写CSS代码。
css_7">3.css的引入方式
①内部样式表：css代码写在style标签里面
②外部样式表：css代码写在单独的css文件中（后缀名为.css）；在HTML文档中使用link标签引入<link rel="stylesheet" href="./style.css ">rel属性表示引入文件与源文件的关系，stylesheet表示样式表。
③行内样式：配合javasript使用。css属性写在一个标签的style属性中。
css_11">二、css基础选择器
1.标签选择器
使用标签名作为选择器，选中同名标签设置相同的样式。例如p，h1，div，a，img
2.类选择器
①作用：查找标签，差异化设置标签显示效果。
②步骤：
定义选择器：.类名
使用选择器：标签添加“class=类名”
<style>css">/*定义类选择器*/.class{color:red;}
</style>
<!--使用类选择器-->
<div class="red">这是div标签</div>
③注意：一个类选择器可以给多个标签使用，但一个标签只可以有一个class属性，但是一个class属性可以有多个属性值，用空格隔开。
开发习惯：类名取名要见名知意，多个单词可以用-链接
3.id选择器
①作用：查找标签，差异化设置标签显示效果。
场景：id选择器一般配合JavaScript使用，很少用来设置css样式
②步骤：
定义id选择器：#id名
使用id选择器，标签添加id名
③注意：同一个id选择器在一个页面只能使用一次
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>鱼C-零基础入门学习Web（Html5+Css3）</title><style>css">#important {color:green;}</style>
</head>
<body><p id="important">Welcome to FishC.com</p><p>Welcome to FishC.com</p>
</body>
</html>4.通配符选择器
①作用查找页面所有标签，设置相同样式
②注意通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同样式。开发初期清除标签的默认样式的时候会用到。
*{color:red;}
三、文字控制属性
1.font-size属性
①定义：font-size 属性用于设置字体的尺寸。
②注意：字体大小：pc端常用的文字尺寸单位是px，必须带单位属性才会生效，谷歌浏览有默认的文字大小是16px。
③属性值
2.font-weight属性
①定义：font-weight 属性设置文本的粗细。
②注意：注意：该属性用于设置显示元素的文本中所用的字体加粗。数字值 400 相当于 关键字 normal，表现为不加粗模式，700 等价于 bold，表现为加粗模式。数字只能取100到900间的整百。
③属性值
3.line-height属性
①测量行高：文字高度+上间距+下间距
实际测量行高如下图所示
②注意：line-height的两种表示方法
⑤垂直居中：行高属性值等于盒子高度属性值，只适用于单行文字
4.font-family属性
①定义：font-family 规定元素的字体系列。
②注意：font-family属性值有多个字体名，各个字体用逗号隔开，浏览器会从左向右依次匹配，并优先使用匹配上的第一个值。如果都没有匹配上的话，会使用浏览器默认的字体，开发中会指定使用无衬线字体。可以从其他网页上复制font-family的写法。
5.font复合属性
font复合属性：设置网页文字公共样式
6.text-indent属性
①定义：text-indent 属性规定文本块中首行文本的缩进。
②注意：负值是允许的。如果值是负数，将第一行左缩进。
7.text-align属性
①定义：text-align 属性规定元素中的文本的水平对齐方式。
②注意：text-align:居中的是标签的内容居中，不改变标签，但如果含有子标签的父级标签使用该属性，那么子标签就会居中。
8.text-decoration属性
①定义：text-decoration 属性规定添加到文本的修饰。可以去掉超链接的下划线。
9.color属性
color颜色取值写法
10.font-style
①定义：font-style 属性定义字体的风格。
②注意：该属性设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。理论上讲，用户代理可以根据正常字体计算一个斜体字体
③属性值
综合案例一
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>day03新闻案例</title><link rel="stylesheet" href="./news.css">
</head>
<body><h1>在希望的田野上|湖北秋收开镰 各地多举措保增产增收</h1><h4>央视网|2022年12月12日 12:12:12</h4><p><strong>央视网消息：</strong>眼下，湖北省秋收开镰已经有一周多的时间。水稻收割已经超过四城，玉米收割七成。湖北省通过大力推广新品种水稻，建设高标准农田等一系列措施，为秋粮稳产提供有力支撑。</p><p>中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市，370亩中稻已经收割四成以上。</p><div><img alt="湖北收割中稻" src="http://society.people.com.cn/mediafile/pic/20231021/15/9669424172876347003.jpg"></div><br><p>王化林说的新品种，是湖北省研发的杂交水稻“华夏香丝”，不仅产量高，还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内，象“华夏香丝”这样抗旱节水的品种还有20多个，这些水稻新品将在荆门全面推广，确保来年增产增收。<p>此外，湖北还大力推进高标准农田建设。截止今年6月，已建成3980万亩高标准农田。目前，湖北全省仍有1800多万亩中稻正在有序收割中，预计10月中旬收割完毕。</p></p></body>
</html>
css文件
p{text-indent: 2em;font-size: 18px;color: #333;}
h1{text-align: center;font-weight: 400;font-size: 30px;color: #333;
}
h4 {font-weight: 400;font-size: 14px;color: #999999;
}div {text-align: center;
}
效果图
综合案例二：
<!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>css">h1 {color:#333;}p {text-indent: 2em;font-size: 14px;line-height:30px;color: #444;}a {text-decoration:underline ;color: #0069c2;}ul {line-height: 30px;}</style>
</head>
<body><h1>css（层叠样式表）</h1><p>层叠样式表(Cascading Style Sheets，缩写为 CSS)，是一种<a>样式表</a>语言，用来描述 HTML或 XML(包括如 SVG、MathML、XHTML 之类的XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题.</p><!-- <br> --><p><strong>CSS是开放网络的核心语言之一，</strong>由 W3C规范 实现跨浏览器的标准化。CSS 节省了大量的工作。 样式可以通过定义保存在外部,css 文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级:CSS1现已废弃，CSS2.1是推荐标准，CSS3 分成多个小模块目正在标准化中。</p><!-- <br> --><ul><li>CSS 介绍 如果你是 Web 开发的新手，请务必阅读我们的 CSS 基础 文章以学习 CSS 的含义和用法。</li><li>CSS 教程 我们的 CSS 学习区 包含了丰富的教程，它们覆盖了全部基础知识，能使你在 CSS 之路上从初出茅庐到游刃有余。</li><li>CSS 参考 针对资深 Web 开发者的<a>详细参考手册</a> ，描心了 CSS 的各个属性与概念。</li></ul>
</body>
</html>
效果图
参考图
案例一
案例二
![[Redis#19] 集群 | 数据分片 | docker模拟 | 故障转移 | 集群扩容](https://i-blog.csdnimg.cn/img_convert/d6fd371b2326520943d38d14726b2f41.png)
