山东大学《网站设计与建设》课件第12章 层叠式样式表CSS

第第12章章 层叠式样式表层叠式样式表CSS第三部分 网站设计技术nCSS是Cascading Style Sheets（层叠样式表单）n表现与内容分离HTML的Tag主要是定义网页的内容(Content)，而CSS决定这些网页内容如何显示(Layout)。n创建层叠样式表的四种方法，15.1.样式表n是放置在网页HEAD部分的格式指令的集合n和分别被浏览器识别为CSS的开始和结束，n通过改变样式表可以改变网站的外观n使用样式可以做出影响HTML多个元素的改变，n或者对整个文档进行样式的改变，n也可以周期性地改变样式。!-使用使用使用使用CSSCSS的一个简单实例。的一个简单实例。的一个简单实例。的一个简单实例。15.2 层叠样式表nCSS层叠样式表（Cascading Stylesheet）指的是在一个单一的文件中使用多个样式定义。n一个样式表文件可以链接到网站的每一个文档，因此可以控制整个网站的外观。n术语Cascading（层叠）指的是继承或者在链接的、导入的、内嵌的以及内联样式之间的等级关系。n优先级在任何一个链接的文档中的样式定义会覆盖链接的样式表。12.3 CSS基本语法nCSS的描述部分是由三部分组成的，分别是选择器、属性和属性值：选择器(selector) 属性(Property): 属性值(Value); 12.4 CSS定义和使用方式定义和使用样式定义和使用样式 的4种方法：n外部样式表文件链接导入样式信息n内部样式表n内嵌样式内部样式表!-使用使用使用使用CSSCSS的一个简单实例。的一个简单实例。的一个简单实例。的一个简单实例。n内部样式表是写在HTML的里面的，只对所在的网页有效。n使用内部样式表可能是使用样式最简单的方法。n使用标记符在HTML文档的head部分放置信息。n样式信息包含在注释标记符“”中内嵌样式n内嵌样式是混合在HTML标记里使用的，n用这种方法，可以很简单的对某个元素单独定义样式，只对所在的Tag有效。n内嵌样式的使用是直接在HTML标记里加入style参数，而style参数的内容就是CSS的属性和值n只适合用于偶然的样式改变。n最优先CSSCSS的一个简单实例的一个简单实例的一个简单实例的一个简单实例!-使用使用使用使用CSSCSS的一个简单实例。的一个简单实例。的一个简单实例。的一个简单实例。这是一这是一这是一这是一个使用个使用个使用个使用CSSCSS修饰文字的简单实例修饰文字的简单实例修饰文字的简单实例修饰文字的简单实例n在style参数后面的引号里的内容相当于在样式表大括号里的内容。n注意：style参数可以应用于任意BODY内的元素（包括BODY本身）。n使用内嵌样式的好处是可以在一个单一标记符中指定一个属性集合，但只适合用于偶然的样式改变。n外部文件 *.css链入导入链接来自一个样式表meta http-equiv=Content-Type content=text/html; charset=gb2312CSSCSS的一个简单实例的一个简单实例的一个简单实例的一个简单实例计算机科学与技术学院计算机科学与技术学院计算机科学与技术学院计算机科学与技术学院span style=background-color:#ff0000;color:yellow;font-size:30pt这是一个使用这是一个使用这是一个使用这是一个使用CSSCSS修饰文字的简单实例修饰文字的简单实例修饰文字的简单实例修饰文字的简单实例一个一个一个一个CSSCSS文件文件文件文件链接来自一个样式表(续)sample-1505.css!-导入样式信息：仅适于IEmeta http-equiv=Content-Type content=text/html; charset=gb2312CSSCSS的一个简单实例的一个简单实例的一个简单实例的一个简单实例 import url(sample-1505.css); import url(sample-1505.css); h1 color:red h1 color:red计算机科学与技术学院计算机科学与技术学院计算机科学与技术学院计算机科学与技术学院span style=background-color:#ff0000;color:yellow;font-size:30pt这是一个使用这是一个使用这是一个使用这是一个使用CSSCSS修饰文字的简单实例修饰文字的简单实例修饰文字的简单实例修饰文字的简单实例山东大学山东大学山东大学山东大学class和和id用法用法n如果不希望标记的所有样式都被修改n需要用到两个标记属性：class和id。nid 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。n指定h1.titlefont-weight: bolder; text-align: center;h1#navigator font-size: 14px; text-align: left; 演示CSS 这是页面最上端的标题 这是页面左侧标题，用来导航 这是页面新闻的标题 meta http-equiv=Content-Type content=text/html; charset=gb2312CSSCSS内联样式内联样式内联样式内联样式 import url(sample-1505.css); import url(sample-1505.css); h1 color:red h1 color:red； .mycolor color:green;font-family:.mycolor color:green;font-family:幼圆幼圆幼圆幼圆 计算机科学与技术学院计算机科学与技术学院计算机科学与技术学院计算机科学与技术学院span style=background-color:#ff0000;color:yellow;font-spansize:30ptspan用用用用CSSCSS内联样式内联样式内联样式内联样式未使用内联样式未使用内联样式未使用内联样式未使用内联样式山东大学山东大学山东大学山东大学使用自己定义的使用自己定义的使用自己定义的使用自己定义的绿色绿色绿色绿色n层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素n当样式表继承遇到冲突时，总是以最后定义的样式为准。n样式(Styles)的优先级依次是内嵌样式、内部样式、外部样式、浏览器缺省。125 CSS样式n2011年6月 发布为 W3C 推荐标准。nCSS3 里增加了不少功能，如：“border-radius”、“text-shadow”、“transform”以及“transition”等。nW3C于2011年9月开始设计CSS4CSS常用样式常用样式- （1）CSS背景背景body background-color: yellowh1 background-color: #00ff00h2 background-color: transparentp background-color: rgb(250,0,255)p.no2 background-color: gray; padding: 100px;这是标题 1这是标题 2这是段落这个段落设置了内边距CSS常用样式常用样式- （2）CSS文本属性文本属性CSS常用样式常用样式- （3）CSS字体属性字体属性CSS框模型 (Box Model)n定了元素框处理元素内容、内边距、边框和外边距的方式。nn .test_demo overflow: scroll; height: 120px; width: 120px; background:#CCCCCC;n dfdfdfsfsdfsdfsdffghfghfghfghfghfghfghfghfghfghfghnnmargin-left:2cmnpadding:1cmCSS定位定位nCSS 为定位和浮动提供了一些属性，n利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，n还可以完成多年来通常需要使用多个表格才能完成的任务。n定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。n所谓相对定位是指允许元素在相对于文档布局的原始位置上进行偏移；n而绝对定位允许元素与原始的文档布局分离且任意定位。n实现CSS的定位最终还是要靠属性，nCSS的定位属性： position、left、top、width、height、overflow、z-index、visibility和position 。.right,.leftheight:300px;width:200px; .right float:right;background:#000000; .left float:left;background:#009933; .mainbackground:#F60; height:300px; RIGHT LEFT MAIN