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

第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