网页设计基础第五章

第5章 CSS基础应用
第5章 CSS基础应用
• CSS是Cascading Style Sheets的缩写，中文意思为层叠式样式表， 简称样式表。使用CSS可以快速对网页中的元素的样式进行精确 控制。与前面使用HTML标签控制网页外观不同，使用CSS来定 义网页的外观样式可以实现内容和表现的相对分离，提高页面浏 览速度并有效减少网页制作和维护的工作量。此外，CSS还提供 了很多利用HTML无法控制和实现的显示效果。
• 例如，要对两个段落进行设置，一个段落设置为右对齐，一个段 落设置为居中，可以先定义两个类： p.right{text-align:right} p.center{text-align:center}
• 以后要将类用在不同的段落中时，只需在HTML标签中加入定义 的class参数： <p class="right"> <p class="center">
E{sRules}
• 例如，p{font-size:2px;}定义的样式是设置所有段落标签中文字的 字号为12px，其中的段落标签p就是类型选择符。
2）类选择符
• 类选择符能够把相同的元素分类定义为不同的样式，定义类选择 符时，需要在定义的类的名称前面加一个点号。类选择符的语法 格式如下：
E.CLASS{sRules}
5.1 CSS简介
• CSS解决了利用HTML进行网页排版和显示不同效果时代码臃肿 的问题。CSS是一种定义样式（如字体、颜色和位置）的语言， 用于描述如何格式化和显示网页中的信息。CSS样式可直接存储 在HTML网页中，也可存储为独立的样式表文件。不管以哪种方 式保存，样式表都包含将样式应用于特定类型元素的样式规则。 在外部使用时，样式规则放在外部样式表文档中，文件扩展名 为.css。
5.1 CSS简介
• 样式规则可应用于网页中的各种元素，如文本段落或链接的格式 化指令。样式规则由一个或多个样式属性及其值组成。CSS中的 “层叠（cascading）”表示样式规则应用于HTML文档元素的 方式。
• 具体地说，CSS中的样式形成一个层次结构，更具体的样式覆盖 通用样式。样式规则的优先级由CSS根据这个层次结构决定，从 而实现层叠效果。可将CSS的层叠机制看成一种类似继承的关系， 在这种继承关系中，父亲的特征传递给子女，但子女有更特殊的 特征。基本样式规则适用于整个样式表，但可被更具体的样式规 则覆盖。
1.CSS语法格式
• 如果属性的值是由多个单词组成的，则必须将值用引号引起来，例如： p{font-family:"sans serif"}
• 当需要对一个选择符的多个属性指定值时，使用分号将所有的属性和值 分开，例如: p{text-align:center;color:red}
• 为了提高CSS样式代码的可读性，也可以分行写成下面的形式：
• selector通常是希望定义的HTML元素或标签，property是希望改变的属 性，每个属性都有一个值。属性和值用冒号分开，由花括号括起来，这 样 就 组 成 了 一 个 完 整 的 样 式 声 明 （ declaration ） 。 例 如 ， body{color:blue}表示将body元素内的前景色（文字颜色）定义为蓝色。 其中，body是选择符，花括号内的部分是样式声明，color为属性，blue 为值。
5.1 CSSБайду номын сангаас介
• 综上所述，简单地说，HTML的标签主要是定义网页元素的内容， 而CSS决定如何显示HTML元素，就像HTML的字体标签和颜色 属性所起的作用那样。由于允许同时控制多重页面的样式和布局， CSS可以称得上是Web设计领域中的一个突破。网站开发者能够 为每个HTML元素定义CSS样式，并将其应用于希望的任意多个 页面中。如果需要进行全局更新，只需简单地改变样式，网站中 的所有元素就会自动地更新。
5.1.1 CSS语法
• 要想使用CSS对网页的布局、字体、颜色、背景和其他显示效果 进行精确地控制，需要先掌握CSS的基本语法。
1.CSS语法格式
• CSS语法由selector（选择符）、property（属性）和value（值）3部分 构成，语法格式如下：
selector{property:value}
• 这种省略HTML标签的类选择符是最常用的CSS选择符类型，使 用这种方法，用户可以很方便地在任意元素上套用预先定义好的 类样式。
3）ID选择符
• ID选择符以“#”来定义。ID选择符可以为标有特定ID的HTML 元素指定特定的样式。由于同一HTML文档中元素的ID是唯一的， 所以ID只能在一个页面中出现一次。ID选择符的语法格式如下：
P { text-align:center; color:red }
2.选择符
• CSS语法中的选择符包括以下几种类型，这里除了基本的HTML 元素或标签之外，还有一些其他类型。
1）类型选择符
• 类型选择符以文档语言对象类型（element）为选择符。对于 HTML文档来说就是网页，而文档语言对象类型就是HTML中的 元素或标签，类型选择符的语法格式如下：
5.1 CSS简介
• 在HTML中，用<p>、<table>这样的标签来表达“这里是段落”、 “这里是表格”之类的信息，并可以通过浏览器来显示出这些元 素。为了使HTML标签在浏览器中显示时能有不同的表现形式， 就需要不断地将新的HTML标签和属性（如字体标签和颜色属性） 添加到HTML规范中。给HTML增加很多的属性，并通过这些添 加的属性来控制网页的显示效果，使得网页中的HTML代码变得 很臃肿。
2）类选择符
• 类选择符还有一种用法，即在选择符中省略HTML标签名，这样 可以把几个不同的元素定义成相同的样式，例如，.center {textalign: center}表示定义.center的类选择符为文字居中排列。
• 这样的类可以被应用到任何元素上。下面使h1元素（标题1）和p 元素（段落）都归为.center类，使两个元素的样式都跟随.center 这个类选择符，语句如下： <h1 class="center"> <p class="center">