8CSS第三课-盒模式.pptVIP

问题： 为什么要用#guarantee而不用p#guarantee？ 在前面的章节中，我们在元素a中用id属性来创建目标锚。当我把id放进别的元素，它们也成了目标了吗？ 要点： CSS用盒模式控制元素显示的方式。 例子由内容和可选的补白、边框和边界组成。 补白用来在内容区周围创建可见的空间。 边框包围着补白和内容，是可见的，将内容分隔开。 边界用来在元素之间添加空间。 补白、边框和边界都是可选的。 元素的背景可以在内容和补白底下显示，但不能延伸到边界。 边框有8种不同的样式。 line-height用来增加文本的行间距。 background-image属性用来给元素添加背景图像 background-position和background-repeat属性用来设置背景图像的位置和重复方式。 class属性用来样式化一组元素。 要点： id属性用来给元素设置唯一的名字。也可以用id属性给一个元素提供唯一的样式。 一个页面中一个元素只能有一个id。 一个元素可以只有有一个id, 但可以属于多个类。 盒模式 与元素亲密接触 教师： Tel： 改进“茶馆网站” 休闲室提供了许多对休闲室和饮料的描述。 包括一系列专为本周提供的饮料。 他们还让顾客点播音乐，休闲室会在每个周末播放最热门的歌曲。 最后在页脚写了一些版权信息。 改进过的“茶馆网站” 标题做成浅绿色，跟站点的主题颜色相匹配。字体也是很具可读性的sans-serif。 这一段有很多样式，在文本中比较醒目，整个页面也因此增色不少。字体似乎是serif，也跟主体文本不同。 完全重新样式化了的饮料，让人禁不住想喝上一杯。 样式还被移到了右边，这是怎么做到的呢？ 音乐CD和艺术家也被样式化了。 页脚居中了，用非常小的字体显示。 添加 lounge.css 文件 添加样式 改进“茶馆网站” body { font-size: small; font-family: Verdana, Helvetica, Arial, sans-serif; } h1, h2 { color: #007e7e; } h1 { font-size: 150%; } h2 { font-size: 130%; } 再次调整 body { font-size: small; font-family: Verdana, Helvetica, Arial, sans-serif; line-height:1.6em; } 这里我们把行间距改为1.6em，相当于字体大小的1.6倍。 增加文本的行间距可以提高可读性，还可以增加页面不同部分之间的对比度。 与其它字体有关的属性一样，也可以用像素、em或百分数等与字体大小有关的值定义行间距。 盒模式 从CSS角度看，每个元素是一个盒子。 每个盒子由内容区及可选的补白、边框和边界组成。 内容周围是可选的、透明的补白。 内容区域包括内容（例如文本或图像）。 所有的元素都被看成一个个盒子：段落、标题、块引用 、列表、列表项目等，甚至行内元素如em和a也被CSS看作盒子。 可选的边框可以放在补白周围。 可选、透明的边界包围着所有东西。 进一步解析盒模式 内容区是指什么？ 每个元素都以某些内容开始，比如文本或图像，这部分内容被放置在一个大小正好能包含它的盒子里。注意内容区的内容和盒子边缘之间没有空白。 内容区域包括元素的内容，其大小刚好足够包含内容。 我们在内容区周围画一个边缘，只是为了让你知道它有多大，在浏览器中内容区周围并没有可见的边缘。 进一步解析盒模式 补白是指什么？ 任何盒子在内容区周围都能有一层补白。补白是可选的，所以不一定会有。可以用补白在盒子的内容和边框之间创建可视的空白。补白是透明的，本身没有颜色或修饰。 浏览器在内容区周围添加可选的补白。 用CSS可以控制整个内容区周围甚至任何一侧（上、下、左、右）的补白宽度。 进一步解析盒模式 边框是指什么？ 元素周围可以有边框，并且是可选的。边框包围着补白，因为它是围绕内容的一条线，所以视觉上将内容和同一页上的其他元素分隔开了。边框可以有各种宽度，颜色和样式。 用CSS可以控制边框的宽度、颜色和样式 用CSS可以控制整个内容区周围甚至任何一侧（上、下、左、右）的补白宽度。 注意补白把内容和边框分隔开了。 边框 补白 内容 进一步解析盒模式 边界是指什么？ 元素周围可以有边框，并且是可选的。边框包围着补白，因为它是围绕内容的一条线，所以视觉上将内容和同一页上的其他元素分隔开了。边框可以有各种宽度，颜色和样式。 用CSS可以控制整个边界或某一侧边界（上、下、左、右）的宽度。 这是整个元素。最里面是内容区，被可选的补白包围着，又围了一层可选的边框，