第6章CSS样式应用范例.pptx

  1. 1、本文档共70页,可阅读全部内容。
  2. 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
第6章 css样式表 2017-4-9 《网页设计技术》 2 本章内容 6.1 CSS样式概述 6.2 CSS样式定义 6.3 CSS样式的使用 6.4 CSS属性 6.5 在Dreamweaver中编辑CSS样式 6.6 CSS应用示例 上机内容 小结 2017-4-9 《网页设计技术》 3 6.1 CSS样式概述 CSS(Cascading Style Sheets)又称层叠样式表,它是一系列格式规则集合,它能够定义网页元素的样式,如层、文本、表格、链接等元素的属性,一种样式信息与网页内容分离的标记性语言。 在CSS样式出现以前,HTML标签样式被广泛应用,HTML标签样式用于控制单个文档中一定范围内文本的格式。 而CSS样式不同,它不仅可以控制单个文档中一定范围内网页元素的格式,而且可采用外部链接的方式,控制整个站点内所有网页的格式。这样既保证了站点风格的一致性,又提高了工作效率。 CSS样式生成样式表文件扩展名为.CSS,当对CSS规则修改后,所有链接该规则的文档格式会自动改变,简化了格式化网页的工作。 返回 2017-4-9 《网页设计技术》 4 CSS样式由三部分组成:选择器、属性和值。 语法格式:选择器{属性1:值1;属性2:值2……} 说明: 选择器用来标识格式元素,可分为3种基本类型:标签(html)选择器、ID选择器、类(class)选择器。除了基本类型外,还可把基本类型的选择器组合使用。 属性和属性值之间用冒号(:)隔开,定义多个属性时,属性之间用分号(;)隔开。 如: body{color:black} 选择器body指页面主体部分,color颜色属性名,black颜色属性值,其效果是使页面中的文字为黑色。 6.2 CSS样式定义 例6.1 在DW代码视图的编辑窗口输入以下代码,创建使用样式页面的文档css6_1.html。 html headtitle在标记符中直接嵌套样式信息/title style !-- p{font-size:24px;text-align:center} h1{font-family:楷体_gb2312;text-align:center} -- /style /head body h1一代人/h1 p黑夜给了我黑色的眼睛br我却用它寻找光明/p /body /html 提示:style元素是HTML中的一个标记元素,提供了一组对应于浏览器所支持CSS规则(如background 、font-size等),可以使用这个标记元素访问CSS样式属性。 2017-4-9 《网页设计技术》 6 1.HTML选择器 HTML选择器是最典型的选择器类型,网页设计者可为某个或某些HTML标记元素应用样式定义。 HTML选择器的定义方法: tag{property:value} 例如,设置表格中单元格内的文字大小为9pt,颜色为蓝色的CSS代码: td{ font-size: 9pt; color: blue} CSS可以在一条语句中定义多个选择器 例如,将段落文本和单元格内的文字设置为蓝色的CSS代码:   td,p{color: blue} 组合选择器(逗号隔开),其中所有标签都使用指定样式。 关联选择器(空格隔开,p?em{background:yellow}) 表示段落中em/em标签中背景为黄色,而其他地方出现的em/em不受影响 (标记em用来表示强调,其默认样式为斜体)。 6.2 CSS样式定义 7 2.class选择器(类选择器) 相关的类选择器。它只与一种HTML标记有关系,此类选择器仅为某个或某些标记符定义类。 语法格式:Tag.Classname{property:value} 例如: h1.red{color:red} 应用:在网页中需要使用该类的“h1标记元素内”用class属性引用 h1 class=red吉林省明日科技有限责任公司h1 独立class选择器。可被任何HTML标记元素所应用。 语法格式:.Classname{property:value} 例如: .blueone{color:blue} 应用:需要引用该类的任意标记符内使用class属性 h2 class=blueone有雨的日子/h2 p class=blueone 不知是无意还是天意,有你的日子总有雨! /p 6.2 CSS样式定义 2017-4-9 《网页设计技术》 2017-4-9 《网页设计技术》 8 3.ID选择器 其实与独立的class选择器的功能一样,区别在于语法和用法不同。 语法格式:#IDname{property:value} 用法:在HTML标记元素中应用ID属性引用CSS样式。 例如: st

文档评论(0)

希望之星 + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档