8 CSS第三课 - 盒模式.ppt

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

2、e.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倍。,增加文本的行间距

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; ,修

8、改茶馆网页,添加一些补白 .guarantee border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; ,修改茶馆网页,添加一些边界 .guarantee border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; ,修改茶馆网页,插入背景图片 .guarantee line

9、-height: 1.9em; font-style: italic; font-family: Georgia, “Times New Roman”, Times, serif; color: #444444; border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; background-image: url(images/background.gif); ,背景图片,background-image: url(im

10、ages/background.gif);,Background-image属性被设置成URL，可以是相对路径或绝对的URL(http:/.),注意 URL 没有引号。,修改茶馆网页,调整背景图片的位置 .guarantee line-height: 1.9em; font-style: italic; font-family: Georgia, “Times New Roman”, Times, serif; color: #444444; border-color: black; border-width: 1px; border-style: solid; background-colo

11、r: #a7cece; padding: 25px; margin: 30px; background-image: url(images/background.gif); background-repeat: no-repeat; background-position: top left; ,修改茶馆网页,只在左侧添加补白 .guarantee line-height: 1.9em; font-style: italic; font-family: Georgia, “Times New Roman”, Times, serif; color: #444444; border-color:

12、 black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; Padding-left:80px; margin: 30px; background-image: url(images/background.gif); background-repeat: no-repeat; background-position: top left; ,修改茶馆网页,只在右侧添加边界 .guarantee line-height: 1.9em; font-style: italic; fo

13、nt-family: Georgia, “Times New Roman”, Times, serif; color: #444444; border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; Padding-left:80px; margin: 30px; margin-right:250px; background-image: url(images/background.gif); background-repeat: no-repeat;

14、 background-position: top left; ,边框样式,solid样式是一条实线,solid,double,dotted,dashed,groove,inset,outset,ridge,double样式是双实线,grove样式看起来像凹进页面里。,outset样式像是从页面升起的一块凸出。,dotted样式是一系列点。,dashed样式是围绕边框的虚线。,inset样式是嵌入到页面中。,ridge样式是页面中凸出的边界。,边框宽度和颜色,可以用关键字: thin, medium, thick 或像素来定义宽度。,用 border-color 来定义边框的颜色。,定义边框的

15、一侧,跟边界和补白一样，也可以定义任意一侧（上，下，左，右）的边框样式、宽度或颜色。,这些样式只定义了上边框。可以单独地定义每侧的边框。,修改保证段落的边框,用白色的虚线边框，就会形成锯齿效果。 border-style: dashed; Border-color: white;,id属性,在页面中要标记某个唯一的元素，就给这个元素一个id属性。 比如：通常一个页面只有一个页脚，就可以给它添加一个 id属性。,和类一样，只需添加属性“id”并选择一个唯一的id名。,和类不同的是，页面中只能有一个元素的id 为“footer”,每个元素只有有一个 id 。并且同一页面中不能有一个以上的元素用同一

16、个id 。,id 名称必须以字母头，后跟数字或字母。不允许有空格或特殊字符。,问题：,为什么仅仅为了证明页面中的某些东西是唯一的，就需要一个 id 呢？我可以同样地使用类，对吗？ 一个元素可以既有一个 id 又属于一个类吗？,CSS中如何使用id,与类选择器的写法类似,这条规则选择 id 为“footer”的任意元素。 页面中只允许有一个id为“footer”的元素。,只是这里用的是 #,在茶馆首页使用 id,问题：,为什么要用#guarantee而不用p#guarantee？ 在前面的章节中，我们在元素中用id属性来创建目标锚。当我把id放进别的元素，它们也成了目标了吗？,要点：,CSS用盒模式控制元素显示的方式。 例子由内容和可选的补白、边框和边界组成。 补白用来在内容区周围创建可见的空间。 边框包围着补白和内容，是可见的，将内容分隔开。 边界用来在元素之间添加空间。 补白、边框和边界都是可