《CSS.ppt

安徽农业大学 HTML(第一版)——在1993年6月发为互联网工程工作小组 (IETF)工作草案发布（并非标准）. HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时 HTML 3.2——1996年1月14日，W3C推荐标准 HTML 4.0——1997年12月18日，W3C推荐标准 HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准 ISO/IEC 15445:2000（“ISO HTML”）——2000年5月15日发布，基于严格的HTML 4.01语法，是国际标准化组织和国际电工委员会的标准 2008年1月22日第一份正式HTML 5草案发布。 自从上世界90年代以来，微软一直统治着Web世界。尽管其浏览器市场份额不断下滑，但依然有超过65%的网民选择使用IE浏览器。 大约有26%用户依然在使用2001年发布的IE6。 IE8不支持任何HTML5功能 IE9支持HTML5 。 CSS 1 在1996年末成为推荐标准，其中包含非常基本的属性，如字体，颜色等。 CSS2 在此基础上添加了高级概念（比如浮动和定位）以及高级的选择器（比如子选择器、相邻同胞选择器和通用选择器）。在1998年就已经成为推荐标准。 Css3在IE9.0中支持 1.CSS的出现 HTML 标签原本被设计为用于定义文档内容。通过使用 h1、p、table 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。 同时文档布局由浏览器来完成，而不使用任何的格式化标签。 两种主要的浏览器（Netscape 和 IE）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，文档内容越来越不够清晰 1.CSS的出现 为了解决这个问题，万维网联盟（W3C），在 HTML 4.0 之外创造Cascading Style Sheets（层叠样式表单） 这位HTML的表弟 向世人保证：将对布局、字体、颜色、背景和其它文图 效果实现更加精确的控制。 和HTML一样,可以用任何一种文本编辑工具来编写 2.CSS样式表能为我们做什么? 将格式和结构分离。 以前所未有的能力控制页面布局。 制作体积更小下载更快的网页。 将许多网页同时更新。 浏览器将成为你更友好的界面 例： HTML HEAD TITLE我的第一个样式表/TITLE STYLE TYPE=text/css !-- H1 { color: green;} P { background: yellow;} -- /STYLE /HEAD BODY H1样式表/H1 P能够将内容和样式分离/P /BODY /HTML 3.如何将CSS加入HTML文档中？ 内联样式表，比如：p style=font-size：14pt；color：blue蓝色14号文字/p 内部样式表 ，把CSS文档放到head…/head中：style type=text/css …… /style 外部样式表 ，将编辑好的CSS文档保存成“.CSS”文件，然后在head中定义： head link rel=stylesheet href=style.css …… /head 4.CSS的层叠性 当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？ 优先级如下： 内联样式（在 HTML 元素内部） 内部样式表（位于 head 标签内部） 外部样式表 浏览器缺省设置 5.CSS 语法 CSS 语法由三部分构成：选择器、属性和值：selector {property: value} 如： P {color: blue} H1 { color: green; font-size: 37px; }  5.CSS 语法——选择器的种类 标签 类选择器 .red {color:red} .big{font-size:22px} h1 class=“red” 标题1居中 /h1 p class=“red big” 两种class /p id 选择器(理论上只能用一次) #red {color:red;} p id=red这个段落是红色。/p 5.CSS 语法——复合选择器 交集选择器 如：P.special{color:red} 仅适用于p class=“special” 并集选择器，如： h1,h2,h3,h4,h5,h6 { color: green; } 后代选择器，如:p span{color:red;}.special i{color:red;}#one li{padding-left:5px;}td.out