CSS简介以及基本属性教学.pptVIP

CSS的简介 　　一本优秀的杂志不仅仅是具备一套完整的结构内容、巧妙出奇的页面布局，还需要一个统一的风格，好的风格代表了一种高级的品味。 优秀的网页制作也不再是漂亮的图形、优美的布局和完整的结构就能满足了，使网站整体保持一致的风格，例如字体字形的显示，页面边距等等，也是使网站作品有美感有品味的关键一步。  层叠样式表为你完成这一任务。 通过大量的 HTML 语言实现，即每次遇上标题，用 HTML 标签进行设置： 　　 h1 font face= 宋体 color=blue 这里是标题 /font /h1 　　显然你很容易就会为之头大如斗的，即使你有很好的耐心却难保挂一漏万，设置一多就会有所疏忽。 　　――最后，对于公司建设的大型站点来说，往往分成几个组各自开发，这时候就更需要一个统一的样式表来规划网站的整体面貌，各个组都在遵循这统一的样式表的基础上进行各自的开发建设。 CSS 的引入 W3C 组织于 1996 年推出 CSS1.0 技术标准，1998 年推出 CSS2.0 技术标准。 CSS 是 Cascading Style Sheets 的缩写，译为“层叠样式表”，是用于控制网页样式的一种标记性语言。 HTML 控制网页内容的结构，CSS 控制网页内容的样式。 CSS 实现了网页的结构与表现相分离。 * 为什么需要CSS样式表 HTML标签的外观样式比较单一 颜色只有黑白 字体类型和大小无变化 样式表的作用相当于华丽的衣服 演示示例1：演示能换皮肤的页面 内容相同 外观不同 * 为什么需要CSS样式表 样式表能实现内容与样式的分离，方便团队开发 程序员写代码 美工做样式 内容与样式和谐统一的完整网页 * 样式表的基本语法 样式表的基本结构 STYLE type=text/css P {color:red; font-size:30px; font-family:隶书;} …… /STYLE 声明文档样式表结束 文档样式表开始，类型为CSS样式 样式规则 选择器 样式规则 P {color:red; font-size:30px; font-family:隶书;} 属性 属性的值 * 样式表的基本语法 HTML HEAD TITLE样式规则/TITLE STYLE type=text/css P { color:red; font-family:隶书; font-size:24px;} /STYLE /HEAD BODY H2静夜思/H2 P床前明月光，/P P疑是地上霜。/P P我是郭德刚，/P P低头思故乡。/P /BODY /HTML 查看源代码 本页面中所有的P标签都应用了此样式 所有的段落都采用P样式，保证风格统一 用分号隔开 选择器 如何编写此样式?字体类型为隶书、大小24px * STYLE type=text/css .red { color:red; font-family:隶书; font-size:24px; } …… /STYLE 样式表的基本语法 如果希望其他的标签也能采用P标签的样式，怎么办？ 其他标签和P标签应该采用相同的样式，所以要为它们定义一个共享样式。 类样式(class) .类名 样式规则 * 样式表的基本语法 HEAD TITLE样式规则/TITLE STYLE type=text/css .red { color:red; font-family:隶书; } /STYLE /HEAD BODY H2 class=red静夜思/H2 P class=red床前明月光，/P P class=red疑是地上霜。/P P我是郭德刚，/P P class=red低头思故乡。/P /BODY 查看源代码 CLASS类选择器 为类选择器定义的样式规则 应用类选择器 class＝”类名“ H2和P标签要应用同一样式 如何实现这样的样式效果？字体类型都为隶书 * 样式表高级语法 选择器的分组 继承及其问题 但是在那个浏览器大战的血腥年代里，对标准的支持并不是企业的优先选择。比方说，Netscape 4 就不支持继承，它不仅忽略继承，而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题，在表格内的字体样式会被忽略。 * h1,h2,h3,h4,h5,h6 { color: green; } 常用的样式属性 文本属性 文本属性 说 明 font-size 字体大小 font