第2章 html+css基础.pptVIP

2.7 CSS基础 2.7.1 CSS样式简介 CSS（Cascading Style Sheets，层叠样式表），又称格式页。 2.7.2 CSS样式表的定义 1．通过HTML标记定义 2．用id属性定义样式表 3．使用class定义样式表 本节要点 CSS的基本概念 CSS与HTML结合 CSS选择器 2.7.1 CSS基本概念 CSS是Cascading Style Sheets（层叠样式表单）的简称，更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借助CSS的强大功能，网页将在您丰富的想象力下千变万化。CSS可以更精确地控制页面的版式风格和布局，它将弥补HTML对网页格式化的不足。利用CSS可以设置字体变化和大小、页面格式的动态更新和排版定位等。 总体来说，CSS可以完成以下工作： （1）弥补HTML对网页格式化功能的不足，如段落间距、行距等。 （2）设置字体变化和大小。 （3）设置页面格式的动态更新。 （4）进行排版定位。 CSS具有以下特点： （1）将格式和结构分离 （2）控制页面布局 （3）制作体积更小下载更快的网页 （4）更新速度更快 （5）更有利于搜索引擎的搜索 CSS由一系列的样式规则构成，样式规则具体定义和控制网页文档的显示方式。每个规则由一个“选择器”（selector）和一个定义部分组成。每个定义部分包含一组由半角分号（;）分离的定义。这组定义放在一对大括号（{ }）之间。每个定义由一个特性，一个半角冒号（:）和一个值组成。 2.7.2 CSS选择器 一个HTML页面由很多的标记组成，而CSS标记选择器就是声明哪些标记采用哪种CSS样式。例如p选择器，就是用于声明页面中所有P标记的样式风格。同样可以通过h1选择器来声明页面中所有的h1标记的CSS风格。例如： stylep{ color:red; font-size:11pt; } /style 以上这段代码声明了HTML页面所有的p标记，文字的颜色都采用红色，大小都为11pt。 2.7.2 标记选择器 2.7.3 CSS选择器分组 可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。例如，在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。 h1,h2,h3,h4,h5,h6 { color: green; } 2.7.4 派生选择器 通过依据元素在其位置的上下文关系来定义样式，可以标记更加简洁。通过这种方式来应用规则的选择器称为派生选择器。 例如，我们希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器： li strong { font-style: italic; font-weight: normal; } ullistrong我是斜体字。这是因为 strong 元素位于 li 元素内。/strong/lili我是正常的字体。/li/ul 在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。 2.7.5 id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 # 来定义。 下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色： #red {color:red;}#green {color:green;} 下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。 p id=red这个段落是红色。/pp id=green这个段落是绿色。/p 2.7.6 类选择器 在 CSS 中，类选择器以一个点号显示。例如： .center {text-align: center} 在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。 在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 .center 选择器中的规则。 h1 class=centerThis heading will be center-aligned/h1p class=centerThis paragraph will also be center-aligned./p 2.7.7 伪类选择器 CSS 伪类用于向某些选择器添加特殊的效果。 语法： selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用。 selector.class : p