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

黑板报发布了，内容是在黑板上，帖子呢，在一楼，当然也可以在别的楼层。一楼或别的楼层就相当于一块黑板，不同于黑板报的是，我们做音画帖可以发宽幅帖子，我们的帖子宽度可以大于它预设留给我们的尺寸。要做到这一点，我们其实用到了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，更多的内容我们会一一接触、慢慢扩展。学习愉快！

返回目录