网页设计与制作.pptVIP

网页设计与制作 江西信息应用职业技术学院 电子商务与管理系 认识CSS CSS：Cascading Style Sheets，层叠样式表，级联样式表。 一组格式设置规则，以控制页面外观。 网页表现与内容分离的一种样式设计语言。页面内容存放在页面里body…/body，而CSS样式存放在CSS文件或页面文档的某个位置，一般是在head…/head 。 更容易维护站点；浏览器下载页面速度快；利于搜索引擎搜索软件抓取站点信息。 样式种类 外部样式：将网页链接到外部样式表。 本页样式：在网页上创建嵌入的样式表。 元素样式：内嵌样式到某个网页元素。 层叠？ 层叠次序：当一个网页元素被不止一个样式定义时，会使用哪个样式呢？ 元素样式（在 html 元素内部）本页样式（位于 head 标签内部）外部样式表。 外部样式表 作用：在站点上所有或部分网页上一致地应用相同样式时，可使用外部样式表，以达到网页外观的一致性。 如果更改样式，只需在外部样式表中修改一次，而该更改会反映到所有与该样式表相链接的网页上。 通常外部样式表以 .css 做为文件扩展名，例如 styles.css。 在需要此样式的页面中将其链接进来，如： link href=/styles.css rel=stylesheet type=text/css/ 本页样式表 当只是要定义当前网页的样式，可使用嵌入的样式表。 嵌入的样式表“嵌”在网页的 head 标记符内。 嵌入的样式表中的样式只能在这个网页上使用。 元素样式 针对某个网页中某个元素设置样式。 例如：p style=font-family:黑体;font-size:30px; font-stretch:expanded江西通达/p 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: arial;} 定义一段红色文字的居中等格式。 p align=centerspan class=STYLE4公司精神：诚信、聪慧、勤奋、专注/span/p 创建\设置CSS [CSS样式]面板 具体如何操作？ 类 可创建自定义的样式。 .ww {font-family: 黑体;font-size: 18px;color: #FF0000;} 样式名字前边要有一个句点。如果没有输入这个句点，DW自动输入。 可应用于任何标签。class 属性 p class= ww 江西通达/p a href=“#” class=“ww”搜狐/a 标签（重新定义特定标签的外观） 对某种标签的外观重新定义、规范或扩展其属性。 例如：a {text-decoration: line-through;} 要重新定义 HTML 标签样式，可以键入一个 HTML 标签或者从弹出菜单中选择一个。 高级（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（反转） 制作二种链接效果，其中一种利用样式做出按钮效果。 * 第7章 使用CSS样式控制网页外观 教学目标： 使用CSS样式控制网页外观。 教法：教、学、做一体 *