第四章CSS样式基础

4.1 CSS概述

4.1.1.CSS的基本概念

   CSS 全称为“Cascading Svle Sheet”，中文解释为“层叠样式表”，它是以 HTML 为基础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，还可以针对不同的浏览器设置不同的样式。在网页设计时采用 CSS 技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，既可以改变同一页面的不同部分效果，也可以改变同一个网站中不同网页的外观和格式。

4.1.2传统HTML的缺点

 HTML 标记是用来定义文档内容，比如通过 l，p和 table 等标记表达“这是标题”、
“这是段落”、“这是表格”等信息，而文档布局由浏览器完成。随着新的 HTML 标记（比如字体标记 和颜色属性）添加到 HTML 规范中，要实现页面美工、文档内容清晰、独立于文档表现层的站点变得越来越困难。传统HTML的缺点主要体现在如下几方面。

4.1.2.1.维护困难

为了修改某个特殊标记的格式，需要花费很多的时间，尤其对于整个网站而言，后期修改和维护的成本很高。

4.1.2.2.标记不足

HTML 自身的标记并不丰富，很多标记都是为网页内容服务的，而关于美工的标记，例
如文字间距、段落缩进等，这些 HTML 中都很难找到。

4.1.2.3.网页过“胖”

由于对各种风格样式没有统一进行控制，用HTML 编写的页面往往是体积过大，占用了很多宝贵的带宽

4.1.2.4.定位困难

    在整体页面布局时，HTML对于各个模块的位置调整很困难

4.1.3.CSS的特点和优势

     CSS 通过定义标记如何表现，对页面结构风格进行控制，分离文档的内容和表现，克服
了传统 HTML的缺点。将 CSS 嵌入在页面中，通过浏览器解释执行，而且 CSS 文件是文本文件，只要理解 HTML 都可以掌握它。其特点主要如下。
(1) 页面的字体变得更漂亮，更容易编排。(2)可以轻松控制页面的布局。
(3) 可以在大多数浏览器上使用。
(4) 以前一些必须通过图像转换才能实现的功能，现在只要用 CSS 就可以轻松实现，页面下载更快。
(5) 可以使用一个 CSS 文件控制整个网站的显示风格。只要修改该 CSS 文件中相应的行，就可以改变整个网站上页面的显示样式。
CSS 可以称得上 Web 设计领域的一个突破，具有以下优势。

4.1.3.1.表现和内容分离

CSS 通过定义 HTML 标记如何显示控制网页的格式，使得页面内容和表现分离，简化了
网页格式设计，也使得对网页格式的修改更方便。

4.1.3.2.增强了网页的表现力

CSS 样式属性提供了比 HTML 更多的格式设计功能。例如，可以通过 CSS样式去掉网页
中超链接的下划线，甚至可以为文字添加阴影效果等。

4.1.3.3.使整个网站显示风格趋于统一

将CSS样式定义到样式表文件中，然后在多个网页中同时应用样式表文件中的样式
就可以确保多个网页具有一致的格式”并目可以随时重新样式表文件，实现自动更新多个网页的格式功能，从而大大降低网站的开发与维护的成本。

4.1.4.CSS的编写规则

利用CSS结构样式设计虽然强大，但是如果设计人员管理不当将导致样式混乱。

4.1.4.1.目录结构命名规则

存放 CSS样式文件的目录一般命名为 style 或 css

4.1.4.2.样式文件的命名规则

在项目初期，会把不同类别的样式放于不同的 CSS 文件，是为了 CSS 编写和调试的方
便；在项目后期，为了网站性能上的考虑，会将不同的CSS 文件整合到一个 CSS 文件中，
这个文件一般命名为 style.css 或 css. css

4.1.4.3.选择器的命名规则

所有选择器必须由小写英文字母或下划线组成，必须以字母开头，不能为纯数字。设计者要用有意义的单词或缩写组合来命名选择器，做到“见名知义”，这样就节省了査找样式的时间。样式名必须能够表示样式的大概含义（禁止出现如 Divl,Div2 和 Style 等自名）以下即为参考

4.1.4.4.CSS代码注释

像其他语言一样，CSS 允许用户在源代码中嵌入注释。CSS 注释被浏览器忽略，不影响网页效果。注释有助于记住复杂的样式规则的作用、应用的范围等，便于样式规则的后期维护和应用。CSS 注释以字符“/*”开始，以字符“*”结束。注释可以是单行，也可以是多行，并可以出现在 CSS代码的任何地方

4.1.4.5.CSS代码注释

代码缩进可以保证 CSS 代码的清晰可读。在实际应用中，可以按一次Tab 键来缩进选择器，按两次 Tab 键来缩进声明和结束大括号。这样的排版规则便于查询，避免代码混乱。代码缩进可以保证 CSS 代码的清晰可读。在实际应用中，可以按一次Tab 键来缩进选择器，按两次 Tab 键来缩进声明和结束大括号。这样的排版规则便于查询，避免代码混乱。

4.2 CSS语法基础

CSS 控制页面是通过 CSS 规则实现的，CSS 规则由选择器和声明组成，声明由属性和属性值对组成。CSS 提供了丰富的选择器类型，包括标记选择器、类选择器、id 选择器及伪类选择器等，能够灵活地对整个页面、页面中的某个标记或一类标记进行样式设置。

4.2.1.CSS基本语法

CSS就是一个包含一个或多个规则的文本文件，CSS 规则由两个主要的部分构成：选择器(Selector 选择器） 和声明(Declaration)。
选择器通常是需要改变样式的HTML 元素。
声明由一个或多个属性与属性值对组成。属性是CSS 的关键字，如font-family（字体） color （颜色）和 border （边框）等，属性用于指定选择器某一方面的特性，而属性值则用于指定选择器的特性的具体特征。

4.2.1.1.基本语法

selector{ propetyl:valuel; property2:value2 ;property3:value3 ···
选择器 {属性1：属性值1；属性2:属性值2；属性3:属性值3；···.

4.2.1.2.语法说明

(1) 选择器。选择器可以是 HTL 标记名称或者属性的值，也可以是自定义的标识符。

(2) 属性/属性值对。“属性：属性值”必须一一对应，属性与属性值之间必须用“：”
连接，每个属性/属性值对之间用分号(;) 隔开。
(3)属性。在CSS中对属性命名与脚本语言中有一点不同，即属性名称的写法，在CSS中，凡是属性名为两个成两个以上的单词构成时，单词之间以连词符号（-)分隔，例如背景颜色属性 backaround-color. 而在脚本语言中，对象属性则连写成 backgroundColor。在脚本语言中，属性由两个以上道词构成川从第二个单词开始向后，所有单词首字母必须大写。

p{ background-color:red;font-size:20px; color:green;}
上例的 CSS 规则中p为选择器，background-color, font-size 和 color 为属性,red,20px
和 green 为属性值。该 CSS 规则将 HTML中的所有段落统一设置成“背景色为红色、字体大小为20做素以及字休颜色为绿色”。通常为了增强样式定义的可读性，建议每行只描述一个属性，代码如下所示：

p {
background-color:red;
font-size:20px;color:green;

}

4) 复合属性。在 CSS 中有些属性可以表示多个属性的值。如关于文字的设置，有
fonl-family（字体）、font-size （字体大小）、font-syle （字体风格），这些可以用一个属性
font 来表示，例如

p{

        font-style:italic

        font-size:20px

        font-family:黑体;

} 也可如下表示

p{

font:italic 20px 黑体;

}

值得注意的是，当使用font 复合属性在一个声明中设置所有字体属性时，应按照
Font- style, font-variant, font-weight, font-size/ line-height, font- family的顺序，可以不设置其中的某个值，比如“font:100% verdana;”仅设置了 font-size 和 font-family 属性、其他未设置的属性会使用其默认值。类似的复合属性还有 border, margin 和 padding等

(5) 多个属性值。在 CSS 中有些属性可以设置多个属性值，用逗号（，)分隔。例如
selector {
font- family:"楷体_gb2312", ”黑体”, ”Times New Roman";

}
该样式表说明了可以使用楷体 gb2312、黑体、Times New Roman 3种字体来设置selector的字体效果。若系统中找不到楷体 gb2312、则使用黑体，若也没有黑体，则使用Times New Roman，即按出现的先后顺序优先选择。

4.2.2.CSS选择器类型

CSS 选择器主要有4种类型：标记选择器、class 选择器、D 选择器及伪类选择器等

4.2.2.1.标记选择器

标记选择器（也可称为“元素选择器”）即直接使用 HTML标记名称作为选择器。它
定义的样式作用于页面中所有与选择器同名的标记。

4.2.2.2.class选择器

class 选择器也叫“类”选择器，可以给指定的标签设置一个 class 属性和 class 值然后
通过das 选择器找到对应的标签，为其设置 class 值，即添加 CSS 样式。使用 class 类洗秘
界时，需要用英文(.)进行表示，代码如下所示。

4.2.2.3.ID选择器

ID 选择器用来对某个单一元素定义单独的样式。ID 选择器只能在 HTML 页面中使用一次，针对性更强。定义ID 选择器时，、需要在id名称前加一个“#”。接下来通过实例来演示ID 选择器。

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title></title>
		<style type="text/css">
		#green{
		font-size:30px;		/米 字体大小*/
		color:#009900;		/米 颜色*/
		}
 
		</style>
	</head>
	<body>
		<p id="green">ID 选择器 1</p>
	</body>
</html>

对于 CSS 来说，D 选择器与 class 选择器的功能很相似但不完全相同。一般来说，class
选择器更加灵活，能完成ID 选择器的所有作用，也能完成更加复杂的功能应用。如果对样式可重用性要求较高，则应该使用 class 选择器将新元素添加到类中来完成，对于需要唯一标识的页面元素，则可以使用ID 选择器。

4.2.2.4.伪类选择器

前面介绍的选择器都是能够与 HTML 中具体标记对应的，但是像段落的第1行，超链接
访问前与访向后等，就没有 HIMI 标记与之对应，从而也没有简单的CSS 选择器应用，为此CSS引进了伪类选择器。

4.2.3.CSS选择器声明

在声明各种 CSS 选择器时，如果某些选择器的风格是完全相同的，或者部分相同，都
可以使用集体声明的方法，用“，”分隔多个选择器，对风格相同的 CSS 选择器同时声明。

4.2.3.1.集体生明

集体声明代码如下：
h3, h4, hs, p { color:red; font-size:18px; }

4.2.3.2.全局声明

对于实际网站中的一些小型页面，例如弹出的小对话框和上传附件的小窗口等，希望这
些页面中所有的标记都使用同一种CSS样式，但又不希望通过逐个加入集体声明列表的方式。这时可以利用全局声明符号“*”，代码如下：
* {
color:red；
font-size:18px;

}

4.2.3.3派生选择器（上下文选择器）

另外，根据标记所在位置的上下文关系来定义样式，可以使标记更加简洁，派生选择器
允许根据文档的上下文关系来确定某个标记的样式。通过合理地使用派生选择器，可以使CSS代码变得更加整洁。例如，要让列表项<li>中的<strong>标记变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：
li strong { font-style:italie;font-weight;normal; }
strong { font-weight:bold; }
代码如下
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用<strong></p>
<ol>
        <li>< strong>我是斜体字，这是因为 strong元素位于i标记内<< strong></li>
        <li>我是正常的字体</li>
</ol>
在上面的例子中，有两个 srong 标记，但只有li 元素中的 strong元素的样式为斜体字，且光纸为onc标记定义特别的 class或id, 应用派生选择器，代码更加简洁。
 

4.3 CSS引入方式

CSS按其位置可以分为4种：内联样式表(Inline Style Sheet)、内部样式表(InternalSyle Sheel)、链接外部样式表 (Iink Extemal Style Sheet) 以及导人外部样式表 (ImponEx-ternal Style Sheet)。

4.3.1.内联样式表（行内样式表）

联样式表的 CSS 规则写在首标记内，只对所在的标记有效，，几乎任何一个 HITML标
记上都可以设置 style 属性，属性值可以包含 CSS规则的声明，不包含选择器。

4.3.1.1.基本语法

<标记 style="属性1:属性值1;属性2:属性值2:…">修饰的内容</标记>

4.3.1.2.语法说明

语法说明：
(1) 标记是指 HTML 标记，如p，hl和body 等标记；

(2) 标记的style定义的声明只对自身起作用；

(3) style 属性的值可以包含多个声明，每一声明之间用“；”分隔；

(4) 标记自身定义的style样式优先于其他所有样式定义。

4.3.2.内部样式表

内部样式表写在 HTML 的<head></head>里面，只对所在的网页有效。使用< style ><style>标记对来放置 CSS 规则。

4.3.2.1.基本语法

I <style type="text/css">
选择器1 { 属性1:属性值1;属性2:属性值2；… } 选择器 2 { 属性1;属性值1:属性2:属性值2… } 选择器n { 属性1:属性值1:属性2:属性值2… } </style>

4.3.2.2.语法说明

style 标记是成对标记，有1个type 属性是指style 元素以 CSS 的语法定义。选择器1，··…，选择器n，可以定义n个选择器，再定义声明部分。
属性和属性值之间用冒号连接、“属性/属性值”对之间用分号分隔。本书中，示例程序4.1~4.3全部使用内部样式表，此处不再举例。
 

4.3.3.外部样式表

外部样式表是将 CSS 规则写在以 . css为后级的CSS 文件里，在需要用到此样式的网页里引用该CSS 文件。根据引用的方式不同可以分为链接外部样式表和导入外部样式表，它们形式上的区别在于链接外部样式表通过链接link 标记，导入外部样式表必须在内部样式表内首行通过“@import url（外部样式文件）；”来定义。

4.3.3.1.链接外部样式表

链接式是将所有的样式放在一个或多个以“.css”为扩展名的外部样式表中，通过网听
的<head></head 标签中使用<link>标记将外部样式表文件链接到 HTML 文档中。

(1) 基本语法：
        <link type='"text/css" rel="stylesheet" href="外部样式表名.css">

(2) 语法说明：
        语法中必须指定<link>标记的3个属性，其中 href是定义链接外部样式表文件的url 可以是相对路径和绝对路径；rel 是定义当前文档与被链接文档之间的关系，这里指定stylesheet，表示被链接的文档是样式表文件；type是定义链接文档的类型，这里类型指定为text/css，表示链接的外部文件为 CSS 样式表
        这里面涉及3个属性，rel=" stylesheet"规定当前文档与被链接文档之间的关系。type="text/css"规定被链接文档的 MIME 类型。href=" mystyle.css"规定被链接文档的位置，只需要记住这个固定写法即可。

4.3.3.2.导入外部样式表

导人式是将一个独立的CSS 文件导入HTML 文档中，其是在 HTML 文档< head>中应用く
style>标签，并在< style>标签中的开头处用@ import语句，即可导人外部样式表文件。

        (1) 基本语法：
<style type="text/css">
@ import url("CSS 文件路径”）；
/*此处还可以存放其他CSS 样式*/
</style>
        (2) 语法说明。导入样式表必须在style 标记内开头的位置定义，可以同时导入多个外部样式表，每条语句必须以“；”结束。一般导入外部样式写在最前面，内部样式写在后面。
“@import”必须连续书写，即“@”和“import”之间不能留有任何空格。外部样式
表的名称在书写时，必须是全称再加上后缀名“.css”，如“4-5.css”。
        导入式会在整个网页加载完后再加载CSS 文件，因此如果网页比较大则会出现先显示无样式的页面，再出现网页的样式的情况。这是导入式固有的一个缺陷。
        虽然导人式和链接式功能基本相同，但大多数网站都是采用链接式引人外部样式表，这
是因为两者的加载时间和顺序不同。在加载页面时.<link>标签引用的 CSS 样式表将同时被
加载，而“@ impot”引用的CSS 样式表会等救个网页下载结束后再被加载。可能会显示无样式的页面，造成不好的用户体验。因此，大多数的网站采用链按外部样式表是使用频次最高、最实用的 CSS样式表。它可以将 HTML 北码与CSS代码分离为两个或多个文件，实现类结构和表现的完全分离，使网页的前期制作和后期维护都变得十分方便。

4.4 CSS的属性单位

在CSS文字，排版，边界等的设置上，常常会在属性值后加上长度或者百分比单位。

4.4.1.长度、百分比单位

长度单位通常由两个英文字母的缩写表示，且设置大部分属性时仅能使用正数，只有少
数属性可以使用正、负数的设置。而且必须注意，若属性值设置为负数，且超过浏览器所能接受的范围，以至于无法支持时，浏览器将会选择比较靠近且能支持的数值，长度单位在设置时分别为以下两种不同的类型。

4.4.1.1.相对类型

其指以该属性的前一个属性的单位值为基础来完成目前的设置，在浏览器内常用且支持的两种长度单位是以相对类型出现的。如用cm（当前字母中，字母的宽度）作为属性单位时，将会依据父元素的 font-size 属性，如果没有父元素，则参考浏览器的默认值字号。

4.4.1.2.绝对类型

绝对类型所使用的单位不会随着显示设备的不同而改变，也就是当属性值使用绝对单位时，不论在哪种设备上显示都是一样的，例如屏幕上的1cm 与打印机上的1cm是一样长的。下表为浏览器支持的绝对类型的长度单位。

百分比单位是一种常用的相对类型，通常的参考依据为font-size 属性。百分比值总是相
对于另一个值。下面的语句将 margin 属性的值设置为 font-size 的200%:
p { margin:200%；}
需要注意的是，不管使用哪种单位，在设置的时候数值与单位之间不需要加空格

4.4.2.色彩单位

HTML 网页和.CSS 样式都是按照RGB 来设置颜色的。在 HTML 标记中只提供了两种设
置色彩的方法：十六进制数和色彩英文名称。CSS则提供了三种定义色彩的方法：十六进制
数、色彩英文名称、rgb 函数和 rgba 两数。

4.4.2.1.用十六进制数方式表示色彩值

在计算机中，定义每种色彩的强度范围为0~255。当所有色彩的强度都为0时，将产生黑色；当所有色彩的强度都为 255时，将产生白色。
在HTML中，使用RGB 概念指定色彩时，前面是一个“#”号，再加上6个十六进制数字表示，表示方法为：#报RGGBB，其中，前两个数字代表红光强度 (Red)，中间两个数字代表绿光强度(Green)，后两个数字代表蓝光强度 (Blue)，以上3个参数的取值范围为00~f。参数必须是两位数，对于只有1位的参数，应在前面补0。这种方法共可表示 256×
256×256种色彩，即16M 种色彩。而红色、绿色、黑色、白色的十六进制设置值分别为#FF0000、#00FF00、#0000FF、#000000、FFFFFF。例如下面的代码：

div {
color:#FF0000:

}
如果每个参数各自在两位上的数字都相同，也可缩写为#RGB的方式。例如 #cc9900
可以缩写为#c90

4.4.2.2.用色彩名称方式表示色彩值

在CSS中也提供了与HTML一样的用色彩英文名称表示色彩的方式。CSS只提供16种色彩名称见下表

4.4.2.3.使用RGB（x,y,z）函数表示

×、y、2、分别是红色、绿色、蓝色的值，x,y, z属于[0,225]，亦可用百分比表示；
对比rglba (x, y, 2, a) 中a是alpha 通道设置透明度取值0~1。

4.5.CSS继承与层叠

CSS继承即子标记会继承父标记的所有样式风格，并且可以在父标记样式风格的基础上
再加以修改，产生新的样式，而子标记的样式风格完全不影响父标记，值得注意的是，并不是所有的属性都会自动传给子元素，有的属性不会继承父标记的属性值，例如边框属性就是非继承的。

<!DOCTYPE html>
<html>
	<head>
<meta charset=" UTF-8"><title>继承关系演示</title>
<style>
h1{
color:blue；/*颜色 */
text-decoration:underline;/*下划线 */
}
em{
color:red；
/* 颜色*/
}
	</style>
</head>
<body>
	<h1>学习<em>Web开发</em>教程</h1>
	Sp>如果您有任何问题，欢迎联系我们</p >
	</body>
</html>

 以上示例中，<hl>标签设置为蓝色，加下划线。但<em>标签设置为斜体，红色。它继承了父标签的下划线。
        CSS的全称是“层叠样式表”，层叠特性和“继承”不一样，可以把层叠特性理解成“冲突”的解决方案，即对同一内容设置了多个不同类型样式产生冲突时的处理，CSS 规定如下优先级为：行内样式>id样式 >class 样式>标记样式。

        样式表的层叠性就是继承性、样式表的继承规则是：外部的元素样式会保留下来，由各元素所包含的其他元素继承：所有在元素中嵌套的元素都会继承外层元素指定的属性，有时公把乡层底套的样式叠加在一起。除非进行更改；遇到冲突的地方，以最后定义为准。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS层叠</title>
		<style type="text/css">
			p{
				color: green;
			}
			.red{
				color: red;
			}
			.purple{
				color: purple;
			}
			#line3{
				color: blue;
			}
		</style>
	</head>
	<body>
		<p>这是第1行文本</p>
		<p class="red">这是第2行文本</p>
		<p id="line3" class="red">这是第3行文本</p><!--id>class>p-->
		<p style="color: orange;" id="line3">这是第4行文本</p><!--行内样式style生效-->
		<p class="purple">这是第5行文本</p>
	</body>
</html>

4.6 元素类型

在前面已经以文档结构树形图的形式讲解了文档中元素的层次关系，这种层次关系同时也要依赖于这些元素类型间的关系。CSS 使用 display 属性规定元素应该生成的框的类型，任何元素都可以通过 display 属性改变默认的显示类型。

4.6.1.块级元素（display:block）

display 属性设置为 block 将显示块级元素，块级元素的宽度为100%，而且后面隐藏附
带有换行符，使块级元素始终占据一行、如<div>常常被称为块级元素，这意味着这些元素显示为一块内容，标题、段落、列表、表格、分区div 和 body 等元素都是块级元素。

4.6.2.行级元素（display:inline）

行级元素也称内联元素，display 属性设置为inline 将显示行级元素，元素前后没有换行符，行级元素没有高度和宽度，因此也就没有固定的形状，显示时只占据其内容的大小超链接、图像、范围(span)、表单元素等都是行级元素。

4.6.3.列表项元素（display:list-item）

list-item 属性值表示列表项目，其实质上也是块状显示，是一种特殊的块状类型，它加了缩进和项目符号。

4.6.4.隐藏元素（display:none）

none 属性值表示隐藏并取消盒模型，所包含的内容不会被浏览器解析和显示。通过把
display设置为 none，该元素及其所有内容就不再显示，也不占用文档中的空间。

综合案例：开平碉楼申遗大事记。
以开平碉楼的申遗大事记为例子，参照给定的 HTML 代码、CSS 设置和图片资源，利用
HBuilder设计 Web 网页。要求：
(1) 标题设置为h2、“微软雅黑”、居中显示；
(2) 小标题设置为“黑体”，字体颜色设置为“#8B4513”，段落背景颜色为“#D3B175”, 行高为 200%；
(3)正文其他所有的字体设置为“微软雅黑”、18px、首行缩进2字符；
(4) 使用外部样式表链接到 HTML 文档中。