第四章 CSS样式基础

4.1 CSS概述

随着 HTML的发展，为了满足页面设计者的要求，HTML添加了很多显示功能，但是随着这些功能的增加，使得HTML变得越来越杂乱，HTML,页面也越来越臃肿，CSS便诞生了。CSS 是用于简化 HTML标签，把关于样式部分的内容提取出来，进行单独地控制，使结构与样式分离式开发。对页面布局等的控制也更加精确，同时能够实现内容和表现的分离使得网站的设计风格趋向统一、维护更加容易，并且能够被多种浏览器支持。

选择器：CSS通过选择器来定位HTML文档中的元素，并应用样式规则。常见的选择器包括标签选择器、类选择器、ID选择器、属性选择器、伪类和伪元素等。

属性和值：CSS规则由属性和值组成。属性定义了样式的特定方面，如color、background-color、margin等，而值则是这些属性的具体设置。

层叠：当多个样式规则应用于同一个元素时，CSS的层叠规则决定了哪个规则将被应用。这涉及到规则的来源（如内联样式、内部样式表、外部样式表）、规则的特异性和重要性声明。

继承：某些CSS属性可以被元素的子元素继承，这意味着子元素会继承父元素的样式，除非被覆盖。

盒模型：CSS的盒模型定义了元素的布局方式，包括内容、内边距（padding）、边框（border）和外边距（margin）。

定位：CSS提供了多种定位机制，如静态定位、相对定位、绝对定位和固定定位，允许开发者精确控制元素的位置。

布局：CSS布局可以通过多种方式实现，包括传统的浮动布局、定位布局，以及现代的Flexbox和Grid系统。

响应式设计：通过使用媒体查询，CSS可以为不同的屏幕尺寸和设备类型提供不同的样式规则，实现响应式设计。

动画和过渡：CSS提供了transition和animation属性，允许创建平滑的动画效果。

预处理器：如Sass和Less，这些工具扩展了CSS的功能，允许使用变量、嵌套规则、混合（mixins）和函数等高级功能。

CSS框架：如Bootstrap、Foundation等，这些框架提供了一套预先定义的样式和组件，可以加速开发过程。

4.1.1.CSS的基本概念

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

样式表：样式表包含了一系列的规则，这些规则定义了HTML元素的显示方式。

规则集：规则集由一个或多个CSS声明组成，每个声明定义了元素的属性和值。

选择器：选择器用于选择页面上的HTML元素，以便应用样式。常见的选择器包括：

标签选择器：根据HTML标签选择元素。
类选择器：使用点号（.）后跟类名来选择具有特定类的元素。
ID选择器：使用井号（#）后跟ID名来选择具有特定ID的元素。
属性选择器：根据元素的属性及其值来选择元素。
伪类：使用冒号（:）后跟伪类名来选择元素的特殊状态，如:hover。
伪元素：使用双冒号（::）后跟伪元素名来选择元素的特殊部分，如::before。
属性：属性是CSS中用于定义样式的关键字，如color、font-size、margin等。

值：值是属性的设置，它定义了属性的具体表现，如color: blue;中的blue。

层叠：当多个规则应用于同一个元素时，CSS的层叠机制决定了哪个规则优先级更高。层叠规则考虑了规则的来源、特异性和重要性。

继承：某些CSS属性可以从父元素继承到子元素，如color和font-family。

盒模型：CSS中的盒模型包括内容区域、内边距（padding）、边框（border）和外边距（margin）。

定位：CSS提供了多种定位机制，包括：

静态定位：元素按照正常的文档流进行布局。
相对定位：元素相对于其正常位置进行偏移。
绝对定位：元素相对于其最近的已定位祖先元素进行定位。
固定定位：元素相对于视口进行定位。
布局：CSS提供了多种布局方式，包括传统的浮动布局、Flexbox（弹性盒模型）和Grid（网格布局）。

媒体查询：媒体查询允许你根据不同的屏幕尺寸、分辨率或其他特性来应用不同的CSS规则，实现响应式设计。

动画：CSS提供了transition（过渡）和animation（动画）属性，用于创建动画效果。

Flexbox：一种用于布局的CSS3模块，允许更灵活的布局控制。

Grid：CSS Grid Layout是一个二维布局系统，允许开发者以网格的形式创建复杂的页面布局。

预处理器：如Sass、Less，它们提供了变量、嵌套规则、混合（mixins）、函数等高级功能，使得CSS更加强大和易于管理。

框架：如Bootstrap、Tailwind CSS等，提供了一套预定义的样式和组件，以加速开发过程。

CSS是前端开发中的核心部分，它使得网页设计更加灵活和动态。随着Web技术的发展，CSS也在不断地更新和扩展，以支持更复杂的设计和交互。

4.1.2传统HTML的缺点

HTML标记是用来定义文档内容，比如通过hl,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对于各个模块的位置调整很困难。

样式和内容混杂：

在早期的Web开发中，样式和内容经常混在一起，这使得维护和更新变得困难。

布局限制：

HTML本身不提供复杂的布局机制，如网格布局或灵活的盒子模型，这限制了页面设计的灵活性。

表现力有限：

HTML主要用于结构和内容的标记，对于视觉效果的表现力有限，需要依赖CSS来实现丰富的样式。

不支持动态交互：

HTML是静态的，不支持动态内容的更新和交互，这需要JavaScript等脚本语言来实现。

表单处理能力有限：

HTML表单功能有限，对于复杂的表单验证和处理，需要额外的JavaScript代码。

不支持高级数据结构：

HTML不支持复杂的数据结构，如树状结构或图结构，它主要用于线性内容的展示。

可访问性问题：

传统的HTML可能没有考虑到无障碍访问的需求，导致某些用户群体（如视障人士）难以使用。

维护困难：

随着项目的增长，大量的HTML、CSS和JavaScript代码可能会变得难以维护和扩展。

浏览器兼容性问题：

不同的浏览器对HTML和CSS的支持程度不同，这可能导致跨浏览器的兼容性问题。

SEO优化困难：

如果HTML结构设计不当，可能会影响搜索引擎优化（SEO），从而影响网站的可见性。

性能问题：

大量的HTML标记和复杂的DOM结构可能会导致页面加载速度变慢，影响用户体验。

安全性问题：

如果HTML中包含不安全的代码或链接，可能会引发跨站脚本攻击（XSS）或其他安全问题。

为了解决这些问题，现代Web开发采用了多种技术和最佳实践，如使用CSS进行样式设计，使用JavaScript实现动态交互，以及使用现代框架和工具来提高开发效率和维护性。此外，Web标准也在不断更新，以支持更先进的功能和更好的用户体验。

4.1.3.CSS的特点和优势

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

CSS（层叠样式表）是用于描述HTML或XML文档的样式的标记语言，它具有以下特点和优势：

4.1.3.1.表现和内容分离

CSS允许将文档的内容（HTML）与文档的表现（CSS）分离，提高了代码的可维护性和可读性，简化了网页格式设计，也使得对网页格式的修改更方便。。

4.1.3.2.增强了网页的表现力

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

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

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

样式复用：通过定义类选择器和ID选择器，可以轻松地在多个元素或页面之间复用样式。

响应式设计：CSS的媒体查询功能使得开发者能够为不同的设备和屏幕尺寸创建响应式设计。

动态样式应用：CSS可以与JavaScript结合使用，实现动态的样式变化和交互效果。

丰富的视觉格式化选项：CSS提供了丰富的属性来控制字体、颜色、间距、边框、背景和其他视觉效果。

盒模型：CSS的盒模型提供了灵活的布局方式，包括内边距、边框和外边距。

定位和布局：CSS提供了多种定位技术，包括相对定位、绝对定位、固定定位和静态定位，以及现代的Flexbox和Grid布局系统。

伪类和伪元素：CSS的伪类和伪元素允许开发者为页面元素的不同状态或部分定义特定的样式。

过渡和动画：CSS提供了过渡（transitions）和动画（animations）功能，使得创建平滑的视觉效果变得简单。

易于维护：CSS的层叠和继承特性使得样式表易于维护和更新。

性能优化：通过合理使用CSS，可以减少HTTP请求，提高页面加载速度。

跨浏览器兼容性：现代CSS的编写通常考虑了跨浏览器兼容性，确保样式在不同浏览器中表现一致。

可访问性：通过合理使用CSS，可以提高网站的可访问性，使其对所有用户，包括残障用户更加友好。

易于学习：CSS具有相对简单的语法，易于学习和使用。

社区和资源：CSS有一个庞大的开发者社区和丰富的在线资源，包括教程、工具和框架。

预处理器支持：CSS可以通过预处理器如Sass、Less等进行扩展，提供变量、混合、函数等高级功能。

样式表的压缩：CSS文件可以被压缩，减少文件大小，加快加载速度。

样式表的缓存：浏览器可以缓存样式表，减少重复加载相同样式表的次数。

CSS框架：有许多成熟的CSS框架（如Bootstrap、Foundation）提供了一套预定义的样式和组件，加速开发过程。

Web标准的一部分：CSS是Web标准的一部分，与HTML和JavaScript等其他Web技术协同工作。

CSS的这些特点和优势使其成为Web开发中不可或缺的一部分，它为创建丰富、动态和响应式的网页提供了强大的工具。

4.1.4.CSS的编写规则

利用 CSS 样式设计虽然很强大，但是如果设计人员管理不当将导致样式混乱。本节介绍学习 CSS 编写中的一些技巧和规则。编写CSS时，遵循一些基本规则和最佳实践可以帮助你创建更加清晰、高效和可维护的样式表。以下是一些关键的CSS编写规则：

使用语义化的类名：避免使用如.red、.blue这样的描述性类名，而应该使用更具语义的类名，如.error、.success。

避免过度使用ID选择器：ID在页面中应该是唯一的，因此应该谨慎使用。通常，类选择器更适合样式定义。

使用有意义的选择器：选择器应该清晰地表达样式应用的上下文。

避免使用行内样式：行内样式会破坏内容与表现的分离，应该通过外部或内部样式表来定义样式。

使用CSS重置或归一化：为了减少浏览器默认样式的差异，可以使用如Eric Meyer的CSS重置或Normalize.css。

保持样式表的组织性：逻辑地组织CSS规则，例如，按模块或组件组织，或者按照在HTML文档中出现的顺序。

使用CSS预处理器：如Sass或Less，它们提供了变量、混合、函数等高级功能，有助于提高CSS的可维护性。

避免使用!important声明：过度使用!important会破坏CSS的自然层叠规则，应该寻找其他解决方案。

使用简写属性：当可能时，使用简写属性，如margin、padding、font等，以减少代码量。

使用相对单位：使用像em、rem、vw、vh这样的相对单位，而不是像px这样的绝对单位，以提高响应式设计。

利用CSS的继承特性：合理利用继承可以减少代码量，提高效率。

使用媒体查询进行响应式设计：通过媒体查询为不同的屏幕尺寸和设备类型提供不同的样式。

避免过度嵌套：过度嵌套的选择器会增加CSS的复杂性和特异性，使得样式更难重用和维护。

注释你的代码：适当的注释可以帮助你和其他人理解代码的意图和结构。

使用CSS框架：考虑使用Bootstrap、Foundation等CSS框架，它们提供了一套预定义的样式和组件。

编写可维护的CSS：避免编写过于复杂或过于具体的样式，这会使得未来的维护变得困难。

使用CSS变量：CSS变量（也称为自定义属性）可以提高样式表的可维护性。

优化性能：避免使用过多的复杂选择器和高开销的属性，如box-shadow和filter，它们可能会影响性能。

考虑可访问性：编写CSS时，考虑不同用户的需求，确保网站对所有用户都是可访问的。

测试跨浏览器兼容性：确保你的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 和 Suyle 等自名)，读者可以参考表中的样式命名。

页面功能	说明	页面功能	说明
#container 或#content	容器，用于最外层	#main	页面主体
#layout	布 局	#tag	标 签
#hea， #header	头 部	#msg	提示信息
#foot，#footer	页脚部分	#tips	小技巧
#nav	主导航	#vote	投票
#subnav	二级导航	#friendlink	友情连接
#menu	菜单	#title	标题
#copyright	版权信息	#siteinfo	网站信息
#branding	商 标	#siteinfoLegal	法律声明
#logo	网站 LOGO	#siteinfoCredits	信 誉
#joinus	加入我们

4.1.4.4.CSS代码注释

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

4.1.4.5.CSS代码注释

代码缩进可以保证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 | propertyl : valuel ; property2 : value2 ; property3 : value3 ; |

选择器{属性1:属性值1;属性 2:属性值2;属性 3:属性值3;}

4.2.1.2.语法说明

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

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

4.2.2.CSS选择器类型

CSS选择器是用于选择页面上的元素以便应用样式的模式。以下是不同类型的CSS选择器：

通用选择器：

* {
  /* 样式应用于所有元素 */
}

标签选择器（类型选择器）：

p {
  /* 样式应用于所有<p>元素 */
}

类选择器：

.className {
  /* 样式应用于所有具有class="className"的元素 */
}

ID选择器：

#idName {
  /* 样式应用于所有具有id="idName"的元素 */
}

属性选择器：

[type="text"] {
  /* 样式应用于所有type属性为"text"的元素 */
}

伪类选择器：

a:hover {
  /* 鼠标悬停在<a>元素上时应用的样式 */
}
:first-child {
  /* 样式应用于每个元素的第一个子元素 */
}

伪元素选择器：

p::before {
  /* 样式应用于<p>元素之前的内容 */
}
::selection {
  /* 样式应用于用户选择的文本 */
}
关系选择器：

子选择器（>）：
ul > li {
  /* 样式应用于<ul>元素的直接子元素<li> */
}
相邻兄弟选择器（+）：
h1 + p {
  /* 样式应用于紧跟在<h1>元素之后的<p>元素 */
}

通用兄弟选择器（~）：

h1 ~ p {
  /* 样式应用于<h1>元素之后的所有<p>元素 */
}

否定伪类：

:not(.className) {
  /* 样式应用于不具有class="className"的所有元素 */
}

属性选择器的扩展：

存在属性：

[attributeName] {
  /* 样式应用于具有attributeName属性的所有元素 */
}

属性值完全匹配：

[attributeName="value"] {
  /* 样式应用于attributeName属性完全等于"value"的所有元素 */
}

属性值包含指定字符串：

[attributeName*="value"] {
  /* 样式应用于attributeName属性值中包含"value"字符串的所有元素 */
}

结构伪类：

根选择器：

:root {
  /* 样式应用于文档的根元素 */
}

空状态伪类：

:empty {
  /* 样式应用于没有子元素的元素 */
}

页面伪类：

首字母伪元素：

::first-letter {
  /* 样式应用于文本的第一个字母 */
}

首行伪元素：

::first-line {
  /* 样式应用于文本的第一行 */
}

这些选择器可以单独使用，也可以组合使用以提高选择的精确性

4.2.3.CSS选择器声明

在CSS中，选择器声明是指将选择器与一组CSS规则结合起来，以指定一个或多个HTML元素的样式。以下是如何编写CSS选择器声明的基本格式：

基本格式

选择器 {
  属性1: 值1;
  属性2: 值2;
  /* 更多的属性和值 */
}

示例
/* 标签选择器 */

p {
  color: blue;
  font-size: 16px;
}

 
/* 类选择器 */

.className {
  background-color: yellow;
  font-weight: bold;
}

 
/* ID选择器 */

#idName {
  border: 1px solid black;
  padding: 10px;
}

 
/* 属性选择器 */

a[href="#"] {
  color: red;
}
 

 
/* 伪类选择器 */

a:hover {
  color: green;
}
 

/* 伪元素选择器 */

p::first-line {
  font-weight: bold;
}

 
/* 组合选择器 */

h1, h2, h3 {
  color: navy;
}

 
/* 子选择器 */

ul > li {
  margin-left: 20px;
}
 

/* 相邻兄弟选择器 */

ul > li {
  margin-left: 20px;
}
 

 
/* 通用兄弟选择器 */

h1 ~ p {
  color: grey;
}

 
/* 否定伪类 */

:not(.error) {
  color: black;
}

 
/* 结构伪类 */

article :nth-child(even) {
  background-color: #f2f2f2;
}

组合选择器
选择器可以组合使用，以更精确地定位元素：

/* 类和伪类的组合 */
.className:hover {
  color: purple;
}
 

/* 类和属性选择器的组合 */

.className[attribute="value"] {
  border: 2px dashed green;
}

 
/* ID和伪类的组合 */

#idName:active {
  background-color: silver;
}

继承
某些CSS属性（如color和font-family）可以从父元素继承到子元素：

/* 父元素 */
.parent {
  color: green;
  font-family: Arial, sans-serif;
}

 
/* 子元素将继承父元素的颜色和字体 */

.parent .child {
  font-size: 14px;
}

重要性声明
在某些情况下，你可能需要覆盖其他CSS规则：

p {
  color: blue !important;
}

使用!important可以提高规则的优先级，但应谨慎使用，因为它可能导致样式难以维护。

这些是CSS选择器声明的基本组成部分和示例，帮助你理解如何为HTML元素应用样式。

4.2.3.1.集体声明

集体声明代码如下:

h3 ,h4,h5 ,p{ color:red;font-size:18px; }

4.2.3.2.全局声明

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

*{
color : red ;
font-size : 18px

}

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

另外，根据标记所在位置的上下文关系来定义样式，可以使标记更加简洁，派生选择器允许根据文档的上下文关系来确定某个标记的样式。通过合理地使用派生选择器，可以使CSS 代码变得更加整洁。例如，要让列表项<li>中的<stong>标记变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器:
li strong { font-style : italic ; font-weight : normal ; }
strong { font-weight : bold ; }
代码如下:
<p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用<strong></p>

        <ol>
                <li>< strong>我是斜体字,这是因为 stong 元素位于|i 标记内</ srong></li>

                <li>我是正常的字体</li>
        </ol>在上面的例子中，有两个 stong 标记，但只有i元素中的 suong 元素的样式为斜体字,而且无须为 strong 标记定义特别的class 或id，应用派生选择器，代码更加简洁。

---

4.3 CSS引入方式

CSS按其位置可以分为4种：内联样式表（Inline Style Sheet），内部样式表（Internal Style

Sheet），链接外部样式表（Link External Style Sheet）以及导入外部样式表（ImportExternal Style Sheet）

优先级

这三种引入方式的优先级（也称为特异性）不同，当存在冲突的样式规则时，优先级高的规则会覆盖优先级低的规则：

内联样式：具有最高优先级，因为它们直接应用于HTML元素上。
ID选择器：优先级高于类选择器、伪类和属性选择器。
类选择器：优先级高于类型选择器和伪元素。
类型选择器：包括伪元素。
继承样式：从父元素继承的样式。
!important规则：如果CSS规则中包含!important声明，它将覆盖其他所有规则（除了其他包含!important的规则）。
层叠
除了优先级，CSS还具有层叠的概念，即多种规则可能应用于同一个元素。当多个规则具有相同优先级时，最后声明的规则将被采用。如果规则来自不同的样式表，那么最后加载的样式表中的规则将有更高的优先级。

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

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

内联样式直接在HTML元素的style属性中定义，只影响那个特定的元素。

特点：
直接性：内联样式直接作用于特定的HTML元素，不需要通过选择器来指定。
优先级：内联样式的优先级高于外部和内部样式表，但低于!important规则。
局限性：内联样式只能应用于单个元素，不适合全局样式的设置。
使用场景：
当需要对单个元素进行特殊样式处理时。
在快速原型制作或临时样式调整中。
当样式需要根据特定条件动态应用时（例如，通过JavaScript动态设置样式）。

行内样式表
如果你指的是在HTML文档中直接写入的CSS规则，而不是针对单个元素的样式，那么通常是指内部样式表。内部样式表使用<style>标签定义在HTML文档的<head>部分：

<head>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p>这是一个段落。</p>
</body>

特点：
包含性：内部样式表包含在HTML文档中，便于文档的自包含性。
作用域：内部样式表的作用域是整个HTML文档。
优先级：优先级高于外部样式表，但低于内联样式和!important规则。
使用场景：
当样式只用于当前文档时。
当样式需要快速定义且不打算在多个文档间共享时。
在小型项目或单页面应用中。
总结
内联样式：通过元素的style属性定义，只影响单个元素。
内部样式表：通过<style>标签在<head>部分定义，影响整个文档。
这两种方法都有助于将样式直接嵌入HTML文档中，但它们的使用场景和优先级有所不同。

4.3.1.1.基本语法

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

4.3.1.2.语法说明

(1)标记是指 HTML标记，如p，hl 和 body 等标记;
(2)标记的 style 定义的声明只对自身起作用;
(3)style 属性的值可以包含多个声明，每一声明之间用“;”分隔;
(4)标记自身定义的 style 样式优先于其他所有样式定义。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>内联样式表</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<p style="color: #ff0000;font-size: 20px;text-decoration: underline;">正文内容1</p>
		<p style="color: #000000;font-size: italic;">正文内容2</p>
		<p style="color: #ff00ff;font-size: 25px;font-weight: bold;">正文内容3</p>
		<p>这段话没有内联样式</p>
	</body>
</html>

4.3.2.内部样式表

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

是定义在HTML文档内部的<style>标签中的CSS代码。通常，这些样式被放在文档的<head>部分，这样在页面加载时，样式就已经被定义好了。

<head>
  <style>
    /* CSS规则 */
    body {
      font-family: Arial, sans-serif;
    }
  </style>
</head>

<head>
  <style type="text/css">
    /* CSS规则 */
    body {
      background-color: #f0f0f0;
      font-family: Arial, sans-serif;
    }
    h1 {
      color: navy;
    }
    p {
      font-size: 16px;
    }
  </style>
</head>
<body>
  <!-- 页面内容 -->
</body>

 

特点
封装性：内部样式表只影响当前HTML文档，不会影响到其他页面。
维护性：对于小型网站或单个页面，将CSS放在<style>标签中可以简化维护工作。
优先级：内部样式表的优先级高于外部样式表，但低于内联样式和!important声明。
易用性：不需要额外的CSS文件，可以直接在HTML文档中编写和修改。
使用场景
小型项目：对于只有几个页面的小网站，使用内部样式表可以减少外部文件的依赖。
快速原型：在快速原型设计或演示时，直接在HTML中编写样式可以提高效率。
特定的页面样式：当某些样式只适用于特定页面时，使用内部样式表可以避免在全局样式表中添加太多规则。
注意事项
代码组织：随着样式规则的增加，内部样式表可能会变得很长，需要合理组织代码，比如使用注释来分隔不同的部分。
性能：虽然内部样式表不需要额外的HTTP请求，但如果样式过于庞大，可能会影响页面的渲染速度。
可维护性：对于大型项目，过多的内部样式表可能会使得代码难以维护，通常推荐使用外部样式表。
内部样式表是HTML文档中定义样式的一种有效方式，适合于小规模项目或者需要快速开发的场景

4.3.2.1.基本语法

<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标记是成对标记，有一个type属性是指style元素以css的语法定义。

选择器1，···，选择器n，可以定义n个选择器，再定义声明部分。

属性和属性值之间用冒号连接，“属性/属性值”对之间用分号分隔。

4.3.3.外部样式表

外部样式存储在单独的.css文件中，并通过HTML文档的<link>标签引入。

这种方法有助于样式的复用和维护，尤其适用于大型网站或需要统一风格多个页面的情况。

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

4.3.3.1.链接外部样式表

语法

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>链接外部样式表</title>
		<link href="4-5.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<h2>CSS标题</h2>
		<p >这是正文内容······</p>
		<h2>CSS标题</h2>
		<p>通过link标签将外部样式表4-5.css链接到HTML文档中</p>
	</body>
</html>

4.3.3.2.导入外部样式表

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>导入外部样式表</title>
		<style type="text/css">
			@import url("4-5.css");
		</style>
	</head>
	<body>
		<h2>CSS标题</h2>
		<p >这是正文内容······</p>
		<h2>CSS标题</h2>
		<p>通过style标签将外部样式表4-5.css链接到HTML文档中</p>
	</body>
</html>

 

特点
复用性：多个HTML页面可以通过引入同一个外部样式表来共享相同的样式，这有助于保持网站风格的一致性。
维护性：修改外部样式表中的规则会影响到所有引入该样式表的页面，使得样式的更新和维护更加方便。
分离性：将CSS与HTML内容分离，提高了代码的可读性和可维护性。
缓存优势：浏览器可以缓存外部样式表，减少重复加载相同样式表的开销，从而提高页面加载速度。
使用场景
大型网站：对于拥有多个页面和复杂样式的网站，使用外部样式表可以避免样式的重复定义。
风格统一：当需要在整个网站中保持一致的设计风格时，外部样式表是理想的选择。
团队协作：在团队开发环境中，将样式和内容分离可以减少团队成员之间的冲突。
注意事项
路径问题：确保href属性正确指向CSS文件的路径，错误的路径会导致样式无法正确加载。
加载顺序：CSS文件需要在HTML文档的<head>部分尽早引入，以确保在页面内容加载时样式已经可用。
性能优化：虽然外部样式表有缓存优势，但如果CSS文件过大或过多，可能会影响页面的首次加载速度。可以考虑合并文件、压缩和使用CDN等方法来优化性能。
外部样式表是实现样式复用和维护的有效方法，非常适合于需要统一风格和大规模样式管理的项目。

4.4 CSS的属性单位

CSS中，长度和百分比单位是用来定义尺寸、间距、位置等属性的值。以下是一些常用的长度单位和百分比单位：

4.4.1.长度、百分比单位

像素 (px)：

最常用的长度单位。
相对于显示器的分辨率，1px通常等同于一个物理像素点。
优点是精确，缺点是不易于响应式设计。
相对视窗长度 (vw/vh)：

vw代表视口宽度的百分比，1vw等于视口宽度的1%。
vh代表视口高度的百分比，1vh等于视口高度的1%。
适合于制作响应式设计。
毫米 (mm)：

1mm等于1毫米。
很少使用。
厘米 (cm)：

1cm等于10毫米。
很少使用。
英寸 (in)：

1in等于2.54厘米，等于96像素（取决于屏幕分辨率）。
很少使用。
点 (pt)：

1pt等于1/72英寸。
常用于打印文档。
派卡 (pc)：

1pc等于12点 (1pt)。
很少使用。
em：

相对于当前元素的字体尺寸。
1em等于当前字体尺寸的1倍。
常用于字体大小的设置，也可用于其他属性。
rem：

相对于根元素（<html>）的字体尺寸。
1rem等于根元素字体大小的1倍。
常用于响应式设计中的字体大小设置。

百分比单位

百分比单位表示为属性值的百分比形式，它是基于父元素的相对尺寸。

%：
常用于宽度、高度、边距、填充等属性。
例如，width: 50%; 表示元素宽度是其父元素宽度的50%。

使用场景

像素 (px)：适合于需要固定尺寸的元素，如图标、小部件等。
视窗宽度 (vw) 和视窗高度 (vh)：适合于制作响应式设计，特别是全屏或接近全屏的布局。
em (em) 和 rem (rem)：适合于需要相对尺寸的元素，特别是字体大小，可以方便地实现不同设备和屏幕大小的适配。
百分比 (%)：适合于需要基于父元素尺寸动态计算尺寸的元素，如网格布局。
示例

/* 像素 */
.element {
  width: 100px;
  height: 200px;
}
 
/* 视窗宽度 */
.container {
  width: 80vw;
}
 
/* em */
h1 {
  font-size: 2em; /* 假设父元素字体大小为1em，则h1字体大小为2em */
}
 
/* rem */
html {
  font-size: 16px; /* 默认字体大小 */
}
 
h2 {
  font-size: 1.5rem; /* 相对于html元素的字体大小 */
}
 
/* 百分比 */
.sidebar {
  width: 25%; /* 父元素宽度的25% */
}

4.4.2.色彩单位

在CSS中，颜色可以通过多种方式指定，每种方式都有其特定的用途和上下文。以下是常用的一些CSS颜色单位：

1. 颜色名

CSS 提供了一套预定义的颜色名，如 red、blue、green 等。

body {
  color: red;
  background-color: lightblue;
}

2. 十六进制颜色码（Hex Color）

十六进制颜色码是一种常用的颜色表示方法，以 # 开头，后跟六个十六进制数字，表示红、绿、蓝各颜色通道的值。

body {
  color: #000000; /* 黑色 */
  background-color: #FFFFFF; /* 白色 */
}

也可以简写为三个十六进制数字，如果每个通道的两位数字相同的话：

body {
  color: #000; /* 黑色 */
  background-color: #FFF; /* 白色 */
}

3. RGB 颜色

RGB 表示红绿蓝三种颜色的组合，通过 rgb() 函数指定每种颜色的强度，范围从 0 到 255。

body {
  color: rgb(255, 0, 0); /* 红色 */
  background-color: rgb(0, 255, 0); /* 绿色 */
}

也可以使用百分比来指定颜色强度：

body {
  color: rgb(100%, 0%, 0%); /* 红色 */
  background-color: rgb(0%, 100%, 0%); /* 绿色 */
}

4. RGBA 颜色

RGBA 是 RGB 的扩展，增加了 alpha 通道来定义颜色的透明度。

body {
  background-color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
}

5. HSL 颜色

HSL 颜色模型表示色调（Hue）、饱和度（Saturation）、亮度（Lightness）。

body {
  background-color: hsl(240, 100%, 50%); /* 蓝色 */
}

6. HSLA 颜色

HSLA 是 HSL 的扩展，同样增加了 alpha 通道定义透明度。

body {
  background-color: hsla(240, 100%, 50%, 0.5); /* 半透明蓝色 */
}

7. 透明度

透明度也可以直接通过 opacity 属性设置，其值范围从 0（完全透明）到 1（完全不透明）。

.element {
  opacity: 0.5; /* 半透明 */
}

8. transparent 关键字

表示完全透明。

body {
  background-color: transparent;
}

示例
 

/* 颜色名 */
h1 {
  color: green;
}
 
/* 十六进制 */
div {
  background-color: #3498db;
}
 
/* RGB */
p {
  color: rgb(102, 204, 0);
}
 
/* RGBA */
span {
  color: rgba(255, 255, 255, 0.5);
}
 
/* HSL */
header {
  background-color: hsl(180, 50%, 50%);
}
 
/* HSLA */
footer {
  background-color: hsla(240, 100%, 50%, 0.5);
}
 
/* 透明度 */
.overlay {
  opacity: 0.8;
}
 
/* 透明 */
.transparent-bg {
  background-color: transparent;
}
 

---

4.5.CSS继承与层叠

CSS的继承和层叠是两种核心机制，它们共同定义了样式如何应用到HTML文档的各个元素上。

继承（Inheritance）
继承是指CSS属性值从父元素传递到子元素的过程。某些CSS属性是可继承的，这意味着这些属性的值可以从一个元素传递给其所有子元素。继承主要适用于文本相关的属性。

可继承的CSS属性包括但不限于：

color
font-family
font-size
font-weight
line-height
letter-spacing
text-align
visibility
white-space

示例

body {
  color: blue;
  font-family: Arial, sans-serif;
}
 
div {
  /* 无需再次指定颜色和字体，继承自 body */
}

在上面的例子中，所有的<div>元素会继承<body>元素的color和font-family属性。

层叠（Cascading）
层叠是指当多个规则应用于同一个元素时，决定哪些属性值应该被应用的规则。层叠由四个主要因素决定：重要性、特异性、顺序（源代码中的位置）和继承。

重要性：

!important规则：在声明的值后面加上!important可以覆盖其他CSS规则，但最好避免使用，因为它可能导致样式难以维护。
特异性：

根据选择器的类型计算优先级。不同类型的选择器具有不同的权重：
内联样式（如：style="color: red;"）具有最高特异性。
接下来是ID选择器（如：#header）。
然后是类选择器、伪类和属性选择器（如：.className、:hover）。
标签选择器和伪元素具有最低的优先级（如：p、::before）。
选择器每增加一个ID，优先级增加一级，每增加一个类/伪类/属性选择器，优先级增加一级。
顺序：

后来居上：如果两个规则的特异性相同，那么最后声明的规则将被采用。
继承：

某些属性是从父元素继承的，如color和font-size。
示例

/* 继承 */
body {
  font-family: Arial, sans-serif;
}
 
/* 特异性：ID > 类 */
#content .news {
  font-size: 18px;
}
 
/* 内联样式 > 所有其他规则 */
p {
  color: blue;
}
 
p.news {
  color: red;
}
 
<article id="content">
  <p class="news">This is a paragraph.</p>
</article>

在以上示例中，<p>元素最终的font-family将从<body>继承，font-size将来自#content .news，而color将来自内联样式（如果有的话），否则是p.news。

结合使用
在实际开发中，继承和层叠通常结合使用，以实现样式的一致性和覆盖特定元素的样式需求。

理解CSS的继承和层叠机制对于编写有效且可维护的样式表至关重要。

4.6 元素类型

当然，让我们更详细地探讨CSS选择器的类型以及它们在实际应用中的使用方式。

4.6.1.块级元素

4.6.2.行级元素

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

4.6.3.列表项元素

list-—item 属性值表示列表项目，其实质上也是块状显示，是一种特殊的块状类型

4.6.4.隐藏元素

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

1. 标签选择器（Type Selector）
标签选择器根据HTML元素的类型选择元素。例如，要为文档中的所有段落文本设置蓝色文本，可以使用：

p {
  color: blue;
}

2. 类选择器（Class Selector）
类选择器使用点（.）前缀，根据元素的class属性选择元素。类选择器在样式重用和组件化开发中非常有用：

.button {
  background-color: gray;
  padding: 10px;
  border: none;
}
/* HTML中使用 */
<button class="button">Click me</button>

3. ID选择器（ID Selector）
ID选择器使用井号（#）前缀，根据元素的id属性选择元素。ID选择器在一个页面中应该是唯一的：

#header {
  font-size: 24px;
}
/* HTML中使用 */
<div id="header">Welcome to my site</div>

4. 伪类选择器（Pseudo-class Selector）
伪类选择器用于选择元素的状态或行为。例如，:hover用于鼠标悬停时的样式：

a:hover {
  color: red;
}

伪类还可以用于更复杂的选择，如:nth-child()，它可以选择其父元素的特定子元素：

li:nth-child(2) {
  font-weight: bold;
}

5. 伪元素选择器（Pseudo-element Selector）
伪元素选择器用于选择元素的虚拟部分。例如，::before和::after可以添加内容到元素的开始或结束：

.element::before {
  content: "Before";
  color: red;
}

6. 属性选择器（Attribute Selector）
属性选择器可以根据元素的属性及其值来选择元素。这对于表单元素的样式化特别有用：

input[type="text"] {
  border: 1px solid gray;
}

7. 关系选择器
子选择器（Child Selector） >：选择作为另一个元素直接子元素的元素。

ul > li {
  color: green;
}

相邻兄弟选择器 +：选择紧接在另一个元素后的元素。

h1 + p {
  color: purple;
}

通用兄弟选择器 ~：选择在另一个元素之后的所有兄弟元素。

h2 ~ p {
  color: orange;
}

8. 否定伪类（Negation Pseudo-class）
否定伪类:not()用于选择不符合特定条件的元素：

:not(p) {
  color: green;
}

9. 结构伪类
结构伪类如:root、:nth-of-type()、:last-child()等，用于根据元素在文档树中的位置选择元素：

:root {
  --main-bg-color: #f0f0f0;
}
 
:nth-of-type(2) {
  font-size: 16px;
}

10. 页面盒模型伪类
这些伪类如::first-letter和::first-line，用于为文本的首字母或首行设置特殊样式：

p::first-letter {
  font-size: 24px;
  color: blue;
}

组合选择器
选择器可以组合使用，以精确定位元素：

#header .nav-link:hover {
  background-color: silver;
}

这个选择器将匹配ID为header的元素内部，类为nav-link的元素，在鼠标悬停时的背景颜色。

通过这些选择器，你可以非常精确地定位页面上的元素，并应用相应的样式，实现复杂的布局和设计需求。

4.7综合案例：开平碉楼申遗大事记。

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8" >
		<title>开平碉楼</title>
		<link type = " text/css" rel=" stylesheet" href="css/z4.css"/>
	</head>
	<body>
		<div id=" content" >
		<h2 class="biaoti">开平碉楼申遗大事记</h2>
		<hr color="#D3B175" size="5"/>
		<img src="img/pic200.jpg"/>
		<p class="tx1">2000年,开平成立申遗小组</p>
		<p>2000年2月,从国务院信访局到开平挂市委常委职务的李玫同志在香港侨团团拜会上向胡
		耀坤、吴荣治等侨领首次提出将开平碉楼申报为世界文化遗产。
		2000年 10 月 30 日,开平市成立"开平碉楼"申报世界文化遗产领导小组。领导小组下设办公室,分整治组、资料组、宣传组。
	</p>
		<p class="tx1">2001年,省申遗领导小组成立</p>
		<p>2001年4月30日,开平市市长办公会议研究将开平碉楼申遗项目名称定为"开平碉楼与民居”。
		2001年6月19日,申遗办谭伟强、张健文、邝积康3位负责人赴北京,在李玫同志的陪同下
		拜访了中国国际古迹遗址理事会秘书长郭旃、清华大学教授陈志华,就申遗的有关事宜进行会谈。
		2001年3月至6月,开平市开展"开平碉楼"的普查工作,并请上海同济大学、华南理工大学专
		家对33座碉楼测绘了立面图、剖面图、平面图和细部特征图。
		2001年6月,江门市成立了以时任市长雷于蓝为组长的江门市申报世界文化遗产领导小组。
		2001年7月 11 日至17日,清华大学陈志华、楼庆西、李秋香教授,五邑大学张国雄、梅伟强教
		授,深入到三埠、长沙、沙冈、塘口、蚬冈、百合、月山、赤坎、大沙等镇(办事处)对碉楼与民居进行了认真细致
		的考察。开平市政府特聘几位专家为"开平碉楼与民居"申报世界文化遗产工作高级顾问。
		2001年9月6日至7日,时任副省长的李兰芳到江门市视察碉楼,对开平碉楼申遗工作给予了
		充分的肯定,并表示省政府对此将大力支持。
		2001年9月12日,联合国世界遗产评估机构--国际古迹遗址理事会总协调员亨利博士考察
		开平碉楼,对开平碉楼的价值和开平乃至广东的文物保护工作表示了充分的肯定。
		2001年11月,广东省成立申报世界文化遗产领导小组及其办公室。
		2001年,开平籍旅港同胞、恒生银行董事长利国伟爵士就开平碉楼申报事宜专门写信给时任国务院总理的朱镕基。
		</p>
		<p class="tx1">2004年,世遗中心受理开平申遗</p>
		<p>2004年4月10日至11日,联合国世界遗产专家乔拉·索拉先生及夫人、以色列文物
		专家阿里·拉哈米莫夫先生及夫人,中国国际古迹遗址理事会秘书长郭旗先生,澳门文化局文化财产厅陈泽
		成厅长的陪同下到开平考察碉楼。
		2004年5月,任仲夷同志致函省委书记张德江,请德江同志向中央汇报开平碉楼申报世界文化
		遗产工作。
		2004年5月17日,张德江同志在开平市委、市政府《关于请张德江书记向中央汇报开平碉楼申
		报世界遗产工作的请示》中批示:我赞成和支持开平碉楼申报世界文化遗产。
		2004年6月,开平市被中国建筑学会授予"中国碉楼之乡"的称号。
		2004年7月2日,中国100多个申遗"预备清单"中已有5个申报项目被世界遗产中心受理,分
		别是澳门历史建筑群、开平碉楼、殷墟、福建土楼和红河哈尼梯田。
		2004年 10月28日,蚬冈镇锦江里昇峰楼业主旅加华侨胡黄惠英(乳名:黄滚盛)女士及其兄长
		黄雄畅先生在梁金山世外豪园酒店正式将他们的碉楼无偿委托给开平人民政府管理。
		</p>
		<p class="tx1">2005年,申报名称变更</p>
		<p>2005年4月21日,由清华大学建筑学院与开平市申遗办合作开展的第二次全市性碉
		楼普查工作于圆满完成。本次碉楼普查从2005年3月16日开始,历时 13 个月。第二次碉楼普查深入到全
		市每条村庄逐幢碉楼进行登记、拍照、调查核实,拍摄2万多张图片,采集到一些珍贵的、鲜为人知的历史
		资料。
		2005 年9月18日,联合国世界遗产协调员乔拉先生、建筑规划师阿里先生来到开平,指导开碉楼申报世界文化遗产工作。
		2005年9月24日,由省人民政府主办,省文化厅、江门市人民政府、开平市人民政府承办的广
		东省开平碉楼申报世界文化遗产动员大会在省博物馆门前隆重举行。
		2005年11月,开平碉堡申报世界文化遗产的项目名称由“开平碉楼与民居"变为"开平碉堡与
		村落",极大地延伸了开平碉楼的文化内涵和历史价值,更有利于申报世界文化遗产。
		2005年12月5日,北京大学世界遗产中心沈文权博士,中国古文物保护专家张志平女士(郭旃
		夫人)抵达开平,若手开展修改北大制订的开平碉楼文化遗产保护规划,为适应中报的需要,该规划将改名为
		《开平碉楼与村落保护管理规划》,并对相关内容进行增补。
		</p>
		<p class="tx1">2006年,世遗专家评估开平申遗</p>
		<p>2006年1月11日,国家文物局局长单霁翔正式签署英文中报文本。
		2006年1月、国务院正式批准"开平碉楼与村落"作为2007年代表中国向联合国申报世界文化
		遗产的项目,英文申报文本已被联合国教科文组织确认合格接收。
		2006年3月2日至3日,联合国教科文组织专家乔拉·索拉先生和阿里先生按原计划来到开平
		考察"申遗"准备工作。
		2006年4月3日下午,国家文物局、省政府、江门和开平市委、市政府在开平市行政大楼召开了
		开平碉楼与村落申报世界文化遗产工作会议,研究申遗工作进入第二个重要环节--环境整治阶段存在的
		问题,提出下一步工作意见。
		2006年5月9日,黄华华省长在江门市委书记陈继兴、市长王南健的陪同下到江门市检查指导、
		开平碉楼与村落申遗工作。
		2006年8月21日至22日,经业主方其祥、方其赏、方其锦授权,塘口镇自力村三座尘封了大半
		个世纪的居庐--叶生居庐、官生居庐、澜生居庐被依次打开,并发现大量珍贵文物。
		2006年8月27日至28日,著名歌唱家阁维文与中央电视台摄制组一行10 多人来到开平,拍摄
		开平碉楼与村落申报世界文化遗产主题曲--《碉楼颂》音乐电视。
		2006年9月,中国华侨出版社出版了两本关于开平碉楼与村落的学术著作,总结开平碉楼与村
		落研究所取得的丰硕成果，支持开平碉楼与村落申报世界文化遗产。
		2006年9月15日,开平市举行"共同的心愿--全力支持开平碉楼与村落申报世界文化遗产"
		为主题的申遗文艺晚会,世遗评估专家卢光裕先生、副省长雷于蓝、国家文物局有关领导观看了晚会。晚会结
		束时,共收到来自社会各界的捐款 1480 多万元,其中,著名侨领吴荣治先生及夫人捐款 100 万元。
		2006年9月15至18日,受联合国教科文组织世界遗产中心的委派,“世遗"评估专家卢光裕先
		生到江门市对开平碉楼与村落进行评估。
		</p>
		<p class="tx1">2007年,申遗成功</p>
		<p>2007年1月,开平碉楼与村落申遗项目顺利通过国际古迹遗址(ICOMOS)委员会执会在巴黎召开的专家会议的评审。
		2007年6月20日,开平市赴新西兰、澳大利亚中遗代表团一行 30多人经香港转机后抵达。
		西兰。
		2007年6月22日,中国政府代表团飞赴新西兰,出席世界遗产委员会第31届大会,为开平明楼与村落申遗助威。
		2007年6月底,开平明楼与村落申遗项目顺利通过在新西兰召开的第31届世界遗产大会的养决,正式列入《世界遗产名录》。
		</p>
			<p id="t1">来源:开平碉楼</p>
		</div>
		<p align="center">网页制作&copy;X西安</p>
	</body>
</html>

css插入代码如下

*{
	width:1024px;
	margin-left:auto;
	margin-right:auto;
}

.biaoti {
	font-family:  "微软雅黑";
	text-align:center;
}

#content{
	text-indent:2em;
	font-family:  "微软雅黑";
	font-size:18px;
	}

.tx1{
	font-weight:bold;
	font-family:  "黑体";
	font-size:24px;
	color:#8B4513;
	background-color :  #D3B175 ;
	line-height:  200% ;			
}

#t1{
	color:  #333;
	text-align:  right;
}

运行界面如下

 

 

 

---