《课件网页设计方案与制作.ppt》由会员分享，可在线阅读，更多相关《课件网页设计方案与制作.ppt（21页珍藏版）》请在三一文库上搜索。
1、网页设计与制作,江西信息应用职业技术学院 电子商务与管理系,第7章 使用CSS样式控制网页外观,教学目标： 使用CSS样式控制网页外观。 教法：教、学、做一体,认识CSS,CSS：Cascading Style Sheets，层叠样式表，级联样式表。 一组格式设置规则，以控制页面外观。 网页表现与内容分离的一种样式设计语言。页面内容存放在页面里，而CSS样式存放在CSS文件或页面文档的某个位置，一般是在 。 更容易维护站点；浏览器下载页面速度快；利于搜索引擎搜索软件抓取站点信息。,样式种类,外部样式：将网页链接到外部样式表。 本页样式：在网页上创建嵌入的样式表。 元素样式：内嵌样式到某个网页元
2、素。,层叠？,层叠次序：当一个网页元素被不止一个样式定义时，会使用哪个样式呢？ 元素样式（在 html 元素内部）本页样式（位于 标签内部）外部样式表。,外部样式表,作用：在站点上所有或部分网页上一致地应用相同样式时，可使用外部样式表，以达到网页外观的一致性。 如果更改样式，只需在外部样式表中修改一次，而该更改会反映到所有与该样式表相链接的网页上。 通常外部样式表以 .css 做为文件扩展名，例如 styles.css。 在需要此样式的页面中将其链接进来，如： ,本页样式表,当只是要定义当前网页的样式，可使用嵌入的样式表。 嵌入的样式表“嵌”在网页的 标记符内。 嵌入的样式表中的样式只能在这个
3、网页上使用。,元素样式,针对某个网页中某个元素设置样式。 例如：江西通达,CSS 基础语法,选择器+声明。选择器通常是需要设置样式的网页元素（通常是HTML标签）。每条声明由一个属性和一个值组成。 例如：h1 color:red; font-size:14px;。将 h1 元素内的文字颜色定义为红色，字体大小为 14 像素。h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。本例中，除了英文单词 red，还可以使用十六进制的颜色值 #ff0000,例如：p text-align: center; color: black; font-family: aria
4、l; 定义一段红色文字的居中等格式。,公司精神：诚信、聪慧、勤奋、专注,创建设置CSS,CSS样式面板,具体如何操作？,类,可创建自定义的样式。 .ww font-family: “黑体“;font-size: 18px;color: #FF0000; 样式名字前边要有一个句点。如果没有输入这个句点，DW自动输入。 可应用于任何标签。class 属性 江西通达 搜狐,标签（重新定义特定标签的外观）,对某种标签的外观重新定义、规范或扩展其属性。 例如：a text-decoration: line-through; 要重新定义 HTML 标签样式，可以键入一个 HTML 标签或者从弹出菜单中选择
5、一个。,高级（ID、伪类选择器）,对标签组合定义或定义ID标签 ID标签属性用于定义一个元素独特的样式。 用于控制链接的显示效果，共有4种选择器： a:link 未访问的链接 a:visited 已访问的链接 a:hover 当有鼠标悬停在链接上 a:active 被选择的链接 写法，一定要按以上顺序。,应用CSS样式,附加样式表,属性面板 文本菜单/CSS样式/,练习,创建CSS文件控制站点所有网页外观。 所有网页链接到CSS文件。 设置：网页背景图片、上边界顶格。 标签组合td p：单元格中段落行高200%，字体文本（微软雅黑，14像素）。 类1：字体黑体，18像素，粗体，倾，蓝色，用于首页车名,制作页面底部：通过表格ID，文字居中，白色，行高200%等。 设置图片滤镜效果。Alpha(透明）、Xray（显示对象的轮廓）、FlipH（水平翻转） gray（以灰度形式显示）、 invert（反转） 制作二种链接效果，其中一种利用样式做出按钮效果。,