09层叠样式表CSS.pptVIP

* * * * * * * * * * * * * * * * * * * * * * 注：HTML中所有的Tag都可以作为selector。 * 注：HTML中所有的Tag都可以作为selector。 * 注：HTML中所有的Tag都可以作为selector。 * html head titleCSS伪类 pseudo-class/title style type=text/css a.c1:link {color: #FF0000} /* 未被访问的链接 红色 */ a.c1:visited {color: #00FF00} /* 已被访问过的链接 绿色 */ a.c1:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */ a.c1:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */ /style /head body pa class = c1 href = 布啦布啦网站 - 网页教程与代码的中文站点/a/p pa href = /wow/index.html魔兽世界中的可爱玩家/a/p /body /html * 注：HTML中所有的Tag都可以作为selector。 * * 应用导航条文本格式的规则 在“文档”窗口中打开 index.html 页，单击单词 Cuisine 将插入点置于该单词中的某个位置。 在标签选择器中，单击最右边的 a 标签。 此操作将为指定的 a 标签或链接选择所有文本。 在“属性”检查器中，从“样式”弹出式菜单中选择“navigation”。 在“文档”窗口中，Cuisine 文本根据为 .navigation 规则所定义的属性被设置为导航条按钮。 对于导航条中的每个链接，重复第 1 步到第 3 步。 设置导航条文本的格式 应用导航条文本格式的规则 设置导航条文本的格式 注意 请确保每个（或每组）链接的单词之间有空格（不是回车） 确保两个链接之间的空格本身未被链接。 如果空格已链接，请小心选择链接的空格，在“属性”检查器中清除“链接”文本框，并按 Enter 结果 添加鼠标经过效果 现在添加一个鼠标经过效果 导航条块的背景色在每次鼠标指针经过某个链接时改变颜色。 添加鼠标经过效果，需添加包含 :hover 伪类的新规则。 当用户把鼠标指针停留在已设置格式的页面元素上时，:hover 伪类会影响该元素的变化。 例如，将 :hover 伪类添加到 .navigation 类样式 (.navigation:hover) 以创建新规则时，根据 .navigation:hover 规则的属性，所有用 .navigation 规则设置格式的文本元素都会发生变化。 设置导航条文本的格式 添加鼠标经过效果 打开 cafe_townsend.css 文件。 选择整个 .navigation 规则，并复制，并粘贴在该规则的末尾 。 将 :hover 伪类添加到已粘贴的 .navigation 选择器中，如图所示： 设置导航条文本的格式 添加鼠标经过效果 在新的 .navigation:hover 规则中，将当前的背景色 (#993300) 替换为 #D03D03。 保存并关闭该文件。 浏览器中预览该页面，当将鼠标指针停留在任何一个链接上时，可以看到新的鼠标经过效果。 设置导航条文本的格式 居中对齐页面内容(可选) 在“文档”窗口中打开 index.html 页面时，单击标签选择器中的 body 标签。 在“属性”检查器中，单击“居中对齐”按钮。 Dreamweaver 将插入用于居中对齐页面正文内容的 CSS div 标签，居中对齐文档内容。 总结+补充 CSS 的盒子模式 (Box model)。 CSS 中有个重要的概念，就是盒子模式 (Box model)。 margin 边距 ：一个元素所占空间的边缘到相邻元素之间的距离。 border 边框：一个元素的边线。 padding 间隙 (也有人称做补丁) ：元素内容到元素边框的距离。 content (内容，比如文本，图片等) CSS 背景属性指的是 content 和 padding 区域。 CSS 属性中的 width 和 height 指的是 content 区域的宽和高。 CSS语法 基本语法 一个样式(Style)的语法由三部分构成： 选择器Selector 属性Property 属性值Value p {color:blue} 多个属性之间用分号分隔 p {text-align:center;color:red} 也可以分行写 p { text-align: center; color: black; font-fam