1、第12章 CSS规则,了解CSS样式面板。了解CSS的语法规则。学会设置CSS规则。学会创建与链接外部CSS规则。,通过本章，你应当学会,12.1 认识CSS样式面板,CSS是Cascading Style Sheets的缩写，中文意思为级联样式表，也有人称为风格样式单。它能够定义网页元素的样式，包括文本、背景、边框、定位等一些特殊效果。它不仅可以控制一篇文档中的文本格式，还可以采用外部链接的方式，控制多篇文档的格式。Dreamweaver中使用CSS样式面板完成CSS规则的建立和调用。按“Shift+F11”键，打开CSS样式面板。,CSS 概述CSS 指层叠样式表 (Cascading S
2、tyle Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一,CSS基本语法及用法入门,CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。基本格式如下：selector property: value（选择符 属性：值）一、选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个
3、属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）例如：body color: black选择符body是指页面主体部分，color是控制文字颜色的属性，black是颜色的值，此例的效果是使页面中的文字为黑色。如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开：p text-align: center; color: red,二、选择符组 你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：h1, h2, h3, h4, h5, h6 color: green （这个组里包括所有的标
4、题元素，每个标题元素的文字都为绿色）p, table font-size: 9pt （段落和表格里的文字尺寸为9号字）效果完全等效于：p font-size: 9pt table font-size: 9pt ,三、类选择符用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。p.right text-align: right然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数：这个段落向右对齐的类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式：.center text-align: cent
5、er（定义.center的类选择符为文字居中排列）这样的类可以被应用到任何元素上。下面我们使h1元素（标题1）和p元素（段落）都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符：这个标题是居中排列的这个段落也是居中排列的注意：这种省略HTML标记的类选择符是我们经后最常用的CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。,四、ID选择符 在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用ID替代：这个段落向右对齐定义ID选
6、择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id=intro的元素：#introfont-size:110%;font-weight:bold;color:#0000ff;background-color:transparent（字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明）下面这个例子，ID属性只匹配id=intro的段落元素：p#introfont-size:110%;font-weight:bold;color:#0000ff;background-color:transparent注意：ID选择符局限性
7、很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。,五、样式表的层叠性层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。例如在DIV标记中嵌套P标记：div color: red; font-size:9pt这个段落的文字为红色9号字（P元素里的内容会继承DIV定义的属性）,CSS 背景实例 body background-color: yellowh1 background-color: #00ff00h2 background-co
8、lor: transparentp background-color: rgb(250,0,255)p.no2 background-color: gray; padding: 20px;这是标题 1这是标题 2这是段落这个段落设置了内边距。,常用的样式属性,网页添加CSS样式表方式,样式的分类根据样式代码的位置，分为三类：行内样式内嵌样式外部样式一、使用STYLE属性： 将STYLE属性直接加在个别的元件标签里这种用法的优点 是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的统一性。,二、使用STYLE标签： 将样式规则写在.标签之中。例如：通常是将整个的 .结构写在网页的 部份之中。这
9、种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不 足。,三、使用 LINK标签： 将样式规则写在.css的样式档案中，再以标签引入假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文 件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。,CSS入门教程样式表加入网页方式,本节介绍将样式表加入到页面中的几种不同方法。1、内部样式表内部样式表需要在网页的部分定义，格式如
10、下： body background-color: blue; 2、行内样式表(内嵌样式表) 段落内容 3、外部样式表使用外部样式表时，CSS文件与网页文件(html)是分离开来的。要让某一个网页调用一个外部CSS文件，你需要在网页的部分插入以下内容： /*文件位置就是所处在的文件夹相对与当前网页的相对路径*/ ,根据样式代码的位置，分为三类：行内样式、内嵌样式、外部样式,您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的 STYLE 属性定义。,/*关键代码-*/ 剩余时间：成交结束 新旧程度：全新 所 在 地：北京 宝贝数量：5 件 浏 览 量
11、：220 次 另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以,内嵌样式1,行内样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用内嵌样式。,应用样式 P font-size:20px; color:blue; text-align:center 我是段落 1我是段落 2我是段落 3我们的样式绝对统一,二、根据选择器的不同，内嵌样式又分为：HTML 选择器、CLASS 类选、择器ID 选择器内嵌样式-HTML 选择器,/*-关键代码-*/P /*设置样式：字体和背景色*/font-family: System; font-size: 18px;c
12、olor: #3333CC;H2 background-color: #CCFF33;text-align: center; 品种特征方面： 1、蛋鱼：蛋鱼.。 2、龙睛：龙睛.。 3、高头：高头.。,内嵌样式-2 class类选择器,.myinput border: 1px solid;border-color:#D4BFFF;color:#2A00FF用户名密 码 ,CLASS类选择器,应用类选择器：class”类名“,内嵌样式-3 ID选择器, #fire color:red; font-size: 24px; 我是二级标题，火是这样的我是段落，火是这样的,ID选择器的定义格式为：ID名
13、 样式规则;,应用ID选择器：ID”ID名“, 标签,所有韩款童装10元/件起拍喽,是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容,新建CSS规则,点击CSS样式面板底部的新建CSS规则按钮，打开新建CSS规则对话框。选择目标类型，点击“确定”按钮进入“CSS规则定义”窗口定义CSS规则列表。选择器类型：从列表中选择新建CSS规则的类型，有类、标签和高级3个选项。定义在：有两个选项，“新建样式表文件”和“仅对该文档”。“新建样式表文件”可以定义一个外部样式。一般为了使网站整体风格一致，可以创建一个独立的用来保存一系列CSS规则的样式文件，供每一个页面使用。“仅对该文档”可以创建
14、一个当前文档的内部CSS规则。,对不同类型的CSS样式定义的方法基本一样，参数是相同。如图所示，具体的CSS规则定义窗口。,创建外部CSS规则为了使网站整体风格一致，可以创建一个外部的样式表文件保存一个CSS规则，供每一个页面使用。方法如下：（1）新建一个HTML文件。（2）点击CSS样式面板的新建CSS规则按钮，打开新建CSS规则对话框，按图所示设置。（3）点击“确定”按钮，打开 “保存样式表文件为”对话框。,创建与链接外部CSS样式文件,点击CSS样式面板中附加样式表按钮，打开链接外部样式表对话框。点击链接外部样式表对话框的“浏览”按钮，打开的选择样式表文件对话框中选择目标链接样式。,编辑CSS规则,点击CSS样式面板中需要修改的规则，点击“编辑样式”按钮，在打开CSS规则定义窗口中编辑样式。如图所示，在CSS样式面板中选择目标标签，然后在属性面板中直接设置选中标签的各项属性。,1、简要说明CSS样式面板的组成。2、创建一个CSS外部的样式。,练习,
