web技术基础第三章.ppt

web技术基础第三章.ppt

《web技术基础第三章.ppt》由会员分享，可在线阅读，更多相关《web技术基础第三章.ppt（24页珍藏版）》请在冰豆网上搜索。

1,第3章CSS,1,2,CSS内容介绍,CSS概述CSS设置方式CSS语法样式规则注释和样式规则优先级CSS的属性分类介绍,2,3,CSS编程技术,CSS（CascadingStyleSheets）中文翻译为层叠样式表单，简称样式单，是近几年才发展起来的新技术1998年5月12日，CSSlevel2才成为W3C的标准，它是一组样式，样式中的属性在HTML元素中依次出现，并显示在浏览器中。

样式可以定义在HTML文档的标志里，也可以在外部附加文档作为外加文档。

CSS的功能无比强大，W3C也极力向世界推广这一先进技术。

3,4,CSS概述,简单来说，HTML是一种标记语言，而CSS是这种标记的一种重要扩展，可以进一步美化页面。

换句话说，CSS是一种用来装饰HTML的标记集合。

CSS样式规则组成为：

选择符属性:

值，单一选择符的复合样式声明应该用分号隔开，如：

选择符属性1:

值1;属性2:

值2。

CSS可以用来精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、边框等。

使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。

4,5,样式表的使用结构多个网页文件共享样式文件多个样式文件套用在一个网页文件上,HTML,CSS样式文件N,CSS样式文件1,5,6,CSS设置方式,7,样式表应用案例使用用CSS样式的4种方式显示界面,8,CSS,1.直接定义style属性直接定义HTML标记中的style属性用四种方式将样式表功能应用到Web页面中,9,CSS,2.定义内部样式表定义内部样式表/*定义样式*/用四种方式将样式表功能应用到Web页面中,10,CSS,3.嵌入外部样式表,11,CSS,style1.css保存文字的其它样式h1text-align:

center;font-style:

italic;font-family:

隶书;font-size:

x-large;style2.css保存文字的颜色h1color:

green;,12,CSS,嵌入外部样式表/*定义样式*/用四种方式将样式表功能应用到Web页面中,13,4.链接外部样式表链接外部样式表用四种方式将样式表功能应用到Web页面中,14,CSS语句格式,css语句格式如下：

selectorproperty:

value（选择符属性：

值）选择符的作用：

限制样式作用的范围pfont-size:

15,当属性的值是多个单词组成时，必须在值上加引号h1font-family:

CourierNew,如果需要对一个选择符指定多个属性时，使用分号隔开。

pfont-size:

15;color:

red,选择符主要包括：

html选择符class选择符id选择符,15,html选择符,html选择符：

就是以html标签作为选择符的情况。

其作用域为所有符合条件的html标签,h1text-align:

center;color:

red,pfont-size:

15;color:

red,16,class选择符,class选择符：

使用html标签的class属性设置的值作为的选择符就是class选择符。

p.stopcolor:

redp.warningcolor:

yellowp.normalcolor:

green,关联classselector:

可以为同一个元素（html标签）定义不同的样式。

独立classselector:

可以为多个不同的元素（html标签）定义相同的样式,这是stop的样式这是warning的样式这是normal的样式,蓝色的段落蓝色的标题,.titletext-align:

center;color:

blue,17,ID选择符,ID属性用来定义某一特定html标签，一个网页文件只能有一个标签使用某一ID属性值，IDSelector就是用来设置这样具有ID属性html标签的样式。

经验总结：

因为IDselector只能为单个的html标签设置样式，因此具有一定的局限性。

ID属性在JavaScript得到广泛的应用。

#titletext-align:

center;color:

blue,welcometoneusoft,18,包含选择符,包含选择符：

是指用空格隔开的两个或多个单一选择符组成的字符串,使用：

主要用来对某些具有包含关系的元素来单独定义样式，比如元素1里包含元素2，使用包含选择符定义的样式就只能对在元素1里的元素2起作用，而对单独的元素和元素不起作用。

divpcolor:

red;font-size:

12;,tableacolor:

green;text-decoration:

none;东软教育在线东软教育在线演示效果,19,包含选择符（续）,包含选择符的优先权要比单一选择符定义的样式规则的优先权要高。

定义tableacolor:

green;text-decoration:

none;同时定义acolor:

yellow;结果：

表格中的超链接的文本是绿色的,20,组合选择符,组合选择符：

为了减少样式表的重复声明可以在一条样式规则定义语句中组合若干个选择符，每个选择符之间用逗号隔开。

h1color:

#CC66FF;h2color:

#CC66FF;h3color:

#CC66FF;这里使h1标签这里使h2标签这里使h3标签,h1,h2,h3color:

#CC66FF;这里使h1标签这里使h2标签这里使h3标签,21,伪元素选择符,伪元素选择符：

是指同一个html元素的各种状态和部分内容的一种定义方式。

伪元素选择符样式的格式：

html选择符:

伪元素属性:

值例如超链接标签（）的正常状态（没有做任何动作前）、访问过的状态、选中的状态、光标移到超链接上的文本状态，还有段落的首字母和首行都可以用伪元素选择符来定义样式。

a:

active表示超链接选中的状态a:

hover表示鼠标移动到超链接上的状态a:

link表示超链接的正常状态a:

visited访问过的超链接的状态,22,注释、继承、优先级,样式中的注释：

/*注释内容*/注意:

不能嵌套样式的继承所有嵌套在某个html标签中的html标签都会自动继承外层标签设置的样式规则。

样式规则的优先级：

ID选择符CLASS选择符HTML标签选择符内联样式表嵌入样式表外部样式表,Ptext-align:

right中国效果演示,#titlecolor:

blue;font-size:

12;.headcolor:

red;font-size:

20;divcolor:

green;font-size:

30;猜猜是什么样式在起作用效果演示,23,CSS的属性,字体（Font）文本（Text）背景（Background）定位（Positioning）布局（Layout）外补丁（Margins）轮廓（Outlines）边框（Border）内补丁（Padding）表格（Table）滚动条（Scrollbar）其他css2.0中文手册,24,综合示例,演示效果,