音画帖小白教程（完结）

凡哥

目录

讲义提供的代码可以高亮显示，需要浏览器的支持，chromium内核大于等于105 的 Chrome、Edge、centerbrowser、Chromium 等等现代浏览器都可以，版本偏低的浏览器，包括火狐（Firefox）等不支持代码高亮显示，但不会影响代码的呈现。建议更新浏览器到 ≥ 105 的 chromium 内核，以便能够更清晰地阅读代码。欢迎互动，学习重在交流。

凡哥

第一讲：初识音画帖代码结构

做音画帖好比小时候做黑板报，都是在一定的区域内布置我们想要呈现的内容，我们追求的效果不论是花里胡哨的还是朴实无华的，其目的都是我们要展现我们想要表达的，并希望作品能够吸人他人前来欣赏，最好能够和我们达成共鸣。

黑板报发布了，内容是在黑板上，帖子呢，在一楼，当然也可以在别的楼层。一楼或别的楼层就相当于一块黑板，不同于黑板报的是，我们做音画帖可以发宽幅帖子，我们的帖子宽度可以大于它预设留给我们的尺寸。要做到这一点，我们其实用到了CSS，不管你此前对CSS有没有概念。比方讲，你用这样的HTML代码组织你的帖子：

<div style="position：relative; width: 1400px; height: 720px; left: -600px; background: url('图片地址');"></div>

其上的 style="..." 部分，就是CSS！CSS是什么，或者，什么是CSS？CSS是层叠样式，是做网页不可或缺的组成模块，该模块负责制定“黑板报”每一个内容的样式。上面大家可能用过的代码，style 就是样式的意思，其等号后面的双引号里的内容集合，有 div 的定位方式（position）、宽度（width）、高度（height）、左边位置（left）、背景图（background）等等，这些，都是描述性的语句，语句结构是一组一组的键值对（例如：width: 1400px; 中，width 是键，1400px 是值），每一组键值对用分号 ; 隔开。这种样式的制定是通过 style 属性嵌套在 div 元素内，我们可以称之为嵌套式CSS，它直接作用于使用它的 div 或其他的元素。嵌套式CSS层叠样式现在已经不主张过多使用，前端行业标准认为，CSS应该独立出来，以便让网页页面的结构更为清晰，将来如果有维护需要也更容易操作。试看如下剥离出 CSS 的帖子代码结构：

<style>
#mydiv {
	position：relative;
 	width: 1400px;
 	height: 720px;
 	left: -600px;
	 background: url('图片地址')";
}
</style>

<div id="mydiv"></div>

我们可以看到，style 以标签对的形式出现，第一行是 style 的起始符，<style>，第九行是收尾符，</style>；二者间的内容就是CSS的具体内容，每一个单位的内容（上例只有一个单位）都会有一个名称，这里，以 # 号开头的叫 id选择器，它的内容用一组花括号 {...} 包裹起来，里面的每一行对应于前面的 style 属性中的键值对，除了分行写（也可以不分行）没什么不同。这个就叫内联式CSS，它通过 <style> 和 </style> 来组织代码，独立于HTML代码。而最后一行就是HTML代码，注意看 div 里面有一个 id="mydiv"，其意思是，我这个 div 使用 CSS 样式表中的 #mydiv 指定的层叠样式，#mydiv 所描述的一切，我都遵照执行。

这里强调一下：上述代码分成两个部分，其一，CSS代码，用 <style> 和 </style> 头尾包裹起来，里面的内容全部是用来制定HTML元素的样子（样式），制定方式是给出一个或多个选择器（比如 #mydiv）并在花括号内用键值对的方式一一描述各个属性，将来HTML元素（比如 div）通过使用 id="选择器名称" 来接受样式制定；其二，HTML代码，上面示例代码的最后一行就是，它是网页的组成部分，我们称之为元素或HTML标签，有 div（分区）、p（段落）、span（行内包裹元素）、img(图片）、audio（音频）、video（视频）等等，它们一般成对出现（比如 <div> ... </div>），这叫闭合标签，也有单独出现的（如 <img ... />），这叫自闭合标签。

CSS还有其他的剥离方式，将来我们如果用得上我们会讲解。其他的内容也是如此，碰上了我们就会解释一下。本节就讲到这，看完本讲，如果能明白内联式CSS + HTML就一切OK，更多的内容我们会一一接触、慢慢扩展。学习愉快！

返回目录

云笛

认真看完了，非常感谢凡哥老师分享精彩的教学内容。
虽然有点云里雾里的感脚，但总算是了解了一点CSS代码的基础结构和HTML元素关系
知道了<style>和</div>的作用。还有为什么要在末尾加 /  的操作原理等~~受益了，感谢凡哥

花简静

老师开课了，真是太开心啦。。

花简静

老师的教程，专业又系统。。
老师的语言幽默形象，把生涩的代码知识写得生动有趣，非常易懂。

花简静

坐前排认真学习。。

清梦

代码大白非常认真的看完每一个字，一直复制套代码的我虽然许多是看不懂的，但是我会慢慢认真的学习，谢谢凡哥老师分享精彩的教程，凡哥老师辛苦啦

清梦

问好凡哥老师，新周快乐

凡哥

清梦 发表于 2024-7-22 09:00
问好凡哥老师，新周快乐

凡哥

第二讲：认识CSS选择器和HTML标签的关系

上一讲，《初识音画帖代码结构》，我们讲到了CSS的 id选择器，该选择器由 #+名称 表示，然后用花括号 {} 将描述元素属性值的语句组织起来，例如，#mydiv { ... }，对应的HTML元素则使用 id="mydiv" 表示这个元素使用 #mydiv 选择器制定的样式来渲染（呈现）自己。这就是CSS和HTML标签（元素）的对应关系。我们需要注意的是，相同一个页面里，HTML标签的 id 是唯一的，就像我们每一个人的身份证（id）一样不能有雷同。下面的HTML代码，第二个 div 是非法的，因为它的 id 第一个 div 已经使用：

<div id="tiezi">第一个div合法</div>
<div id="tiezi">第二个div非法</div>

CSS选择器除了 id选择器 外，常用的还有类选择器，术语叫做 class选择器，它以点号 . 开头，后面紧跟上名称，然后也是用花括号组织HTML元素的属性代码，试看：

<style>
.textRed {
	color: red;
}
</style>

<div class="textRed">我是div标签</div>
<p class="textRed">我是p标签</p>

上面，CSS代码仅一个选择器，.textRed，它就是class选择器，用来规定一个类别的标签的样式，它定义了文本颜色（术语称为前景色）为红色（red）。接着，HTML代码中有两个标签，一个是div标签，另一个是p标签，它们都通过 class="textRed" 表明自己使用 .textRed 这个类选择器来设定自己的样式。结果如下：

我是div标签

我是p标签

id选择器也好，class选择器也好，它们的名称都是我们自命名的，命名规则没有严格要求，一般来说在兼顾合法（比如不能用数字开头，但可以使用中文命名）的基础上尽可能地语义化，以便修改、维护代码时能一目了然、轻松自如。而有些选择器我们不能自由命名，它们的名称是固定的，直接使用HTML的元素名称命名，术语称为元素选择器，做帖时用到的不多，但有必要了解一下。看代码：

<style>
p {
	font-size: 20px; /* 字体大小 */
	color: #000; /* 前景色 */
}

video {
	position: absolute; /* 定位 */
	width: 100%; /* 宽度 */
	height: 100%; /* 高度 */
}
</style>

这里，定义了两个选择器的样式，一个是 p选择器，将对应HTML的p标签即段落标签，另一个是 video选择器，将对应于 video标签即视频标签；p标签和视频标签是HTML固有的标签，还有很多，例如 div、audio、img 等等等等。这样定义之后，默认情况下，页面所有的 p标签 和 video标签 将使用各自的CSS选择器样式来呈现自己。但是，元素选择器可以被 id选择器 和 class 选择器更改样式，就是说，以 p标签 为例，如果我们还定义了一个 #myp 或 .myp 选择器，那么，当 p标签 使用了 id="myp" 或 class="myp"，这个p标签将优先使用 #myp 或 .myp 来渲染自己，具体是，重叠的属性，使用 #myp 或 .myp 选择器定义的样式（p选择器定义的属性被覆盖），不重叠的部分继续使用 p选择器 定义的属性样式——CSS有这么一个特性：后面定义的属性会覆盖前面定义的属性，还有，通用设置的属性会被特定设置的属性覆盖。

CSS选择器的内容还有很多，分法也很细致，不过我们暂时用不到的我们先不介绍，将来需要用了我们再去学习也不迟。

本讲主要讲解常用的CSS选择器以及它们和HTML标签的对应关系，理解这些将有助于音画帖的制作。

返回目录