HTML第三章.pptVIP

外部样式表(导入样式) 解决方案：使用外部样式表。 前面我们谈到样式表就像网页华丽的外衣，可以让网页随时更换衣裳，那如何实现呢？ 如果希望一个网站中多个页面的样式保持一致，又该如何做？ 样式文件.css 网页2 网页3 网页1 …… 外部样式表(导入样式) 两种让网页与外部样式表关联的方式： 链接（LINK ）外部样式表 导入（@import）外部样式表 使用LINK（链接）标签 : HEAD LINK href=“outcss.css rel=stylesheet type=text/css /HEAD 第一步：创建样式表文件outcss.css 第二步：在网页中链接此样式表 第三步：浏览查看各网页 样式文件： outcss.css Link_Outcss1.html Link_Outcss2.html 引入的样式文件 链接外部样式表（LINK） 使用@import （导入）标签 : HEAD STYLE TYPE=text/css @ import newstyle.css; /STYLE /HEAD 引入的样式文件 导入外部样式表（Import） 注意：其他的CSS规则应该仍然包括在Style元素中，但所有的@import声明必须放在样式表的开始部分。 有三种方式将CSS应用到网页中： ①使用行内样式表 ②使用内嵌样式表 ③使用外部样式表 CSS常用的选择器：HTML选择器、ID选择器、Class选择器，还有伪类。 * CSS有哪些常用的选择器？ 有几种方式将CSS应用到网页中？ style /标签可以放在body /标签中吗？ 小结1 style /标签不可以放在body /标签中，它只可以放在head /标签中。 * 常用的样式属性 常用的文本属性 font-size 文本的字体大小 font-family 文本的字体 font-weight 文本字体的粗细 font-style 文本的字体样式 color 设置文本的颜色 text-align 设置文本的对齐方式 注意：设置文本颜色用“color”，而不是“font-color”。 * 常用的样式属性 常用的边界、边框和填充属性 margin-right 右边界 margin-left 左边界 margin-top 上边界 margin-bottom 下边界 margin border padding border-width 边框的宽度 padding-left 左填充 padding-bottom 下填充 * 常用的样式属性 常用的背景属性 background-color 设置背景颜色 background-image 设置背景图像 background-repeat 指定背景图像是否如何铺排 menu { background-image: url(images/menu.gif); background-repeat: repeat-y; } p { background-color: #00FF00; color:#FFF; } * 小结2 要实现如下的样式效果，应该如何编写代码。 代码示例 * DIV+CSS布局实例 本例将要完成的布局效果如下图。 如何让多个DIV在同一行显示？ 代码示例 * DIV+CSS布局实例 html …… body div id=top顶部广告区/div div id=nav导航区/div div id=mid div id=left纵向导航区/div div id=right div class=content内容A/div div class=content id=content2内容B/div div class=content内容C/div div class=content id=content2内容D/div div class=content id=content2内容E/div div class=content内容F/div div class=content id=content2内容G/div div class=content内容H/div /div /div div id=footer底部版权区/div /body /html * DIV+CSS布局实例 style type=text/css * { margin:0px; padding:0px; } #top,#nav,#mid,#footer { width:500px; margin:0px auto; } #top {