web技术基础第三章.ppt

1、1,第3章 CSS,1,2,CSS内容介绍,CSS概述CSS设置方式CSS语法样式规则注释和样式规则优先级CSS的属性分类介绍,2,3,CSS编程技术,CSS（Cascading Style Sheets）中文翻译为层叠样式表单，简称样式单，是近几年才发展起来的新技术1998年5月12日，CSS level 2才成为W3C 的标准，它是一组样式，样式中的属性在HTML元素中依次出现，并显示在浏览器中。样式可以定义在HTML文档的标志里，也可以在外部附加文档作为外加文档。CSS的功能无比强大，W3C也极力向世界推广这一先进技术。,3,4,CSS概述,简单来说，HTML是一种标记语言，而CSS是这

2、种标记的一种重要扩展，可以进一步美化页面。换句话说，CSS是一种用来装饰HTML的标记集合。CSS样式规则组成为：选择符 属性:值，单一选择符的复合样式声明应该用分号隔开，如：选择符 属性1:值1;属性2:值2。CSS可以用来精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、边框等。使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。,4,5,样式表的使用结构 多个网页文件共享样式文件 多个样式文件套用在一个网页文件上,HTML,CSS样式文件N,CSS样式文件1,5,6,CSS设置方式,7,样式表应用案例使用用CS

3、S样式的4种方式显示界面,8,CSS,1.直接定义style属性 直接定义HTML标记中的style属性 用四种方式将样式表功能应用到Web页面中,9,CSS,2.定义内部样式表 定义内部样式表/*定义样式*/用四种方式将样式表功能应用到Web页面中,10,CSS,3.嵌入外部样式表,11,CSS,style1.css 保存文字的其它样式 h1 text-align:center;font-style:italic;font-family:隶书;font-size:x-large;style2.css 保存文字的颜色 h1 color:green;,12,CSS,嵌入外部样式表/*定义样式*/

4、用四种方式将样式表功能应用到Web页面中,13,4.链接外部样式表链接外部样式表 用四种方式将样式表功能应用到Web页面中,14,CSS语句格式,css语句格式如下：selector property:value(选择符 属性：值)选择符的作用：限制样式作用的范围p font-size:15,当属性的值是多个单词组成时，必须在值上加引号h1 font-family:Courier New,如果需要对一个选择符指定多个属性时，使用分号隔开。p font-size:15;color:red,选择符主要包括：html选择符class选择符id选择符,15,html选择符,html选择符：就是以htm

5、l标签作为选择符的情况。,其作用域为所有符合条件的html标签,h1 text-align:center;color:red,p font-size:15;color:red,16,class选择符,class选择符：使用html标签的class属性设置的值作为的选择符就是class选择符。,p.stopcolor:redp.warningcolor:yellowp.normalcolor:green,关联class selector:可以为同一个元素（html标签）定义不同的样式。,独立class selector:可以为多个不同的元素（html标签）定义相同的样式,这是stop的样式这是w

6、arning的样式这是normal的样式,蓝色的段落蓝色的标题,.titletext-align:center;color:blue,17,ID选择符,ID属性用来定义某一特定html标签，一个网页文件只能有一个标签使用某一ID属性值，ID Selector就是用来设置这样具有ID属性html标签的样式。,经验总结：因为ID selector只能为单个的html标签设置样式，因此具有一定的局限性。ID属性在JavaScript得到广泛的应用。,#titletext-align:center;color:blue,welcome to neusoft,18,包含选择符,包含选择符：是指用空格隔开

7、的两个或多个单一选择符组成的字符串,使用：主要用来对某些具有包含关系的元素来单独定义样式，比如元素1里包含元素2，使用包含选择符定义的样式就只能对在元素1里的元素2起作用，而对单独的元素和元素不起作用。,div pcolor:red;font-size:12;,table acolor:green;text-decoration:none;东软教育在线东软教育在线演示效果,19,包含选择符（续）,包含选择符的优先权要比单一选择符定义的样式规则的优先权要高。定义table acolor:green;text-decoration:none;同时定义acolor:yellow;结果：表格中的超链接

8、的文本是绿色的,20,组合选择符,组合选择符：为了减少样式表的重复声明可以在一条样式规则定义语句中组合若干个选择符，每个选择符之间用逗号隔开。,h1color:#CC66FF;h2color:#CC66FF;h3color:#CC66FF;这里使h1标签这里使h2标签这里使h3标签,h1,h2,h3color:#CC66FF;这里使h1标签这里使h2标签这里使h3标签,21,伪元素选择符,伪元素选择符：是指同一个html元素的各种状态和部分内容的一种定义方式。伪元素选择符样式的格式：html选择符:伪元素 属性:值 例如超链接标签（）的正常状态（没有做任何动作前）、访问过的状态、选中的状态、光

9、标移到超链接上的文本状态，还有段落的首字母和首行都可以用伪元素选择符来定义样式。a:active表示超链接选中的状态a:hover表示鼠标移动到超链接上的状态a:link表示超链接的正常状态a:visited访问过的超链接的状态,22,注释、继承、优先级,样式中的注释：/*注释内容*/注意:不能嵌套 样式的继承所有嵌套在某个html标签中的html标签都会自动继承外层标签设置的样式规则。样式规则的优先级：ID选择符CLASS选择符HTML标签选择符内联样式表嵌入样式表外部样式表,P text-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,综合示例,演示效果,