网站设计与建设层叠式样式表CSS.ppt

网站设计与建设层叠式样式表CSS.ppt

《网站设计与建设层叠式样式表CSS.ppt》由会员分享，可在线阅读，更多相关《网站设计与建设层叠式样式表CSS.ppt（32页珍藏版）》请在冰豆网上搜索。

网站设计与建设Websitedesignanddevelopments第第12章章层叠式样式表层叠式样式表CSS第三部分网站设计技术nCSS是CascadingStyleSheets（层叠样式表单）n表现与内容分离HTML的Tag主要是定义网页的内容（Content），而CSS决定这些网页内容如何显示（Layout）。

n创建层叠样式表的四种方法，15.1.样式表n是放置在网页HEAD部分的格式指令的集合n和分别被浏览器识别为CSS的开始和结束，n通过改变样式表可以改变网站的外观n使用样式可以做出影响HTML多个元素的改变，n或者对整个文档进行样式的改变，n也可以周期性地改变样式。

!

-使用使用使用使用CSSCSS的一个的一个的一个的一个简单实简单实例。

例。

例。

例。

15.2层叠样式表nCSS层叠样式表（CascadingStylesheet）指的是在一个单一的文件中使用多个样式定义。

n一个样式表文件可以链接到网站的每一个文档，因此可以控制整个网站的外观。

n术语Cascading（层叠）指的是继承或者在链接的、导入的、内嵌的以及内联样式之间的等级关系。

n优先级在任何一个链接的文档中的样式定义会覆盖链接的样式表。

12.3CSS基本语法nCSS的描述部分是由三部分组成的，分别是选择器、属性和属性值：

选择器（selector）属性（Property）:

属性值（Value）;12.4CSS定义和使用方式定义和使用样式定义和使用样式的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链入导入链接来自一个样式表metahttp-equiv=Content-Typecontent=text/html;charset=gb2312CSSCSS的一个的一个的一个的一个简单实简单实例例例例计计算机科学与技算机科学与技算机科学与技算机科学与技术术学院学院学院学院spanstyle=background-color:

#ff0000;color:

yellow;font-size:

30pt这这是一个使用是一个使用是一个使用是一个使用CSSCSS修修修修饰饰文字的文字的文字的文字的简单实简单实例例例例一个一个一个一个CSSCSS文件文件文件文件链接来自一个样式表（续）sample-1505.css!

-导入样式信息：

仅适于IEmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312CSSCSS的一个的一个的一个的一个简单实简单实例例例例importurl（sample-1505.css）;importurl（sample-1505.css）;h1color:

redh1color:

red计计算机科学与技算机科学与技算机科学与技算机科学与技术术学院学院学院学院spanstyle=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#navigatorfont-size:

14px;text-align:

left;演示CSS这是页面最上端的标题这是页面左侧标题，用来导航这是页面新闻的标题metahttp-equiv=Content-Typecontent=text/html;charset=gb2312CSSCSS内联样式内联样式内联样式内联样式importurl（sample-1505.css）;importurl（sample-1505.css）;h1color:

redh1color:

red；.mycolorcolor:

green;font-family:

.mycolorcolor:

green;font-family:

幼圆幼圆幼圆幼圆计算机科学与技术学院计算机科学与技术学院计算机科学与技术学院计算机科学与技术学院spanstyle=background-color:

#ff0000;color:

yellow;font-spansize:

30ptspan用用用用CSSCSS内联样式内联样式内联样式内联样式未使用内联样式未使用内联样式未使用内联样式未使用内联样式山东大学山东大学山东大学山东大学使用自己定义的使用自己定义的使用自己定义的使用自己定义的绿色绿色绿色绿色n层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素n当样式表继承遇到冲突时，总是以最后定义的样式为准。

n样式（Styles）的优先级依次是内嵌样式、内部样式、外部样式、浏览器缺省。

125CSS样式n2011年6月发布为W3C推荐标准。

nCSS3里增加了不少功能，如：

“border-radius”、“text-shadow”、“transform”以及“transition”等。

nW3C于2011年9月开始设计CSS4CSS常用样式常用样式-

（1）CSS背景背景bodybackground-color:

yellowh1background-color:

#00ff00h2background-color:

transparentpbackground-color:

rgb（250,0,255）p.no2background-color:

gray;padding:

100px;这是标题1这是标题2这是段落这个段落设置了内边距CSS常用样式常用样式-

（2）CSS文本属性文本属性CSS常用样式常用样式-（3）CSS字体属性字体属性CSS框模型（BoxModel）n定了元素框处理元素内容、内边距、边框和外边距的方式。

nn.test_demooverflow:

scroll;height:

120px;width:

120px;background:

#CCCCCC;ndfdfdfsfsdfsdfsdffghfghfghfghfghfghfghfghfghfghfghnnmargin-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;.rightfloat:

right;background:

#000000;.leftfloat:

left;background:

#009933;.mainbackground:

#F60;height:

300px;RIGHTLEFTMAIN