网页设计方案与制作ppt课件

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; c

4、olor: black; font-family: arial; 定义一段红色文字的居中等格式。 公司精神：诚信、聪明、勤劳、专注创建创建设置设置CSSCSS款式款式面板面板 详细如何操作？类类 可创建自定义的款式。 .ww font-family: 黑体;font-size: 18px;color: #FF0000; 款式名字前边要有一个句点。假设没有输入这个句点，DW自动输入。 可运用于任何标签。class 属性 江西通达 搜狐标签重新定义特定标签的外观标签重新定义特定标签的外观 对某种标签的外观重新定义、规范或扩展其属性。 例如：a text-decoration: line-throu

5、gh; 要重新定义 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%等。 设置图