- 1、本文档共44页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
DW-第10章divcss样式
第10章 网页制作div+css3 样式布局 主讲:孙洪娟本章目标10.1 CSS3概述10.2 CSS3语法10.3 DIV盒模型介绍10.4 DIV+CSS3样式实例布局10.1 CSS概述层叠样式表css( Cascading?Style?Sheets )的缩写。也称为级联样式表。它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。10.1.1 CSS 优点优点:代码独立,便于控制, 样式文件可在浏览器中缓存便于分工合作,提高了可访问性,提供更多的外观控制手段,可以将格式和结构分离,可以以前所未有的能力控制页面布局。可以制作体积更小下载更快的网页。 可以将许多网页同时更新。10.1.2 css3使用方法CSS样式使用方法:行内样式内嵌样式链接样式导入样式10.1.2 行内(内联)样式把样式代码内联到标记内使用style作为属性,样式语句作为属性值如:控制table标记的边框样式table style=border:#F00 solid 1px;/table10.1.2 内嵌(内联)样式内嵌样式就是将css样式代码添加到head 与/head之间,并且用style和 /style标记进行声明。这种写法串然没有完全实现页面内容和样式控制代码完全分离,但可以设置一些比较简单的样式,并统一页面样式。10.1.2 链接(外联)样式链接样式是css中使用频率最高也是最实用的方法。它很好地将“页面内容”和“样式风格代码”分离成两个或多个文件,实现了页面框架HTML代码和css代码的完全分离。使前期制作和后期维护十分方便。链接样式是指在外部定义css样式表并形成以.css为扩展名的文件。10.1.2 导入样式导入样式和链接样式基本相同,都是创建一个单独css文件,名后再引入到HTML文件中。导入外部样式表是指在内部样式表的style标记中,使用@import导入一个外部样式表。例如:headstyle type=“text/css”!— @import “1.css”--/style/head10.1.2 优先级行内样式内嵌样式链接样式导入样式10.2 CSS基本语法选择器(selector)也称为选择符。HTML中的所有标记都是通过不同的css选择器进行控制的。选 择器不只是HTML文档中的元素标记。它还可以是类(class)id等等。跟据css选择符用涂可以把选择器分为:标签选择器、类选择器、全局选择器、id选择器和伪类选择器。如:P {font-size:12pt; color:red;}10.2 CSS基本语法1、标签选择器HTML文档中由多个不同标记组成,而css选择器就是声明那些标记采用样式。如:P {font-size:12pt; color:red;}如:body,p,td,th,div,dl,ul,ol,li{font-family:宋体;font-size:12px; color:#000;}在一个页面中,使用标签选择器,会控制该页面中所有此标记显示样式。10.2 CSS基本语法2、类选择器标签选择器控制该页面中所有此标记显示样式,如果需要为此标记重新设定样式还需要使用类(class)选择器。如:.s{ font-size:14px; color:#red;}P class=”s”段落样式/p10.2 CSS基本语法3、id选择器id选择器和类选择器类似,都是针对特定属性的属性值进行匹配。id选择器定义的是某一特定的html元素,一个网页中只能有一个元素使用某一id的属性值。在一个页面中,每个id只能使用一次要有“#”在名字前面如:#fontstyle{ font-size:14px; color:#red;}10.2 CSS基本语法4、全局选择器如果想要一个页面中所有html标记使用一种样式,可以使用全局选择器,全局选择器顾名思义就是对所有html元素起作用。如:*{ font-size:14px; color:#red;}“*”表示对所有元素起作用10.2 CSS基本语法5、组合选择器将多种选择器进行搭配,可以构成一种复合选对器,也称为组合选择器,即将标签选择器、类选择器和ID选择器组合起来使用。一般的组合方式是标签选择器和类选择器组合或标签选择器和id选择器组合。这两种组合原理和效果一样。如: .s img{border:1px #000 solid;}#s p{font-size:14px; color:#red;}10.5.5 组合使用组合使用10.2 CSS基本语法6、继承选择器继承选择器则是,子标记在没有定义的情况下所有的样式是继承父标记的,当子标记重复定义了父标记已经定义过的声明时,子标记就执行后面的声明。如:div sp
文档评论(0)