web技术基础第三章.ppt

1CSS内容介内容介绍绍CSS概述概述CSS设设置方式置方式CSS语语法法样样式式规则规则注注释释和和样样式式规则优规则优先先级级CSS的属性分的属性分类类介介绍绍2CSS编编程技程技术术 CSS（Cascading Style Sheets）中文翻）中文翻译为层译为层叠叠样样式表式表单单，简简称称样样式式单单，是近几年才，是近几年才发发展起来的新技展起来的新技术术1998年年5月月12日，日，CSS level 2才成才成为为W3C 的的标标准，它是一准，它是一组组样样式，式，样样式中的属性在式中的属性在HTML元素中依次出元素中依次出现现，并，并显显示在示在浏览浏览器中。器中。样样式可以定式可以定义义在在HTML文档的文档的标标志里，也可以在外部附志里，也可以在外部附加文档作加文档作为为外加文档。外加文档。CSS的功能无比的功能无比强强大，大，W3C也极力向也极力向世界推广世界推广这这一先一先进进技技术术。3CSS概述概述 简单简单来来说说，HTML是一种是一种标记语标记语言，而言，而CSS是是这这种种标记标记的的一种重要一种重要扩扩展，可以展，可以进进一步美化一步美化页页面。面。换换句句话说话说，CSS是是一种用来装一种用来装饰饰HTML的的标记标记集合。集合。CSS样样式式规则组规则组成成为为：选择选择符符 属性属性:值值，单单一一选择选择符的符的复合复合样样式声明式声明应该应该用分号隔开，如：用分号隔开，如：选择选择符符 属性属性1:值值1;属性属性2:值值2。CSS可以用来精确的控制可以用来精确的控制页页面里每一个元素的字体面里每一个元素的字体样样式、背景、式、背景、排列方式、区域尺寸、排列方式、区域尺寸、边边框等。使用框等。使用CSS能能够简够简化网化网页页的格式的格式代代码码，加快下，加快下载显载显示的速度，外部示的速度，外部链链接接样样式可以同式可以同时时定定义义多个多个页页面，大大减少了重复面，大大减少了重复劳动劳动的工作量。的工作量。4样样式表的使用式表的使用结结构构 多个网多个网页页文件共享文件共享样样式文件式文件 多个多个样样式文件套用在一个网式文件套用在一个网页页文件上文件上 HTML文件1HTML文件NCSS样样式文件式文件HTMLCSS样样式文件式文件NCSS样样式文件式文件15CSS设设置方式置方式6-样样式表式表应应用案例用案例使用用使用用CSS样样式的式的4种方式种方式显显示界面示界面 7-CSS1.直接定直接定义义style属性属性 直接定直接定义义HTML标记标记中的中的style属性属性 用四种方式将用四种方式将样样式表功能式表功能应应用到用到Web页页面中面中 8-CSS2.定定义义内部内部样样式表式表 定定义义内部内部样样式表式表 /*定定义样义样式式*/用四种方式将用四种方式将样样式表功能式表功能应应用到用到Web页页面中面中 9-CSS3.3.嵌入外部嵌入外部样样式表式表 10-CSS style1.css style1.css 保存文字的其它保存文字的其它样样式式 h1 text-align:center;font-style:italic;font-family:隶隶书书;font-size:x-large;style2.css.css 保存文字的保存文字的颜颜色色 h1 color:green;11-CSS嵌入外部嵌入外部样样式表式表 /*定定义样义样式式*/!-import url(style1.css);import url(style2.css);用四种方式将用四种方式将样样式表功能式表功能应应用到用到Web页页面中面中12-4.4.链链接外部接外部样样式表式表链链接外部接外部样样式表式表 用四种方式将用四种方式将样样式表功能式表功能应应用到用到Web页页面中面中 13-CSS语语句格式句格式css语语句格式如下：句格式如下：selector property:value(选择符 属性：值)选择符的作用：限制样式作用的范围p font-size:15当属性的当属性的值值是多个是多个单词组单词组成成时时，必，必须须在在值值上加引号上加引号h1 font-family:Courier New如果需要如果需要对对一个一个选择选择符指定多个属性符指定多个属性时时，使用分号隔开，使用分号隔开。p font-size:15;color:red选择选择符主要包括：符主要包括：html选择符class选择符id选择符14-html选择选择符符html选择选择符：就是以符：就是以html标签标签作作为选择为选择符的情况。符的情况。其作用域其作用域为为所有符合条件的所有符合条件的html标签标签h1 text-align:center;color:redp font-size:15;color:red15-class选择选择符符class选择选择符：使用符：使用html标签标签的的class属性属性设设置的置的值值作作为为的的选选择择符就是符就是class选择选择符。符。p.stopcolor:redp.warningcolor:yellowp.normalcolor:green关关联联class selector:可以可以为为同一个元素（同一个元素（html标签标签）定）定义义不不同的同的样样式。式。独立独立class selector:可以可以为为多个不同的元素（多个不同的元素（html标签标签）定）定义义相同的相同的样样式式这这是是stop的的样样式式这这是是warning的的样样式式这这是是normal的的样样式式蓝蓝色的段落色的段落蓝蓝色的色的标题标题.titletext-align:center;color:blue16-ID选择选择符符ID属性用来定属性用来定义义某一特定某一特定html标签标签，一个网，一个网页页文件只能有一文件只能有一个个标签标签使用某一使用某一ID属性属性值值，ID Selector就是用来就是用来设设置置这样这样具具有有ID属性属性html标签标签的的样样式。式。经验总结经验总结：因：因为为ID selector只能只能为单为单个的个的html标签设标签设置置样样式，式，因此具有一定的局限性。因此具有一定的局限性。ID属性在属性在JavaScript得到广泛的得到广泛的应应用。用。#titletext-align:center;color:bluewelcome to neusoft17-包含包含选择选择符符包含包含选择选择符：是指用空格隔开的两个或多个符：是指用空格隔开的两个或多个单单一一选择选择符符组组成的字符串成的字符串使用：主要用来使用：主要用来对对某些具有包含关系的元素来某些具有包含关系的元素来单单独定独定义样义样式，比如元素式，比如元素1里包含元素里包含元素2，使用包含，使用包含选择选择符定符定义义的的样样式就只能式就只能对对在元素在元素1里的元素里的元素2起起作用，而作用，而对单对单独的元素和元素不起作用。独的元素和元素不起作用。div pcolor:red;font-size:12;table acolor:green;text-decoration:none;东软东软教育在教育在线线东软东软教育在教育在线线演示效果演示效果18-包含包含选择选择符（符（续续）包含包含选择选择符的符的优优先先权权要比要比单单一一选择选择符定符定义义的的样样式式规则规则的的优优先先权权要高。要高。定定义义table acolor:green;text-decoration:none;同同时时定定义义acolor:yellow;结结果：果：表格中的超表格中的超链链接的文本是接的文本是绿绿色的色的19-组组合合选择选择符符组组合合选择选择符：符：为为了减少了减少样样式表的重复声明可以在一条式表的重复声明可以在一条样样式式规规则则定定义语义语句中句中组组合若干个合若干个选择选择符，每个符，每个选择选择符之符之间间用逗号隔用逗号隔开。开。h1color:#CC66FF;h2color:#CC66FF;h3color:#CC66FF;这这里使里使h1标签标签这这里使里使h2标签标签这这里使里使h3标签标签h1,h2,h3color:#CC66FF;这这里使里使h1标签标签这这里使里使h2标签标签这这里使里使h3标签标签20-伪伪元素元素选择选择符符伪伪元素元素选择选择符：是指同一个符：是指同一个html元素的各种状元素的各种状态态和部分内容的一种定和部分内容的一种定义义方式。方式。伪伪元素元素选择选择符符样样式的格式：式的格式：html选择选择符符:伪伪元素元素 属性属性:值值 例如超例如超链链接接标签标签（）的正常状）的正常状态态（没有做任何（没有做任何动动作前）、作前）、访问过访问过的状的状态态、选选中的状中的状态态、光、光标标移到超移到超链链接上的文本状接上的文本状态态，还还有段落的首字母和有段落的首字母和首行都可以用首行都可以用伪伪元素元素选择选择符来定符来定义样义样式。式。a:active表示超表示超链链接接选选中的状中的状态态a:hover表示鼠表示鼠标标移移动动到超到超链链接上的状接上的状态态a:link表示超表示超链链接的正常状接的正常状态态a:visited访问过访问过的超的超链链接的状接的状态态21-注注释释、继继承、承、优优先先级级样样式中的注式中的注释释：/*注注释释内容内容*/注意注意:不能嵌套不能嵌套 样样式的式的继继承承所有嵌套在某个所有嵌套在某个html标签标签中的中的html标签标签都会自都会自动继动继承外承外层标签设层标签设置的置的样样式式规则规则。样样式式规则规则的的优优先先级级：ID选择选择符符CLASS选择选择符符HTML标签选择标签选择符符内内联样联样式表嵌入式表嵌入样样式表外部式表外部样样式表式表P text-align:right中国中国效果演示效果演示#titlecolor:blue;font-size:12;.headcolor:red;font-size:20;divcolor:green;font-size:30;猜猜是什么猜猜是什么样样式在起作用式在起作用效果演示效果演示22-CSS的属性的属性字体字体(Font)文本文本(Text)背景背景(Background)定位定位(Positioning)布局布局(Layout)外外补补丁丁(Margins)轮轮廓廓(Outlines)边边框框(Border)内内补补丁丁(Padding)表格表格(Table)滚动滚动条条(Scrollbar)其他其他 css2.0中文手册中文手册 23-综综合示例合示例演示效果演示效果24-