4.1 CSS概述
CSS(Cascading Style Sheets,层叠样式表)是一种用于描述网页内容显示方式的样式语言。它与HTML一起使用,通过分离内容与样式,提供更高效的网页设计和维护。CSS的主要作用是控制网页的布局、颜色、字体、间距等视觉表现。
1.CSS的基本概念
1. 选择器(Selector):用于指定HTML元素,决定样式应用在哪些元素上。常见选择器有:
元素选择器(如 p):选择所有 <p> 元素。
类选择器(如 .class):选择具有特定类的元素。
ID选择器(如 id):选择具有特定ID的元素。
组合选择器(如 div > p):选择父子关系等特定结构的元素。
2. 属性与值(Property & Value):CSS通过指定属性和值来定义样式。属性决定了元素的哪一部分将被修改,值则规定了属性的具体样式。例如:
css
color: blue; / 设置文本颜色为蓝色 /
fontsize: 16px; / 设置字体大小为16像素 /
3. 层叠性(Cascading):当多个样式同时作用于一个元素时,CSS使用“层叠”规则决定哪一个样式优先应用。一般情况下,优先级从高到低为:
内联样式(直接写在HTML元素内,<div style="color: red;">)
ID选择器
类选择器和属性选择器
元素选择器
4. 继承(Inheritance):某些CSS属性(如字体、颜色)会被子元素继承,而另一些属性(如边距和背景)则不会。
2. CSS的工作方式
CSS可以通过三种方式应用到HTML文档中:
1. 内联样式(Inline Styles):直接在HTML元素的style属性中写样式。
html
<p style="color: red;">This is a red text.</p>
2. 内部样式表(Internal Stylesheet):在HTML文档的<head>部分中使用<style>标签编写样式。
html
<style>
p {
color: red;
}
</style>
3. 外部样式表(External Stylesheet):通过链接外部CSS文件,这也是推荐的方式,尤其是当样式需要在多个页面间共享时。
html
<link rel="stylesheet" href="styles.css">
3. 常见的CSS属性
颜色和文本样式:
color:文本颜色
fontfamily:字体类型
fontsize:字体大小
textalign:文本对齐
盒模型(Box Model):
width、height:宽度和高度
margin:外边距
padding:内边距
border:边框
布局:
display:定义元素的显示类型(如block、inline、flex等)
position:元素的定位方式(如relative、absolute等)
float 和 clear:控制元素的浮动布局
响应式设计
CSS还可以通过媒体查询(Media Queries)实现响应式设计,适应不同设备的屏幕大小和分辨率:
css
@media (maxwidth: 600px) {
body {
backgroundcolor: lightblue;
}
}
通过使用CSS,开发者可以使网页内容以更丰富、灵活的形式呈现。
4.2 CSS语法基础
CSS的语法基础相对简单易学。每条CSS规则由选择器(selector)和声明块(declaration block)组成,声明块包含一个或多个属性和值的对。这些规则共同定义了页面中元素的外观。
1. CSS规则的基本结构
css
selector {
property: value;
}
选择器(selector):用于指定要应用样式的HTML元素。可以是元素名称、类名、ID,或组合选择器等。
属性(property):表示你想要改变元素的哪个样式特征,如颜色、字体、边距等。
值(value):给出的具体样式值,如red、16px等。
2. 选择器
CSS选择器用于选取网页中的HTML元素,以便对它们应用样式。
元素选择器:应用于所有指定标签的元素。
css
p {
color: blue; / 选中所有<p>元素,将文本颜色设置为蓝色 /
}
类选择器:以点号(.)开头,应用于具有特定类的元素。可以应用于多个元素。
css
.example {
fontsize: 20px; / 选中所有带有 class="example" 的元素 /
}
ID选择器:以井号()开头,应用于具有唯一ID的元素。ID在一个页面中应该是唯一的。
css
header {
backgroundcolor: gray; / 选中具有 id="header" 的元素 /
}
组合选择器:
后代选择器:选取嵌套在另一个元素中的元素。
css
div p {
color: green; / 选中 <div> 元素内的所有 <p> 元素 /
}
群组选择器:对多个选择器应用相同样式。
css
h1, h2, p {
fontfamily: Arial; / 选中所有 <h1>, <h2> 和 <p> 元素,应用相同字体 /
}
3. 声明块
声明块由一对花括号 {} 包围,里面包含一条或多条样式声明。每条声明由属性(property)和对应的值(value)组成,用冒号 : 分隔,声明之间用分号 ; 分隔。
css
selector {
property1: value1;
property2: value2;
}
例如:
css
p {
color: blue;
fontsize: 16px;
}
这段代码表示所有<p>元素的文本颜色为蓝色,字体大小为16像素。
4. 注释
在CSS中,注释不会被浏览器执行,它们仅供开发者使用,用于解释代码。注释的语法是:
css
/ 这是一个注释 /
例如:
css
/ 设置段落的样式 /
p {
color: red; / 文本颜色为红色 /
}
5. 单位
在CSS中,许多属性需要指定单位,如长度、大小、时间等。常用的单位包括:
长度单位:
px(像素):绝对单位,适合用于精确定位和大小。
em 和 rem:相对单位,em基于父元素的字体大小,rem基于根元素的字体大小。
%(百分比):基于父元素的大小进行相对缩放。
例如:
css
h1 {
fontsize: 2em; / 字体大小为父元素字体的两倍 /
}
颜色单位:
color: red;(使用颜色名称)
color: ff0000;(使用十六进制颜色值)
color: rgb(255, 0, 0);(使用RGB颜色模式)
color: rgba(255, 0, 0, 0.5);(使用带透明度的RGBA颜色模式)
6. 示例
综合示例,以下CSS规则选择了具有类名为box的所有元素,并应用了一些样式:
css
.box {
width: 200px; / 宽度 /
height: 100px; / 高度 /
backgroundcolor: lightblue; / 背景色 /
border: 1px solid black; / 边框 /
margin: 20px; / 外边距 /
padding: 10px; / 内边距 /
fontsize: 14px; / 字体大小 /
}
这段代码会将所有具有box类的元素渲染为带有特定大小、边距、边框和背景颜色的矩形块。
4.3 CSS引入方式
在HTML文档中,CSS可以通过三种主要方式引入,分别是内联样式、内部样式表和外部样式表。每种方式都有其适用的场景和优缺点。
1. 内联样式(Inline Styles)
内联样式直接写在HTML元素的style属性中,适用于仅对单个元素设置样式的情况。这种方式不推荐用于大型项目,因为样式与内容混合,不便于维护和重用。
语法:
html
<p style="color: red; fontsize: 16px;">This is a red text.</p>
优点:
适合快速应用样式到特定的HTML元素上。
在处理动态样式时(如通过JavaScript),内联样式有时是便捷的选择。
缺点:
难以维护,尤其是当页面上有大量样式时。
破坏了HTML结构与样式的分离。
2. 内部样式表(Internal Stylesheet)
内部样式表是将CSS规则写在HTML文档的<head>标签内,通过<style>标签进行定义。适用于小型页面或仅针对当前页面的样式。
语法:
html
<head>
<style>
p {
color: blue;
fontsize: 16px;
}
</style>
</head>
<body>
<p>This is a blue text.</p>
</body>
优点:
所有样式集中在一个地方(<head>部分),管理页面的样式比内联样式方便。
适合用于页面独立的样式定义。
缺点:
样式仅适用于当前HTML页面,无法跨页面复用。
当样式较多时,HTML文件会显得冗长,影响代码可读性。
3. 外部样式表(External Stylesheet)
外部样式表将CSS代码保存在单独的.css文件中,并通过<link>标签在HTML文件中引用。它是推荐的方式,尤其是当多个页面使用相同的样式时。
语法:
HTML文件:
html
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is styled by an external CSS file.</p>
</body>
CSS文件(styles.css):
css
p {
color: green;
fontsize: 18px;
}
优点:
样式与内容完全分离,提升代码的可读性和可维护性。
可以在多个页面之间共享样式,提高样式的复用性。
通过单个CSS文件即可控制多个页面的样式,使得全站的风格一致。
缺点:
需要额外的HTTP请求来加载CSS文件,可能会稍微影响页面的加载速度(可以通过CSS压缩和缓存优化)。
4. 引入CSS的其他方式
@import规则:除了使用<link>标签引入外部CSS文件,还可以通过@import规则在CSS文件中引入其他CSS文件。
语法:
css
@import url('anotherstylesheet.css');
优点:
可以在一个CSS文件中导入多个样式表,实现模块化管理。
缺点:
与<link>标签相比,@import的加载速度略慢,可能会延迟样式的渲染。
选择引入方式的建议
内联样式适用于快速调整个别元素的样式,但应尽量避免频繁使用。
内部样式表适合小型页面或单页应用,尤其是样式不多且不需要复用时。
外部样式表是推荐的标准方式,适用于中大型项目,样式独立于HTML,有助于提高代码的复用性、可维护性和结构的清晰度。
4.4 CSS的属性继承
在CSS中,继承是一种机制,允许某些属性从父元素传递给子元素。通过继承,子元素可以自动获取父元素的某些样式,而无需显式地为每个子元素重复定义相同的样式。这种特性简化了样式的定义,增强了CSS的可维护性。
1. 可继承的属性
并非所有CSS属性都是可继承的。通常,涉及到文本样式和字体的属性是可继承的,比如:
color(颜色)
fontfamily(字体)
fontsize(字体大小)
fontweight(字体粗细)
fontstyle(字体样式)
lineheight(行高)
textalign(文本对齐)
visibility(可见性)
例子:
html
<div style="color: blue;">
<p>This text is blue because the color is inherited from the parent div.</p>
</div>
在这个例子中,<div>元素设置了color: blue,而<p>元素没有显式地设置颜色属性。由于color是可继承的,<p>中的文本自动继承了父级<div>的颜色。
2. 不可继承的属性
大多数布局和盒模型相关的属性是不可继承的,比如:
margin(外边距)
padding(内边距)
border(边框)
width(宽度)
height(高度)
background(背景)
例子:
html
<div style="margin: 20px;">
<p>This paragraph does not inherit the margin of the parent div.</p>
</div>
在这个例子中,虽然<div>设置了margin: 20px,但它的子元素<p>并没有继承这个外边距,因为margin是不可继承的属性。
3. 强制继承和阻止继承
inherit关键字:即使某些属性不可继承,你也可以通过inherit关键字强制让子元素继承父元素的值。
例子:
css
p {
margin: inherit; / 强制继承父级元素的 margin /
}
initial关键字:将某个属性的值重置为浏览器的默认值,而不是继承父元素的值。
例子:
css
p {
color: initial; / 将颜色重置为浏览器默认的颜色(通常是黑色) /
}
unset关键字:这个关键字会根据属性是否可继承来决定行为。如果属性是可继承的,unset会使其表现为inherit;如果属性是不可继承的,则表现为initial。
例子:
css
p {
color: unset; / 可继承属性,表现为 inherit /
margin: unset; / 不可继承属性,表现为 initial /
}
4. 继承的应用场景
继承在CSS中主要用于简化和统一样式。例如,网页的全局字体颜色、字体样式可以通过继承实现:
css
body {
fontfamily: Arial, sansserif;
color: 333;
}
h1, h2, p {
/ 这些元素将自动继承 body 的 fontfamily 和 color /
}
在这个例子中,body元素设置了全局的字体和颜色,所有子元素如<h1>、<h2>、<p>将自动继承这些样式,不需要为每个元素重复定义。
5. 继承的限制
虽然继承为样式的统一提供了方便,但有时也会带来问题。尤其在一些需要独立定义的样式中,继承可能导致不必要的样式被传播到子元素。因此,在开发时要合理利用继承,同时也要避免不必要的样式污染。
总结:CSS中的继承机制可以使样式代码更加简洁,减少重复,但并不是所有属性都能继承。通过使用inherit、initial和unset关键字,可以灵活控制属性的继承行为。
4.5 CSS继承与层叠
在CSS中,继承和层叠是两种核心机制,用于决定一个元素的最终样式。这两者共同影响了页面上元素样式的展示,理解它们有助于解决样式冲突和优化CSS代码。
1、CSS继承
继承是指某些属性会自动从父元素传递给子元素,子元素不用显式地定义这些属性即可获得父元素的样式。继承的作用是简化代码,减少样式的重复定义。
继承的关键点:
1. 可继承的属性:通常与文本样式相关,如color、fontsize、fontfamily等。
2. 不可继承的属性:一般与布局、盒模型相关,如margin、padding、border等。
3. 可以通过inherit关键字强制继承父级样式,或通过initial和unset重置样式值。
2、CSS层叠(Cascade)
层叠是CSS名称中的"C"(Cascading)的部分,它决定了当多个样式规则应用于同一个元素时,哪些规则将生效。CSS层叠遵循一定的规则,来处理样式冲突,最终确定元素的显示样式。
层叠的基本规则:
1. 样式来源:
浏览器默认样式:每个浏览器都有默认的样式表,用于为没有定义样式的元素提供默认的外观。
用户样式:用户可以定义自己的样式表覆盖网站样式。
开发者样式:开发者在CSS中定义的样式表。
2. 优先级:当多个规则冲突时,优先级决定哪个规则生效。优先级由四个部分构成,依次为:
行内样式:使用style属性直接在HTML元素上设置的样式,优先级最高。
ID选择器:ID选择器的优先级比类选择器和标签选择器更高。
类、伪类、属性选择器:比标签选择器的优先级更高。
元素(标签)选择器、伪元素:优先级最低。
优先级的数值计算:
行内样式:优先级为 1000
ID选择器:优先级为 100
类选择器、伪类、属性选择器:优先级为 10
元素选择器、伪元素:优先级为 1
示例:
css
example { color: red; } / 优先级 100 /
.example { color: blue; } / 优先级 10 /
p { color: green; } / 优先级 1 /
3. 层叠次序:
当不同样式的优先级相同时,后定义的样式会覆盖先定义的样式。CSS的规则是“就近原则”,即最后写入的样式优先。
4. !important声明:
!important是一个特殊的声明,用来提高样式的优先级。带有!important的规则会覆盖其他任何没有!important的规则,即使它的优先级较低。
示例:
css
p { color: blue !important; } / 优先级最高,即使有其他样式规则也会被覆盖 /
3、继承与层叠的关系
继承是从父元素向子元素传递某些样式的机制,而层叠则是当多个样式规则应用于同一元素时,确定哪个规则生效的机制。
当继承的样式和直接应用到元素的样式发生冲突时,层叠规则会决定哪个样式最终生效。
示例:
html
<style>
div {
color: green; / 父元素样式 /
}
p {
color: red; / 子元素直接设置的样式 /
}
</style>
<div>
<p>This text will be red due to the cascade.</p>
</div>
在这个例子中,虽然<div>中定义了color: green,但<p>元素的颜色最终会显示为红色,因为<p>的样式规则优先于继承的父元素样式。
4、层叠示例
假设我们有如下HTML结构:
html
<div id="container" class="box">
<p>This is a paragraph.</p>
</div>
以下是CSS样式:
css
container {
color: red; / 优先级 100 /
}
.box {
color: blue; / 优先级 10 /
}
p {
color: green; / 优先级 1 /
}
p {
color: purple !important; / 使用了重要性声明 /
}
分析:
container定义了color: red,优先级为 100。
.box定义了color: blue,优先级为 10。
p标签定义了color: green,优先级为 1。
但由于p的第二条样式规则中使用了!important,因此最终<p>中的文本会显示为紫色。
总结:
继承使子元素自动获得父元素的某些样式,简化了样式的编写。
层叠决定了当多个样式冲突时,哪个样式最终生效。通过优先级、层叠次序、!important等机制,CSS确保了样式的应用顺序和一致性。
4.6 元素类型
在HTML和CSS中,元素被分为不同的类型,主要是根据它们在页面布局中的表现形式来区分的。了解元素类型有助于更好地控制布局和样式。主要的元素类型包括以下几种:
1. 块级元素(Blocklevel Element)
块级元素是独占一行,且宽度默认填满其父容器的元素。块级元素通常用于结构化文档内容,例如段落、标题、列表等。
特点:
独占一行,垂直排列。
默认宽度为父容器的100%。
可以包含其他块级元素和行内元素。
宽度、高度、外边距(margin)和内边距(padding)均可生效。
常见的块级元素:
<div>:通用的块级容器,没有语义。
<p>:段落。
<h1>到<h6>:标题元素。
<ul>、<ol>、<li>:列表和列表项。
<section>、<article>、<aside>、<header>、<footer>:语义化的块级元素。
例子:
html
<div>
<p>This is a blocklevel element.</p>
<p>This is another blocklevel element.</p>
</div>
在此例中,<p>元素作为块级元素,垂直排列并独占每一行。
2. 行内元素(Inline Element)
行内元素不会独占一行,它们会与其他行内元素在同一行内显示,宽度与内容相匹配。行内元素通常用于标记文本内容的一部分。
特点:
不会自动换行,水平排列。
仅占据其内容的宽度,不会填满父容器。
宽度、高度、外边距和内边距的水平部分有效,垂直部分无效(除非使用display: block或display: inlineblock进行修改)。
不能包含块级元素,但可以包含其他行内元素。
常见的行内元素:
<span>:通用的行内容器,没有语义。
<a>:超链接。
<strong>:表示强调的文本。
<em>:表示加重语气的文本。
<img>:图片。
<input>、<button>:表单元素。
例子:
html
<p>This is an <a href="">inline link</a> inside a paragraph.</p>
在这个例子中,<a>元素是行内元素,它不会打断段落的流式布局,且与文本一起显示在一行中。
3. 行内块级元素(Inlineblock Element)
行内块级元素的表现介于块级元素和行内元素之间。它像行内元素一样水平排列,但可以像块级元素一样设置宽度、高度、外边距和内边距。
特点:
像行内元素一样水平排列,不会独占一行。
可以设置宽度和高度。
外边距和内边距的水平和垂直部分都有效。
常见的行内块级元素:
<img>:图片元素。
<button>:按钮元素。
<input>:表单输入框。
任何通过CSS设置display: inlineblock的元素。
例子:
html
<span style="display: inlineblock; width: 150px; height: 50px; backgroundcolor: lightblue;">
This is an inlineblock element.
</span>
在这个例子中,<span>元素被设置为inlineblock,因此它既可以和其他元素保持在同一行,也可以设置宽度和高度。
4. 可替换元素(Replaced Element)
可替换元素的内容不是由CSS控制的,而是由外部资源决定。这类元素通常具有默认尺寸,或者其大小由所包含的内容决定。
特点:
由浏览器根据其内容替换的占位元素。
常常可以通过CSS设置大小,但它们的实际内容(如图片或表单元素)由外部决定。
常见的可替换元素如<img>、<video>、<iframe>等。
常见的可替换元素:
<img>:图片。
<video>:视频。
<iframe>:嵌入其他网页。
<object>:嵌入外部资源,如插件、SVG等。
例子:
html
<img src="image.jpg" alt="An image">
在这个例子中,<img>是可替换元素,显示的图像由src属性指向的外部资源决定。
5. 自定义元素类型
通过CSS的display属性,开发者可以将元素的显示方式从默认的行内或块级形式转换为另一种形式。
常见的display值:
block:将元素作为块级元素显示。
inline:将元素作为行内元素显示。
inlineblock:将元素作为行内块级元素显示。
none:隐藏元素,不占据任何页面空间。
例子:
html
<p style="display: inlineblock; width: 100px;">This is now an inlineblock element.</p>
通过display: inlineblock,<p>元素从块级元素变为行内块级元素,能够设置宽度且不再独占一行。
6. 容器元素(Container Elements)
某些元素,如<div>和<span>,在HTML中没有语义,仅仅用作容器,供开发者进行布局和样式设计。这些元素默认没有任何视觉效果,需要通过CSS定义其样式。
<div>:默认是块级元素,常用于布局结构。
<span>:默认是行内元素,常用于包裹文本中的一部分以应用样式。
例子:
html
<div class="container">
<span>This is a span inside a div.</span>
</div>
<div>作为块级容器,常用于包裹内容,而<span>作为行内容器则用于包裹行内文本。
总结:
块级元素:独占一行,通常用于结构化文档。
行内元素:与其他元素共享一行,通常用于内联内容。
行内块级元素:既可以水平排列,也可以设置宽度和高度。
可替换元素:由外部资源决定内容,如图片或视频。
自定义元素:通过CSS的display属性可以改变元素的显示方式。
4.7综合案例--开平碉楼
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>开平碉楼</title>
<link type="text/css" rel="stylesheet" href="4.3text.css"/>
</head>
<body>
<div id="content">
<h2 class="biaoti">开平碉楼申遗大事记</h2>
<hr color="#d3b175" size="5"/>
<img src="4465CAF7A217F1A5103C23623BE7CD18.jpg"/>
<p class="tx1">2000年,开平成立申遗小组</p>
<p>2000年2月,从国务院信访局到开平挂市委常委职务的李玫同志在香港侨团团拜会上向胡耀坤、吴荣治等侨领首次提出将开平碉楼申报为世界文化遗产
2020年10月30日,开平市成立"开平碉楼"申报世界文化遗产领导小组.领导小组下设办公室,分整治组、资料组、宣传组.
</p>
<p class="tx1"></p>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>
</body>
</html>
css代码:
*{
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.biaoti{
font-family: "微软雅黑";
text-align: center;
}
#contect{
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;
}
本章习题
习题一
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome Hyperlink Example</title>
<style>
body {
margin: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
.container {
background-color: #FF99CC; /* 背景颜色 */
display: flex; /* 使用flex布局 */
justify-content: center; /* 水平居中 */
align-items: flex-end; /* 垂直底部对齐 */
padding: 20px;
position: relative;
width: 100%;
height: 50%; /* 占据一半的高度 */
}
.container a {
color: #FFF; /* 链接的默认文字颜色 */
font-family: 'Arial Black', sans-serif; /* 字体 */
font-size: 60px; /* 字体大小 */
text-decoration: none; /* 移除下划线 */
}
.container a:hover {
color: #FF00FF; /* 悬停时的文字颜色 */
}
.container a:active {
color: #FF00CC; /* 鼠标按下时的文字颜色 */
}
hr {
border: 0;
height: 1px;
background-color: #666; /* 分割线颜色 */
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<a href="#">WELCOME</a> <!-- WELCOME超链接 -->
</div>
<hr size="5" color="#FF99CC" width="100%" />
<p align="center">网页制作教程 Copyright © 广州南方职业学院</p>
</body>
</html>
习题二
代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公司简介</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.8;
margin: 20px;
background-color: #f5f5f5; /* 设置背景为浅灰色以突出白色导航栏 */
}
/* 顶部导航栏和Logo的样式 */
.header {
background-color: white; /* 背景白色 */
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
position: sticky;
top: 0;
z-index: 1000;
}
/* Logo样式 */
.logo {
display: flex;
align-items: center;
}
.logo img {
height: 50px; /* Logo的高度 */
margin-right: 15px; /* Logo和文本之间的间距 */
}
/* 导航栏样式 */
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 20px; /* 导航栏各项的间距 */
}
nav ul li {
position: relative;
}
nav ul li a {
text-decoration: none;
color: #333;
font-weight: bold;
padding: 10px 15px;
}
nav ul li a:hover {
color: #0033ff; /* 悬停时的文本颜色 */
}
/* 子菜单样式 */
nav ul li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 10px 0;
}
nav ul li ul li {
white-space: nowrap; /* 子菜单项宽度根据内容调整 */
}
nav ul li:hover ul {
display: block; /* 悬停时显示子菜单 */
}
nav ul li ul li a {
padding: 10px 20px;
}
/* 二级水平导航栏样式 */
.secondary-nav {
background-color: #f9f9f9; /* 背景为浅灰色 */
padding: 10px;
margin-top: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}
.secondary-nav ul {
list-style: none;
display: flex;
gap: 15px;
justify-content: center;
padding: 0;
}
.secondary-nav ul li a {
text-decoration: none;
color: #333;
padding: 10px 15px;
font-weight: bold;
}
.secondary-nav ul li a:hover {
color: #0033ff; /* 悬停时变蓝色 */
}
h2 {
font-size: 20px;
margin-top: 20px;
}
hr {
border: none;
height: 2px;
background-color: #0033ff;
margin: 10px 0;
}
p {
text-indent: 2em;
}
ol {
padding-left: 20px;
margin-top: 10px;
}
li {
margin-bottom: 10px;
}
.bold-text {
font-size: 18px;
font-weight: bold;
text-indent: 0;
}
</style>
</head>
<body>
<!-- 顶部导航栏和Logo -->
<div class="header">
<div class="logo">
<img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" alt="公司Logo"> <!-- Logo图片 -->
<span>公司名称</span>
</div>
<nav>
<ul>
<li><a href="#">手机</a>
<ul>
<li><a href="#">智能手机</a></li>
<li><a href="#">折叠屏手机</a></li>
<li><a href="#">5G手机</a></li>
</ul>
</li>
<li><a href="#">笔记本</a>
<ul>
<li><a href="#">轻薄本</a></li>
<li><a href="#">游戏本</a></li>
</ul>
</li>
<li><a href="#">平板</a>
<ul>
<li><a href="#">安卓平板</a></li>
<li><a href="#">Windows平板</a></li>
</ul>
</li>
<li><a href="#">解决方案</a></li>
<li><a href="#">服务</a></li>
</ul>
</nav>
</div>
<!-- 水平导航栏 -->
<div class="secondary-nav">
<ul>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司治理</a></li>
<li><a href="#">可持续发展</a></li>
<li><a href="#">网络安全</a></li>
<li><a href="#">管理层信息</a></li>
<li><a href="#">债券投资者关系</a></li>
<li><a href="#">出版物</a></li>
</ul>
</div>
<hr>
<h2>公司简介</h2>
<p>华为是全球领先的ICT(信息与通信)基础设施和智能终端供应商,致力于把数字世界带入每个人、每个家庭、每个组织,构建万物互联的智能世界。我们在通信网络、IT、智能终端和云服务等领域为客户提供竞争力、安全可信赖的产品、解决方案和服务。与生态伙伴开放合作,持续为客户创造价值,释放个人潜力,丰富家庭生活,激发组织创新。华为坚持围绕客户需求持续创新,加大基础研究投入,厚积薄发,推动世界进步。华为成立于1987年,是一家由员工持有全部股份的民营企业,目前有18万员工,业务遍及170多个国家和地区。</p>
<h2>我们为世界带来了什么?</h2>
<p class="bold-text">为客户创造价值</p>
<p>华为和运营商一起,在全球创建了1,500多张网络,帮助世界超过三分之一的人口实现联接。华为携手合作伙伴,为政府及公共事业机构、金融、能源、交通、制造等企业客户,提供开放、灵活、安全的端管云协同ICT基础设施平台,推动行业数字化转型;为云服务客户提供稳定可靠、安全可信赖和可持续发展的云服务。华为智能终端和智能手机,正在帮助人们享受高品质的数字工作、生活和娱乐体验。</p>
<p class="bold-text">推进产业良性发展</p>
<p>华为主张开放、合作、共赢,与客户、合作伙伴及友商合作创新,扩大产业价值,形成良性的产业生态系统。华为加入了360多个标准组织、产业联盟和开源社区,积极参与和支持主流标准的制定。合作共赢的生态圈,我们面向云计算、NFV/SDN、5G等新兴热点领域,与产业伙伴分工协作,推动产业持续良性发展。</p>
<p class="bold-text">促进经济增长</p>
<p>华为不仅为所在国家带来直接的税收贡献,促进当地就业,形成产业链带动效应。更重要的是通过创新的ICT解决方案打造数字化引擎,推动各行各业的数字化转型,促进经济增长,提升人们的生活质量和福祉,推动社会的可持续发展。</p>
<p class="bold-text">支持公平和教育</p>
<p>作为负责任的企业公民,华为致力于消除全球数字鸿沟。在珠峰南坡和北极圈内,在西非埃博拉疫区、日本海啸核泄漏、中国汶川大地震等重大灾难现场,都有华为人的身影。推进绿色、低碳的环保理念,从产业规划、设计、研发、生产、交付以及运维,华为向客户提供领先的节能环保产品和解决方案。</p>
<p class="bold-text">培养本地人才</p>
<p>华为的“未来种子”项目已经覆盖108个国家和地区,帮助培养本地ICT人才,推动知识迁移,提高人们对于ICT行业的了解和兴趣,并鼓励各国及地区参与到建设数字化社区的工作中。</p>
<p class="bold-text">为奋斗者提供舞台</p>
<p>华为坚持“以奋斗者为本”,以责任贡献来评价员工和选拔干部。为员工提供了全球化发展平台,与世界对话的机会。使大量年轻人有机会担当重任,快速成长,也使得十几万员工通过个人的能力,收获了合理的回报与值得回味的人生经历。</p>
<h2>我们坚持什么?</h2>
<p>华为始终坚持开放、合作、创新的理念,与全球客户和合作伙伴共同构建安全、稳定、可靠的数字生态系统。我们将持续以技术创新驱动社会进步,为未来的数字世界构建高效的ICT基础设施。</p>
</body>
</html>