专题五 CSS.pptVIP

专题五 CSS层叠样式表 提纲 Web项目人员职责 CSS CSS滤镜技术 Web项目人员职责表 CSS技术 CSS的起源、使用者 HTML的不足：文档内容结构与显示风格的混合；需要有一种新的规范，将显示描述彻底独立于文档结构。 为了响应这个快速增长的需求，W3C开始为HTML制定样式单机制，即CSS层叠样式表： 1996年12月，W3C联盟推出CSS level1 规范，得到了Microsoft和Netscape公司的支持 1998年5月，W3C推出了CSS level2，使得这项技术在世界范围内得到了更广泛的支持 发展至今，在网站开发过程中，CSS主要是被设计人员使用，是为Web designer提供的一种设计技术。 CSS的特点 CSS样式介绍 样式符为HTML标记 H1{font-size: x-large; color: red} 样式符为用户自定义class .note{font-size: small; color: green} 使用时，p class=“note” 样式符为用户自定义ID #yellow{color: yellow} 使用时，p ID=yellow CSS引用方法 在头部定义，在主体部分引用 head style 样式１ 样式２ /style /head Eg:例3.4 链接外部样式表文件 将重复的样式信息存放在一个外部样式表文件(.css)文件中，在HTML文档里通过link标记引入其中的样式 link rel=“stylesheet” type=“text/css” href=“.css” Eg:例3.5 练习： Style定义 h1{color:#66CCFF} #paragraph{ background:#33CCFF} HTML中引用 h1welcome/h1 p id=paragraphWelcome to CSS/p CSS属性介绍 CSS属性有： 字体属性：设置网页中字符的显示方式，如大小、粗细、字体等 文本属性：控制文本的段落格式，如字符间距、行间距、对齐方式等 颜色和背景属性：控制文本颜色属性和背景属性 边框属性：设置HTML元素的边界属性，包括边界、边框、填充属性等 浮动属性：将文本环绕在一个元素的周围 定位属性：控制元素在页面上的位置 列表属性：设置有序、无序列表的相关特性 鼠标属性：设置鼠标的不同形状 … 参考css2.0中文手册 DIV和CSS结合对网页外观进行设计 Div介绍 外观并不是最重要的。一个结构良好的 HTML 页面可以以任何外观表现出来；把div用作页面结构设计是目前比较流行的一种页面设计方式。 div在一个HTML文档中可以定义一个通常被用来把块元素组合起来，进行区域或段落统一的风格定义；div通常与CSS一起使用来对网页进行布局。 用CSS对页面风格定义 　　!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title睿博/title link href=all.css rel=stylesheet type=text/css / /head body 　　div id=container 　　div id=Header睿博!--页面头部-- 　　/div !--导航菜单部分开始-- div id=GlobalNav ul 　　　　lia href=index.html首页/a/li 　　　　li class=menuDiv/li 　　　　lia href=solutions.html解决方案/a/li 　　　　li class=menuDiv/li 　　　　lia href=succases.html成功案例/a/li 　　　　li class=menuDiv/li 　　　　lia href=“CustomService.html”客户留言板/a/li 　　　　li class=menuDiv/li　 　　/ul /div !--导航菜单部分结束-- 　　div id=PageBody!--页面主体--　　　　 　　　　div id=MainBody!--主体内容-- 为您的企业建设门户 br 和您一道为企业的成功努力！ 　　　　/div