^internet与网页设计(css网页样式设计).pptVIP

Internet与网页设计 Internet Homepage Design 第四章 CSS网页样式设计 一、CSS概述 CSS（Cascading Style Sheets，层叠样式表单），专门用于设置网页样式（颜色、字体、背景、定位等样式的网页设计语言。 1996年W3C标准化组织推出CSSI规范（层叠样式表单一级）规范，其控制的网页样式多达50多个。98年3月W3C推出计划标准CSSII。 CSS的作用是解决HTML语言文档结构与样式显示混和的缺陷，使 样式描述内容彻底独立于结构文档。 用CSS，你可以做什么？ 你可以将格式和结构分离。 你可以以前所未有的能力控制页面的布局 你可以制作出体积更小、下载更快的网页 你可以更快的维护、更新大量的网页 浏览器将成为最友好的界面 示例 建立一个网页(test.htm)，内容如下： html head title我的第一个样式表/title /head body h1样式表:网页设计的利器!/h1 pamaze your friends!squash your enemies!/p /body /html 在head../head之间插入以下代码： style type=text/css H1{color:green;font-size:37px;font-family:隶书} p {text-indent:1cm;background:yellow;font-family:courier} /style 在IE浏览器中察看效果 示例 建立一样式表文件(test.css)，内容如下： A:link {font-size: 9pt; line-height: 150%; color:green; text-decoration: none} /*未访问的链接*/ A:visited {font-size: 9pt; color:blue;text-decoration: none} /*已访问的链接*/ A:hover {font-size: 11pt;font-style:italic;color:red; text-decoration: underline;} /*鼠标接近时*/ A:active {font-size: 9pt; color : black;text-decoration: underline} /*正激活的链接*/ 建立一网页（样式表验证.htm)，设置几个链接,观察“链接样式表”前后网页上链接处的变化 link rel=stylesheet type=text/css href=test.css 二、使用CSS的方法 独立建立外部样式表单文件 其样式可作用于全部网页 把样式定义直接写在head…/head中 其样式可作用于整个网页 把样式定义直接写在body…/body中 其样式可作用于网页的个别元素 使用外部样式表单文件 html head meta http-equiv=Content-Type content=text/html; charset=gb2312 titleNew Page 1/title link rel=stylesheet type=text/css href=test.css /head body a href= index.htm主页/a …… /body /html 把样式定义直接写在head…/head中 html head meta http-equiv=Content-Type content=text/html; charset=gb2312 titleNew Page 9/title style !-- .zdy { font-family: 幼圆; font-size: 24pt; color: #FF0000; font-weight: bold } -- /style /head body p class=zdy东方不败/p p class=zdy东方必败/p /body /html 把样式定义直接写在body…/body中 html head meta http-equiv=Content-Type content=text/html; charset=gb2312 titleNew Page 9/title /head body h3 style=font-family:楷体;font