第6章 CSS样式应用.pptx

下载文档 降价啦

30
0
约1.89万字
约 70页
2016-11-26 发布于湖北
举报
版权申诉
保障服务

第6章 CSS样式应用.pptx

1、本文档共70页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。

第6章 css样式表本章内容 6.1 CSS样式概述 6.2 CSS样式定义 6.3 CSS样式的使用 6.4 CSS属性6.5 在Dreamweaver中编辑CSS样式6.6 CSS应用示例小结上机内容《网页设计技术》6.1 CSS样式概述 CSS（Cascading Style Sheets）又称层叠样式表，它是一系列格式规则集合，它能够定义网页元素的样式，如层、文本、表格、链接等元素的属性，一种样式信息与网页内容分离的标记性语言。在CSS样式出现以前，HTML标签样式被广泛应用，HTML标签样式用于控制单个文档中一定范围内文本的格式。而CSS样式不同，它不仅可以控制单个文档中一定范围内网页元素的格式，而且可采用外部链接的方式，控制整个站点内所有网页的格式。这样既保证了站点风格的一致性，又提高了工作效率。CSS样式生成样式表文件扩展名为.CSS，当对CSS规则修改后，所有链接该规则的文档格式会自动改变，简化了格式化网页的工作。返回《网页设计技术》6.2 CSS样式定义CSS样式由三部分组成：选择器、属性和值。语法格式：选择器{属性1:值1;属性2:值2……}说明：选择器用来标识格式元素，可分为3种基本类型：标签（html）选择器、ID选择器、类（class）选择器。除了基本类型外，还可把基本类型的选择器组合使用。属性和属性值之间用冒号（:）隔开，定义多个属性时，属性之间用分号（;）隔开。如: body{color:black} 选择器body指页面主体部分，color颜色属性名，black颜色属性值，其效果是使页面中的文字为黑色。《网页设计技术》例6.1 在DW代码视图的编辑窗口输入以下代码，创建使用样式页面的文档css6_1.htmlcss6_1.html。<html><head><title>在标记符中直接嵌套样式信息</title><style></style> </head><body><h1>一代人</h1> <p>黑夜给了我黑色的眼睛<br>我却用它寻找光明</p></body></html>提示：style元素是HTML中的一个标记元素，提供了一组对应于浏览器所支持CSS规则（如background 、font-size等），可以使用这个标记元素访问CSS样式属性。6.2 CSS样式定义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样式定义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样式定义3.ID选择器其实与独立的class选择器的功能一样，区别在于语法和用法不同。语法格式：#IDname{property:value}用法:在HTML标记元素中应用ID属性引用CSS样式。例如：<style>#redone{color:red}</style>应用：<p id="redone">红色热情</p>提示：使用.classname和使用#IDname这两种方式在效