《CSS课盒模式》PPT课件

《《CSS课盒模式》PPT课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、盒模式与元素亲密接触教师：Tel：改进“茶馆网站”休闲室提供了许多对休闲室和饮料的描述。包括一系列专为本周提供的饮料。他们还让顾客点播音乐，休闲室会在每个周末播放最热门的歌曲。最后在页脚写了一些版权信息。改进过的“茶馆网站”标题做成浅绿色，跟站点的主题颜色相匹配。字体也是很具可读性的sans-serif。这一段有很多样式，在文本中比较醒目，整个页面也因此增色不少。字体似乎是serif，也跟主体文本不同。完全重新样式化了的饮料，让人禁不住想喝上一杯。样式还被移到了右边，这是怎么做到的呢？音乐CD和艺术家也被样式化了。页脚居中了，用非常小的字体显示。添加lounge.css文件

2、添加样式改进“茶馆网站”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倍。增加文本的行间距可以提高可读性，还可以增加页面不同部分之间的

3、对比度。与其它字体有关的属性一样，也可以用像素、em或百分数等与字体大小有关的值定义行间距。盒模式从CSS角度看，每个元素是一个盒子。每个盒子由内容区及可选的补白、边框和边界组成。内容周围是可选的、透明的补白。内容区域包括内容（例如文本或图像）。所有的元素都被看成一个个盒子：段落、标题、块引用、列表、列表项目等，甚至行内元素如和也被CSS看作盒子。可选的边框可以放在补白周围。可选、透明的边界包围着所有东西。进一步解析盒模式内容区是指什么？每个元素都以某些内容开始，比如文本或图像，这部分内容被放置在一个大小正好能包含它的盒子里。注意内容区的内容和盒子边缘之间没有

4、空白。内容区域包括元素的内容，其大小刚好足够包含内容。我们在内容区周围画一个边缘，只是为了让你知道它有多大，在浏览器中内容区周围并没有可见的边缘。进一步解析盒模式补白是指什么？任何盒子在内容区周围都能有一层补白。补白是可选的，所以不一定会有。可以用补白在盒子的内容和边框之间创建可视的空白。补白是透明的，本身没有颜色或修饰。浏览器在内容区周围添加可选的补白。用CSS可以控制整个内容区周围甚至任何一侧（上、下、左、右）的补白宽度。进一步解析盒模式边框是指什么？元素周围可以有边框，并且是可选的。边框包围着补白，因为它是围绕内容的一条线，所以视觉上将内容和同一页上的其他元素分隔开了

5、。边框可以有各种宽度，颜色和样式。用CSS可以控制边框的宽度、颜色和样式用CSS可以控制整个内容区周围甚至任何一侧（上、下、左、右）的补白宽度。注意补白把内容和边框分隔开了。边框补白内容进一步解析盒模式边界是指什么？元素周围可以有边框，并且是可选的。边框包围着补白，因为它是围绕内容的一条线，所以视觉上将内容和同一页上的其他元素分隔开了。边框可以有各种宽度，颜色和样式。用CSS可以控制整个边界或某一侧边界（上、下、左、右）的宽度。这是整个元素。最里面是内容区，被可选的补白包围着，又围了一层可选的边框，最外一层是可选的边界。边框补白内容边界你能对盒子做什么？可以样式化一个盒子使

6、之有补白，边框和边界。或者只有补白和边框。或者只有边框。或只有边界而没有边框和补白。可以有实心的边框，或细或粗。或者根本没有边框。或从8个不同的边框样式中选一种。或者给边框选一种颜色。你能对盒子做什么？用CSS可以把补白控制在内容区的任意一侧。这里左右补白要多一些。这里上、下补白多一些。这里，内容偏移到右下方，补白在左边和上边。或只有边界而没有边框和补白。也可以同样地控制边界。这里上下边界多一些。这里左右边界多一些。跟补白一样，也可以像这样单独地定义任何一侧的边界。这儿，内容区高而窄。甚至可以用许多不同的方法控制高度和宽度。这个例子中，内容区比较宽。问题：补白和边界有什么区

7、别？它们好像是一回事。除了大小以外，我好像不能样式化补白和边界的其它方面？修改茶馆网页段落以蓝色为背景。字体是斜体段落中甚至还有一个图形段落有些缩进锯齿形的边框，看起来很漂亮。文本偏离了边框修改茶馆网页1、打开lounge.html，添加“guarantee”类。2、打开loung.css，添加下面的样式.guarantee{border-color:black;border-width:1px;border-style:solid;background-color:#a7cece;}修改茶馆网页添加一些补白.gu