css样式总结,css样式笔记

css样式设计思路总结

如何清除图片下方出现几像素的空白间隙？

方法1：

方法2：

除了top值，还可以设置为text-top | middle | bottom | text-bottom

甚至特定的length和percentage值都可以

方法3：

如何让文本垂直对齐文本输入框？

如何让单行文本在容器内垂直居中？

如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果？

按L-V-H-A的顺序设置超链接样式即可，可速记为LoVe（喜欢）HAte（讨厌）

为什么Standard mode下IE无法设置滚动条的颜色？

将原来设置在body上的滚动条颜色样式定义到html标签选择符上即可

如何使文本溢出边界不换行强制在一行内显示？

设置容器的宽度和white-space为nowrap即可，其效果类似nobr标签

如何使文本溢出边界显示为省略号？

方法（此方法Firefox5.0尚不支持）：

如何使连续的长字符串自动换行？

word-wrap的break-word值允许单词内换行

如何清除浮动？

方法1：

方法2：

方法3：

如何定义鼠标指针的光标形状为手型并兼容所有浏览器？

若将cursor设置为hand，将只有IE和Opera支持，且hand为非标准属性值

如何让已知高度的容器在页面中水平垂直居中？

Know More：已知高度的容器如何在页面中水平垂直居中

如何让未知尺寸的图片在已知宽高的容器内水平垂直居中？

如何设置span的宽度和高度（即如何设置内联元素的宽高）？

如何给一个元素定义多个不同的css规则？

如何让某个元素充满整个页面？

如何让某个元素距离窗口上右下左4边各10像素？

如何去掉超链接的虚线框？

IE7及更早浏览器由于不支持outline属性，需要通过js的blur()方法来实现，如a onfocus="this.blur();"...

如何容器透明，内容不透明？

原理是容器层与内容层并级，容器层设置透明度，内容层通过负margin或者position绝对定位等方式覆盖到容器层上

方法2：

高级浏览器直接使用rgba颜色值实现；IE浏览器在定义容器透明的同时，让子节点相对定位，也可达到效果

如何让整个页面水平居中？

定义body的text-align值为center将使得IE5.5也能实现居中

为什么容器的背景色没显示出来？为什么容器无法自适应内容高度？

通常出现这样的情况都是由于没有清除浮动而引起的

如何做1像素细边框的table？

方法1：

方法2：

IE7及更早浏览器不支持border-spacing属性，但是可以通过table的标签属性cellspacing来替代。

如何使页面文本行距始终保持为n倍字体大小的基调？

注意，不要给n加单位

标准模式Standard mode和怪异模式Quirks mode下的盒模型区别？

标准模式下：Element width = width + padding + border

怪异模式下：Element width = width

以图换字的几种方法及优劣分析

思路1：使用text-indent的负值，将内容移出容器

该方法优点在于结构简洁，不理想的地方：

1.由于使用场景不同，负缩进的值可能会不一样，不易抽象成公用样式；

2.当该元素为链接时，在非IE下虚线框将变得不完整；

3.如果该元素被定义为内联级或者内联块级，不同浏览器下会有较多的差异

思路2：使用display:none或visibility:hidden将内容隐藏；

该方法优点在于兼容性强并且容易抽象成公用样式，缺点在于结构较复杂

思路3：使用padding或者line-height将内容挤出容器之外；

该方法优点在于结构简洁，缺点在于：

1.由于使用场景不同，padding或line-height的值可能会不一样，不易抽象成公用样式；

2.要兼容IE5.5及更早浏览器还得hack

思路4：使用超小字体和文本全透明法；

该方法结构简单易用，推荐使用

为什么2个相邻div的margin只有1个生效？

本例中box1的底部margin为10px，box2的顶部margin为20px，但表现在页面上2者之间的间隔为20px，而不是预想中的10+20px=30px，结果是选择2者之间最大的那个margin，我们把这种机制称之为“外边距合并”；外边距合并不仅仅出现在相邻的元素间，父子间同样会出现。

简单列举几点注意事项:

　外边距合并只出现在块级元素上；

　浮动元素不会和相邻的元素产生外边距合并；

　绝对定位元素不会和相邻的元素产生外边距合并；

　内联块级元素间不会产生外边距合并；

　根元素间不会不会产生外边距合并（如html与body间）；

　设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并；

如何在文本框中禁用中文输入法？

ime-mode为非标准属性，写该文档时只有IE和Firefox支持

如何解决列表中list-style-image不能精准定位的问题？

不使用list-style-image来定义列表项目标记符号，而用background-image来代替，

并通过background-position来进行定位

如何解决伪对象:before和:after在input标签上的怪异表现的问题？

现象：

在编写本条目时，除了Opera，在所有浏览器下input标签使用伪对象:before和:after都没有效果，即使Opera的表现也同样令人诧异。大家可以试玩一下。浏览器版本：IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51

除了Firefox，在所有浏览器下伪对象:before和:after无法定义过渡和动画效果。

如果这个过渡或动画效果是必须，可以考虑使用真实对象。

相关问答

Q1: css样式内联式，外联式，嵌入式的格式是什么？

外联式样式（属于外部样式表）

特征：

1、有一个单独的CSS文件存在！[如：001.css]

2、首先，通过【格式】→【样式表连接】与CSS文件[001.css]建立连接！

3、在合适的地方使用 class="样式名" 调用具体的样式效果！

如：link href="001.css" type="text/css" rel="Stylesheet"/

嵌入式样式（属于内部样式表）

特征：

1、样式的属性内容以代码的形式[放在 ]写在网页代码中！

2、首先，通过【格式】→【样式】设置样式的属性内容！

3、在合适的地方使用 class="样式名" 调用具体的样式效果！

如： style type="text/css"

.main{ width:1002px; margin:0 auto;}

/style

内联式样式（属于内部样式表）

特征：

1、样式的属性内容直接跟在将要修饰的文字标记里[如：

2、具体格式： style="font-size:10px;font-color:#ff0000"

例如：修饰单元格里的文字

3. 嵌入式

最初级的 CSS 写法即把代码直接添加于所修饰的标记元素。示例代码如下：

div style="font-family:Arial,Helvetica,sans-serif;"芒果/div

这样做虽然更为直观，但很大程度上加大了页面体积，不符合结构与表现分离的设计思想。

总体而言，外联和内联各有优点，可综合实际情况选择适合的级联方式。

扩展资料：

编程工具

记事本：使用Windows系统自带的记事本可以编辑网页。只需要在保存文档时，以.html为后缀名进行保存即可。

Dreamweaver：它与Flash、Fireworks并称网页三剑客。Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出充满动感的网页。

语言特点

CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

总体来说，CSS具有以下特点：

丰富的样式定义

CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

易于使用和修改

CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。

多页面应用

CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

层叠

简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。

这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。

页面压缩

在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。

而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间。

参考资料：百度百科-CSS

Q2: css排版样式有哪几种类型

css样式分三种，内部样式，内联样式和外部样式。外部样式，顾名思义，也就是通过link /引入的css样式文件，而内部样式呢，主要是放在style/style中的样式，而内联样式，就是直接嵌入标签的，充当标签的一个属性，使用style='这里写样式' 来实现。

他们的优先级是内联样式的优先级最高，其次判断内部和外部样式的优先级得看它们在html中出现的位置，一般来说，越靠后的优先级也就越高。

css是英文Cascading Style Sheets的缩写。

它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

它包含3种类型，内部样式，行内样式和外部样式表三种

作用的效果是按顺序从下到上，相同样式下面的会覆盖原有样式，除特殊情况外，一般都是行内样式内部样式外部样式。

以div为例

行内样式写法：

在style里面写样式

div style="height:30px; background:#f00;"/div

内部样式：

在head标签内加入style标签，在标签内写样式：

style

div{height:30px; background:#f00;}

/style

外部样式是建立一个新文件后缀名为.css

举个例子：

建立style.css文件放在项目根目录下：

在里面写入

div{height:30px; background:#f00;}

然后保存，在html的head标签内调用样式

link rel="stylesheet" type="text/css" href="style.css" /

Q3: CSS border（边框）样式写法总结

border属性 ：在网页中设置元素的边框样式。可同时设置边框宽度、边框样式、边框颜色。也可以单独设置上边、右边、下边、左边的边框。

语法：border： border-width | border-style | border-color;

border-width ：边框宽度。可以指定长度值。如1px，1em（单位为px，pt，em等）。或者使用关键字medium（默认），thick，thin。

 border-top-width：设置元素上边框宽度

 border-right-width：设置元素右边框宽度

 border-bottom-width：设置元素下边框宽度

 border-left-width：设置元素左边框宽度

border-style ：边框样式。

 border-top-style：设置元素上边框样式

 border-right-style：设置元素右边框样式

 border-bottom-style：设置元素下边框样式

 border-left-style：设置元素左边框样式

 属性值有：

  none：无边框。

  hidden：隐藏边框。对于表，hidden 用于解决边框冲突。

  dotted：点状边框。

  dashed：虚线边框。

  solid：实线边框。

  double：双线边框。两条单线与其间隔的和等于指定的border-width值。

  groove：3D凹槽边框。

  ridge：3D垄状边框。

  inset：凹边框。

  outset：凸边框。

border-color ：边框颜色。

1.1 边框各样式效果图

1.2 四条边颜色样式相同

1.3 四条边颜色不同，样式相同

1.4 四条边颜色相同，样式不同

1.5 设置上边框宽度、样式、颜色

1.6 设置右边框宽度、样式、颜色

1.7 设置下边框宽度、样式、颜色

1.8 设置左边框宽度、样式、颜色

以上对border边框属性进行了基础操作，大家可以根据自己的经验为边框制作出更漂亮的样式。如若大家有什么更好的见解，那就在回复区畅所欲言吧，我定会吸取精华~如有写错欢迎大家回复，我以后定会更加细心 _

Q4: CSS的样式有哪些？

什么是CSS样式

层叠样式表（CascadingStyleSheet，CSS）是一系列样式或格式规格的集合，用于控制网页样式并允许将样式与网页内容分离的一种标记性语言。它是W3C组织用于改善HTML在显示网页方面的缺陷。虽然HTML在发布时已经制定了各种网页样式标签和各种页面修饰属性，但是随着网页容纳的信息越来越多，这种把信息显示内容与信息显示样式混在一起的方法，已经无法满足人们对网络信息的快速搜索需求，更不能适应大数据时代的展示数据的要求。

CSS的每一个样式表都是由相对应的样式规则组成的，使用HTML中的标签可以将样式表规则加入到HTML。标签位于HTML的head部分，其中也包含网页的样式规划，如图1所示。CSS语句可以内嵌在HTML中，所以编写CSS样式规则和编写HTML的方法相同。CSS语言不需要编译，也不需要特殊处理。用户只要把它们放在标签之间或者编写为一个单独的文件，然后将文件的扩展名保存为.css，利用标签链接或者导入到网页中即可。

CSS样式的优势

使用CSS样式可以对多个文档的样式进行控制，当CSS样式更新后，所有应用该CSS样式的页面都会自动更新。CSS样式可以页面元素进行定位、特殊效果和超链接效果等独特的HTML属性，可以充分地弥补HTML的不足，简化网页的源代码，避免重复劳动，减轻工作量。CSS具有以下优势：

CSS符合Web标准。W3C组织推荐CSS技术将替代HTML的

表格标签、标签、标签以及其他用于表现的HTLM元素。

提高页面的浏览速度。使用CSS样式比传统的Web设计方法至少节约50%以上的文件大小。

缩短网站改版周期。只需要修改相应CSS文件就可以重新设计一个有成百上千页面的站点。

强大的字体控制和排版能力。Font标签对于字体控制能力远没有CSS对于字体的控制能力强，使用CSS样式后不需要在使用font标签来控制文章标题、字体颜色以及字体样式等。

CSS易于编写。Dreamweaver提供了CSS编写辅助工具。

CSS具有良好的兼容性。只要浏览器能够识别CSS样式都可以很好的应用它。

表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，让多个网页文件共同使用它，省去在每一个网页文件中都要重复设定样式的麻烦。

CSS样式基本语法

CSS的语法结构由3部分构成：选择器、属性和值。

选择器{样式属性:取值;样式属性:取值;样式属性:取值;……}选择器（Selector）通常是指用户希望定义的HTML元素或标签，如body、h1；也可以是自定义的id或class的标签，如#main选择器表示选择，即一个被指定了main为id的对象。浏览器将对CSS选择器进行严格的解析，每一组样式均会被浏览器应用到对应的对象上。

属性（Property）是用户希望改变的属性，并且每个属性都有一个值。对于每一个HTML中的标签，CSS都提供了丰富的样式属性，如颜色、大小、位置以及浮动方式等。

值（Value）指属性的值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）。属性值有两种形式：一种是指定范围的值，如float属性的取值为left、right和none；另一种为数值，如height属性取值为0~9999px或者通过其他数学单位来指定。

例如，定义一个网页字体大小为12像素、加粗，段落首行缩进2字符，则可以设置样式如下：

无标题文档

层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

浏览器通过解析属性包含的内容，将CSS样式应用到页面上，如图2所示。多个样式可以并列在一起写，不需要考虑如何进行分隔。例如，定义一个段落文本的背景色为紫色，则可以在上面样式的基础上进行增加样式：

Body{font-size:12px;font-weight:bold;text-indent:2em;}p{backgroundcolor:#FF00FF;}由于CSS语言自动忽略空格（除了选择器内部的空格），因此可以利用空格和换行符来美化CSS样式源代码，上面的代码可以进行如下美化：

Body{font-size:12px;font-weight:bold;text-indent:2em;}p{background-color:#FF00FF;}经过美化的CSS源代码看上去一目了然，既方便阅读，也便于修改。

CSS源代码有时候需要通过一些注释来标注，CSS代码表示什么意思。在HTML中注释标记使用“”，CSS中注释标记使用“/*注释内容*/”。例如，可以对上面的代码进行注释：

Body{/*页面的基本属性*/font-size:12px;font-weight:bold;text-indent:2em;}/*设置段落的背景颜色为紫色*/p{background-color:#FF00FF;}添加CSS的方法

在HTML中添加CSS的方法主要有4种，分别为链接内嵌样式、内部样式表、链接外部样式表和导入外部样式表。

1．内嵌样式表

内嵌样式表是混合在HTML标记里使用的，该方法可以很简单地对某个元素单独定义样式，主要是在body内实现。

内嵌样式表的使用是直接在HTML标记里加入style参数，而style参数的内容就是CSS的属性和值，在style引号里的内容相当于在样式表的大括号里的内容，其格式如下：

字体大小为12px，颜色为红色当浏览器解析到这些标签时，检测到该标签中包含style属性，就会调用CSS引擎来解析style属性，并把效果展现到页面上。

该方法与传统网页设计在标签内增加属性的设计方法相同，该方法实际并没有满足W3C提出的将HTML结构与CSS表现剥离来进行设计，因此在网页设计中不建议使用该方法，除非为页面中个别元素设置某个特定样式效果而单独定义。

2．内部样式表

内部样式表与内嵌样式表的相似之处在于，都将CSS样式编写到页面中。而不同的是，内部样式表可以统一放置在一个固定的位置，其格式如下：

内部样式表通常位于网页的头部区域，目的是让CSS源代码在页面加载前先被解析执行，这样可以避免当网页加载完成后，没有CSS样式渲染而使的页面信息无法正常显示。3．链接外部样式表链接外部样式表是在CSS中最常用的一种形式，它将CSS样式代码单独编写到一个独立的文件中，由网页进行调用，多个网页可以同时使用同一个样式文件，其格式如下：

其中，href属性设置外部样式表文件的地址，该地址可以是相对地址，也可以是绝对地址；rel属性定义该标签关联的是样式表标签；type属性定义文档的类型，即CSS文本文件。

网站通常采用链接外部样式表来设计网站的表现层，能够实现CSS样式与HTML结构的分离，这种分离原则是W3C所提倡的，因为这样可以高效地管理文档结构和样式表文件，实现代码的优化和重用。

4．导入外部样式表导入外部样式表是指在内部样式表的标签内使用@import关键字导入外部样式表文件，格式如下：

在@import关键字后面，使用url()函数来把外部样式表文件导入。注意使用时，外部样式表的路径、方法和链接外部样式表的方法类似，但导入外部样式表输入方式更有优势。实质上它是相当于存在内部样式表中的。

7.2CSS基本选择器

选择器决定样式规则作用于哪些元素。例如，如果要对table元素添加边框为实线、线宽1像素、蓝色的边框，则需要创建一个只识别table元素而不影响其他元素的选择器。如果要对每个区域中的table设置特殊格式，就需要创建一个稍微复杂一些的选择器，它只识别指定区域中的table元素。

7.2.1标签选择器

HTML文档都是由很多标签通过一定的规则编织而成的，我们也可以把这些标签称为网页元素。标签选择器使用网页元素定义样式。

例如，声明p元素首行缩进2字符，字体颜色为红色；所有h1字号为15px、加粗，代码如下：

其中，p和h1都是HTML特定的标签名称，直接引用即可。

注意：*号为通配符匹配页面中的所有元素名称。上面的代码设置每个元素的内外边距为0px。由于每个元素都有系统默认的内外边距值，且在不同的浏览器中显示的效果也不同，因此在设置网页样式之初使用通配符*将所有元素默认的内外边距去掉是常见做法。

7.2.2类别选择器

使用标签选择符可以方便地对标签进行样式设置，同时标签选择符也存在较多问题。因为标签选择符对标签所做的定义不单单影响所选择的标签元素，而是对整个页面中所有相同标签都会起作用。如果需要对同一个标签在网页中的不同位置显示不同的样式，使用这种方法定义的样式就存在很多不足。对于这个问题可以使用类选择器来解决。

类（Class）选择符就是为了不同元素拥有相同的显示样式而定义的。例如，在下面这个页面中包含三段文本，通过标签选择器将所有段落文本大小定义为13px，首行缩进2字符，字体颜色为蓝色。

层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

如果现在要求把第一段字体大小改为20px，字体加粗，这时就可以使用类选择符。定义格式如下：

.fontbold{font-size:20px;font-weight:bold;}

层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

在浏览器中预览，显示效果如图3所示，可以看到第一段字体被单独放大并加粗。类选择符可以精确地控制页面中某个具体元素对象，而不管这个对象是属于什么类型的标签，同时一个类样式可以在多个标签中被引用。

在自定义类名时，只能够使用字母、数字、下划线（_）和连接符号（-），类名必须以字母开头，否则无效。另外，类名是区分大小写的，所以类fontbold和类Fontbold是完全不同的两个类。

7.2.3ID选择器

ID是英文Identity的缩写，它表示身份标识号码，在网络上一般指用户账号，但是在Web设计中一般指标签在HTML文档中的唯一编号。从这点来看，ID选择器只能够在HTML页面中用一次，它是与标签选择符和类选择符作用范围相反的一个选择符。ID选择符通常被来定义HTML框架结构的布局效果，因为HTML框架元素的ID值都是唯一的。

ID选择符必须以井号（#）前缀开始，然后是一个自定义的ID名，定义格式如下：

#box{width:600px;height:auto;}例如，下面实例定义一个盒子，为该盒子指定宽度和高度，并设置盒子的背景颜色以及边框和内边距大小，显示效果如图4所示。7.3复合选择器如果仅仅掌握了标签选择符、类选择符和ID选择符还远远不够，对于网页设计者来讲还应该掌握高级选择符的使用，如子选择符、相邻选择符和属性选择符。

利用标签选择符和类选择符可以控制网页中众多对象的样式；而利用ID选择符、子选择符和相邻选择符可以精确控制页面中的特定对象样式；使用属性选择符可以更敏捷、更模糊地控制页面中包含不同属性的对象样式。

7.3.1子选择符

子选择符就是指定父元素所包含的子元素的样式。子选择符使用尖角号（）来表示，定义格式如下：

divspan{font-size:20px;}其中，div为span元素的父元素，通过子选择符连接。

例如，定义span元素的字体大小为10px，再利用子选择符来定义所有div元素包含的子元素span样式字体大小为20px，显示效果如图5所示。

CSS基础入门

层叠样式表是一种用来表现HTML（标准通用标记语7.3.2相邻选择器

相邻选择符就是指定一个元素相邻的下一个元素的样式。相邻选择符使用加号（+）来表示，格式如下：

div+span{font-size:20px;}其中，div+span表示div元素与span元素相邻。例如，利用相邻选择符递进控制并列显示的几个元素的显示样式。h1+div表示标题元素h1后面相邻的div元素样式，div+p表示div元素后面相邻的元素p的样式，p+div表示p元素后面相邻的div元素的样式，而div+div表示div元素后面相邻的div元素的样式。效果如图6所示。

图1

图2

图4

图5

图6

回答于 2020-01-02

详情

该链接由问题回答方推荐

官方电话

向TA提问

官方服务

官方网站

赞同1

已踩

下一条回答

立即下载

— 为你推荐更多精彩内容 —

正在加载

加载失败 点击重新加载

微信

微博

QQ

QQ空间

答案纠错

举报

取消

赞赏答主

5

10

50

100

200

已赞赏0财富值

合计：0 财富值

登录后赞赏

选择举报类型

侵犯版权

色情低俗

涉嫌违法犯罪

时政信息不实

垃圾广告

低质灌水

工作人员会在48小时内处理,处理结果请关注系统通知,感谢您对百度知道的支持。

确定

void function(a,b,c,d,e,f){function g(b){a.attachEvent?a.attachEvent("onload",b,!1):a.addEventListener&&a.addEventListener("load",b)}function h(a,c,d){d=d||15;var e=new Date;e.setTime((new Date).getTime()+1e3*d),b.cookie=a+"="+escape(c)+";path=/;expires="+e.toGMTString()}function i(a){var c=b.cookie.match(new RegExp("(^| )"+a+"=([^;]*)(;|$)"));return null!=c?unescape(c[2]):null}function j(){var a=i("PMS_JT");if(a){h("PMS_JT","",-1);try{a=a.match(/{["']s["']:(\d+),["']r["']:["']([\s\S]+)["']}/),a=a&&a[1]&&a[2]?{s:parseInt(a[1]),r:a[2]}:{}}catch(c){a={}}a.r&&b.referrer.replace(/#.*/,"")!=a.r||alog("speed.set","wt",a.s)}}if(a.alogObjectConfig){var k=a.alogObjectConfig.sample,l=a.alogObjectConfig.rand;d="https:"===a.location.protocol?""+d:""+d,k&&l&&l>k||(g(function(){alog("speed.set","lt",+new Date),e=b.createElement(c),e.async=!0,e.src=d+"?v="+~(new Date/864e5)+~(new Date/864e5),f=b.getElementsByTagName(c)[0],f.parentNode.insertBefore(e,f)}),j())}}(window,document,"script","/hunter/alog/dp.mobile.min.js");

window.tt = 1669091046;(window.__IKNOW_GLOBAL__ || window).require.resourceMap({"res":{"m-common:widget\/lib\/gmu\/zepto\/zepto.origin.js":{"pkg":"m-common:p1"},"m-common:widget\/js\/util\/hunter\/hunter.js":{"pkg":"m-common:p2"},"m-question-new:node_modules\/clipboard\/dist\/clipboard.js":{"pkg":"m-question-new:p24"},"m-question-new:node_modules\/vue\/dist\/vue.common.prod.js":{"pkg":"m-question-new:p23"},"m-question-new:widget\/js\/gettext\/gettext.es.js":{"pkg":"m-question-new:p26","deps":["m-common:widget\/lib\/gmu\/zepto\/zepto.js"]},"m-common:widget\/js\/logic\/share\/tools\/utils.js":{"pkg":"m-common:p3"},"m-question-new:widget\/question-meta\/support\/support.js":{"pkg":"m-question-new:p15","deps":["m-common:widget\/lib\/gmu\/zepto\/zepto.js","m-common:widget\/js\/logic\/submit\/submit.js","m-common:widget\/js\/ui\/dialog\/dialog.js","m-common:widget\/js\/util\/log\/log.js","m-common:widget\/js\/logic\/login\/login.js","m-common:widget\/js\/ui\/poptip\/poptip.js","m-common:widget\/js\/util\/storage\/storage.js","m-common:widget\/js\/util\/cookie\/cookie.js"]},"m-question-new:widget\/video-entry\/video-normal\/intersection-observer.js":{"pkg":"m-question-new:p18"},"m-question-new:widget\/top-tip\/top-tip.es.js":{"pkg":"m-question-new:p14","deps":["m-common:widget\/lib\/gmu\/zepto\/zepto.js","m-common:widget\/js\/util\/log\/log.js","m-common:widget\/js\/util\/storage\/storage.js","m-common:widget\/js\/util\/https\/https.js"]},"m-question-new:widget\/feed-recommend\/feed-recommend-async.es.js":{"pkg":"m-question-new:p19","deps":["m-common:widget\/lib\/gmu\/zepto\/zepto.js","m-common:widget\/js\/util\/log\/log.js","m-common:widget\/js\/util\/template\/template.js","m-common:widget\/js\/logic\/login\/login.js","m-common:widget\/js\/ui\/poptip\/poptip.js","m-common:widget\/js\/util\/cookie\/cookie.js","m-question-new:node_modules\/@baidu\/ubc-report-sdk\/dist\/ubc-web-sdk.esm.js","m-common:widget\/js\/util\/observer\/intersection-observer.js","m-common:widget\/js\/util\/patch\/patch.js","m-question-new:widget\/js\/qbthumb\/qbthumbFeed.es.js","m-common:widget\/js\/util\/event\/event.js"]},"m-question-new:widget\/law-struct\/law-struct-relative-case\/law-struct-relative-case.es.js":{"pkg":"m-question-new:p27","deps":["m-common:widget\/lib\/gmu\/zepto\/zepto.js","m-common:widget\/js\/util\/log\/log.js","m-common:widget\/js\/util\/template\/template.js","m-question-new:widget\/law\/util\/url.es.js","m-common:widget\/js\/util\/observer\/intersection-observer.js"]},"m-question-new:widget\/js\/similarAskDialog\/index.js":{"url":"https:\/\/iknowwap.bdimg.com\/static\/m-question-new\/widget\/js\/similarAskDialog\/index.7445542.js","deps":["m-common:widget\/lib\/gmu\/zepto\/zepto.js","m-common:widget\/js\/util\/log\/log.js","m-common:widget\/js\/ui\/dialog\/dialog.js","m-common:widget\/js\/util\/storage\/storage.js","m-common:widget\/js\/ui\/poptip\/poptip.js","m-common:widget\/js\/logic\/login\/login.js","m-common:widget\/js\/logic\/submit\/submit.js","m-common:widget\/js\/logic\/squarevcode\/squarevcode.js","m-common:widget\/js\/util\/event\/event.js"]},"m-common:widget\/js\/util\/observer\/observer.es.js":{"url":"https:\/\/iknowwap.bdimg.com\/static\/m-common\/widget\/js\/util\/observer\/observer.es.4fde5b9.js","deps":["m-common:widget\/js\/util\/observer\/intersection-observer.js","m-common:widget\/js\/util\/log\/log.js"]},"m-question-new:widget\/js\/PhotoSwipe\/photoswipe.min.js":{"pkg":"m-question-new:p13"},"m-question-new:widget\/ad-ecom-inchain\/ad-ecom-inchain.js":{"pkg":"m-question-new:p16","deps":["m-common:widget\/lib\/gmu\/zepto\/zepto.js","m-common:widget\/js\/util\/log\/log.js"]},"m-common:widget\/js\/util\/es-polyfill\/polyfill.js":{"url":"https:\/\/iknowwap.bdimg.com\/static\/m-common\/widget\/js\/util\/es-polyfill\/polyfill.a5378c6.js"},"m-common:widget\/service-plugin\/service-plugin.es.js":{"url":"https:\/\/iknowwap.bdimg.com\/static\/m-common\/widget\/service-plugin\/service-plugin.es.f484af5.js","deps":["m-common:widget\/lib\/gmu\/zepto\/zepto.js","m-common:widget\/js\/ui\/poptip\/poptip.js","m-common:widget\/js\/util\/log\/log.js","m-common:widget\/js\/util\/es-polyfill\/polyfill.js","m-common:widget\/js\/logic\/share\/share.js"]},"m-question-new:widget\/js\/trans-knowledge-custom-card\/trans-knowledge-custom-card.js":{"url":"https:\/\/iknowwap.bdimg.com\/static\/m-question-new\/widget\/js\/trans-knowledge-custom-card\/trans-knowledge-custom-card.03b0ed7.js","deps":["m-common:widget\/lib\/gmu\/zepto\/zepto.js","m-common:widget\/js\/util\/template\/template.js"]},"m-question-new:widget\/js\/page\/single.es.js":{"pkg":"m-question-new:p20","deps":["m-common:widget\/js\/util\/event\/event.js","m-common:widget\/js\/util\/log\/log.js","m-question-new:widget\/js\/trans-knowledge-custom-card\/trans-knowledge-custom-card.js"]},"m-question-new:widget\/single-meta\/single-meta.js":{"pkg":"m-question-new:p20","deps":["m-common:widget\/lib\/gmu\/zepto\/zepto.js","m-common:widget\/js\/util\/log\/log.js","m-common:widget\/js\/util\/event\/event.js","m-question-new:widget\/question-meta\/support\/support.js","m-common:widget\/js\/ui\/poptip\/poptip.js","m-question-new:widget\/js\/throttle\/throttle.js"]},"m-question-new:widget\/single-meta-exp\/support\/support.es.js":{"pkg":"m-question-new:p20","deps":["m-common:widget\/lib\/gmu\/zepto\/zepto.js","m-common:widget\/js\/logic\/submit\/submit.js","m-common:widget\/js\/util\/log\/log.js","m-common:widget\/js\/logic\/login\/login.js","m-common:widget\/js\/ui\/poptip\/poptip.js","m-common:widget\/js\/util\/storage\/storage.js"]},"m-question-new:widget\/single-meta-exp\/single-meta-exp.es.js":{"pkg":"m-question-new:p20","deps":["m-common:widget\/lib\/gmu\/zepto\/zepto.js","m-common:widget\/js\/util\/log\/log.js","m-common:widget\/js\/util\/event\/event.js","m-question-new:widget\/single-meta-exp\/support\/support.es.js","m-common:widget\/js\/ui\/poptip\/poptip.js","m-common:widget\/js\/util\/observer\/intersection-observer.js"]},"m-question-new:widget\/rfq-card\/rfq-card.es.js":{"url":"https:\/\/iknowwap.bdimg.com\/static\/m-question-new\/widget\/rfq-card\/rfq-card.es.8d400e0.js","deps":["m-common:widget\/lib\/gmu\/zepto\/zepto.js","m-common:widget\/js\/ui\/poptip\/poptip.js","m-question-new:node_modules\/jsencrypt\/bin\/jsencrypt.js","m-common:widget\/js\/util\/log\/log.js","m-common:widget\/js\/util\/observer\/intersection-observer.js","m-common:widget\/js\/util\/template\/template.js"]},"m-question-new:widget\/contextual-earches\/contextual-earches-async.js":{"url":"https:\/\/iknowwap.bdimg.com\/static\/m-question-new\/widget\/contextual-earches\/contextual-earches-async.261cc26.js","deps":["m-common:widget\/js\/util\/template\/template.js","m-common:widget\/js\/util\/event\/event.js"]},"m-common:widget\/js\/util\/monitor\/monitor.es.js":{"url":"https:\/\/iknowwap.bdimg.com\/static\/m-common\/widget\/js\/util\/monitor\/monitor.es.b379cd4.js","deps":["m-common:widget\/js\/util\/log\/log.js"]}},"pkg":{"m-question-new:p20":{"url":"https:\/\/iknowwap.bdimg.com\/static\/m-question-new\/pkg\/qb-single.8159230.js","has":["m-question-new:widget\/js\/page\/single.es.js","m-question-new:widget\/single-meta\/single-meta.js","m-question-new:widget\/single-meta-exp\/support\/support.es.js","m-question-new:widget\/single-meta-exp\/single-meta-exp.es.js"]}}});

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; F.context({

question:{

qid:'1708728378115901940',

cid:'',

quid: '303487790',

score:'0',

import_id:'1580',

title:'CSS的样式有哪些？',

replyNum:"1" ,

createTime: '1577951036',

replyCount: '2',

content: '',

update_time: '0',

singleRid: '3144868738',

ext_word: '',

status: '0',

is_appeal: 0,

deleted: 0

,tags: [{"tagname":"CSS"},{"tagname":"HTML"},{"tagname":"\u524d\u7aef\u5f00\u53d1"},{"tagname":"HTML"},{"tagname":"\u7f51\u9875\u8bbe\u8ba1"},{"tagname":"Div+CSS"},{"tagname":"\u8bbe\u8ba1"},{"tagname":"\u4fe1\u606f\u6280\u672f"}]

,content_cid: ["110","110106"]

,newTags: "\u524d\u7aef\u5f00\u53d1_HTML_\u7f51\u9875\u8bbe\u8ba1_Div+CSS_\u8bbe\u8ba1"

,category_v1: '信息技术'

},

bestAnswerCount: '1',

isMyQuestion: 0,

answerKey: 0,

adsAll:{

youx:'',

adsEids: null

},

adsEids: {

asp: [289,11102]

},

eid: Number(289),

isWyw: Boolean(),

nettype:'0',

word: '' || '',

evaSampling_lowVal: '-1',

pageType: 'single',

sourceIsOut: 0,

argueNum: 0

});

F.context('user')['isRealName'] = '';

F.context('user')['role'] = 'browser';

F.context('feedbackInfo', {

feedback: '1',

feedback_rid: 0

});

F.context('newbest', '[{\x22rid\x22:3144868738,\x22content\x22:\x22\\u4ec0\\u4e48\\u662fCSS\\u6837\\u5f0f
\\u5c42\\u53e0\\u6837\\u5f0f\\u8868\\uff08CascadingStyleSheet\\uff0cCSS\\uff09\\u662f\\u4e00\\u7cfb\\u5217\\u6837\\u5f0f\\u6216\\u683c\\u5f0f\\u89c4\\u683c\\u7684\\u96c6\\u5408\\uff0c\\u7528\\u4e8e\\u63a7\\u5236\\u7f51\\u9875\\u6837\\u5f0f\\u5e76\\u5141\\u8bb8\\u5c06\\u6837\\u5f0f\\u4e0e\\u7f51\\u9875\\u5185\\u5bb9\\u5206\\u79bb\\u7684\\u4e00\\u79cd\\u6807\\u8bb0\\u6027\\u8bed\\u8a00\\u3002\\u5b83\\u662fW3C\\u7ec4\\u7ec7\\u7528\\u4e8e\\u6539\\u5584HTML\\u5728\\u663e\\u793a\\u7f51\\u9875\\u65b9\\u9762\\u7684\\u7f3a\\u9677\\u3002\\u867d\\u7136HTML\\u5728\\u53d1\\u5e03\\u65f6\\u5df2\\u7ecf\\u5236\\u5b9a\\u4e86\\u5404\\u79cd\\u7f51\\u9875\\u6837\\u5f0f\\u6807\\u7b7e\\u548c\\u5404\\u79cd\\u9875\\u9762\\u4fee\\u9970\\u5c5e\\u6027\\uff0c\\u4f46\\u662f\\u968f\\u7740\\u7f51\\u9875\\u5bb9\\u7eb3\\u7684\\u4fe1\\u606f\\u8d8a\\u6765\\u8d8a\\u591a\\uff0c\\u8fd9\\u79cd\\u628a\\u4fe1\\u606f\\u663e\\u793a\\u5185\\u5bb9\\u4e0e\\u4fe1\\u606f\\u663e\\u793a\\u6837\\u5f0f\\u6df7\\u5728\\u4e00\\u8d77\\u7684\\u65b9\\u6cd5\\uff0c\\u5df2\\u7ecf\\u65e0\\u6cd5\\u6ee1\\u8db3\\u4eba\\u4eec\\u5bf9\\u7f51\\u7edc\\u4fe1\\u606f\\u7684\\u5feb\\u901f\\u641c\\u7d22\\u9700\\u6c42\\uff0c\\u66f4\\u4e0d\\u80fd\\u9002\\u5e94\\u5927\\u6570\\u636e\\u65f6\\u4ee3\\u7684\\u5c55\\u793a\\u6570\\u636e\\u7684\\u8981\\u6c42\\u3002
CSS\\u7684\\u6bcf\\u4e00\\u4e2a\\u6837\\u5f0f\\u8868\\u90fd\\u662f\\u7531\\u76f8\\u5bf9\\u5e94\\u7684\\u6837\\u5f0f\\u89c4\\u5219\\u7ec4\\u6210\\u7684\\uff0c\\u4f7f\\u7528HTML\\u4e2d\\u7684\\u6807\\u7b7e\\u53ef\\u4ee5\\u5c06\\u6837\\u5f0f\\u8868\\u89c4\\u5219\\u52a0\\u5165\\u5230HTML\\u3002\\u6807\\u7b7e\\u4f4d\\u4e8eHTML\\u7684head\\u90e8\\u5206\\uff0c\\u5176\\u4e2d\\u4e5f\\u5305\\u542b\\u7f51\\u9875\\u7684\\u6837\\u5f0f\\u89c4\\u5212\\uff0c\\u5982\\u56fe1\\u6240\\u793a\\u3002CSS\\u8bed\\u53e5\\u53ef\\u4ee5\\u5185\\u5d4c\\u5728HTML\\u4e2d\\uff0c\\u6240\\u4ee5\\u7f16\\u5199CSS\\u6837\\u5f0f\\u89c4\\u5219\\u548c\\u7f16\\u5199HTML\\u7684\\u65b9\\u6cd5\\u76f8\\u540c\\u3002CSS\\u8bed\\u8a00\\u4e0d\\u9700\\u8981\\u7f16\\u8bd1\\uff0c\\u4e5f\\u4e0d\\u9700\\u8981\\u7279\\u6b8a\\u5904\\u7406\\u3002\\u7528\\u6237\\u53ea\\u8981\\u628a\\u5b83\\u4eec\\u653e\\u5728\\u6807\\u7b7e\\u4e4b\\u95f4\\u6216\\u8005\\u7f16\\u5199\\u4e3a\\u4e00\\u4e2a\\u5355\\u72ec\\u7684\\u6587\\u4ef6\\uff0c\\u7136\\u540e\\u5c06\\u6587\\u4ef6\\u7684\\u6269\\u5c55\\u540d\\u4fdd\\u5b58\\u4e3a.css\\uff0c\\u5229\\u7528\\u6807\\u7b7e\\u94fe\\u63a5\\u6216\\u8005\\u5bfc\\u5165\\u5230\\u7f51\\u9875\\u4e2d\\u5373\\u53ef\\u3002
CSS\\u6837\\u5f0f\\u7684\\u4f18\\u52bf
\\u4f7f\\u7528CSS\\u6837\\u5f0f\\u53ef\\u4ee5\\u5bf9\\u591a\\u4e2a\\u6587\\u6863\\u7684\\u6837\\u5f0f\\u8fdb\\u884c\\u63a7\\u5236\\uff0c\\u5f53CSS\\u6837\\u5f0f\\u66f4\\u65b0\\u540e\\uff0c\\u6240\\u6709\\u5e94\\u7528\\u8be5CSS\\u6837\\u5f0f\\u7684\\u9875\\u9762\\u90fd\\u4f1a\\u81ea\\u52a8\\u66f4\\u65b0\\u3002CSS\\u6837\\u5f0f\\u53ef\\u4ee5\\u9875\\u9762\\u5143\\u7d20\\u8fdb\\u884c\\u5b9a\\u4f4d\\u3001\\u7279\\u6b8a\\u6548\\u679c\\u548c\\u8d85\\u94fe\\u63a5\\u6548\\u679c\\u7b49\\u72ec\\u7279\\u7684HTML\\u5c5e\\u6027\\uff0c\\u53ef\\u4ee5\\u5145\\u5206\\u5730\\u5f25\\u8865HTML\\u7684\\u4e0d\\u8db3\\uff0c\\u7b80\\u5316\\u7f51\\u9875\\u7684\\u6e90\\u4ee3\\u7801\\uff0c\\u907f\\u514d\\u91cd\\u590d\\u52b3\\u52a8\\uff0c\\u51cf\\u8f7b\\u5de5\\u4f5c\\u91cf\\u3002CSS\\u5177\\u6709\\u4ee5\\u4e0b\\u4f18\\u52bf\\uff1a
CSS\\u7b26\\u5408Web\\u6807\\u51c6\\u3002W3C\\u7ec4\\u7ec7\\u63a8\\u8350CSS\\u6280\\u672f\\u5c06\\u66ff\\u4ee3HTML\\u7684\\u8868\\u683c\\u6807\\u7b7e\\u3001\\u6807\\u7b7e\\u3001\\u6807\\u7b7e\\u4ee5\\u53ca\\u5176\\u4ed6\\u7528\\u4e8e\\u8868\\u73b0\\u7684HTLM\\u5143\\u7d20\\u3002
\\u63d0\\u9ad8\\u9875\\u9762\\u7684\\u6d4f\\u89c8\\u901f\\u5ea6\\u3002\\u4f7f\\u7528CSS\\u6837\\u5f0f\\u6bd4\\u4f20\\u7edf\\u7684Web\\u8bbe\\u8ba1\\u65b9\\u6cd5\\u81f3\\u5c11\\u8282\\u7ea650%\\u4ee5\\u4e0a\\u7684\\u6587\\u4ef6\\u5927\\u5c0f\\u3002
\\u7f29\\u77ed\\u7f51\\u7ad9\\u6539\\u7248\\u5468\\u671f\\u3002\\u53ea\\u9700\\u8981\\u4fee\\u6539\\u76f8\\u5e94CSS\\u6587\\u4ef6\\u5c31\\u53ef\\u4ee5\\u91cd\\u65b0\\u8bbe\\u8ba1\\u4e00\\u4e2a\\u6709\\u6210\\u767e\\u4e0a\\u5343\\u9875\\u9762\\u7684\\u7ad9\\u70b9\\u3002
\\u5f3a\\u5927\\u7684\\u5b57\\u4f53\\u63a7\\u5236\\u548c\\u6392\\u7248\\u80fd\\u529b\\u3002Font\\u6807\\u7b7e\\u5bf9\\u4e8e\\u5b57\\u4f53\\u63a7\\u5236\\u80fd\\u529b\\u8fdc\\u6ca1\\u6709CSS\\u5bf9\\u4e8e\\u5b57\\u4f53\\u7684\\u63a7\\u5236\\u80fd\\u529b\\u5f3a\\uff0c\\u4f7f\\u7528CSS\\u6837\\u5f0f\\u540e\\u4e0d\\u9700\\u8981\\u5728\\u4f7f\\u7528font\\u6807\\u7b7e\\u6765\\u63a7\\u5236\\u6587\\u7ae0\\u6807\\u9898\\u3001\\u5b57\\u4f53\\u989c\\u8272\\u4ee5\\u53ca\\u5b57\\u4f53\\u6837\\u5f0f\\u7b49\\u3002
CSS\\u6613\\u4e8e\\u7f16\\u5199\\u3002Dreamweaver\\u63d0\\u4f9b\\u4e86CSS\\u7f16\\u5199\\u8f85\\u52a9\\u5de5\\u5177\\u3002
CSS\\u5177\\u6709\\u826f\\u597d\\u7684\\u517c\\u5bb9\\u6027\\u3002\\u53ea\\u8981\\u6d4f\\u89c8\\u5668\\u80fd\\u591f\\u8bc6\\u522bCSS\\u6837\\u5f0f\\u90fd\\u53ef\\u4ee5\\u5f88\\u597d\\u7684\\u5e94\\u7528\\u5b83\\u3002
\\u8868\\u73b0\\u548c\\u5185\\u5bb9\\u76f8\\u5206\\u79bb\\u3002\\u5c06\\u8bbe\\u8ba1\\u90e8\\u5206\\u5265\\u79bb\\u51fa\\u6765\\u653e\\u5728\\u4e00\\u4e2a\\u72ec\\u7acb\\u6837\\u5f0f\\u6587\\u4ef6\\u4e2d\\uff0c\\u8ba9\\u591a\\u4e2a\\u7f51\\u9875\\u6587\\u4ef6\\u5171\\u540c\\u4f7f\\u7528\\u5b83\\uff0c\\u7701\\u53bb\\u5728\\u6bcf\\u4e00\\u4e2a\\u7f51\\u9875\\u6587\\u4ef6\\u4e2d\\u90fd\\u8981\\u91cd\\u590d\\u8bbe\\u5b9a\\u6837\\u5f0f\\u7684\\u9ebb\\u70e6\\u3002
CSS\\u6837\\u5f0f\\u57fa\\u672c\\u8bed\\u6cd5
CSS\\u7684\\u8bed\\u6cd5\\u7ed3\\u6784\\u75313\\u90e8\\u5206\\u6784\\u6210\\uff1a\\u9009\\u62e9\\u5668\\u3001\\u5c5e\\u6027\\u548c\\u503c\\u3002
\\u9009\\u62e9\\u5668{\\u6837\\u5f0f\\u5c5e\\u6027:\\u53d6\\u503c;\\u6837\\u5f0f\\u5c5e\\u6027:\\u53d6\\u503c;\\u6837\\u5f0f\\u5c5e\\u6027:\\u53d6\\u503c;\\u2026\\u2026}\\u9009\\u62e9\\u5668\\uff08Selector\\uff09\\u901a\\u5e38\\u662f\\u6307\\u7528\\u6237\\u5e0c\\u671b\\u5b9a\\u4e49\\u7684HTML\\u5143\\u7d20\\u6216\\u6807\\u7b7e\\uff0c\\u5982body\\u3001h1\\uff1b\\u4e5f\\u53ef\\u4ee5\\u662f\\u81ea\\u5b9a\\u4e49\\u7684id\\u6216class\\u7684\\u6807\\u7b7e\\uff0c\\u5982#main\\u9009\\u62e9\\u5668\\u8868\\u793a\\u9009\\u62e9\\uff0c\\u5373\\u4e00\\u4e2a\\u88ab\\u6307\\u5b9a\\u4e86main\\u4e3aid\\u7684\\u5bf9\\u8c61\\u3002\\u6d4f\\u89c8\\u5668\\u5c06\\u5bf9CSS\\u9009\\u62e9\\u5668\\u8fdb\\u884c\\u4e25\\u683c\\u7684\\u89e3\\u6790\\uff0c\\u6bcf\\u4e00\\u7ec4\\u6837\\u5f0f\\u5747\\u4f1a\\u88ab\\u6d4f\\u89c8\\u5668\\u5e94\\u7528\\u5230\\u5bf9\\u5e94\\u7684\\u5bf9\\u8c61\\u4e0a\\u3002
\\u5c5e\\u6027\\uff08Property\\uff09\\u662f\\u7528\\u6237\\u5e0c\\u671b\\u6539\\u53d8\\u7684\\u5c5e\\u6027\\uff0c\\u5e76\\u4e14\\u6bcf\\u4e2a\\u5c5e\\u6027\\u90fd\\u6709\\u4e00\\u4e2a\\u503c\\u3002\\u5bf9\\u4e8e\\u6bcf\\u4e00\\u4e2aHTML\\u4e2d\\u7684\\u6807\\u7b7e\\uff0cCSS\\u90fd\\u63d0\\u4f9b\\u4e86\\u4e30\\u5bcc\\u7684\\u6837\\u5f0f\\u5c5e\\u6027\\uff0c\\u5982\\u989c\\u8272\\u3001\\u5927\\u5c0f\\u3001\\u4f4d\\u7f6e\\u4ee5\\u53ca\\u6d6e\\u52a8\\u65b9\\u5f0f\\u7b49\\u3002
\\u503c\\uff08Value\\uff09\\u6307\\u5c5e\\u6027\\u7684\\u503c\\u3002\\u5c5e\\u6027\\u548c\\u503c\\u88ab\\u5192\\u53f7\\u5206\\u5f00\\uff0c\\u5e76\\u7531\\u82b1\\u62ec\\u53f7\\u5305\\u56f4\\uff0c\\u8fd9\\u6837\\u5c31\\u7ec4\\u6210\\u4e86\\u4e00\\u4e2a\\u5b8c\\u6574\\u7684\\u6837\\u5f0f\\u58f0\\u660e\\uff08declaration\\uff09\\u3002\\u5c5e\\u6027\\u503c\\u6709\\u4e24\\u79cd\\u5f62\\u5f0f\\uff1a\\u4e00\\u79cd\\u662f\\u6307\\u5b9a\\u8303\\u56f4\\u7684\\u503c\\uff0c\\u5982float\\u5c5e\\u6027\\u7684\\u53d6\\u503c\\u4e3aleft\\u3001right\\u548cnone\\uff1b\\u53e6\\u4e00\\u79cd\\u4e3a\\u6570\\u503c\\uff0c\\u5982height\\u5c5e\\u6027\\u53d6\\u503c\\u4e3a0~9999px\\u6216\\u8005\\u901a\\u8fc7\\u5176\\u4ed6\\u6570\\u5b66\\u5355\\u4f4d\\u6765\\u6307\\u5b9a\\u3002
\\u4f8b\\u5982\\uff0c\\u5b9a\\u4e49\\u4e00\\u4e2a\\u7f51\\u9875\\u5b57\\u4f53\\u5927\\u5c0f\\u4e3a12\\u50cf\\u7d20\\u3001\\u52a0\\u7c97\\uff0c\\u6bb5\\u843d\\u9996\\u884c\\u7f29\\u8fdb2\\u5b57\\u7b26\\uff0c\\u5219\\u53ef\\u4ee5\\u8bbe\\u7f6e\\u6837\\u5f0f\\u5982\\u4e0b\\uff1a\\u65e0\\u6807\\u9898\\u6587\\u6863\\u5c42\\u53e0\\u6837\\u5f0f\\u8868\\u662f\\u4e00\\u79cd\\u7528\\u6765\\u8868\\u73b0HTML\\uff08\\u6807\\u51c6\\u901a\\u7528\\u6807\\u8bb0\\u8bed\\u8a00\\u7684\\u4e00\\u4e2a\\u5e94\\u7528\\uff09\\u6216XML\\uff08\\u6807\\u51c6\\u901a\\u7528\\u6807\\u8bb0\\u8bed\\u8a00\\u7684\\u4e00\\u4e2a\\u5b50\\u96c6\\uff09\\u7b49\\u6587\\u4ef6\\u6837\\u5f0f\\u7684\\u8ba1\\u7b97\\u673a\\u8bed\\u8a00\\u3002
CSS\\u76ee\\u524d\\u6700\\u65b0\\u7248\\u672c\\u4e3aCSS3\\uff0c\\u662f\\u80fd\\u591f\\u771f\\u6b63\\u505a\\u5230\\u7f51\\u9875\\u8868\\u73b0\\u4e0e\\u5185\\u5bb9\\u5206\\u79bb\\u7684\\u4e00\\u79cd\\u6837\\u5f0f\\u8bbe\\u8ba1\\u8bed\\u8a00\\u3002\\u76f8\\u5bf9\\u4e8e\\u4f20\\u7edfHTML\\u7684\\u8868\\u73b0\\u800c\\u8a00\\uff0cCSS\\u80fd\\u591f\\u5bf9\\u7f51\\u9875\\u4e2d\\u7684\\u5bf9\\u8c61\\u7684\\u4f4d\\u7f6e\\u6392\\u7248\\u8fdb\\u884c\\u50cf\\u7d20\\u7ea7\\u7684\\u7cbe\\u786e\\u63a7\\u5236\\uff0c\\u652f\\u6301\\u51e0\\u4e4e\\u6240\\u6709\\u7684\\u5b57\\u4f53\\u5b57\\u53f7\\u6837\\u5f0f\\uff0c\\u62e5\\u6709\\u5bf9\\u7f51\\u9875\\u5bf9\\u8c61\\u548c\\u6a21\\u578b\\u6837\\u5f0f\\u7f16\\u8f91\\u7684\\u80fd\\u529b\\uff0c\\u5e76\\u80fd\\u591f\\u8fdb\\u884c\\u521d\\u6b65\\u4ea4\\u4e92\\u8bbe\\u8ba1\\uff0c\\u662f\\u76ee\\u524d\\u57fa\\u4e8e\\u6587\\u672c\\u5c55\\u793a\\u6700\\u4f18\\u79c0\\u7684\\u8868\\u73b0\\u8bbe\\u8ba1\\u8bed\\u8a00\\u3002CSS\\u80fd\\u591f\\u6839\\u636e\\u4e0d\\u540c\\u4f7f\\u7528\\u8005\\u7684\\u7406\\u89e3\\u80fd\\u529b\\uff0c\\u7b80\\u5316\\u6216\\u8005\\u4f18\\u5316\\u5199\\u6cd5\\uff0c\\u9488\\u5bf9\\u5404\\u7c7b\\u4eba\\u7fa4\\uff0c\\u6709\\u8f83\\u5f3a\\u7684\\u6613\\u8bfb\\u6027\\u3002
\\u6d4f\\u89c8\\u5668\\u901a\\u8fc7\\u89e3\\u6790\\u5c5e\\u6027\\u5305\\u542b\\u7684\\u5185\\u5bb9\\uff0c\\u5c06CSS\\u6837\\u5f0f\\u5e94\\u7528\\u5230\\u9875\\u9762\\u4e0a\\uff0c\\u5982\\u56fe2\\u6240\\u793a\\u3002\\u591a\\u4e2a\\u6837\\u5f0f\\u53ef\\u4ee5\\u5e76\\u5217\\u5728\\u4e00\\u8d77\\u5199\\uff0c\\u4e0d\\u9700\\u8981\\u8003\\u8651\\u5982\\u4f55\\u8fdb\\u884c\\u5206\\u9694\\u3002\\u4f8b\\u5982\\uff0c\\u5b9a\\u4e49\\u4e00\\u4e2a\\u6bb5\\u843d\\u6587\\u672c\\u7684\\u80cc\\u666f\\u8272\\u4e3a\\u7d2b\\u8272\\uff0c\\u5219\\u53ef\\u4ee5\\u5728\\u4e0a\\u9762\\u6837\\u5f0f\\u7684\\u57fa\\u7840\\u4e0a\\u8fdb\\u884c\\u589e\\u52a0\\u6837\\u5f0f\\uff1a
Body{font-size:12px;font-weight:bold;text-indent:2em;}p{backgroundcolor:#FF00FF;}\\u7531\\u4e8eCSS\\u8bed\\u8a00\\u81ea\\u52a8\\u5ffd\\u7565\\u7a7a\\u683c\\uff08\\u9664\\u4e86\\u9009\\u62e9\\u5668\\u5185\\u90e8\\u7684\\u7a7a\\u683c\\uff09\\uff0c\\u56e0\\u6b64\\u53ef\\u4ee5\\u5229\\u7528\\u7a7a\\u683c\\u548c\\u6362\\u884c\\u7b26\\u6765\\u7f8e\\u5316CSS\\u6837\\u5f0f\\u6e90\\u4ee3\\u7801\\uff0c\\u4e0a\\u9762\\u7684\\u4ee3\\u7801\\u53ef\\u4ee5\\u8fdb\\u884c\\u5982\\u4e0b\\u7f8e\\u5316\\uff1a
Body{font-size:12px;font-weight:bold;text-indent:2em;}p{background-color:#FF00FF;}\\u7ecf\\u8fc7\\u7f8e\\u5316\\u7684CSS\\u6e90\\u4ee3\\u7801\\u770b\\u4e0a\\u53bb\\u4e00\\u76ee\\u4e86\\u7136\\uff0c\\u65e2\\u65b9\\u4fbf\\u9605\\u8bfb\\uff0c\\u4e5f\\u4fbf\\u4e8e\\u4fee\\u6539\\u3002
CSS\\u6e90\\u4ee3\\u7801\\u6709\\u65f6\\u5019\\u9700\\u8981\\u901a\\u8fc7\\u4e00\\u4e9b\\u6ce8\\u91ca\\u6765\\u6807\\u6ce8\\uff0cCSS\\u4ee3\\u7801\\u8868\\u793a\\u4ec0\\u4e48\\u610f\\u601d\\u3002\\u5728HTML\\u4e2d\\u6ce8\\u91ca\\u6807\\u8bb0\\u4f7f\\u7528\\u201c\\u201d\\uff0cCSS\\u4e2d\\u6ce8\\u91ca\\u6807\\u8bb0\\u4f7f\\u7528\\u201c*\\u6ce8\\u91ca\\u5185\\u5bb9*\\u201d\\u3002\\u4f8b\\u5982\\uff0c\\u53ef\\u4ee5\\u5bf9\\u4e0a\\u9762\\u7684\\u4ee3\\u7801\\u8fdb\\u884c\\u6ce8\\u91ca\\uff1a
Body{*\\u9875\\u9762\\u7684\\u57fa\\u672c\\u5c5e\\u6027*font-size:12px;font-weight:bold;text-indent:2em;}*\\u8bbe\\u7f6e\\u6bb5\\u843d\\u7684\\u80cc\\u666f\\u989c\\u8272\\u4e3a\\u7d2b\\u8272*p{background-color:#FF00FF;}\\u6dfb\\u52a0CSS\\u7684\\u65b9\\u6cd5
\\u5728HTML\\u4e2d\\u6dfb\\u52a0CSS\\u7684\\u65b9\\u6cd5\\u4e3b\\u8981\\u67094\\u79cd\\uff0c\\u5206\\u522b\\u4e3a\\u94fe\\u63a5\\u5185\\u5d4c\\u6837\\u5f0f\\u3001\\u5185\\u90e8\\u6837\\u5f0f\\u8868\\u3001\\u94fe\\u63a5\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u548c\\u5bfc\\u5165\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u3002
1\\uff0e\\u5185\\u5d4c\\u6837\\u5f0f\\u8868
\\u5185\\u5d4c\\u6837\\u5f0f\\u8868\\u662f\\u6df7\\u5408\\u5728HTML\\u6807\\u8bb0\\u91cc\\u4f7f\\u7528\\u7684\\uff0c\\u8be5\\u65b9\\u6cd5\\u53ef\\u4ee5\\u5f88\\u7b80\\u5355\\u5730\\u5bf9\\u67d0\\u4e2a\\u5143\\u7d20\\u5355\\u72ec\\u5b9a\\u4e49\\u6837\\u5f0f\\uff0c\\u4e3b\\u8981\\u662f\\u5728body\\u5185\\u5b9e\\u73b0\\u3002
\\u5185\\u5d4c\\u6837\\u5f0f\\u8868\\u7684\\u4f7f\\u7528\\u662f\\u76f4\\u63a5\\u5728HTML\\u6807\\u8bb0\\u91cc\\u52a0\\u5165style\\u53c2\\u6570\\uff0c\\u800cstyle\\u53c2\\u6570\\u7684\\u5185\\u5bb9\\u5c31\\u662fCSS\\u7684\\u5c5e\\u6027\\u548c\\u503c\\uff0c\\u5728style\\u5f15\\u53f7\\u91cc\\u7684\\u5185\\u5bb9\\u76f8\\u5f53\\u4e8e\\u5728\\u6837\\u5f0f\\u8868\\u7684\\u5927\\u62ec\\u53f7\\u91cc\\u7684\\u5185\\u5bb9\\uff0c\\u5176\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a
\\u5b57\\u4f53\\u5927\\u5c0f\\u4e3a12px\\uff0c\\u989c\\u8272\\u4e3a\\u7ea2\\u8272\\u5f53\\u6d4f\\u89c8\\u5668\\u89e3\\u6790\\u5230\\u8fd9\\u4e9b\\u6807\\u7b7e\\u65f6\\uff0c\\u68c0\\u6d4b\\u5230\\u8be5\\u6807\\u7b7e\\u4e2d\\u5305\\u542bstyle\\u5c5e\\u6027\\uff0c\\u5c31\\u4f1a\\u8c03\\u7528CSS\\u5f15\\u64ce\\u6765\\u89e3\\u6790style\\u5c5e\\u6027\\uff0c\\u5e76\\u628a\\u6548\\u679c\\u5c55\\u73b0\\u5230\\u9875\\u9762\\u4e0a\\u3002
\\u8be5\\u65b9\\u6cd5\\u4e0e\\u4f20\\u7edf\\u7f51\\u9875\\u8bbe\\u8ba1\\u5728\\u6807\\u7b7e\\u5185\\u589e\\u52a0\\u5c5e\\u6027\\u7684\\u8bbe\\u8ba1\\u65b9\\u6cd5\\u76f8\\u540c\\uff0c\\u8be5\\u65b9\\u6cd5\\u5b9e\\u9645\\u5e76\\u6ca1\\u6709\\u6ee1\\u8db3W3C\\u63d0\\u51fa\\u7684\\u5c06HTML\\u7ed3\\u6784\\u4e0eCSS\\u8868\\u73b0\\u5265\\u79bb\\u6765\\u8fdb\\u884c\\u8bbe\\u8ba1\\uff0c\\u56e0\\u6b64\\u5728\\u7f51\\u9875\\u8bbe\\u8ba1\\u4e2d\\u4e0d\\u5efa\\u8bae\\u4f7f\\u7528\\u8be5\\u65b9\\u6cd5\\uff0c\\u9664\\u975e\\u4e3a\\u9875\\u9762\\u4e2d\\u4e2a\\u522b\\u5143\\u7d20\\u8bbe\\u7f6e\\u67d0\\u4e2a\\u7279\\u5b9a\\u6837\\u5f0f\\u6548\\u679c\\u800c\\u5355\\u72ec\\u5b9a\\u4e49\\u3002
2\\uff0e\\u5185\\u90e8\\u6837\\u5f0f\\u8868
\\u5185\\u90e8\\u6837\\u5f0f\\u8868\\u4e0e\\u5185\\u5d4c\\u6837\\u5f0f\\u8868\\u7684\\u76f8\\u4f3c\\u4e4b\\u5904\\u5728\\u4e8e\\uff0c\\u90fd\\u5c06CSS\\u6837\\u5f0f\\u7f16\\u5199\\u5230\\u9875\\u9762\\u4e2d\\u3002\\u800c\\u4e0d\\u540c\\u7684\\u662f\\uff0c\\u5185\\u90e8\\u6837\\u5f0f\\u8868\\u53ef\\u4ee5\\u7edf\\u4e00\\u653e\\u7f6e\\u5728\\u4e00\\u4e2a\\u56fa\\u5b9a\\u7684\\u4f4d\\u7f6e\\uff0c\\u5176\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a
\\u5185\\u90e8\\u6837\\u5f0f\\u8868\\u901a\\u5e38\\u4f4d\\u4e8e\\u7f51\\u9875\\u7684\\u5934\\u90e8\\u533a\\u57df\\uff0c\\u76ee\\u7684\\u662f\\u8ba9CSS\\u6e90\\u4ee3\\u7801\\u5728\\u9875\\u9762\\u52a0\\u8f7d\\u524d\\u5148\\u88ab\\u89e3\\u6790\\u6267\\u884c\\uff0c\\u8fd9\\u6837\\u53ef\\u4ee5\\u907f\\u514d\\u5f53\\u7f51\\u9875\\u52a0\\u8f7d\\u5b8c\\u6210\\u540e\\uff0c\\u6ca1\\u6709CSS\\u6837\\u5f0f\\u6e32\\u67d3\\u800c\\u4f7f\\u7684\\u9875\\u9762\\u4fe1\\u606f\\u65e0\\u6cd5\\u6b63\\u5e38\\u663e\\u793a\\u30023\\uff0e\\u94fe\\u63a5\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u94fe\\u63a5\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u662f\\u5728CSS\\u4e2d\\u6700\\u5e38\\u7528\\u7684\\u4e00\\u79cd\\u5f62\\u5f0f\\uff0c\\u5b83\\u5c06CSS\\u6837\\u5f0f\\u4ee3\\u7801\\u5355\\u72ec\\u7f16\\u5199\\u5230\\u4e00\\u4e2a\\u72ec\\u7acb\\u7684\\u6587\\u4ef6\\u4e2d\\uff0c\\u7531\\u7f51\\u9875\\u8fdb\\u884c\\u8c03\\u7528\\uff0c\\u591a\\u4e2a\\u7f51\\u9875\\u53ef\\u4ee5\\u540c\\u65f6\\u4f7f\\u7528\\u540c\\u4e00\\u4e2a\\u6837\\u5f0f\\u6587\\u4ef6\\uff0c\\u5176\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a
\\u5176\\u4e2d\\uff0chref\\u5c5e\\u6027\\u8bbe\\u7f6e\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u6587\\u4ef6\\u7684\\u5730\\u5740\\uff0c\\u8be5\\u5730\\u5740\\u53ef\\u4ee5\\u662f\\u76f8\\u5bf9\\u5730\\u5740\\uff0c\\u4e5f\\u53ef\\u4ee5\\u662f\\u7edd\\u5bf9\\u5730\\u5740\\uff1brel\\u5c5e\\u6027\\u5b9a\\u4e49\\u8be5\\u6807\\u7b7e\\u5173\\u8054\\u7684\\u662f\\u6837\\u5f0f\\u8868\\u6807\\u7b7e\\uff1btype\\u5c5e\\u6027\\u5b9a\\u4e49\\u6587\\u6863\\u7684\\u7c7b\\u578b\\uff0c\\u5373CSS\\u6587\\u672c\\u6587\\u4ef6\\u3002
\\u7f51\\u7ad9\\u901a\\u5e38\\u91c7\\u7528\\u94fe\\u63a5\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u6765\\u8bbe\\u8ba1\\u7f51\\u7ad9\\u7684\\u8868\\u73b0\\u5c42\\uff0c\\u80fd\\u591f\\u5b9e\\u73b0CSS\\u6837\\u5f0f\\u4e0eHTML\\u7ed3\\u6784\\u7684\\u5206\\u79bb\\uff0c\\u8fd9\\u79cd\\u5206\\u79bb\\u539f\\u5219\\u662fW3C\\u6240\\u63d0\\u5021\\u7684\\uff0c\\u56e0\\u4e3a\\u8fd9\\u6837\\u53ef\\u4ee5\\u9ad8\\u6548\\u5730\\u7ba1\\u7406\\u6587\\u6863\\u7ed3\\u6784\\u548c\\u6837\\u5f0f\\u8868\\u6587\\u4ef6\\uff0c\\u5b9e\\u73b0\\u4ee3\\u7801\\u7684\\u4f18\\u5316\\u548c\\u91cd\\u7528\\u3002
4\\uff0e\\u5bfc\\u5165\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u5bfc\\u5165\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u662f\\u6307\\u5728\\u5185\\u90e8\\u6837\\u5f0f\\u8868\\u7684\\u6807\\u7b7e\\u5185\\u4f7f\\u7528@import\\u5173\\u952e\\u5b57\\u5bfc\\u5165\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u6587\\u4ef6\\uff0c\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a
\\u5728@import\\u5173\\u952e\\u5b57\\u540e\\u9762\\uff0c\\u4f7f\\u7528url()\\u51fd\\u6570\\u6765\\u628a\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u6587\\u4ef6\\u5bfc\\u5165\\u3002\\u6ce8\\u610f\\u4f7f\\u7528\\u65f6\\uff0c\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u7684\\u8def\\u5f84\\u3001\\u65b9\\u6cd5\\u548c\\u94fe\\u63a5\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u7684\\u65b9\\u6cd5\\u7c7b\\u4f3c\\uff0c\\u4f46\\u5bfc\\u5165\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u8f93\\u5165\\u65b9\\u5f0f\\u66f4\\u6709\\u4f18\\u52bf\\u3002\\u5b9e\\u8d28\\u4e0a\\u5b83\\u662f\\u76f8\\u5f53\\u4e8e\\u5b58\\u5728\\u5185\\u90e8\\u6837\\u5f0f\\u8868\\u4e2d\\u7684\\u3002
7.2CSS\\u57fa\\u672c\\u9009\\u62e9\\u5668
\\u9009\\u62e9\\u5668\\u51b3\\u5b9a\\u6837\\u5f0f\\u89c4\\u5219\\u4f5c\\u7528\\u4e8e\\u54ea\\u4e9b\\u5143\\u7d20\\u3002\\u4f8b\\u5982\\uff0c\\u5982\\u679c\\u8981\\u5bf9table\\u5143\\u7d20\\u6dfb\\u52a0\\u8fb9\\u6846\\u4e3a\\u5b9e\\u7ebf\\u3001\\u7ebf\\u5bbd1\\u50cf\\u7d20\\u3001\\u84dd\\u8272\\u7684\\u8fb9\\u6846\\uff0c\\u5219\\u9700\\u8981\\u521b\\u5efa\\u4e00\\u4e2a\\u53ea\\u8bc6\\u522btable\\u5143\\u7d20\\u800c\\u4e0d\\u5f71\\u54cd\\u5176\\u4ed6\\u5143\\u7d20\\u7684\\u9009\\u62e9\\u5668\\u3002\\u5982\\u679c\\u8981\\u5bf9\\u6bcf\\u4e2a\\u533a\\u57df\\u4e2d\\u7684table\\u8bbe\\u7f6e\\u7279\\u6b8a\\u683c\\u5f0f\\uff0c\\u5c31\\u9700\\u8981\\u521b\\u5efa\\u4e00\\u4e2a\\u7a0d\\u5fae\\u590d\\u6742\\u4e00\\u4e9b\\u7684\\u9009\\u62e9\\u5668\\uff0c\\u5b83\\u53ea\\u8bc6\\u522b\\u6307\\u5b9a\\u533a\\u57df\\u4e2d\\u7684table\\u5143\\u7d20\\u3002
7.2.1\\u6807\\u7b7e\\u9009\\u62e9\\u5668
HTML\\u6587\\u6863\\u90fd\\u662f\\u7531\\u5f88\\u591a\\u6807\\u7b7e\\u901a\\u8fc7\\u4e00\\u5b9a\\u7684\\u89c4\\u5219\\u7f16\\u7ec7\\u800c\\u6210\\u7684\\uff0c\\u6211\\u4eec\\u4e5f\\u53ef\\u4ee5\\u628a\\u8fd9\\u4e9b\\u6807\\u7b7e\\u79f0\\u4e3a\\u7f51\\u9875\\u5143\\u7d20\\u3002\\u6807\\u7b7e\\u9009\\u62e9\\u5668\\u4f7f\\u7528\\u7f51\\u9875\\u5143\\u7d20\\u5b9a\\u4e49\\u6837\\u5f0f\\u3002
\\u4f8b\\u5982\\uff0c\\u58f0\\u660ep\\u5143\\u7d20\\u9996\\u884c\\u7f29\\u8fdb2\\u5b57\\u7b26\\uff0c\\u5b57\\u4f53\\u989c\\u8272\\u4e3a\\u7ea2\\u8272\\uff1b\\u6240\\u6709h1\\u5b57\\u53f7\\u4e3a15px\\u3001\\u52a0\\u7c97\\uff0c\\u4ee3\\u7801\\u5982\\u4e0b\\uff1a
\\u5176\\u4e2d\\uff0cp\\u548ch1\\u90fd\\u662fHTML\\u7279\\u5b9a\\u7684\\u6807\\u7b7e\\u540d\\u79f0\\uff0c\\u76f4\\u63a5\\u5f15\\u7528\\u5373\\u53ef\\u3002
\\u6ce8\\u610f\\uff1a*\\u53f7\\u4e3a\\u901a\\u914d\\u7b26\\u5339\\u914d\\u9875\\u9762\\u4e2d\\u7684\\u6240\\u6709\\u5143\\u7d20\\u540d\\u79f0\\u3002\\u4e0a\\u9762\\u7684\\u4ee3\\u7801\\u8bbe\\u7f6e\\u6bcf\\u4e2a\\u5143\\u7d20\\u7684\\u5185\\u5916\\u8fb9\\u8ddd\\u4e3a0px\\u3002\\u7531\\u4e8e\\u6bcf\\u4e2a\\u5143\\u7d20\\u90fd\\u6709\\u7cfb\\u7edf\\u9ed8\\u8ba4\\u7684\\u5185\\u5916\\u8fb9\\u8ddd\\u503c\\uff0c\\u4e14\\u5728\\u4e0d\\u540c\\u7684\\u6d4f\\u89c8\\u5668\\u4e2d\\u663e\\u793a\\u7684\\u6548\\u679c\\u4e5f\\u4e0d\\u540c\\uff0c\\u56e0\\u6b64\\u5728\\u8bbe\\u7f6e\\u7f51\\u9875\\u6837\\u5f0f\\u4e4b\\u521d\\u4f7f\\u7528\\u901a\\u914d\\u7b26*\\u5c06\\u6240\\u6709\\u5143\\u7d20\\u9ed8\\u8ba4\\u7684\\u5185\\u5916\\u8fb9\\u8ddd\\u53bb\\u6389\\u662f\\u5e38\\u89c1\\u505a\\u6cd5\\u3002
7.2.2\\u7c7b\\u522b\\u9009\\u62e9\\u5668
\\u4f7f\\u7528\\u6807\\u7b7e\\u9009\\u62e9\\u7b26\\u53ef\\u4ee5\\u65b9\\u4fbf\\u5730\\u5bf9\\u6807\\u7b7e\\u8fdb\\u884c\\u6837\\u5f0f\\u8bbe\\u7f6e\\uff0c\\u540c\\u65f6\\u6807\\u7b7e\\u9009\\u62e9\\u7b26\\u4e5f\\u5b58\\u5728\\u8f83\\u591a\\u95ee\\u9898\\u3002\\u56e0\\u4e3a\\u6807\\u7b7e\\u9009\\u62e9\\u7b26\\u5bf9\\u6807\\u7b7e\\u6240\\u505a\\u7684\\u5b9a\\u4e49\\u4e0d\\u5355\\u5355\\u5f71\\u54cd\\u6240\\u9009\\u62e9\\u7684\\u6807\\u7b7e\\u5143\\u7d20\\uff0c\\u800c\\u662f\\u5bf9\\u6574\\u4e2a\\u9875\\u9762\\u4e2d\\u6240\\u6709\\u76f8\\u540c\\u6807\\u7b7e\\u90fd\\u4f1a\\u8d77\\u4f5c\\u7528\\u3002\\u5982\\u679c\\u9700\\u8981\\u5bf9\\u540c\\u4e00\\u4e2a\\u6807\\u7b7e\\u5728\\u7f51\\u9875\\u4e2d\\u7684\\u4e0d\\u540c\\u4f4d\\u7f6e\\u663e\\u793a\\u4e0d\\u540c\\u7684\\u6837\\u5f0f\\uff0c\\u4f7f\\u7528\\u8fd9\\u79cd\\u65b9\\u6cd5\\u5b9a\\u4e49\\u7684\\u6837\\u5f0f\\u5c31\\u5b58\\u5728\\u5f88\\u591a\\u4e0d\\u8db3\\u3002\\u5bf9\\u4e8e\\u8fd9\\u4e2a\\u95ee\\u9898\\u53ef\\u4ee5\\u4f7f\\u7528\\u7c7b\\u9009\\u62e9\\u5668\\u6765\\u89e3\\u51b3\\u3002
\\u7c7b\\uff08Class\\uff09\\u9009\\u62e9\\u7b26\\u5c31\\u662f\\u4e3a\\u4e86\\u4e0d\\u540c\\u5143\\u7d20\\u62e5\\u6709\\u76f8\\u540c\\u7684\\u663e\\u793a\\u6837\\u5f0f\\u800c\\u5b9a\\u4e49\\u7684\\u3002\\u4f8b\\u5982\\uff0c\\u5728\\u4e0b\\u9762\\u8fd9\\u4e2a\\u9875\\u9762\\u4e2d\\u5305\\u542b\\u4e09\\u6bb5\\u6587\\u672c\\uff0c\\u901a\\u8fc7\\u6807\\u7b7e\\u9009\\u62e9\\u5668\\u5c06\\u6240\\u6709\\u6bb5\\u843d\\u6587\\u672c\\u5927\\u5c0f\\u5b9a\\u4e49\\u4e3a13px\\uff0c\\u9996\\u884c\\u7f29\\u8fdb2\\u5b57\\u7b26\\uff0c\\u5b57\\u4f53\\u989c\\u8272\\u4e3a\\u84dd\\u8272\\u3002
\\u5c42\\u53e0\\u6837\\u5f0f\\u8868\\u662f\\u4e00\\u79cd\\u7528\\u6765\\u8868\\u73b0HTML\\uff08\\u6807\\u51c6\\u901a\\u7528\\u6807\\u8bb0\\u8bed\\u8a00\\u7684\\u4e00\\u4e2a\\u5e94\\u7528\\uff09\\u6216XML\\uff08\\u6807\\u51c6\\u901a\\u7528\\u6807\\u8bb0\\u8bed\\u8a00\\u7684\\u4e00\\u4e2a\\u5b50\\u96c6\\uff09\\u7b49\\u6587\\u4ef6\\u6837\\u5f0f\\u7684\\u8ba1\\u7b97\\u673a\\u8bed\\u8a00\\u3002
CSS\\u76ee\\u524d\\u6700\\u65b0\\u7248\\u672c\\u4e3aCSS3\\uff0c\\u662f\\u80fd\\u591f\\u771f\\u6b63\\u505a\\u5230\\u7f51\\u9875\\u8868\\u73b0\\u4e0e\\u5185\\u5bb9\\u5206\\u79bb\\u7684\\u4e00\\u79cd\\u6837\\u5f0f\\u8bbe\\u8ba1\\u8bed\\u8a00\\u3002\\u76f8\\u5bf9\\u4e8e\\u4f20\\u7edfHTML\\u7684\\u8868\\u73b0\\u800c\\u8a00\\uff0cCSS\\u80fd\\u591f\\u5bf9\\u7f51\\u9875\\u4e2d\\u7684\\u5bf9\\u8c61\\u7684\\u4f4d\\u7f6e\\u6392\\u7248\\u8fdb\\u884c\\u50cf\\u7d20\\u7ea7\\u7684\\u7cbe\\u786e\\u63a7\\u5236\\uff0c\\u652f\\u6301\\u51e0\\u4e4e\\u6240\\u6709\\u7684\\u5b57\\u4f53\\u5b57\\u53f7\\u6837\\u5f0f\\uff0c\\u62e5\\u6709\\u5bf9\\u7f51\\u9875\\u5bf9\\u8c61\\u548c\\u6a21\\u578b\\u6837\\u5f0f\\u7f16\\u8f91\\u7684\\u80fd\\u529b\\uff0c\\u5e76\\u80fd\\u591f\\u8fdb\\u884c\\u521d\\u6b65\\u4ea4\\u4e92\\u8bbe\\u8ba1\\uff0c\\u662f\\u76ee\\u524d\\u57fa\\u4e8e\\u6587\\u672c\\u5c55\\u793a\\u6700\\u4f18\\u79c0\\u7684\\u8868\\u73b0\\u8bbe\\u8ba1\\u8bed\\u8a00\\u3002
CSS\\u80fd\\u591f\\u6839\\u636e\\u4e0d\\u540c\\u4f7f\\u7528\\u8005\\u7684\\u7406\\u89e3\\u80fd\\u529b\\uff0c\\u7b80\\u5316\\u6216\\u8005\\u4f18\\u5316\\u5199\\u6cd5\\uff0c\\u9488\\u5bf9\\u5404\\u7c7b\\u4eba\\u7fa4\\uff0c\\u6709\\u8f83\\u5f3a\\u7684\\u6613\\u8bfb\\u6027\\u3002
\\u5982\\u679c\\u73b0\\u5728\\u8981\\u6c42\\u628a\\u7b2c\\u4e00\\u6bb5\\u5b57\\u4f53\\u5927\\u5c0f\\u6539\\u4e3a20px\\uff0c\\u5b57\\u4f53\\u52a0\\u7c97\\uff0c\\u8fd9\\u65f6\\u5c31\\u53ef\\u4ee5\\u4f7f\\u7528\\u7c7b\\u9009\\u62e9\\u7b26\\u3002\\u5b9a\\u4e49\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a
.fontbold{font-size:20px;font-weight:bold;}\\u5c42\\u53e0\\u6837\\u5f0f\\u8868\\u662f\\u4e00\\u79cd\\u7528\\u6765\\u8868\\u73b0HTML\\uff08\\u6807\\u51c6\\u901a\\u7528\\u6807\\u8bb0\\u8bed\\u8a00\\u7684\\u4e00\\u4e2a\\u5e94\\u7528\\uff09\\u6216XML\\uff08\\u6807\\u51c6\\u901a\\u7528\\u6807\\u8bb0\\u8bed\\u8a00\\u7684\\u4e00\\u4e2a\\u5b50\\u96c6\\uff09\\u7b49\\u6587\\u4ef6\\u6837\\u5f0f\\u7684\\u8ba1\\u7b97\\u673a\\u8bed\\u8a00\\u3002
CSS\\u662f\\u80fd\\u591f\\u771f\\u6b63\\u505a\\u5230\\u7f51\\u9875\\u8868\\u73b0\\u4e0e\\u5185\\u5bb9\\u5206\\u79bb\\u7684\\u4e00\\u79cd\\u6837\\u5f0f\\u8bbe\\u8ba1\\u8bed\\u8a00\\u3002\\u76f8\\u5bf9\\u4e8e\\u4f20\\u7edfHTML\\u7684\\u8868\\u73b0\\u800c\\u8a00\\uff0cCSS\\u80fd\\u591f\\u5bf9\\u7f51\\u9875\\u4e2d\\u7684\\u5bf9\\u8c61\\u7684\\u4f4d\\u7f6e\\u6392\\u7248\\u8fdb\\u884c\\u50cf\\u7d20\\u7ea7\\u7684\\u7cbe\\u786e\\u63a7\\u5236\\uff0c\\u652f\\u6301\\u51e0\\u4e4e\\u6240\\u6709\\u7684\\u5b57\\u4f53\\u5b57\\u53f7\\u6837\\u5f0f\\uff0c\\u62e5\\u6709\\u5bf9\\u7f51\\u9875\\u5bf9\\u8c61\\u548c\\u6a21\\u578b\\u6837\\u5f0f\\u7f16\\u8f91\\u7684\\u80fd\\u529b\\uff0c\\u5e76\\u80fd\\u591f\\u8fdb\\u884c\\u521d\\u6b65\\u4ea4\\u4e92\\u8bbe\\u8ba1\\uff0c\\u662f\\u76ee\\u524d\\u57fa\\u4e8e\\u6587\\u672c\\u5c55\\u793a\\u6700\\u4f18\\u79c0\\u7684\\u8868\\u73b0\\u8bbe\\u8ba1\\u8bed\\u8a00\\u3002
CSS\\u80fd\\u591f\\u6839\\u636e\\u4e0d\\u540c\\u4f7f\\u7528\\u8005\\u7684\\u7406\\u89e3\\u80fd\\u529b\\uff0c\\u7b80\\u5316\\u6216\\u8005\\u4f18\\u5316\\u5199\\u6cd5\\uff0c\\u9488\\u5bf9\\u5404\\u7c7b\\u4eba\\u7fa4\\uff0c\\u6709\\u8f83\\u5f3a\\u7684\\u6613\\u8bfb\\u6027\\u3002
\\u5728\\u6d4f\\u89c8\\u5668\\u4e2d\\u9884\\u89c8\\uff0c\\u663e\\u793a\\u6548\\u679c\\u5982\\u56fe3\\u6240\\u793a\\uff0c\\u53ef\\u4ee5\\u770b\\u5230\\u7b2c\\u4e00\\u6bb5\\u5b57\\u4f53\\u88ab\\u5355\\u72ec\\u653e\\u5927\\u5e76\\u52a0\\u7c97\\u3002\\u7c7b\\u9009\\u62e9\\u7b26\\u53ef\\u4ee5\\u7cbe\\u786e\\u5730\\u63a7\\u5236\\u9875\\u9762\\u4e2d\\u67d0\\u4e2a\\u5177\\u4f53\\u5143\\u7d20\\u5bf9\\u8c61\\uff0c\\u800c\\u4e0d\\u7ba1\\u8fd9\\u4e2a\\u5bf9\\u8c61\\u662f\\u5c5e\\u4e8e\\u4ec0\\u4e48\\u7c7b\\u578b\\u7684\\u6807\\u7b7e\\uff0c\\u540c\\u65f6\\u4e00\\u4e2a\\u7c7b\\u6837\\u5f0f\\u53ef\\u4ee5\\u5728\\u591a\\u4e2a\\u6807\\u7b7e\\u4e2d\\u88ab\\u5f15\\u7528\\u3002
\\u5728\\u81ea\\u5b9a\\u4e49\\u7c7b\\u540d\\u65f6\\uff0c\\u53ea\\u80fd\\u591f\\u4f7f\\u7528\\u5b57\\u6bcd\\u3001\\u6570\\u5b57\\u3001\\u4e0b\\u5212\\u7ebf\\uff08_\\uff09\\u548c\\u8fde\\u63a5\\u7b26\\u53f7\\uff08-\\uff09\\uff0c\\u7c7b\\u540d\\u5fc5\\u987b\\u4ee5\\u5b57\\u6bcd\\u5f00\\u5934\\uff0c\\u5426\\u5219\\u65e0\\u6548\\u3002\\u53e6\\u5916\\uff0c\\u7c7b\\u540d\\u662f\\u533a\\u5206\\u5927\\u5c0f\\u5199\\u7684\\uff0c\\u6240\\u4ee5\\u7c7bfontbold\\u548c\\u7c7bFontbold\\u662f\\u5b8c\\u5168\\u4e0d\\u540c\\u7684\\u4e24\\u4e2a\\u7c7b\\u3002
7.2.3ID\\u9009\\u62e9\\u5668
ID\\u662f\\u82f1\\u6587Identity\\u7684\\u7f29\\u5199\\uff0c\\u5b83\\u8868\\u793a\\u8eab\\u4efd\\u6807\\u8bc6\\u53f7\\u7801\\uff0c\\u5728\\u7f51\\u7edc\\u4e0a\\u4e00\\u822c\\u6307\\u7528\\u6237\\u8d26\\u53f7\\uff0c\\u4f46\\u662f\\u5728Web\\u8bbe\\u8ba1\\u4e2d\\u4e00\\u822c\\u6307\\u6807\\u7b7e\\u5728HTML\\u6587\\u6863\\u4e2d\\u7684\\u552f\\u4e00\\u7f16\\u53f7\\u3002\\u4ece\\u8fd9\\u70b9\\u6765\\u770b\\uff0cID\\u9009\\u62e9\\u5668\\u53ea\\u80fd\\u591f\\u5728HTML\\u9875\\u9762\\u4e2d\\u7528\\u4e00\\u6b21\\uff0c\\u5b83\\u662f\\u4e0e\\u6807\\u7b7e\\u9009\\u62e9\\u7b26\\u548c\\u7c7b\\u9009\\u62e9\\u7b26\\u4f5c\\u7528\\u8303\\u56f4\\u76f8\\u53cd\\u7684\\u4e00\\u4e2a\\u9009\\u62e9\\u7b26\\u3002ID\\u9009\\u62e9\\u7b26\\u901a\\u5e38\\u88ab\\u6765\\u5b9a\\u4e49HTML\\u6846\\u67b6\\u7ed3\\u6784\\u7684\\u5e03\\u5c40\\u6548\\u679c\\uff0c\\u56e0\\u4e3aHTML\\u6846\\u67b6\\u5143\\u7d20\\u7684ID\\u503c\\u90fd\\u662f\\u552f\\u4e00\\u7684\\u3002
ID\\u9009\\u62e9\\u7b26\\u5fc5\\u987b\\u4ee5\\u4e95\\u53f7\\uff08#\\uff09\\u524d\\u7f00\\u5f00\\u59cb\\uff0c\\u7136\\u540e\\u662f\\u4e00\\u4e2a\\u81ea\\u5b9a\\u4e49\\u7684ID\\u540d\\uff0c\\u5b9a\\u4e49\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a
#box{width:600px;height:auto;}\\u4f8b\\u5982\\uff0c\\u4e0b\\u9762\\u5b9e\\u4f8b\\u5b9a\\u4e49\\u4e00\\u4e2a\\u76d2\\u5b50\\uff0c\\u4e3a\\u8be5\\u76d2\\u5b50\\u6307\\u5b9a\\u5bbd\\u5ea6\\u548c\\u9ad8\\u5ea6\\uff0c\\u5e76\\u8bbe\\u7f6e\\u76d2\\u5b50\\u7684\\u80cc\\u666f\\u989c\\u8272\\u4ee5\\u53ca\\u8fb9\\u6846\\u548c\\u5185\\u8fb9\\u8ddd\\u5927\\u5c0f\\uff0c\\u663e\\u793a\\u6548\\u679c\\u5982\\u56fe4\\u6240\\u793a\\u30027.3\\u590d\\u5408\\u9009\\u62e9\\u5668\\u5982\\u679c\\u4ec5\\u4ec5\\u638c\\u63e1\\u4e86\\u6807\\u7b7e\\u9009\\u62e9\\u7b26\\u3001\\u7c7b\\u9009\\u62e9\\u7b26\\u548cID\\u9009\\u62e9\\u7b26\\u8fd8\\u8fdc\\u8fdc\\u4e0d\\u591f\\uff0c\\u5bf9\\u4e8e\\u7f51\\u9875\\u8bbe\\u8ba1\\u8005\\u6765\\u8bb2\\u8fd8\\u5e94\\u8be5\\u638c\\u63e1\\u9ad8\\u7ea7\\u9009\\u62e9\\u7b26\\u7684\\u4f7f\\u7528\\uff0c\\u5982\\u5b50\\u9009\\u62e9\\u7b26\\u3001\\u76f8\\u90bb\\u9009\\u62e9\\u7b26\\u548c\\u5c5e\\u6027\\u9009\\u62e9\\u7b26\\u3002
\\u5229\\u7528\\u6807\\u7b7e\\u9009\\u62e9\\u7b26\\u548c\\u7c7b\\u9009\\u62e9\\u7b26\\u53ef\\u4ee5\\u63a7\\u5236\\u7f51\\u9875\\u4e2d\\u4f17\\u591a\\u5bf9\\u8c61\\u7684\\u6837\\u5f0f\\uff1b\\u800c\\u5229\\u7528ID\\u9009\\u62e9\\u7b26\\u3001\\u5b50\\u9009\\u62e9\\u7b26\\u548c\\u76f8\\u90bb\\u9009\\u62e9\\u7b26\\u53ef\\u4ee5\\u7cbe\\u786e\\u63a7\\u5236\\u9875\\u9762\\u4e2d\\u7684\\u7279\\u5b9a\\u5bf9\\u8c61\\u6837\\u5f0f\\uff1b\\u4f7f\\u7528\\u5c5e\\u6027\\u9009\\u62e9\\u7b26\\u53ef\\u4ee5\\u66f4\\u654f\\u6377\\u3001\\u66f4\\u6a21\\u7cca\\u5730\\u63a7\\u5236\\u9875\\u9762\\u4e2d\\u5305\\u542b\\u4e0d\\u540c\\u5c5e\\u6027\\u7684\\u5bf9\\u8c61\\u6837\\u5f0f\\u3002
7.3.1\\u5b50\\u9009\\u62e9\\u7b26
\\u5b50\\u9009\\u62e9\\u7b26\\u5c31\\u662f\\u6307\\u5b9a\\u7236\\u5143\\u7d20\\u6240\\u5305\\u542b\\u7684\\u5b50\\u5143\\u7d20\\u7684\\u6837\\u5f0f\\u3002\\u5b50\\u9009\\u62e9\\u7b26\\u4f7f\\u7528\\u5c16\\u89d2\\u53f7\\uff08\\uff09\\u6765\\u8868\\u793a\\uff0c\\u5b9a\\u4e49\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a
divspan{font-size:20px;}\\u5176\\u4e2d\\uff0cdiv\\u4e3aspan\\u5143\\u7d20\\u7684\\u7236\\u5143\\u7d20\\uff0c\\u901a\\u8fc7\\u5b50\\u9009\\u62e9\\u7b26\\u8fde\\u63a5\\u3002
\\u4f8b\\u5982\\uff0c\\u5b9a\\u4e49span\\u5143\\u7d20\\u7684\\u5b57\\u4f53\\u5927\\u5c0f\\u4e3a10px\\uff0c\\u518d\\u5229\\u7528\\u5b50\\u9009\\u62e9\\u7b26\\u6765\\u5b9a\\u4e49\\u6240\\u6709div\\u5143\\u7d20\\u5305\\u542b\\u7684\\u5b50\\u5143\\u7d20span\\u6837\\u5f0f\\u5b57\\u4f53\\u5927\\u5c0f\\u4e3a20px\\uff0c\\u663e\\u793a\\u6548\\u679c\\u5982\\u56fe5\\u6240\\u793a\\u3002
CSS\\u57fa\\u7840\\u5165\\u95e8\\u5c42\\u53e0\\u6837\\u5f0f\\u8868\\u662f\\u4e00\\u79cd\\u7528\\u6765\\u8868\\u73b0HTML\\uff08\\u6807\\u51c6\\u901a\\u7528\\u6807\\u8bb0\\u8bed7.3.2\\u76f8\\u90bb\\u9009\\u62e9\\u5668
\\u76f8\\u90bb\\u9009\\u62e9\\u7b26\\u5c31\\u662f\\u6307\\u5b9a\\u4e00\\u4e2a\\u5143\\u7d20\\u76f8\\u90bb\\u7684\\u4e0b\\u4e00\\u4e2a\\u5143\\u7d20\\u7684\\u6837\\u5f0f\\u3002\\u76f8\\u90bb\\u9009\\u62e9\\u7b26\\u4f7f\\u7528\\u52a0\\u53f7\\uff08+\\uff09\\u6765\\u8868\\u793a\\uff0c\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a
div+span{font-size:20px;}\\u5176\\u4e2d\\uff0cdiv+span\\u8868\\u793adiv\\u5143\\u7d20\\u4e0espan\\u5143\\u7d20\\u76f8\\u90bb\\u3002\\u4f8b\\u5982\\uff0c\\u5229\\u7528\\u76f8\\u90bb\\u9009\\u62e9\\u7b26\\u9012\\u8fdb\\u63a7\\u5236\\u5e76\\u5217\\u663e\\u793a\\u7684\\u51e0\\u4e2a\\u5143\\u7d20\\u7684\\u663e\\u793a\\u6837\\u5f0f\\u3002h1+div\\u8868\\u793a\\u6807\\u9898\\u5143\\u7d20h1\\u540e\\u9762\\u76f8\\u90bb\\u7684div\\u5143\\u7d20\\u6837\\u5f0f\\uff0cdiv+p\\u8868\\u793adiv\\u5143\\u7d20\\u540e\\u9762\\u76f8\\u90bb\\u7684\\u5143\\u7d20p\\u7684\\u6837\\u5f0f\\uff0cp+div\\u8868\\u793ap\\u5143\\u7d20\\u540e\\u9762\\u76f8\\u90bb\\u7684div\\u5143\\u7d20\\u7684\\u6837\\u5f0f\\uff0c\\u800cdiv+div\\u8868\\u793adiv\\u5143\\u7d20\\u540e\\u9762\\u76f8\\u90bb\\u7684div\\u5143\\u7d20\\u7684\\u6837\\u5f0f\\u3002\\u6548\\u679c\\u5982\\u56fe6\\u6240\\u793a\\u3002
\\u56fe1
\\u56fe2
\\u56fe4
\\u56fe5
\\u56fe6
\x22,\x22contentRich\x22:\x22

\\u4ec0\\u4e48\\u662fCSS\\u6837\\u5f0f

\\u5c42\\u53e0\\u6837\\u5f0f\\u8868\\uff08CascadingStyleSheet\\uff0cCSS\\uff09\\u662f\\u4e00\\u7cfb\\u5217\\u6837\\u5f0f\\u6216\\u683c\\u5f0f\\u89c4\\u683c\\u7684\\u96c6\\u5408\\uff0c\\u7528\\u4e8e\\u63a7\\u5236\\u7f51\\u9875\\u6837\\u5f0f\\u5e76\\u5141\\u8bb8\\u5c06\\u6837\\u5f0f\\u4e0e\\u7f51\\u9875\\u5185\\u5bb9\\u5206\\u79bb\\u7684\\u4e00\\u79cd\\u6807\\u8bb0\\u6027\\u8bed\\u8a00\\u3002\\u5b83\\u662fW3C\\u7ec4\\u7ec7\\u7528\\u4e8e\\u6539\\u5584HTML\\u5728\\u663e\\u793a\\u7f51\\u9875\\u65b9\\u9762\\u7684\\u7f3a\\u9677\\u3002\\u867d\\u7136HTML\\u5728\\u53d1\\u5e03\\u65f6\\u5df2\\u7ecf\\u5236\\u5b9a\\u4e86\\u5404\\u79cd\\u7f51\\u9875\\u6837\\u5f0f\\u6807\\u7b7e\\u548c\\u5404\\u79cd\\u9875\\u9762\\u4fee\\u9970\\u5c5e\\u6027\\uff0c\\u4f46\\u662f\\u968f\\u7740\\u7f51\\u9875\\u5bb9\\u7eb3\\u7684\\u4fe1\\u606f\\u8d8a\\u6765\\u8d8a\\u591a\\uff0c\\u8fd9\\u79cd\\u628a\\u4fe1\\u606f\\u663e\\u793a\\u5185\\u5bb9\\u4e0e\\u4fe1\\u606f\\u663e\\u793a\\u6837\\u5f0f\\u6df7\\u5728\\u4e00\\u8d77\\u7684\\u65b9\\u6cd5\\uff0c\\u5df2\\u7ecf\\u65e0\\u6cd5\\u6ee1\\u8db3\\u4eba\\u4eec\\u5bf9\\u7f51\\u7edc\\u4fe1\\u606f\\u7684\\u5feb\\u901f\\u641c\\u7d22\\u9700\\u6c42\\uff0c\\u66f4\\u4e0d\\u80fd\\u9002\\u5e94\\u5927\\u6570\\u636e\\u65f6\\u4ee3\\u7684\\u5c55\\u793a\\u6570\\u636e\\u7684\\u8981\\u6c42\\u3002

CSS\\u7684\\u6bcf\\u4e00\\u4e2a\\u6837\\u5f0f\\u8868\\u90fd\\u662f\\u7531\\u76f8\\u5bf9\\u5e94\\u7684\\u6837\\u5f0f\\u89c4\\u5219\\u7ec4\\u6210\\u7684\\uff0c\\u4f7f\\u7528HTML\\u4e2d\\u7684\\u6807\\u7b7e\\u53ef\\u4ee5\\u5c06\\u6837\\u5f0f\\u8868\\u89c4\\u5219\\u52a0\\u5165\\u5230HTML\\u3002\\u6807\\u7b7e\\u4f4d\\u4e8eHTML\\u7684head\\u90e8\\u5206\\uff0c\\u5176\\u4e2d\\u4e5f\\u5305\\u542b\\u7f51\\u9875\\u7684\\u6837\\u5f0f\\u89c4\\u5212\\uff0c\\u5982\\u56fe1\\u6240\\u793a\\u3002CSS\\u8bed\\u53e5\\u53ef\\u4ee5\\u5185\\u5d4c\\u5728HTML\\u4e2d\\uff0c\\u6240\\u4ee5\\u7f16\\u5199CSS\\u6837\\u5f0f\\u89c4\\u5219\\u548c\\u7f16\\u5199HTML\\u7684\\u65b9\\u6cd5\\u76f8\\u540c\\u3002CSS\\u8bed\\u8a00\\u4e0d\\u9700\\u8981\\u7f16\\u8bd1\\uff0c\\u4e5f\\u4e0d\\u9700\\u8981\\u7279\\u6b8a\\u5904\\u7406\\u3002\\u7528\\u6237\\u53ea\\u8981\\u628a\\u5b83\\u4eec\\u653e\\u5728\\u6807\\u7b7e\\u4e4b\\u95f4\\u6216\\u8005\\u7f16\\u5199\\u4e3a\\u4e00\\u4e2a\\u5355\\u72ec\\u7684\\u6587\\u4ef6\\uff0c\\u7136\\u540e\\u5c06\\u6587\\u4ef6\\u7684\\u6269\\u5c55\\u540d\\u4fdd\\u5b58\\u4e3a.css\\uff0c\\u5229\\u7528\\u6807\\u7b7e\\u94fe\\u63a5\\u6216\\u8005\\u5bfc\\u5165\\u5230\\u7f51\\u9875\\u4e2d\\u5373\\u53ef\\u3002

CSS\\u6837\\u5f0f\\u7684\\u4f18\\u52bf

\\u4f7f\\u7528CSS\\u6837\\u5f0f\\u53ef\\u4ee5\\u5bf9\\u591a\\u4e2a\\u6587\\u6863\\u7684\\u6837\\u5f0f\\u8fdb\\u884c\\u63a7\\u5236\\uff0c\\u5f53CSS\\u6837\\u5f0f\\u66f4\\u65b0\\u540e\\uff0c\\u6240\\u6709\\u5e94\\u7528\\u8be5CSS\\u6837\\u5f0f\\u7684\\u9875\\u9762\\u90fd\\u4f1a\\u81ea\\u52a8\\u66f4\\u65b0\\u3002CSS\\u6837\\u5f0f\\u53ef\\u4ee5\\u9875\\u9762\\u5143\\u7d20\\u8fdb\\u884c\\u5b9a\\u4f4d\\u3001\\u7279\\u6b8a\\u6548\\u679c\\u548c\\u8d85\\u94fe\\u63a5\\u6548\\u679c\\u7b49\\u72ec\\u7279\\u7684HTML\\u5c5e\\u6027\\uff0c\\u53ef\\u4ee5\\u5145\\u5206\\u5730\\u5f25\\u8865HTML\\u7684\\u4e0d\\u8db3\\uff0c\\u7b80\\u5316\\u7f51\\u9875\\u7684\\u6e90\\u4ee3\\u7801\\uff0c\\u907f\\u514d\\u91cd\\u590d\\u52b3\\u52a8\\uff0c\\u51cf\\u8f7b\\u5de5\\u4f5c\\u91cf\\u3002CSS\\u5177\\u6709\\u4ee5\\u4e0b\\u4f18\\u52bf\\uff1a

CSS\\u7b26\\u5408Web\\u6807\\u51c6\\u3002W3C\\u7ec4\\u7ec7\\u63a8\\u8350CSS\\u6280\\u672f\\u5c06\\u66ff\\u4ee3HTML\\u7684\\u8868\\u683c\\u6807\\u7b7e\\u3001\\u6807\\u7b7e\\u3001\\u6807\\u7b7e\\u4ee5\\u53ca\\u5176\\u4ed6\\u7528\\u4e8e\\u8868\\u73b0\\u7684HTLM\\u5143\\u7d20\\u3002

\\u63d0\\u9ad8\\u9875\\u9762\\u7684\\u6d4f\\u89c8\\u901f\\u5ea6\\u3002\\u4f7f\\u7528CSS\\u6837\\u5f0f\\u6bd4\\u4f20\\u7edf\\u7684Web\\u8bbe\\u8ba1\\u65b9\\u6cd5\\u81f3\\u5c11\\u8282\\u7ea650%\\u4ee5\\u4e0a\\u7684\\u6587\\u4ef6\\u5927\\u5c0f\\u3002

\\u7f29\\u77ed\\u7f51\\u7ad9\\u6539\\u7248\\u5468\\u671f\\u3002\\u53ea\\u9700\\u8981\\u4fee\\u6539\\u76f8\\u5e94CSS\\u6587\\u4ef6\\u5c31\\u53ef\\u4ee5\\u91cd\\u65b0\\u8bbe\\u8ba1\\u4e00\\u4e2a\\u6709\\u6210\\u767e\\u4e0a\\u5343\\u9875\\u9762\\u7684\\u7ad9\\u70b9\\u3002

\\u5f3a\\u5927\\u7684\\u5b57\\u4f53\\u63a7\\u5236\\u548c\\u6392\\u7248\\u80fd\\u529b\\u3002Font\\u6807\\u7b7e\\u5bf9\\u4e8e\\u5b57\\u4f53\\u63a7\\u5236\\u80fd\\u529b\\u8fdc\\u6ca1\\u6709CSS\\u5bf9\\u4e8e\\u5b57\\u4f53\\u7684\\u63a7\\u5236\\u80fd\\u529b\\u5f3a\\uff0c\\u4f7f\\u7528CSS\\u6837\\u5f0f\\u540e\\u4e0d\\u9700\\u8981\\u5728\\u4f7f\\u7528font\\u6807\\u7b7e\\u6765\\u63a7\\u5236\\u6587\\u7ae0\\u6807\\u9898\\u3001\\u5b57\\u4f53\\u989c\\u8272\\u4ee5\\u53ca\\u5b57\\u4f53\\u6837\\u5f0f\\u7b49\\u3002

CSS\\u6613\\u4e8e\\u7f16\\u5199\\u3002Dreamweaver\\u63d0\\u4f9b\\u4e86CSS\\u7f16\\u5199\\u8f85\\u52a9\\u5de5\\u5177\\u3002

CSS\\u5177\\u6709\\u826f\\u597d\\u7684\\u517c\\u5bb9\\u6027\\u3002\\u53ea\\u8981\\u6d4f\\u89c8\\u5668\\u80fd\\u591f\\u8bc6\\u522bCSS\\u6837\\u5f0f\\u90fd\\u53ef\\u4ee5\\u5f88\\u597d\\u7684\\u5e94\\u7528\\u5b83\\u3002

\\u8868\\u73b0\\u548c\\u5185\\u5bb9\\u76f8\\u5206\\u79bb\\u3002\\u5c06\\u8bbe\\u8ba1\\u90e8\\u5206\\u5265\\u79bb\\u51fa\\u6765\\u653e\\u5728\\u4e00\\u4e2a\\u72ec\\u7acb\\u6837\\u5f0f\\u6587\\u4ef6\\u4e2d\\uff0c\\u8ba9\\u591a\\u4e2a\\u7f51\\u9875\\u6587\\u4ef6\\u5171\\u540c\\u4f7f\\u7528\\u5b83\\uff0c\\u7701\\u53bb\\u5728\\u6bcf\\u4e00\\u4e2a\\u7f51\\u9875\\u6587\\u4ef6\\u4e2d\\u90fd\\u8981\\u91cd\\u590d\\u8bbe\\u5b9a\\u6837\\u5f0f\\u7684\\u9ebb\\u70e6\\u3002

CSS\\u6837\\u5f0f\\u57fa\\u672c\\u8bed\\u6cd5

CSS\\u7684\\u8bed\\u6cd5\\u7ed3\\u6784\\u75313\\u90e8\\u5206\\u6784\\u6210\\uff1a\\u9009\\u62e9\\u5668\\u3001\\u5c5e\\u6027\\u548c\\u503c\\u3002

\\u9009\\u62e9\\u5668{\\u6837\\u5f0f\\u5c5e\\u6027:\\u53d6\\u503c;\\u6837\\u5f0f\\u5c5e\\u6027:\\u53d6\\u503c;\\u6837\\u5f0f\\u5c5e\\u6027:\\u53d6\\u503c;\\u2026\\u2026}\\u9009\\u62e9\\u5668\\uff08Selector\\uff09\\u901a\\u5e38\\u662f\\u6307\\u7528\\u6237\\u5e0c\\u671b\\u5b9a\\u4e49\\u7684HTML\\u5143\\u7d20\\u6216\\u6807\\u7b7e\\uff0c\\u5982body\\u3001h1\\uff1b\\u4e5f\\u53ef\\u4ee5\\u662f\\u81ea\\u5b9a\\u4e49\\u7684id\\u6216class\\u7684\\u6807\\u7b7e\\uff0c\\u5982#main\\u9009\\u62e9\\u5668\\u8868\\u793a\\u9009\\u62e9\\uff0c\\u5373\\u4e00\\u4e2a\\u88ab\\u6307\\u5b9a\\u4e86main\\u4e3aid\\u7684\\u5bf9\\u8c61\\u3002\\u6d4f\\u89c8\\u5668\\u5c06\\u5bf9CSS\\u9009\\u62e9\\u5668\\u8fdb\\u884c\\u4e25\\u683c\\u7684\\u89e3\\u6790\\uff0c\\u6bcf\\u4e00\\u7ec4\\u6837\\u5f0f\\u5747\\u4f1a\\u88ab\\u6d4f\\u89c8\\u5668\\u5e94\\u7528\\u5230\\u5bf9\\u5e94\\u7684\\u5bf9\\u8c61\\u4e0a\\u3002

\\u5c5e\\u6027\\uff08Property\\uff09\\u662f\\u7528\\u6237\\u5e0c\\u671b\\u6539\\u53d8\\u7684\\u5c5e\\u6027\\uff0c\\u5e76\\u4e14\\u6bcf\\u4e2a\\u5c5e\\u6027\\u90fd\\u6709\\u4e00\\u4e2a\\u503c\\u3002\\u5bf9\\u4e8e\\u6bcf\\u4e00\\u4e2aHTML\\u4e2d\\u7684\\u6807\\u7b7e\\uff0cCSS\\u90fd\\u63d0\\u4f9b\\u4e86\\u4e30\\u5bcc\\u7684\\u6837\\u5f0f\\u5c5e\\u6027\\uff0c\\u5982\\u989c\\u8272\\u3001\\u5927\\u5c0f\\u3001\\u4f4d\\u7f6e\\u4ee5\\u53ca\\u6d6e\\u52a8\\u65b9\\u5f0f\\u7b49\\u3002

\\u503c\\uff08Value\\uff09\\u6307\\u5c5e\\u6027\\u7684\\u503c\\u3002\\u5c5e\\u6027\\u548c\\u503c\\u88ab\\u5192\\u53f7\\u5206\\u5f00\\uff0c\\u5e76\\u7531\\u82b1\\u62ec\\u53f7\\u5305\\u56f4\\uff0c\\u8fd9\\u6837\\u5c31\\u7ec4\\u6210\\u4e86\\u4e00\\u4e2a\\u5b8c\\u6574\\u7684\\u6837\\u5f0f\\u58f0\\u660e\\uff08declaration\\uff09\\u3002\\u5c5e\\u6027\\u503c\\u6709\\u4e24\\u79cd\\u5f62\\u5f0f\\uff1a\\u4e00\\u79cd\\u662f\\u6307\\u5b9a\\u8303\\u56f4\\u7684\\u503c\\uff0c\\u5982float\\u5c5e\\u6027\\u7684\\u53d6\\u503c\\u4e3aleft\\u3001right\\u548cnone\\uff1b\\u53e6\\u4e00\\u79cd\\u4e3a\\u6570\\u503c\\uff0c\\u5982height\\u5c5e\\u6027\\u53d6\\u503c\\u4e3a0~9999px\\u6216\\u8005\\u901a\\u8fc7\\u5176\\u4ed6\\u6570\\u5b66\\u5355\\u4f4d\\u6765\\u6307\\u5b9a\\u3002

\\u4f8b\\u5982\\uff0c\\u5b9a\\u4e49\\u4e00\\u4e2a\\u7f51\\u9875\\u5b57\\u4f53\\u5927\\u5c0f\\u4e3a12\\u50cf\\u7d20\\u3001\\u52a0\\u7c97\\uff0c\\u6bb5\\u843d\\u9996\\u884c\\u7f29\\u8fdb2\\u5b57\\u7b26\\uff0c\\u5219\\u53ef\\u4ee5\\u8bbe\\u7f6e\\u6837\\u5f0f\\u5982\\u4e0b\\uff1a\\u65e0\\u6807\\u9898\\u6587\\u6863

\\u5c42\\u53e0\\u6837\\u5f0f\\u8868\\u662f\\u4e00\\u79cd\\u7528\\u6765\\u8868\\u73b0HTML\\uff08\\u6807\\u51c6\\u901a\\u7528\\u6807\\u8bb0\\u8bed\\u8a00\\u7684\\u4e00\\u4e2a\\u5e94\\u7528\\uff09\\u6216XML\\uff08\\u6807\\u51c6\\u901a\\u7528\\u6807\\u8bb0\\u8bed\\u8a00\\u7684\\u4e00\\u4e2a\\u5b50\\u96c6\\uff09\\u7b49\\u6587\\u4ef6\\u6837\\u5f0f\\u7684\\u8ba1\\u7b97\\u673a\\u8bed\\u8a00\\u3002

CSS\\u76ee\\u524d\\u6700\\u65b0\\u7248\\u672c\\u4e3aCSS3\\uff0c\\u662f\\u80fd\\u591f\\u771f\\u6b63\\u505a\\u5230\\u7f51\\u9875\\u8868\\u73b0\\u4e0e\\u5185\\u5bb9\\u5206\\u79bb\\u7684\\u4e00\\u79cd\\u6837\\u5f0f\\u8bbe\\u8ba1\\u8bed\\u8a00\\u3002\\u76f8\\u5bf9\\u4e8e\\u4f20\\u7edfHTML\\u7684\\u8868\\u73b0\\u800c\\u8a00\\uff0cCSS\\u80fd\\u591f\\u5bf9\\u7f51\\u9875\\u4e2d\\u7684\\u5bf9\\u8c61\\u7684\\u4f4d\\u7f6e\\u6392\\u7248\\u8fdb\\u884c\\u50cf\\u7d20\\u7ea7\\u7684\\u7cbe\\u786e\\u63a7\\u5236\\uff0c\\u652f\\u6301\\u51e0\\u4e4e\\u6240\\u6709\\u7684\\u5b57\\u4f53\\u5b57\\u53f7\\u6837\\u5f0f\\uff0c\\u62e5\\u6709\\u5bf9\\u7f51\\u9875\\u5bf9\\u8c61\\u548c\\u6a21\\u578b\\u6837\\u5f0f\\u7f16\\u8f91\\u7684\\u80fd\\u529b\\uff0c\\u5e76\\u80fd\\u591f\\u8fdb\\u884c\\u521d\\u6b65\\u4ea4\\u4e92\\u8bbe\\u8ba1\\uff0c\\u662f\\u76ee\\u524d\\u57fa\\u4e8e\\u6587\\u672c\\u5c55\\u793a\\u6700\\u4f18\\u79c0\\u7684\\u8868\\u73b0\\u8bbe\\u8ba1\\u8bed\\u8a00\\u3002CSS\\u80fd\\u591f\\u6839\\u636e\\u4e0d\\u540c\\u4f7f\\u7528\\u8005\\u7684\\u7406\\u89e3\\u80fd\\u529b\\uff0c\\u7b80\\u5316\\u6216\\u8005\\u4f18\\u5316\\u5199\\u6cd5\\uff0c\\u9488\\u5bf9\\u5404\\u7c7b\\u4eba\\u7fa4\\uff0c\\u6709\\u8f83\\u5f3a\\u7684\\u6613\\u8bfb\\u6027\\u3002\\u6d4f\\u89c8\\u5668\\u901a\\u8fc7\\u89e3\\u6790\\u5c5e\\u6027\\u5305\\u542b\\u7684\\u5185\\u5bb9\\uff0c\\u5c06CSS\\u6837\\u5f0f\\u5e94\\u7528\\u5230\\u9875\\u9762\\u4e0a\\uff0c\\u5982\\u56fe2\\u6240\\u793a\\u3002\\u591a\\u4e2a\\u6837\\u5f0f\\u53ef\\u4ee5\\u5e76\\u5217\\u5728\\u4e00\\u8d77\\u5199\\uff0c\\u4e0d\\u9700\\u8981\\u8003\\u8651\\u5982\\u4f55\\u8fdb\\u884c\\u5206\\u9694\\u3002\\u4f8b\\u5982\\uff0c\\u5b9a\\u4e49\\u4e00\\u4e2a\\u6bb5\\u843d\\u6587\\u672c\\u7684\\u80cc\\u666f\\u8272\\u4e3a\\u7d2b\\u8272\\uff0c\\u5219\\u53ef\\u4ee5\\u5728\\u4e0a\\u9762\\u6837\\u5f0f\\u7684\\u57fa\\u7840\\u4e0a\\u8fdb\\u884c\\u589e\\u52a0\\u6837\\u5f0f\\uff1a

Body{font-size:12px;font-weight:bold;text-indent:2em;}p{backgroundcolor:#FF00FF;}\\u7531\\u4e8eCSS\\u8bed\\u8a00\\u81ea\\u52a8\\u5ffd\\u7565\\u7a7a\\u683c\\uff08\\u9664\\u4e86\\u9009\\u62e9\\u5668\\u5185\\u90e8\\u7684\\u7a7a\\u683c\\uff09\\uff0c\\u56e0\\u6b64\\u53ef\\u4ee5\\u5229\\u7528\\u7a7a\\u683c\\u548c\\u6362\\u884c\\u7b26\\u6765\\u7f8e\\u5316CSS\\u6837\\u5f0f\\u6e90\\u4ee3\\u7801\\uff0c\\u4e0a\\u9762\\u7684\\u4ee3\\u7801\\u53ef\\u4ee5\\u8fdb\\u884c\\u5982\\u4e0b\\u7f8e\\u5316\\uff1a

Body{font-size:12px;font-weight:bold;text-indent:2em;}p{background-color:#FF00FF;}\\u7ecf\\u8fc7\\u7f8e\\u5316\\u7684CSS\\u6e90\\u4ee3\\u7801\\u770b\\u4e0a\\u53bb\\u4e00\\u76ee\\u4e86\\u7136\\uff0c\\u65e2\\u65b9\\u4fbf\\u9605\\u8bfb\\uff0c\\u4e5f\\u4fbf\\u4e8e\\u4fee\\u6539\\u3002

CSS\\u6e90\\u4ee3\\u7801\\u6709\\u65f6\\u5019\\u9700\\u8981\\u901a\\u8fc7\\u4e00\\u4e9b\\u6ce8\\u91ca\\u6765\\u6807\\u6ce8\\uff0cCSS\\u4ee3\\u7801\\u8868\\u793a\\u4ec0\\u4e48\\u610f\\u601d\\u3002\\u5728HTML\\u4e2d\\u6ce8\\u91ca\\u6807\\u8bb0\\u4f7f\\u7528\\u201c\\u201d\\uff0cCSS\\u4e2d\\u6ce8\\u91ca\\u6807\\u8bb0\\u4f7f\\u7528\\u201c\\\/*\\u6ce8\\u91ca\\u5185\\u5bb9*\\\/\\u201d\\u3002\\u4f8b\\u5982\\uff0c\\u53ef\\u4ee5\\u5bf9\\u4e0a\\u9762\\u7684\\u4ee3\\u7801\\u8fdb\\u884c\\u6ce8\\u91ca\\uff1a

Body{\\\/*\\u9875\\u9762\\u7684\\u57fa\\u672c\\u5c5e\\u6027*\\\/font-size:12px;font-weight:bold;text-indent:2em;}\\\/*\\u8bbe\\u7f6e\\u6bb5\\u843d\\u7684\\u80cc\\u666f\\u989c\\u8272\\u4e3a\\u7d2b\\u8272*\\\/p{background-color:#FF00FF;}\\u6dfb\\u52a0CSS\\u7684\\u65b9\\u6cd5

\\u5728HTML\\u4e2d\\u6dfb\\u52a0CSS\\u7684\\u65b9\\u6cd5\\u4e3b\\u8981\\u67094\\u79cd\\uff0c\\u5206\\u522b\\u4e3a\\u94fe\\u63a5\\u5185\\u5d4c\\u6837\\u5f0f\\u3001\\u5185\\u90e8\\u6837\\u5f0f\\u8868\\u3001\\u94fe\\u63a5\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u548c\\u5bfc\\u5165\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u3002

1\\uff0e\\u5185\\u5d4c\\u6837\\u5f0f\\u8868

\\u5185\\u5d4c\\u6837\\u5f0f\\u8868\\u662f\\u6df7\\u5408\\u5728HTML\\u6807\\u8bb0\\u91cc\\u4f7f\\u7528\\u7684\\uff0c\\u8be5\\u65b9\\u6cd5\\u53ef\\u4ee5\\u5f88\\u7b80\\u5355\\u5730\\u5bf9\\u67d0\\u4e2a\\u5143\\u7d20\\u5355\\u72ec\\u5b9a\\u4e49\\u6837\\u5f0f\\uff0c\\u4e3b\\u8981\\u662f\\u5728body\\u5185\\u5b9e\\u73b0\\u3002

\\u5185\\u5d4c\\u6837\\u5f0f\\u8868\\u7684\\u4f7f\\u7528\\u662f\\u76f4\\u63a5\\u5728HTML\\u6807\\u8bb0\\u91cc\\u52a0\\u5165style\\u53c2\\u6570\\uff0c\\u800cstyle\\u53c2\\u6570\\u7684\\u5185\\u5bb9\\u5c31\\u662fCSS\\u7684\\u5c5e\\u6027\\u548c\\u503c\\uff0c\\u5728style\\u5f15\\u53f7\\u91cc\\u7684\\u5185\\u5bb9\\u76f8\\u5f53\\u4e8e\\u5728\\u6837\\u5f0f\\u8868\\u7684\\u5927\\u62ec\\u53f7\\u91cc\\u7684\\u5185\\u5bb9\\uff0c\\u5176\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a

\\u5b57\\u4f53\\u5927\\u5c0f\\u4e3a12px\\uff0c\\u989c\\u8272\\u4e3a\\u7ea2\\u8272\\u5f53\\u6d4f\\u89c8\\u5668\\u89e3\\u6790\\u5230\\u8fd9\\u4e9b\\u6807\\u7b7e\\u65f6\\uff0c\\u68c0\\u6d4b\\u5230\\u8be5\\u6807\\u7b7e\\u4e2d\\u5305\\u542bstyle\\u5c5e\\u6027\\uff0c\\u5c31\\u4f1a\\u8c03\\u7528CSS\\u5f15\\u64ce\\u6765\\u89e3\\u6790style\\u5c5e\\u6027\\uff0c\\u5e76\\u628a\\u6548\\u679c\\u5c55\\u73b0\\u5230\\u9875\\u9762\\u4e0a\\u3002

\\u8be5\\u65b9\\u6cd5\\u4e0e\\u4f20\\u7edf\\u7f51\\u9875\\u8bbe\\u8ba1\\u5728\\u6807\\u7b7e\\u5185\\u589e\\u52a0\\u5c5e\\u6027\\u7684\\u8bbe\\u8ba1\\u65b9\\u6cd5\\u76f8\\u540c\\uff0c\\u8be5\\u65b9\\u6cd5\\u5b9e\\u9645\\u5e76\\u6ca1\\u6709\\u6ee1\\u8db3W3C\\u63d0\\u51fa\\u7684\\u5c06HTML\\u7ed3\\u6784\\u4e0eCSS\\u8868\\u73b0\\u5265\\u79bb\\u6765\\u8fdb\\u884c\\u8bbe\\u8ba1\\uff0c\\u56e0\\u6b64\\u5728\\u7f51\\u9875\\u8bbe\\u8ba1\\u4e2d\\u4e0d\\u5efa\\u8bae\\u4f7f\\u7528\\u8be5\\u65b9\\u6cd5\\uff0c\\u9664\\u975e\\u4e3a\\u9875\\u9762\\u4e2d\\u4e2a\\u522b\\u5143\\u7d20\\u8bbe\\u7f6e\\u67d0\\u4e2a\\u7279\\u5b9a\\u6837\\u5f0f\\u6548\\u679c\\u800c\\u5355\\u72ec\\u5b9a\\u4e49\\u3002

2\\uff0e\\u5185\\u90e8\\u6837\\u5f0f\\u8868

\\u5185\\u90e8\\u6837\\u5f0f\\u8868\\u4e0e\\u5185\\u5d4c\\u6837\\u5f0f\\u8868\\u7684\\u76f8\\u4f3c\\u4e4b\\u5904\\u5728\\u4e8e\\uff0c\\u90fd\\u5c06CSS\\u6837\\u5f0f\\u7f16\\u5199\\u5230\\u9875\\u9762\\u4e2d\\u3002\\u800c\\u4e0d\\u540c\\u7684\\u662f\\uff0c\\u5185\\u90e8\\u6837\\u5f0f\\u8868\\u53ef\\u4ee5\\u7edf\\u4e00\\u653e\\u7f6e\\u5728\\u4e00\\u4e2a\\u56fa\\u5b9a\\u7684\\u4f4d\\u7f6e\\uff0c\\u5176\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a

\\u5185\\u90e8\\u6837\\u5f0f\\u8868\\u901a\\u5e38\\u4f4d\\u4e8e\\u7f51\\u9875\\u7684\\u5934\\u90e8\\u533a\\u57df\\uff0c\\u76ee\\u7684\\u662f\\u8ba9CSS\\u6e90\\u4ee3\\u7801\\u5728\\u9875\\u9762\\u52a0\\u8f7d\\u524d\\u5148\\u88ab\\u89e3\\u6790\\u6267\\u884c\\uff0c\\u8fd9\\u6837\\u53ef\\u4ee5\\u907f\\u514d\\u5f53\\u7f51\\u9875\\u52a0\\u8f7d\\u5b8c\\u6210\\u540e\\uff0c\\u6ca1\\u6709CSS\\u6837\\u5f0f\\u6e32\\u67d3\\u800c\\u4f7f\\u7684\\u9875\\u9762\\u4fe1\\u606f\\u65e0\\u6cd5\\u6b63\\u5e38\\u663e\\u793a\\u30023\\uff0e\\u94fe\\u63a5\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u94fe\\u63a5\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u662f\\u5728CSS\\u4e2d\\u6700\\u5e38\\u7528\\u7684\\u4e00\\u79cd\\u5f62\\u5f0f\\uff0c\\u5b83\\u5c06CSS\\u6837\\u5f0f\\u4ee3\\u7801\\u5355\\u72ec\\u7f16\\u5199\\u5230\\u4e00\\u4e2a\\u72ec\\u7acb\\u7684\\u6587\\u4ef6\\u4e2d\\uff0c\\u7531\\u7f51\\u9875\\u8fdb\\u884c\\u8c03\\u7528\\uff0c\\u591a\\u4e2a\\u7f51\\u9875\\u53ef\\u4ee5\\u540c\\u65f6\\u4f7f\\u7528\\u540c\\u4e00\\u4e2a\\u6837\\u5f0f\\u6587\\u4ef6\\uff0c\\u5176\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a

\\u5176\\u4e2d\\uff0chref\\u5c5e\\u6027\\u8bbe\\u7f6e\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u6587\\u4ef6\\u7684\\u5730\\u5740\\uff0c\\u8be5\\u5730\\u5740\\u53ef\\u4ee5\\u662f\\u76f8\\u5bf9\\u5730\\u5740\\uff0c\\u4e5f\\u53ef\\u4ee5\\u662f\\u7edd\\u5bf9\\u5730\\u5740\\uff1brel\\u5c5e\\u6027\\u5b9a\\u4e49\\u8be5\\u6807\\u7b7e\\u5173\\u8054\\u7684\\u662f\\u6837\\u5f0f\\u8868\\u6807\\u7b7e\\uff1btype\\u5c5e\\u6027\\u5b9a\\u4e49\\u6587\\u6863\\u7684\\u7c7b\\u578b\\uff0c\\u5373CSS\\u6587\\u672c\\u6587\\u4ef6\\u3002

\\u7f51\\u7ad9\\u901a\\u5e38\\u91c7\\u7528\\u94fe\\u63a5\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u6765\\u8bbe\\u8ba1\\u7f51\\u7ad9\\u7684\\u8868\\u73b0\\u5c42\\uff0c\\u80fd\\u591f\\u5b9e\\u73b0CSS\\u6837\\u5f0f\\u4e0eHTML\\u7ed3\\u6784\\u7684\\u5206\\u79bb\\uff0c\\u8fd9\\u79cd\\u5206\\u79bb\\u539f\\u5219\\u662fW3C\\u6240\\u63d0\\u5021\\u7684\\uff0c\\u56e0\\u4e3a\\u8fd9\\u6837\\u53ef\\u4ee5\\u9ad8\\u6548\\u5730\\u7ba1\\u7406\\u6587\\u6863\\u7ed3\\u6784\\u548c\\u6837\\u5f0f\\u8868\\u6587\\u4ef6\\uff0c\\u5b9e\\u73b0\\u4ee3\\u7801\\u7684\\u4f18\\u5316\\u548c\\u91cd\\u7528\\u3002

4\\uff0e\\u5bfc\\u5165\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u5bfc\\u5165\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u662f\\u6307\\u5728\\u5185\\u90e8\\u6837\\u5f0f\\u8868\\u7684\\u6807\\u7b7e\\u5185\\u4f7f\\u7528@import\\u5173\\u952e\\u5b57\\u5bfc\\u5165\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u6587\\u4ef6\\uff0c\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a

\\u5728@import\\u5173\\u952e\\u5b57\\u540e\\u9762\\uff0c\\u4f7f\\u7528url()\\u51fd\\u6570\\u6765\\u628a\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u6587\\u4ef6\\u5bfc\\u5165\\u3002\\u6ce8\\u610f\\u4f7f\\u7528\\u65f6\\uff0c\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u7684\\u8def\\u5f84\\u3001\\u65b9\\u6cd5\\u548c\\u94fe\\u63a5\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u7684\\u65b9\\u6cd5\\u7c7b\\u4f3c\\uff0c\\u4f46\\u5bfc\\u5165\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u8f93\\u5165\\u65b9\\u5f0f\\u66f4\\u6709\\u4f18\\u52bf\\u3002\\u5b9e\\u8d28\\u4e0a\\u5b83\\u662f\\u76f8\\u5f53\\u4e8e\\u5b58\\u5728\\u5185\\u90e8\\u6837\\u5f0f\\u8868\\u4e2d\\u7684\\u3002

7.2CSS\\u57fa\\u672c\\u9009\\u62e9\\u5668

\\u9009\\u62e9\\u5668\\u51b3\\u5b9a\\u6837\\u5f0f\\u89c4\\u5219\\u4f5c\\u7528\\u4e8e\\u54ea\\u4e9b\\u5143\\u7d20\\u3002\\u4f8b\\u5982\\uff0c\\u5982\\u679c\\u8981\\u5bf9table\\u5143\\u7d20\\u6dfb\\u52a0\\u8fb9\\u6846\\u4e3a\\u5b9e\\u7ebf\\u3001\\u7ebf\\u5bbd1\\u50cf\\u7d20\\u3001\\u84dd\\u8272\\u7684\\u8fb9\\u6846\\uff0c\\u5219\\u9700\\u8981\\u521b\\u5efa\\u4e00\\u4e2a\\u53ea\\u8bc6\\u522btable\\u5143\\u7d20\\u800c\\u4e0d\\u5f71\\u54cd\\u5176\\u4ed6\\u5143\\u7d20\\u7684\\u9009\\u62e9\\u5668\\u3002\\u5982\\u679c\\u8981\\u5bf9\\u6bcf\\u4e2a\\u533a\\u57df\\u4e2d\\u7684table\\u8bbe\\u7f6e\\u7279\\u6b8a\\u683c\\u5f0f\\uff0c\\u5c31\\u9700\\u8981\\u521b\\u5efa\\u4e00\\u4e2a\\u7a0d\\u5fae\\u590d\\u6742\\u4e00\\u4e9b\\u7684\\u9009\\u62e9\\u5668\\uff0c\\u5b83\\u53ea\\u8bc6\\u522b\\u6307\\u5b9a\\u533a\\u57df\\u4e2d\\u7684table\\u5143\\u7d20\\u3002

7.2.1\\u6807\\u7b7e\\u9009\\u62e9\\u5668

HTML\\u6587\\u6863\\u90fd\\u662f\\u7531\\u5f88\\u591a\\u6807\\u7b7e\\u901a\\u8fc7\\u4e00\\u5b9a\\u7684\\u89c4\\u5219\\u7f16\\u7ec7\\u800c\\u6210\\u7684\\uff0c\\u6211\\u4eec\\u4e5f\\u53ef\\u4ee5\\u628a\\u8fd9\\u4e9b\\u6807\\u7b7e\\u79f0\\u4e3a\\u7f51\\u9875\\u5143\\u7d20\\u3002\\u6807\\u7b7e\\u9009\\u62e9\\u5668\\u4f7f\\u7528\\u7f51\\u9875\\u5143\\u7d20\\u5b9a\\u4e49\\u6837\\u5f0f\\u3002

\\u4f8b\\u5982\\uff0c\\u58f0\\u660ep\\u5143\\u7d20\\u9996\\u884c\\u7f29\\u8fdb2\\u5b57\\u7b26\\uff0c\\u5b57\\u4f53\\u989c\\u8272\\u4e3a\\u7ea2\\u8272\\uff1b\\u6240\\u6709h1\\u5b57\\u53f7\\u4e3a15px\\u3001\\u52a0\\u7c97\\uff0c\\u4ee3\\u7801\\u5982\\u4e0b\\uff1a

\\u5176\\u4e2d\\uff0cp\\u548ch1\\u90fd\\u662fHTML\\u7279\\u5b9a\\u7684\\u6807\\u7b7e\\u540d\\u79f0\\uff0c\\u76f4\\u63a5\\u5f15\\u7528\\u5373\\u53ef\\u3002

\\u6ce8\\u610f\\uff1a*\\u53f7\\u4e3a\\u901a\\u914d\\u7b26\\u5339\\u914d\\u9875\\u9762\\u4e2d\\u7684\\u6240\\u6709\\u5143\\u7d20\\u540d\\u79f0\\u3002\\u4e0a\\u9762\\u7684\\u4ee3\\u7801\\u8bbe\\u7f6e\\u6bcf\\u4e2a\\u5143\\u7d20\\u7684\\u5185\\u5916\\u8fb9\\u8ddd\\u4e3a0px\\u3002\\u7531\\u4e8e\\u6bcf\\u4e2a\\u5143\\u7d20\\u90fd\\u6709\\u7cfb\\u7edf\\u9ed8\\u8ba4\\u7684\\u5185\\u5916\\u8fb9\\u8ddd\\u503c\\uff0c\\u4e14\\u5728\\u4e0d\\u540c\\u7684\\u6d4f\\u89c8\\u5668\\u4e2d\\u663e\\u793a\\u7684\\u6548\\u679c\\u4e5f\\u4e0d\\u540c\\uff0c\\u56e0\\u6b64\\u5728\\u8bbe\\u7f6e\\u7f51\\u9875\\u6837\\u5f0f\\u4e4b\\u521d\\u4f7f\\u7528\\u901a\\u914d\\u7b26*\\u5c06\\u6240\\u6709\\u5143\\u7d20\\u9ed8\\u8ba4\\u7684\\u5185\\u5916\\u8fb9\\u8ddd\\u53bb\\u6389\\u662f\\u5e38\\u89c1\\u505a\\u6cd5\\u3002

7.2.2\\u7c7b\\u522b\\u9009\\u62e9\\u5668

\\u4f7f\\u7528\\u6807\\u7b7e\\u9009\\u62e9\\u7b26\\u53ef\\u4ee5\\u65b9\\u4fbf\\u5730\\u5bf9\\u6807\\u7b7e\\u8fdb\\u884c\\u6837\\u5f0f\\u8bbe\\u7f6e\\uff0c\\u540c\\u65f6\\u6807\\u7b7e\\u9009\\u62e9\\u7b26\\u4e5f\\u5b58\\u5728\\u8f83\\u591a\\u95ee\\u9898\\u3002\\u56e0\\u4e3a\\u6807\\u7b7e\\u9009\\u62e9\\u7b26\\u5bf9\\u6807\\u7b7e\\u6240\\u505a\\u7684\\u5b9a\\u4e49\\u4e0d\\u5355\\u5355\\u5f71\\u54cd\\u6240\\u9009\\u62e9\\u7684\\u6807\\u7b7e\\u5143\\u7d20\\uff0c\\u800c\\u662f\\u5bf9\\u6574\\u4e2a\\u9875\\u9762\\u4e2d\\u6240\\u6709\\u76f8\\u540c\\u6807\\u7b7e\\u90fd\\u4f1a\\u8d77\\u4f5c\\u7528\\u3002\\u5982\\u679c\\u9700\\u8981\\u5bf9\\u540c\\u4e00\\u4e2a\\u6807\\u7b7e\\u5728\\u7f51\\u9875\\u4e2d\\u7684\\u4e0d\\u540c\\u4f4d\\u7f6e\\u663e\\u793a\\u4e0d\\u540c\\u7684\\u6837\\u5f0f\\uff0c\\u4f7f\\u7528\\u8fd9\\u79cd\\u65b9\\u6cd5\\u5b9a\\u4e49\\u7684\\u6837\\u5f0f\\u5c31\\u5b58\\u5728\\u5f88\\u591a\\u4e0d\\u8db3\\u3002\\u5bf9\\u4e8e\\u8fd9\\u4e2a\\u95ee\\u9898\\u53ef\\u4ee5\\u4f7f\\u7528\\u7c7b\\u9009\\u62e9\\u5668\\u6765\\u89e3\\u51b3\\u3002

\\u7c7b\\uff08Class\\uff09\\u9009\\u62e9\\u7b26\\u5c31\\u662f\\u4e3a\\u4e86\\u4e0d\\u540c\\u5143\\u7d20\\u62e5\\u6709\\u76f8\\u540c\\u7684\\u663e\\u793a\\u6837\\u5f0f\\u800c\\u5b9a\\u4e49\\u7684\\u3002\\u4f8b\\u5982\\uff0c\\u5728\\u4e0b\\u9762\\u8fd9\\u4e2a\\u9875\\u9762\\u4e2d\\u5305\\u542b\\u4e09\\u6bb5\\u6587\\u672c\\uff0c\\u901a\\u8fc7\\u6807\\u7b7e\\u9009\\u62e9\\u5668\\u5c06\\u6240\\u6709\\u6bb5\\u843d\\u6587\\u672c\\u5927\\u5c0f\\u5b9a\\u4e49\\u4e3a13px\\uff0c\\u9996\\u884c\\u7f29\\u8fdb2\\u5b57\\u7b26\\uff0c\\u5b57\\u4f53\\u989c\\u8272\\u4e3a\\u84dd\\u8272\\u3002

\\u5c42\\u53e0\\u6837\\u5f0f\\u8868\\u662f\\u4e00\\u79cd\\u7528\\u6765\\u8868\\u73b0HTML\\uff08\\u6807\\u51c6\\u901a\\u7528\\u6807\\u8bb0\\u8bed\\u8a00\\u7684\\u4e00\\u4e2a\\u5e94\\u7528\\uff09\\u6216XML\\uff08\\u6807\\u51c6\\u901a\\u7528\\u6807\\u8bb0\\u8bed\\u8a00\\u7684\\u4e00\\u4e2a\\u5b50\\u96c6\\uff09\\u7b49\\u6587\\u4ef6\\u6837\\u5f0f\\u7684\\u8ba1\\u7b97\\u673a\\u8bed\\u8a00\\u3002

CSS\\u76ee\\u524d\\u6700\\u65b0\\u7248\\u672c\\u4e3aCSS3\\uff0c\\u662f\\u80fd\\u591f\\u771f\\u6b63\\u505a\\u5230\\u7f51\\u9875\\u8868\\u73b0\\u4e0e\\u5185\\u5bb9\\u5206\\u79bb\\u7684\\u4e00\\u79cd\\u6837\\u5f0f\\u8bbe\\u8ba1\\u8bed\\u8a00\\u3002\\u76f8\\u5bf9\\u4e8e\\u4f20\\u7edfHTML\\u7684\\u8868\\u73b0\\u800c\\u8a00\\uff0cCSS\\u80fd\\u591f\\u5bf9\\u7f51\\u9875\\u4e2d\\u7684\\u5bf9\\u8c61\\u7684\\u4f4d\\u7f6e\\u6392\\u7248\\u8fdb\\u884c\\u50cf\\u7d20\\u7ea7\\u7684\\u7cbe\\u786e\\u63a7\\u5236\\uff0c\\u652f\\u6301\\u51e0\\u4e4e\\u6240\\u6709\\u7684\\u5b57\\u4f53\\u5b57\\u53f7\\u6837\\u5f0f\\uff0c\\u62e5\\u6709\\u5bf9\\u7f51\\u9875\\u5bf9\\u8c61\\u548c\\u6a21\\u578b\\u6837\\u5f0f\\u7f16\\u8f91\\u7684\\u80fd\\u529b\\uff0c\\u5e76\\u80fd\\u591f\\u8fdb\\u884c\\u521d\\u6b65\\u4ea4\\u4e92\\u8bbe\\u8ba1\\uff0c\\u662f\\u76ee\\u524d\\u57fa\\u4e8e\\u6587\\u672c\\u5c55\\u793a\\u6700\\u4f18\\u79c0\\u7684\\u8868\\u73b0\\u8bbe\\u8ba1\\u8bed\\u8a00\\u3002

CSS\\u80fd\\u591f\\u6839\\u636e\\u4e0d\\u540c\\u4f7f\\u7528\\u8005\\u7684\\u7406\\u89e3\\u80fd\\u529b\\uff0c\\u7b80\\u5316\\u6216\\u8005\\u4f18\\u5316\\u5199\\u6cd5\\uff0c\\u9488\\u5bf9\\u5404\\u7c7b\\u4eba\\u7fa4\\uff0c\\u6709\\u8f83\\u5f3a\\u7684\\u6613\\u8bfb\\u6027\\u3002\\u5982\\u679c\\u73b0\\u5728\\u8981\\u6c42\\u628a\\u7b2c\\u4e00\\u6bb5\\u5b57\\u4f53\\u5927\\u5c0f\\u6539\\u4e3a20px\\uff0c\\u5b57\\u4f53\\u52a0\\u7c97\\uff0c\\u8fd9\\u65f6\\u5c31\\u53ef\\u4ee5\\u4f7f\\u7528\\u7c7b\\u9009\\u62e9\\u7b26\\u3002\\u5b9a\\u4e49\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a

.fontbold{font-size:20px;font-weight:bold;}

\\u5c42\\u53e0\\u6837\\u5f0f\\u8868\\u662f\\u4e00\\u79cd\\u7528\\u6765\\u8868\\u73b0HTML\\uff08\\u6807\\u51c6\\u901a\\u7528\\u6807\\u8bb0\\u8bed\\u8a00\\u7684\\u4e00\\u4e2a\\u5e94\\u7528\\uff09\\u6216XML\\uff08\\u6807\\u51c6\\u901a\\u7528\\u6807\\u8bb0\\u8bed\\u8a00\\u7684\\u4e00\\u4e2a\\u5b50\\u96c6\\uff09\\u7b49\\u6587\\u4ef6\\u6837\\u5f0f\\u7684\\u8ba1\\u7b97\\u673a\\u8bed\\u8a00\\u3002

CSS\\u662f\\u80fd\\u591f\\u771f\\u6b63\\u505a\\u5230\\u7f51\\u9875\\u8868\\u73b0\\u4e0e\\u5185\\u5bb9\\u5206\\u79bb\\u7684\\u4e00\\u79cd\\u6837\\u5f0f\\u8bbe\\u8ba1\\u8bed\\u8a00\\u3002\\u76f8\\u5bf9\\u4e8e\\u4f20\\u7edfHTML\\u7684\\u8868\\u73b0\\u800c\\u8a00\\uff0cCSS\\u80fd\\u591f\\u5bf9\\u7f51\\u9875\\u4e2d\\u7684\\u5bf9\\u8c61\\u7684\\u4f4d\\u7f6e\\u6392\\u7248\\u8fdb\\u884c\\u50cf\\u7d20\\u7ea7\\u7684\\u7cbe\\u786e\\u63a7\\u5236\\uff0c\\u652f\\u6301\\u51e0\\u4e4e\\u6240\\u6709\\u7684\\u5b57\\u4f53\\u5b57\\u53f7\\u6837\\u5f0f\\uff0c\\u62e5\\u6709\\u5bf9\\u7f51\\u9875\\u5bf9\\u8c61\\u548c\\u6a21\\u578b\\u6837\\u5f0f\\u7f16\\u8f91\\u7684\\u80fd\\u529b\\uff0c\\u5e76\\u80fd\\u591f\\u8fdb\\u884c\\u521d\\u6b65\\u4ea4\\u4e92\\u8bbe\\u8ba1\\uff0c\\u662f\\u76ee\\u524d\\u57fa\\u4e8e\\u6587\\u672c\\u5c55\\u793a\\u6700\\u4f18\\u79c0\\u7684\\u8868\\u73b0\\u8bbe\\u8ba1\\u8bed\\u8a00\\u3002

CSS\\u80fd\\u591f\\u6839\\u636e\\u4e0d\\u540c\\u4f7f\\u7528\\u8005\\u7684\\u7406\\u89e3\\u80fd\\u529b\\uff0c\\u7b80\\u5316\\u6216\\u8005\\u4f18\\u5316\\u5199\\u6cd5\\uff0c\\u9488\\u5bf9\\u5404\\u7c7b\\u4eba\\u7fa4\\uff0c\\u6709\\u8f83\\u5f3a\\u7684\\u6613\\u8bfb\\u6027\\u3002

\\u5728\\u6d4f\\u89c8\\u5668\\u4e2d\\u9884\\u89c8\\uff0c\\u663e\\u793a\\u6548\\u679c\\u5982\\u56fe3\\u6240\\u793a\\uff0c\\u53ef\\u4ee5\\u770b\\u5230\\u7b2c\\u4e00\\u6bb5\\u5b57\\u4f53\\u88ab\\u5355\\u72ec\\u653e\\u5927\\u5e76\\u52a0\\u7c97\\u3002\\u7c7b\\u9009\\u62e9\\u7b26\\u53ef\\u4ee5\\u7cbe\\u786e\\u5730\\u63a7\\u5236\\u9875\\u9762\\u4e2d\\u67d0\\u4e2a\\u5177\\u4f53\\u5143\\u7d20\\u5bf9\\u8c61\\uff0c\\u800c\\u4e0d\\u7ba1\\u8fd9\\u4e2a\\u5bf9\\u8c61\\u662f\\u5c5e\\u4e8e\\u4ec0\\u4e48\\u7c7b\\u578b\\u7684\\u6807\\u7b7e\\uff0c\\u540c\\u65f6\\u4e00\\u4e2a\\u7c7b\\u6837\\u5f0f\\u53ef\\u4ee5\\u5728\\u591a\\u4e2a\\u6807\\u7b7e\\u4e2d\\u88ab\\u5f15\\u7528\\u3002

\\u5728\\u81ea\\u5b9a\\u4e49\\u7c7b\\u540d\\u65f6\\uff0c\\u53ea\\u80fd\\u591f\\u4f7f\\u7528\\u5b57\\u6bcd\\u3001\\u6570\\u5b57\\u3001\\u4e0b\\u5212\\u7ebf\\uff08_\\uff09\\u548c\\u8fde\\u63a5\\u7b26\\u53f7\\uff08-\\uff09\\uff0c\\u7c7b\\u540d\\u5fc5\\u987b\\u4ee5\\u5b57\\u6bcd\\u5f00\\u5934\\uff0c\\u5426\\u5219\\u65e0\\u6548\\u3002\\u53e6\\u5916\\uff0c\\u7c7b\\u540d\\u662f\\u533a\\u5206\\u5927\\u5c0f\\u5199\\u7684\\uff0c\\u6240\\u4ee5\\u7c7bfontbold\\u548c\\u7c7bFontbold\\u662f\\u5b8c\\u5168\\u4e0d\\u540c\\u7684\\u4e24\\u4e2a\\u7c7b\\u3002

7.2.3ID\\u9009\\u62e9\\u5668

ID\\u662f\\u82f1\\u6587Identity\\u7684\\u7f29\\u5199\\uff0c\\u5b83\\u8868\\u793a\\u8eab\\u4efd\\u6807\\u8bc6\\u53f7\\u7801\\uff0c\\u5728\\u7f51\\u7edc\\u4e0a\\u4e00\\u822c\\u6307\\u7528\\u6237\\u8d26\\u53f7\\uff0c\\u4f46\\u662f\\u5728Web\\u8bbe\\u8ba1\\u4e2d\\u4e00\\u822c\\u6307\\u6807\\u7b7e\\u5728HTML\\u6587\\u6863\\u4e2d\\u7684\\u552f\\u4e00\\u7f16\\u53f7\\u3002\\u4ece\\u8fd9\\u70b9\\u6765\\u770b\\uff0cID\\u9009\\u62e9\\u5668\\u53ea\\u80fd\\u591f\\u5728HTML\\u9875\\u9762\\u4e2d\\u7528\\u4e00\\u6b21\\uff0c\\u5b83\\u662f\\u4e0e\\u6807\\u7b7e\\u9009\\u62e9\\u7b26\\u548c\\u7c7b\\u9009\\u62e9\\u7b26\\u4f5c\\u7528\\u8303\\u56f4\\u76f8\\u53cd\\u7684\\u4e00\\u4e2a\\u9009\\u62e9\\u7b26\\u3002ID\\u9009\\u62e9\\u7b26\\u901a\\u5e38\\u88ab\\u6765\\u5b9a\\u4e49HTML\\u6846\\u67b6\\u7ed3\\u6784\\u7684\\u5e03\\u5c40\\u6548\\u679c\\uff0c\\u56e0\\u4e3aHTML\\u6846\\u67b6\\u5143\\u7d20\\u7684ID\\u503c\\u90fd\\u662f\\u552f\\u4e00\\u7684\\u3002

ID\\u9009\\u62e9\\u7b26\\u5fc5\\u987b\\u4ee5\\u4e95\\u53f7\\uff08#\\uff09\\u524d\\u7f00\\u5f00\\u59cb\\uff0c\\u7136\\u540e\\u662f\\u4e00\\u4e2a\\u81ea\\u5b9a\\u4e49\\u7684ID\\u540d\\uff0c\\u5b9a\\u4e49\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a

#box{width:600px;height:auto;}\\u4f8b\\u5982\\uff0c\\u4e0b\\u9762\\u5b9e\\u4f8b\\u5b9a\\u4e49\\u4e00\\u4e2a\\u76d2\\u5b50\\uff0c\\u4e3a\\u8be5\\u76d2\\u5b50\\u6307\\u5b9a\\u5bbd\\u5ea6\\u548c\\u9ad8\\u5ea6\\uff0c\\u5e76\\u8bbe\\u7f6e\\u76d2\\u5b50\\u7684\\u80cc\\u666f\\u989c\\u8272\\u4ee5\\u53ca\\u8fb9\\u6846\\u548c\\u5185\\u8fb9\\u8ddd\\u5927\\u5c0f\\uff0c\\u663e\\u793a\\u6548\\u679c\\u5982\\u56fe4\\u6240\\u793a\\u30027.3\\u590d\\u5408\\u9009\\u62e9\\u5668\\u5982\\u679c\\u4ec5\\u4ec5\\u638c\\u63e1\\u4e86\\u6807\\u7b7e\\u9009\\u62e9\\u7b26\\u3001\\u7c7b\\u9009\\u62e9\\u7b26\\u548cID\\u9009\\u62e9\\u7b26\\u8fd8\\u8fdc\\u8fdc\\u4e0d\\u591f\\uff0c\\u5bf9\\u4e8e\\u7f51\\u9875\\u8bbe\\u8ba1\\u8005\\u6765\\u8bb2\\u8fd8\\u5e94\\u8be5\\u638c\\u63e1\\u9ad8\\u7ea7\\u9009\\u62e9\\u7b26\\u7684\\u4f7f\\u7528\\uff0c\\u5982\\u5b50\\u9009\\u62e9\\u7b26\\u3001\\u76f8\\u90bb\\u9009\\u62e9\\u7b26\\u548c\\u5c5e\\u6027\\u9009\\u62e9\\u7b26\\u3002

\\u5229\\u7528\\u6807\\u7b7e\\u9009\\u62e9\\u7b26\\u548c\\u7c7b\\u9009\\u62e9\\u7b26\\u53ef\\u4ee5\\u63a7\\u5236\\u7f51\\u9875\\u4e2d\\u4f17\\u591a\\u5bf9\\u8c61\\u7684\\u6837\\u5f0f\\uff1b\\u800c\\u5229\\u7528ID\\u9009\\u62e9\\u7b26\\u3001\\u5b50\\u9009\\u62e9\\u7b26\\u548c\\u76f8\\u90bb\\u9009\\u62e9\\u7b26\\u53ef\\u4ee5\\u7cbe\\u786e\\u63a7\\u5236\\u9875\\u9762\\u4e2d\\u7684\\u7279\\u5b9a\\u5bf9\\u8c61\\u6837\\u5f0f\\uff1b\\u4f7f\\u7528\\u5c5e\\u6027\\u9009\\u62e9\\u7b26\\u53ef\\u4ee5\\u66f4\\u654f\\u6377\\u3001\\u66f4\\u6a21\\u7cca\\u5730\\u63a7\\u5236\\u9875\\u9762\\u4e2d\\u5305\\u542b\\u4e0d\\u540c\\u5c5e\\u6027\\u7684\\u5bf9\\u8c61\\u6837\\u5f0f\\u3002

7.3.1\\u5b50\\u9009\\u62e9\\u7b26

\\u5b50\\u9009\\u62e9\\u7b26\\u5c31\\u662f\\u6307\\u5b9a\\u7236\\u5143\\u7d20\\u6240\\u5305\\u542b\\u7684\\u5b50\\u5143\\u7d20\\u7684\\u6837\\u5f0f\\u3002\\u5b50\\u9009\\u62e9\\u7b26\\u4f7f\\u7528\\u5c16\\u89d2\\u53f7\\uff08>\\uff09\\u6765\\u8868\\u793a\\uff0c\\u5b9a\\u4e49\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a

div>span{font-size:20px;}\\u5176\\u4e2d\\uff0cdiv\\u4e3aspan\\u5143\\u7d20\\u7684\\u7236\\u5143\\u7d20\\uff0c\\u901a\\u8fc7\\u5b50\\u9009\\u62e9\\u7b26\\u8fde\\u63a5\\u3002

\\u4f8b\\u5982\\uff0c\\u5b9a\\u4e49span\\u5143\\u7d20\\u7684\\u5b57\\u4f53\\u5927\\u5c0f\\u4e3a10px\\uff0c\\u518d\\u5229\\u7528\\u5b50\\u9009\\u62e9\\u7b26\\u6765\\u5b9a\\u4e49\\u6240\\u6709div\\u5143\\u7d20\\u5305\\u542b\\u7684\\u5b50\\u5143\\u7d20span\\u6837\\u5f0f\\u5b57\\u4f53\\u5927\\u5c0f\\u4e3a20px\\uff0c\\u663e\\u793a\\u6548\\u679c\\u5982\\u56fe5\\u6240\\u793a\\u3002

CSS\\u57fa\\u7840\\u5165\\u95e8\\u5c42\\u53e0\\u6837\\u5f0f\\u8868\\u662f\\u4e00\\u79cd\\u7528\\u6765\\u8868\\u73b0HTML\\uff08\\u6807\\u51c6\\u901a\\u7528\\u6807\\u8bb0\\u8bed7.3.2\\u76f8\\u90bb\\u9009\\u62e9\\u5668

\\u76f8\\u90bb\\u9009\\u62e9\\u7b26\\u5c31\\u662f\\u6307\\u5b9a\\u4e00\\u4e2a\\u5143\\u7d20\\u76f8\\u90bb\\u7684\\u4e0b\\u4e00\\u4e2a\\u5143\\u7d20\\u7684\\u6837\\u5f0f\\u3002\\u76f8\\u90bb\\u9009\\u62e9\\u7b26\\u4f7f\\u7528\\u52a0\\u53f7\\uff08+\\uff09\\u6765\\u8868\\u793a\\uff0c\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a

div+span{font-size:20px;}\\u5176\\u4e2d\\uff0cdiv+span\\u8868\\u793adiv\\u5143\\u7d20\\u4e0espan\\u5143\\u7d20\\u76f8\\u90bb\\u3002\\u4f8b\\u5982\\uff0c\\u5229\\u7528\\u76f8\\u90bb\\u9009\\u62e9\\u7b26\\u9012\\u8fdb\\u63a7\\u5236\\u5e76\\u5217\\u663e\\u793a\\u7684\\u51e0\\u4e2a\\u5143\\u7d20\\u7684\\u663e\\u793a\\u6837\\u5f0f\\u3002h1+div\\u8868\\u793a\\u6807\\u9898\\u5143\\u7d20h1\\u540e\\u9762\\u76f8\\u90bb\\u7684div\\u5143\\u7d20\\u6837\\u5f0f\\uff0cdiv+p\\u8868\\u793adiv\\u5143\\u7d20\\u540e\\u9762\\u76f8\\u90bb\\u7684\\u5143\\u7d20p\\u7684\\u6837\\u5f0f\\uff0cp+div\\u8868\\u793ap\\u5143\\u7d20\\u540e\\u9762\\u76f8\\u90bb\\u7684div\\u5143\\u7d20\\u7684\\u6837\\u5f0f\\uff0c\\u800cdiv+div\\u8868\\u793adiv\\u5143\\u7d20\\u540e\\u9762\\u76f8\\u90bb\\u7684div\\u5143\\u7d20\\u7684\\u6837\\u5f0f\\u3002\\u6548\\u679c\\u5982\\u56fe6\\u6240\\u793a\\u3002

\\u56fe1

\\u56fe2

\\u56fe4

\\u56fe5

\\u56fe6

\x22,\x22contentText\x22:\x22\\u4ec0\\u4e48\\u662fCSS\\u6837\\u5f0f\\n\\u5c42\\u53e0\\u6837\\u5f0f\\u8868\\uff08CascadingStyleSheet\\uff0cCSS\\uff09\\u662f\\u4e00\\u7cfb\\u5217\\u6837\\u5f0f\\u6216\\u683c\\u5f0f\\u89c4\\u683c\\u7684\\u96c6\\u5408\\uff0c\\u7528\\u4e8e\\u63a7\\u5236\\u7f51\\u9875\\u6837\\u5f0f\\u5e76\\u5141\\u8bb8\\u5c06\\u6837\\u5f0f\\u4e0e\\u7f51\\u9875\\u5185\\u5bb9\\u5206\\u79bb\\u7684\\u4e00\\u79cd\\u6807\\u8bb0\\u6027\\u8bed\\u8a00\\u3002\\u5b83\\u662fW3C\\u7ec4\\u7ec7\\u7528\\u4e8e\\u6539\\u5584HTML\\u5728\\u663e\\u793a\\u7f51\\u9875\\u65b9\\u9762\\u7684\\u7f3a\\u9677\\u3002\\u867d\\u7136HTML\\u5728\\u53d1\\u5e03\\u65f6\\u5df2\\u7ecf\\u5236\\u5b9a\\u4e86\\u5404\\u79cd\\u7f51\\u9875\\u6837\\u5f0f\\u6807\\u7b7e\\u548c\\u5404\\u79cd\\u9875\\u9762\\u4fee\\u9970\\u5c5e\\u6027\\uff0c\\u4f46\\u662f\\u968f\\u7740\\u7f51\\u9875\\u5bb9\\u7eb3\\u7684\\u4fe1\\u606f\\u8d8a\\u6765\\u8d8a\\u591a\\uff0c\\u8fd9\\u79cd\\u628a\\u4fe1\\u606f\\u663e\\u793a\\u5185\\u5bb9\\u4e0e\\u4fe1\\u606f\\u663e\\u793a\\u6837\\u5f0f\\u6df7\\u5728\\u4e00\\u8d77\\u7684\\u65b9\\u6cd5\\uff0c\\u5df2\\u7ecf\\u65e0\\u6cd5\\u6ee1\\u8db3\\u4eba\\u4eec\\u5bf9\\u7f51\\u7edc\\u4fe1\\u606f\\u7684\\u5feb\\u901f\\u641c\\u7d22\\u9700\\u6c42\\uff0c\\u66f4\\u4e0d\\u80fd\\u9002\\u5e94\\u5927\\u6570\\u636e\\u65f6\\u4ee3\\u7684\\u5c55\\u793a\\u6570\\u636e\\u7684\\u8981\\u6c42\\u3002\\nCSS\\u7684\\u6bcf\\u4e00\\u4e2a\\u6837\\u5f0f\\u8868\\u90fd\\u662f\\u7531\\u76f8\\u5bf9\\u5e94\\u7684\\u6837\\u5f0f\\u89c4\\u5219\\u7ec4\\u6210\\u7684\\uff0c\\u4f7f\\u7528HTML\\u4e2d\\u7684\\u6807\\u7b7e\\u53ef\\u4ee5\\u5c06\\u6837\\u5f0f\\u8868\\u89c4\\u5219\\u52a0\\u5165\\u5230HTML\\u3002\\u6807\\u7b7e\\u4f4d\\u4e8eHTML\\u7684head\\u90e8\\u5206\\uff0c\\u5176\\u4e2d\\u4e5f\\u5305\\u542b\\u7f51\\u9875\\u7684\\u6837\\u5f0f\\u89c4\\u5212\\uff0c\\u5982\\u56fe1\\u6240\\u793a\\u3002CSS\\u8bed\\u53e5\\u53ef\\u4ee5\\u5185\\u5d4c\\u5728HTML\\u4e2d\\uff0c\\u6240\\u4ee5\\u7f16\\u5199CSS\\u6837\\u5f0f\\u89c4\\u5219\\u548c\\u7f16\\u5199HTML\\u7684\\u65b9\\u6cd5\\u76f8\\u540c\\u3002CSS\\u8bed\\u8a00\\u4e0d\\u9700\\u8981\\u7f16\\u8bd1\\uff0c\\u4e5f\\u4e0d\\u9700\\u8981\\u7279\\u6b8a\\u5904\\u7406\\u3002\\u7528\\u6237\\u53ea\\u8981\\u628a\\u5b83\\u4eec\\u653e\\u5728\\u6807\\u7b7e\\u4e4b\\u95f4\\u6216\\u8005\\u7f16\\u5199\\u4e3a\\u4e00\\u4e2a\\u5355\\u72ec\\u7684\\u6587\\u4ef6\\uff0c\\u7136\\u540e\\u5c06\\u6587\\u4ef6\\u7684\\u6269\\u5c55\\u540d\\u4fdd\\u5b58\\u4e3a.css\\uff0c\\u5229\\u7528\\u6807\\u7b7e\\u94fe\\u63a5\\u6216\\u8005\\u5bfc\\u5165\\u5230\\u7f51\\u9875\\u4e2d\\u5373\\u53ef\\u3002\\nCSS\\u6837\\u5f0f\\u7684\\u4f18\\u52bf\\n\\u4f7f\\u7528CSS\\u6837\\u5f0f\\u53ef\\u4ee5\\u5bf9\\u591a\\u4e2a\\u6587\\u6863\\u7684\\u6837\\u5f0f\\u8fdb\\u884c\\u63a7\\u5236\\uff0c\\u5f53CSS\\u6837\\u5f0f\\u66f4\\u65b0\\u540e\\uff0c\\u6240\\u6709\\u5e94\\u7528\\u8be5CSS\\u6837\\u5f0f\\u7684\\u9875\\u9762\\u90fd\\u4f1a\\u81ea\\u52a8\\u66f4\\u65b0\\u3002CSS\\u6837\\u5f0f\\u53ef\\u4ee5\\u9875\\u9762\\u5143\\u7d20\\u8fdb\\u884c\\u5b9a\\u4f4d\\u3001\\u7279\\u6b8a\\u6548\\u679c\\u548c\\u8d85\\u94fe\\u63a5\\u6548\\u679c\\u7b49\\u72ec\\u7279\\u7684HTML\\u5c5e\\u6027\\uff0c\\u53ef\\u4ee5\\u5145\\u5206\\u5730\\u5f25\\u8865HTML\\u7684\\u4e0d\\u8db3\\uff0c\\u7b80\\u5316\\u7f51\\u9875\\u7684\\u6e90\\u4ee3\\u7801\\uff0c\\u907f\\u514d\\u91cd\\u590d\\u52b3\\u52a8\\uff0c\\u51cf\\u8f7b\\u5de5\\u4f5c\\u91cf\\u3002CSS\\u5177\\u6709\\u4ee5\\u4e0b\\u4f18\\u52bf\\uff1a\\nCSS\\u7b26\\u5408Web\\u6807\\u51c6\\u3002W3C\\u7ec4\\u7ec7\\u63a8\\u8350CSS\\u6280\\u672f\\u5c06\\u66ff\\u4ee3HTML\\u7684\\u8868\\u683c\\u6807\\u7b7e\\u3001\\u6807\\u7b7e\\u3001\\u6807\\u7b7e\\u4ee5\\u53ca\\u5176\\u4ed6\\u7528\\u4e8e\\u8868\\u73b0\\u7684HTLM\\u5143\\u7d20\\u3002\\n\\u63d0\\u9ad8\\u9875\\u9762\\u7684\\u6d4f\\u89c8\\u901f\\u5ea6\\u3002\\u4f7f\\u7528CSS\\u6837\\u5f0f\\u6bd4\\u4f20\\u7edf\\u7684Web\\u8bbe\\u8ba1\\u65b9\\u6cd5\\u81f3\\u5c11\\u8282\\u7ea650%\\u4ee5\\u4e0a\\u7684\\u6587\\u4ef6\\u5927\\u5c0f\\u3002\\n\\u7f29\\u77ed\\u7f51\\u7ad9\\u6539\\u7248\\u5468\\u671f\\u3002\\u53ea\\u9700\\u8981\\u4fee\\u6539\\u76f8\\u5e94CSS\\u6587\\u4ef6\\u5c31\\u53ef\\u4ee5\\u91cd\\u65b0\\u8bbe\\u8ba1\\u4e00\\u4e2a\\u6709\\u6210\\u767e\\u4e0a\\u5343\\u9875\\u9762\\u7684\\u7ad9\\u70b9\\u3002\\n\\u5f3a\\u5927\\u7684\\u5b57\\u4f53\\u63a7\\u5236\\u548c\\u6392\\u7248\\u80fd\\u529b\\u3002Font\\u6807\\u7b7e\\u5bf9\\u4e8e\\u5b57\\u4f53\\u63a7\\u5236\\u80fd\\u529b\\u8fdc\\u6ca1\\u6709CSS\\u5bf9\\u4e8e\\u5b57\\u4f53\\u7684\\u63a7\\u5236\\u80fd\\u529b\\u5f3a\\uff0c\\u4f7f\\u7528CSS\\u6837\\u5f0f\\u540e\\u4e0d\\u9700\\u8981\\u5728\\u4f7f\\u7528font\\u6807\\u7b7e\\u6765\\u63a7\\u5236\\u6587\\u7ae0\\u6807\\u9898\\u3001\\u5b57\\u4f53\\u989c\\u8272\\u4ee5\\u53ca\\u5b57\\u4f53\\u6837\\u5f0f\\u7b49\\u3002\\nCSS\\u6613\\u4e8e\\u7f16\\u5199\\u3002Dreamweaver\\u63d0\\u4f9b\\u4e86CSS\\u7f16\\u5199\\u8f85\\u52a9\\u5de5\\u5177\\u3002\\nCSS\\u5177\\u6709\\u826f\\u597d\\u7684\\u517c\\u5bb9\\u6027\\u3002\\u53ea\\u8981\\u6d4f\\u89c8\\u5668\\u80fd\\u591f\\u8bc6\\u522bCSS\\u6837\\u5f0f\\u90fd\\u53ef\\u4ee5\\u5f88\\u597d\\u7684\\u5e94\\u7528\\u5b83\\u3002\\n\\u8868\\u73b0\\u548c\\u5185\\u5bb9\\u76f8\\u5206\\u79bb\\u3002\\u5c06\\u8bbe\\u8ba1\\u90e8\\u5206\\u5265\\u79bb\\u51fa\\u6765\\u653e\\u5728\\u4e00\\u4e2a\\u72ec\\u7acb\\u6837\\u5f0f\\u6587\\u4ef6\\u4e2d\\uff0c\\u8ba9\\u591a\\u4e2a\\u7f51\\u9875\\u6587\\u4ef6\\u5171\\u540c\\u4f7f\\u7528\\u5b83\\uff0c\\u7701\\u53bb\\u5728\\u6bcf\\u4e00\\u4e2a\\u7f51\\u9875\\u6587\\u4ef6\\u4e2d\\u90fd\\u8981\\u91cd\\u590d\\u8bbe\\u5b9a\\u6837\\u5f0f\\u7684\\u9ebb\\u70e6\\u3002\\nCSS\\u6837\\u5f0f\\u57fa\\u672c\\u8bed\\u6cd5\\nCSS\\u7684\\u8bed\\u6cd5\\u7ed3\\u6784\\u75313\\u90e8\\u5206\\u6784\\u6210\\uff1a\\u9009\\u62e9\\u5668\\u3001\\u5c5e\\u6027\\u548c\\u503c\\u3002\\n\\u9009\\u62e9\\u5668{\\u6837\\u5f0f\\u5c5e\\u6027:\\u53d6\\u503c;\\u6837\\u5f0f\\u5c5e\\u6027:\\u53d6\\u503c;\\u6837\\u5f0f\\u5c5e\\u6027:\\u53d6\\u503c;\\u2026\\u2026}\\u9009\\u62e9\\u5668\\uff08Selector\\uff09\\u901a\\u5e38\\u662f\\u6307\\u7528\\u6237\\u5e0c\\u671b\\u5b9a\\u4e49\\u7684HTML\\u5143\\u7d20\\u6216\\u6807\\u7b7e\\uff0c\\u5982body\\u3001h1\\uff1b\\u4e5f\\u53ef\\u4ee5\\u662f\\u81ea\\u5b9a\\u4e49\\u7684id\\u6216class\\u7684\\u6807\\u7b7e\\uff0c\\u5982#main\\u9009\\u62e9\\u5668\\u8868\\u793a\\u9009\\u62e9\\uff0c\\u5373\\u4e00\\u4e2a\\u88ab\\u6307\\u5b9a\\u4e86main\\u4e3aid\\u7684\\u5bf9\\u8c61\\u3002\\u6d4f\\u89c8\\u5668\\u5c06\\u5bf9CSS\\u9009\\u62e9\\u5668\\u8fdb\\u884c\\u4e25\\u683c\\u7684\\u89e3\\u6790\\uff0c\\u6bcf\\u4e00\\u7ec4\\u6837\\u5f0f\\u5747\\u4f1a\\u88ab\\u6d4f\\u89c8\\u5668\\u5e94\\u7528\\u5230\\u5bf9\\u5e94\\u7684\\u5bf9\\u8c61\\u4e0a\\u3002\\n\\u5c5e\\u6027\\uff08Property\\uff09\\u662f\\u7528\\u6237\\u5e0c\\u671b\\u6539\\u53d8\\u7684\\u5c5e\\u6027\\uff0c\\u5e76\\u4e14\\u6bcf\\u4e2a\\u5c5e\\u6027\\u90fd\\u6709\\u4e00\\u4e2a\\u503c\\u3002\\u5bf9\\u4e8e\\u6bcf\\u4e00\\u4e2aHTML\\u4e2d\\u7684\\u6807\\u7b7e\\uff0cCSS\\u90fd\\u63d0\\u4f9b\\u4e86\\u4e30\\u5bcc\\u7684\\u6837\\u5f0f\\u5c5e\\u6027\\uff0c\\u5982\\u989c\\u8272\\u3001\\u5927\\u5c0f\\u3001\\u4f4d\\u7f6e\\u4ee5\\u53ca\\u6d6e\\u52a8\\u65b9\\u5f0f\\u7b49\\u3002\\n\\u503c\\uff08Value\\uff09\\u6307\\u5c5e\\u6027\\u7684\\u503c\\u3002\\u5c5e\\u6027\\u548c\\u503c\\u88ab\\u5192\\u53f7\\u5206\\u5f00\\uff0c\\u5e76\\u7531\\u82b1\\u62ec\\u53f7\\u5305\\u56f4\\uff0c\\u8fd9\\u6837\\u5c31\\u7ec4\\u6210\\u4e86\\u4e00\\u4e2a\\u5b8c\\u6574\\u7684\\u6837\\u5f0f\\u58f0\\u660e\\uff08declaration\\uff09\\u3002\\u5c5e\\u6027\\u503c\\u6709\\u4e24\\u79cd\\u5f62\\u5f0f\\uff1a\\u4e00\\u79cd\\u662f\\u6307\\u5b9a\\u8303\\u56f4\\u7684\\u503c\\uff0c\\u5982float\\u5c5e\\u6027\\u7684\\u53d6\\u503c\\u4e3aleft\\u3001right\\u548cnone\\uff1b\\u53e6\\u4e00\\u79cd\\u4e3a\\u6570\\u503c\\uff0c\\u5982height\\u5c5e\\u6027\\u53d6\\u503c\\u4e3a0~9999px\\u6216\\u8005\\u901a\\u8fc7\\u5176\\u4ed6\\u6570\\u5b66\\u5355\\u4f4d\\u6765\\u6307\\u5b9a\\u3002\\n\\u4f8b\\u5982\\uff0c\\u5b9a\\u4e49\\u4e00\\u4e2a\\u7f51\\u9875\\u5b57\\u4f53\\u5927\\u5c0f\\u4e3a12\\u50cf\\u7d20\\u3001\\u52a0\\u7c97\\uff0c\\u6bb5\\u843d\\u9996\\u884c\\u7f29\\u8fdb2\\u5b57\\u7b26\\uff0c\\u5219\\u53ef\\u4ee5\\u8bbe\\u7f6e\\u6837\\u5f0f\\u5982\\u4e0b\\uff1a\\u65e0\\u6807\\u9898\\u6587\\u6863\\u5c42\\u53e0\\u6837\\u5f0f\\u8868\\u662f\\u4e00\\u79cd\\u7528\\u6765\\u8868\\u73b0HTML\\uff08\\u6807\\u51c6\\u901a\\u7528\\u6807\\u8bb0\\u8bed\\u8a00\\u7684\\u4e00\\u4e2a\\u5e94\\u7528\\uff09\\u6216XML\\uff08\\u6807\\u51c6\\u901a\\u7528\\u6807\\u8bb0\\u8bed\\u8a00\\u7684\\u4e00\\u4e2a\\u5b50\\u96c6\\uff09\\u7b49\\u6587\\u4ef6\\u6837\\u5f0f\\u7684\\u8ba1\\u7b97\\u673a\\u8bed\\u8a00\\u3002\\nCSS\\u76ee\\u524d\\u6700\\u65b0\\u7248\\u672c\\u4e3aCSS3\\uff0c\\u662f\\u80fd\\u591f\\u771f\\u6b63\\u505a\\u5230\\u7f51\\u9875\\u8868\\u73b0\\u4e0e\\u5185\\u5bb9\\u5206\\u79bb\\u7684\\u4e00\\u79cd\\u6837\\u5f0f\\u8bbe\\u8ba1\\u8bed\\u8a00\\u3002\\u76f8\\u5bf9\\u4e8e\\u4f20\\u7edfHTML\\u7684\\u8868\\u73b0\\u800c\\u8a00\\uff0cCSS\\u80fd\\u591f\\u5bf9\\u7f51\\u9875\\u4e2d\\u7684\\u5bf9\\u8c61\\u7684\\u4f4d\\u7f6e\\u6392\\u7248\\u8fdb\\u884c\\u50cf\\u7d20\\u7ea7\\u7684\\u7cbe\\u786e\\u63a7\\u5236\\uff0c\\u652f\\u6301\\u51e0\\u4e4e\\u6240\\u6709\\u7684\\u5b57\\u4f53\\u5b57\\u53f7\\u6837\\u5f0f\\uff0c\\u62e5\\u6709\\u5bf9\\u7f51\\u9875\\u5bf9\\u8c61\\u548c\\u6a21\\u578b\\u6837\\u5f0f\\u7f16\\u8f91\\u7684\\u80fd\\u529b\\uff0c\\u5e76\\u80fd\\u591f\\u8fdb\\u884c\\u521d\\u6b65\\u4ea4\\u4e92\\u8bbe\\u8ba1\\uff0c\\u662f\\u76ee\\u524d\\u57fa\\u4e8e\\u6587\\u672c\\u5c55\\u793a\\u6700\\u4f18\\u79c0\\u7684\\u8868\\u73b0\\u8bbe\\u8ba1\\u8bed\\u8a00\\u3002CSS\\u80fd\\u591f\\u6839\\u636e\\u4e0d\\u540c\\u4f7f\\u7528\\u8005\\u7684\\u7406\\u89e3\\u80fd\\u529b\\uff0c\\u7b80\\u5316\\u6216\\u8005\\u4f18\\u5316\\u5199\\u6cd5\\uff0c\\u9488\\u5bf9\\u5404\\u7c7b\\u4eba\\u7fa4\\uff0c\\u6709\\u8f83\\u5f3a\\u7684\\u6613\\u8bfb\\u6027\\u3002\\n\\u6d4f\\u89c8\\u5668\\u901a\\u8fc7\\u89e3\\u6790\\u5c5e\\u6027\\u5305\\u542b\\u7684\\u5185\\u5bb9\\uff0c\\u5c06CSS\\u6837\\u5f0f\\u5e94\\u7528\\u5230\\u9875\\u9762\\u4e0a\\uff0c\\u5982\\u56fe2\\u6240\\u793a\\u3002\\u591a\\u4e2a\\u6837\\u5f0f\\u53ef\\u4ee5\\u5e76\\u5217\\u5728\\u4e00\\u8d77\\u5199\\uff0c\\u4e0d\\u9700\\u8981\\u8003\\u8651\\u5982\\u4f55\\u8fdb\\u884c\\u5206\\u9694\\u3002\\u4f8b\\u5982\\uff0c\\u5b9a\\u4e49\\u4e00\\u4e2a\\u6bb5\\u843d\\u6587\\u672c\\u7684\\u80cc\\u666f\\u8272\\u4e3a\\u7d2b\\u8272\\uff0c\\u5219\\u53ef\\u4ee5\\u5728\\u4e0a\\u9762\\u6837\\u5f0f\\u7684\\u57fa\\u7840\\u4e0a\\u8fdb\\u884c\\u589e\\u52a0\\u6837\\u5f0f\\uff1a\\nBody{font-size:12px;font-weight:bold;text-indent:2em;}p{backgroundcolor:#FF00FF;}\\u7531\\u4e8eCSS\\u8bed\\u8a00\\u81ea\\u52a8\\u5ffd\\u7565\\u7a7a\\u683c\\uff08\\u9664\\u4e86\\u9009\\u62e9\\u5668\\u5185\\u90e8\\u7684\\u7a7a\\u683c\\uff09\\uff0c\\u56e0\\u6b64\\u53ef\\u4ee5\\u5229\\u7528\\u7a7a\\u683c\\u548c\\u6362\\u884c\\u7b26\\u6765\\u7f8e\\u5316CSS\\u6837\\u5f0f\\u6e90\\u4ee3\\u7801\\uff0c\\u4e0a\\u9762\\u7684\\u4ee3\\u7801\\u53ef\\u4ee5\\u8fdb\\u884c\\u5982\\u4e0b\\u7f8e\\u5316\\uff1a\\nBody{font-size:12px;font-weight:bold;text-indent:2em;}p{background-color:#FF00FF;}\\u7ecf\\u8fc7\\u7f8e\\u5316\\u7684CSS\\u6e90\\u4ee3\\u7801\\u770b\\u4e0a\\u53bb\\u4e00\\u76ee\\u4e86\\u7136\\uff0c\\u65e2\\u65b9\\u4fbf\\u9605\\u8bfb\\uff0c\\u4e5f\\u4fbf\\u4e8e\\u4fee\\u6539\\u3002\\nCSS\\u6e90\\u4ee3\\u7801\\u6709\\u65f6\\u5019\\u9700\\u8981\\u901a\\u8fc7\\u4e00\\u4e9b\\u6ce8\\u91ca\\u6765\\u6807\\u6ce8\\uff0cCSS\\u4ee3\\u7801\\u8868\\u793a\\u4ec0\\u4e48\\u610f\\u601d\\u3002\\u5728HTML\\u4e2d\\u6ce8\\u91ca\\u6807\\u8bb0\\u4f7f\\u7528\\u201c\\u201d\\uff0cCSS\\u4e2d\\u6ce8\\u91ca\\u6807\\u8bb0\\u4f7f\\u7528\\u201c\\\/*\\u6ce8\\u91ca\\u5185\\u5bb9*\\\/\\u201d\\u3002\\u4f8b\\u5982\\uff0c\\u53ef\\u4ee5\\u5bf9\\u4e0a\\u9762\\u7684\\u4ee3\\u7801\\u8fdb\\u884c\\u6ce8\\u91ca\\uff1a\\nBody{\\\/*\\u9875\\u9762\\u7684\\u57fa\\u672c\\u5c5e\\u6027*\\\/font-size:12px;font-weight:bold;text-indent:2em;}\\\/*\\u8bbe\\u7f6e\\u6bb5\\u843d\\u7684\\u80cc\\u666f\\u989c\\u8272\\u4e3a\\u7d2b\\u8272*\\\/p{background-color:#FF00FF;}\\u6dfb\\u52a0CSS\\u7684\\u65b9\\u6cd5\\n\\u5728HTML\\u4e2d\\u6dfb\\u52a0CSS\\u7684\\u65b9\\u6cd5\\u4e3b\\u8981\\u67094\\u79cd\\uff0c\\u5206\\u522b\\u4e3a\\u94fe\\u63a5\\u5185\\u5d4c\\u6837\\u5f0f\\u3001\\u5185\\u90e8\\u6837\\u5f0f\\u8868\\u3001\\u94fe\\u63a5\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u548c\\u5bfc\\u5165\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u3002\\n1\\uff0e\\u5185\\u5d4c\\u6837\\u5f0f\\u8868\\n\\u5185\\u5d4c\\u6837\\u5f0f\\u8868\\u662f\\u6df7\\u5408\\u5728HTML\\u6807\\u8bb0\\u91cc\\u4f7f\\u7528\\u7684\\uff0c\\u8be5\\u65b9\\u6cd5\\u53ef\\u4ee5\\u5f88\\u7b80\\u5355\\u5730\\u5bf9\\u67d0\\u4e2a\\u5143\\u7d20\\u5355\\u72ec\\u5b9a\\u4e49\\u6837\\u5f0f\\uff0c\\u4e3b\\u8981\\u662f\\u5728body\\u5185\\u5b9e\\u73b0\\u3002\\n\\u5185\\u5d4c\\u6837\\u5f0f\\u8868\\u7684\\u4f7f\\u7528\\u662f\\u76f4\\u63a5\\u5728HTML\\u6807\\u8bb0\\u91cc\\u52a0\\u5165style\\u53c2\\u6570\\uff0c\\u800cstyle\\u53c2\\u6570\\u7684\\u5185\\u5bb9\\u5c31\\u662fCSS\\u7684\\u5c5e\\u6027\\u548c\\u503c\\uff0c\\u5728style\\u5f15\\u53f7\\u91cc\\u7684\\u5185\\u5bb9\\u76f8\\u5f53\\u4e8e\\u5728\\u6837\\u5f0f\\u8868\\u7684\\u5927\\u62ec\\u53f7\\u91cc\\u7684\\u5185\\u5bb9\\uff0c\\u5176\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a\\n\\u5b57\\u4f53\\u5927\\u5c0f\\u4e3a12px\\uff0c\\u989c\\u8272\\u4e3a\\u7ea2\\u8272\\u5f53\\u6d4f\\u89c8\\u5668\\u89e3\\u6790\\u5230\\u8fd9\\u4e9b\\u6807\\u7b7e\\u65f6\\uff0c\\u68c0\\u6d4b\\u5230\\u8be5\\u6807\\u7b7e\\u4e2d\\u5305\\u542bstyle\\u5c5e\\u6027\\uff0c\\u5c31\\u4f1a\\u8c03\\u7528CSS\\u5f15\\u64ce\\u6765\\u89e3\\u6790style\\u5c5e\\u6027\\uff0c\\u5e76\\u628a\\u6548\\u679c\\u5c55\\u73b0\\u5230\\u9875\\u9762\\u4e0a\\u3002\\n\\u8be5\\u65b9\\u6cd5\\u4e0e\\u4f20\\u7edf\\u7f51\\u9875\\u8bbe\\u8ba1\\u5728\\u6807\\u7b7e\\u5185\\u589e\\u52a0\\u5c5e\\u6027\\u7684\\u8bbe\\u8ba1\\u65b9\\u6cd5\\u76f8\\u540c\\uff0c\\u8be5\\u65b9\\u6cd5\\u5b9e\\u9645\\u5e76\\u6ca1\\u6709\\u6ee1\\u8db3W3C\\u63d0\\u51fa\\u7684\\u5c06HTML\\u7ed3\\u6784\\u4e0eCSS\\u8868\\u73b0\\u5265\\u79bb\\u6765\\u8fdb\\u884c\\u8bbe\\u8ba1\\uff0c\\u56e0\\u6b64\\u5728\\u7f51\\u9875\\u8bbe\\u8ba1\\u4e2d\\u4e0d\\u5efa\\u8bae\\u4f7f\\u7528\\u8be5\\u65b9\\u6cd5\\uff0c\\u9664\\u975e\\u4e3a\\u9875\\u9762\\u4e2d\\u4e2a\\u522b\\u5143\\u7d20\\u8bbe\\u7f6e\\u67d0\\u4e2a\\u7279\\u5b9a\\u6837\\u5f0f\\u6548\\u679c\\u800c\\u5355\\u72ec\\u5b9a\\u4e49\\u3002\\n2\\uff0e\\u5185\\u90e8\\u6837\\u5f0f\\u8868\\n\\u5185\\u90e8\\u6837\\u5f0f\\u8868\\u4e0e\\u5185\\u5d4c\\u6837\\u5f0f\\u8868\\u7684\\u76f8\\u4f3c\\u4e4b\\u5904\\u5728\\u4e8e\\uff0c\\u90fd\\u5c06CSS\\u6837\\u5f0f\\u7f16\\u5199\\u5230\\u9875\\u9762\\u4e2d\\u3002\\u800c\\u4e0d\\u540c\\u7684\\u662f\\uff0c\\u5185\\u90e8\\u6837\\u5f0f\\u8868\\u53ef\\u4ee5\\u7edf\\u4e00\\u653e\\u7f6e\\u5728\\u4e00\\u4e2a\\u56fa\\u5b9a\\u7684\\u4f4d\\u7f6e\\uff0c\\u5176\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a\\n\\u5185\\u90e8\\u6837\\u5f0f\\u8868\\u901a\\u5e38\\u4f4d\\u4e8e\\u7f51\\u9875\\u7684\\u5934\\u90e8\\u533a\\u57df\\uff0c\\u76ee\\u7684\\u662f\\u8ba9CSS\\u6e90\\u4ee3\\u7801\\u5728\\u9875\\u9762\\u52a0\\u8f7d\\u524d\\u5148\\u88ab\\u89e3\\u6790\\u6267\\u884c\\uff0c\\u8fd9\\u6837\\u53ef\\u4ee5\\u907f\\u514d\\u5f53\\u7f51\\u9875\\u52a0\\u8f7d\\u5b8c\\u6210\\u540e\\uff0c\\u6ca1\\u6709CSS\\u6837\\u5f0f\\u6e32\\u67d3\\u800c\\u4f7f\\u7684\\u9875\\u9762\\u4fe1\\u606f\\u65e0\\u6cd5\\u6b63\\u5e38\\u663e\\u793a\\u30023\\uff0e\\u94fe\\u63a5\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u94fe\\u63a5\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u662f\\u5728CSS\\u4e2d\\u6700\\u5e38\\u7528\\u7684\\u4e00\\u79cd\\u5f62\\u5f0f\\uff0c\\u5b83\\u5c06CSS\\u6837\\u5f0f\\u4ee3\\u7801\\u5355\\u72ec\\u7f16\\u5199\\u5230\\u4e00\\u4e2a\\u72ec\\u7acb\\u7684\\u6587\\u4ef6\\u4e2d\\uff0c\\u7531\\u7f51\\u9875\\u8fdb\\u884c\\u8c03\\u7528\\uff0c\\u591a\\u4e2a\\u7f51\\u9875\\u53ef\\u4ee5\\u540c\\u65f6\\u4f7f\\u7528\\u540c\\u4e00\\u4e2a\\u6837\\u5f0f\\u6587\\u4ef6\\uff0c\\u5176\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a\\n\\u5176\\u4e2d\\uff0chref\\u5c5e\\u6027\\u8bbe\\u7f6e\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u6587\\u4ef6\\u7684\\u5730\\u5740\\uff0c\\u8be5\\u5730\\u5740\\u53ef\\u4ee5\\u662f\\u76f8\\u5bf9\\u5730\\u5740\\uff0c\\u4e5f\\u53ef\\u4ee5\\u662f\\u7edd\\u5bf9\\u5730\\u5740\\uff1brel\\u5c5e\\u6027\\u5b9a\\u4e49\\u8be5\\u6807\\u7b7e\\u5173\\u8054\\u7684\\u662f\\u6837\\u5f0f\\u8868\\u6807\\u7b7e\\uff1btype\\u5c5e\\u6027\\u5b9a\\u4e49\\u6587\\u6863\\u7684\\u7c7b\\u578b\\uff0c\\u5373CSS\\u6587\\u672c\\u6587\\u4ef6\\u3002\\n\\u7f51\\u7ad9\\u901a\\u5e38\\u91c7\\u7528\\u94fe\\u63a5\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u6765\\u8bbe\\u8ba1\\u7f51\\u7ad9\\u7684\\u8868\\u73b0\\u5c42\\uff0c\\u80fd\\u591f\\u5b9e\\u73b0CSS\\u6837\\u5f0f\\u4e0eHTML\\u7ed3\\u6784\\u7684\\u5206\\u79bb\\uff0c\\u8fd9\\u79cd\\u5206\\u79bb\\u539f\\u5219\\u662fW3C\\u6240\\u63d0\\u5021\\u7684\\uff0c\\u56e0\\u4e3a\\u8fd9\\u6837\\u53ef\\u4ee5\\u9ad8\\u6548\\u5730\\u7ba1\\u7406\\u6587\\u6863\\u7ed3\\u6784\\u548c\\u6837\\u5f0f\\u8868\\u6587\\u4ef6\\uff0c\\u5b9e\\u73b0\\u4ee3\\u7801\\u7684\\u4f18\\u5316\\u548c\\u91cd\\u7528\\u3002\\n4\\uff0e\\u5bfc\\u5165\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u5bfc\\u5165\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u662f\\u6307\\u5728\\u5185\\u90e8\\u6837\\u5f0f\\u8868\\u7684\\u6807\\u7b7e\\u5185\\u4f7f\\u7528@import\\u5173\\u952e\\u5b57\\u5bfc\\u5165\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u6587\\u4ef6\\uff0c\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a\\n\\u5728@import\\u5173\\u952e\\u5b57\\u540e\\u9762\\uff0c\\u4f7f\\u7528url()\\u51fd\\u6570\\u6765\\u628a\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u6587\\u4ef6\\u5bfc\\u5165\\u3002\\u6ce8\\u610f\\u4f7f\\u7528\\u65f6\\uff0c\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u7684\\u8def\\u5f84\\u3001\\u65b9\\u6cd5\\u548c\\u94fe\\u63a5\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u7684\\u65b9\\u6cd5\\u7c7b\\u4f3c\\uff0c\\u4f46\\u5bfc\\u5165\\u5916\\u90e8\\u6837\\u5f0f\\u8868\\u8f93\\u5165\\u65b9\\u5f0f\\u66f4\\u6709\\u4f18\\u52bf\\u3002\\u5b9e\\u8d28\\u4e0a\\u5b83\\u662f\\u76f8\\u5f53\\u4e8e\\u5b58\\u5728\\u5185\\u90e8\\u6837\\u5f0f\\u8868\\u4e2d\\u7684\\u3002\\n7.2CSS\\u57fa\\u672c\\u9009\\u62e9\\u5668\\n\\u9009\\u62e9\\u5668\\u51b3\\u5b9a\\u6837\\u5f0f\\u89c4\\u5219\\u4f5c\\u7528\\u4e8e\\u54ea\\u4e9b\\u5143\\u7d20\\u3002\\u4f8b\\u5982\\uff0c\\u5982\\u679c\\u8981\\u5bf9table\\u5143\\u7d20\\u6dfb\\u52a0\\u8fb9\\u6846\\u4e3a\\u5b9e\\u7ebf\\u3001\\u7ebf\\u5bbd1\\u50cf\\u7d20\\u3001\\u84dd\\u8272\\u7684\\u8fb9\\u6846\\uff0c\\u5219\\u9700\\u8981\\u521b\\u5efa\\u4e00\\u4e2a\\u53ea\\u8bc6\\u522btable\\u5143\\u7d20\\u800c\\u4e0d\\u5f71\\u54cd\\u5176\\u4ed6\\u5143\\u7d20\\u7684\\u9009\\u62e9\\u5668\\u3002\\u5982\\u679c\\u8981\\u5bf9\\u6bcf\\u4e2a\\u533a\\u57df\\u4e2d\\u7684table\\u8bbe\\u7f6e\\u7279\\u6b8a\\u683c\\u5f0f\\uff0c\\u5c31\\u9700\\u8981\\u521b\\u5efa\\u4e00\\u4e2a\\u7a0d\\u5fae\\u590d\\u6742\\u4e00\\u4e9b\\u7684\\u9009\\u62e9\\u5668\\uff0c\\u5b83\\u53ea\\u8bc6\\u522b\\u6307\\u5b9a\\u533a\\u57df\\u4e2d\\u7684table\\u5143\\u7d20\\u3002\\n7.2.1\\u6807\\u7b7e\\u9009\\u62e9\\u5668\\nHTML\\u6587\\u6863\\u90fd\\u662f\\u7531\\u5f88\\u591a\\u6807\\u7b7e\\u901a\\u8fc7\\u4e00\\u5b9a\\u7684\\u89c4\\u5219\\u7f16\\u7ec7\\u800c\\u6210\\u7684\\uff0c\\u6211\\u4eec\\u4e5f\\u53ef\\u4ee5\\u628a\\u8fd9\\u4e9b\\u6807\\u7b7e\\u79f0\\u4e3a\\u7f51\\u9875\\u5143\\u7d20\\u3002\\u6807\\u7b7e\\u9009\\u62e9\\u5668\\u4f7f\\u7528\\u7f51\\u9875\\u5143\\u7d20\\u5b9a\\u4e49\\u6837\\u5f0f\\u3002\\n\\u4f8b\\u5982\\uff0c\\u58f0\\u660ep\\u5143\\u7d20\\u9996\\u884c\\u7f29\\u8fdb2\\u5b57\\u7b26\\uff0c\\u5b57\\u4f53\\u989c\\u8272\\u4e3a\\u7ea2\\u8272\\uff1b\\u6240\\u6709h1\\u5b57\\u53f7\\u4e3a15px\\u3001\\u52a0\\u7c97\\uff0c\\u4ee3\\u7801\\u5982\\u4e0b\\uff1a\\n\\u5176\\u4e2d\\uff0cp\\u548ch1\\u90fd\\u662fHTML\\u7279\\u5b9a\\u7684\\u6807\\u7b7e\\u540d\\u79f0\\uff0c\\u76f4\\u63a5\\u5f15\\u7528\\u5373\\u53ef\\u3002\\n\\u6ce8\\u610f\\uff1a*\\u53f7\\u4e3a\\u901a\\u914d\\u7b26\\u5339\\u914d\\u9875\\u9762\\u4e2d\\u7684\\u6240\\u6709\\u5143\\u7d20\\u540d\\u79f0\\u3002\\u4e0a\\u9762\\u7684\\u4ee3\\u7801\\u8bbe\\u7f6e\\u6bcf\\u4e2a\\u5143\\u7d20\\u7684\\u5185\\u5916\\u8fb9\\u8ddd\\u4e3a0px\\u3002\\u7531\\u4e8e\\u6bcf\\u4e2a\\u5143\\u7d20\\u90fd\\u6709\\u7cfb\\u7edf\\u9ed8\\u8ba4\\u7684\\u5185\\u5916\\u8fb9\\u8ddd\\u503c\\uff0c\\u4e14\\u5728\\u4e0d\\u540c\\u7684\\u6d4f\\u89c8\\u5668\\u4e2d\\u663e\\u793a\\u7684\\u6548\\u679c\\u4e5f\\u4e0d\\u540c\\uff0c\\u56e0\\u6b64\\u5728\\u8bbe\\u7f6e\\u7f51\\u9875\\u6837\\u5f0f\\u4e4b\\u521d\\u4f7f\\u7528\\u901a\\u914d\\u7b26*\\u5c06\\u6240\\u6709\\u5143\\u7d20\\u9ed8\\u8ba4\\u7684\\u5185\\u5916\\u8fb9\\u8ddd\\u53bb\\u6389\\u662f\\u5e38\\u89c1\\u505a\\u6cd5\\u3002\\n7.2.2\\u7c7b\\u522b\\u9009\\u62e9\\u5668\\n\\u4f7f\\u7528\\u6807\\u7b7e\\u9009\\u62e9\\u7b26\\u53ef\\u4ee5\\u65b9\\u4fbf\\u5730\\u5bf9\\u6807\\u7b7e\\u8fdb\\u884c\\u6837\\u5f0f\\u8bbe\\u7f6e\\uff0c\\u540c\\u65f6\\u6807\\u7b7e\\u9009\\u62e9\\u7b26\\u4e5f\\u5b58\\u5728\\u8f83\\u591a\\u95ee\\u9898\\u3002\\u56e0\\u4e3a\\u6807\\u7b7e\\u9009\\u62e9\\u7b26\\u5bf9\\u6807\\u7b7e\\u6240\\u505a\\u7684\\u5b9a\\u4e49\\u4e0d\\u5355\\u5355\\u5f71\\u54cd\\u6240\\u9009\\u62e9\\u7684\\u6807\\u7b7e\\u5143\\u7d20\\uff0c\\u800c\\u662f\\u5bf9\\u6574\\u4e2a\\u9875\\u9762\\u4e2d\\u6240\\u6709\\u76f8\\u540c\\u6807\\u7b7e\\u90fd\\u4f1a\\u8d77\\u4f5c\\u7528\\u3002\\u5982\\u679c\\u9700\\u8981\\u5bf9\\u540c\\u4e00\\u4e2a\\u6807\\u7b7e\\u5728\\u7f51\\u9875\\u4e2d\\u7684\\u4e0d\\u540c\\u4f4d\\u7f6e\\u663e\\u793a\\u4e0d\\u540c\\u7684\\u6837\\u5f0f\\uff0c\\u4f7f\\u7528\\u8fd9\\u79cd\\u65b9\\u6cd5\\u5b9a\\u4e49\\u7684\\u6837\\u5f0f\\u5c31\\u5b58\\u5728\\u5f88\\u591a\\u4e0d\\u8db3\\u3002\\u5bf9\\u4e8e\\u8fd9\\u4e2a\\u95ee\\u9898\\u53ef\\u4ee5\\u4f7f\\u7528\\u7c7b\\u9009\\u62e9\\u5668\\u6765\\u89e3\\u51b3\\u3002\\n\\u7c7b\\uff08Class\\uff09\\u9009\\u62e9\\u7b26\\u5c31\\u662f\\u4e3a\\u4e86\\u4e0d\\u540c\\u5143\\u7d20\\u62e5\\u6709\\u76f8\\u540c\\u7684\\u663e\\u793a\\u6837\\u5f0f\\u800c\\u5b9a\\u4e49\\u7684\\u3002\\u4f8b\\u5982\\uff0c\\u5728\\u4e0b\\u9762\\u8fd9\\u4e2a\\u9875\\u9762\\u4e2d\\u5305\\u542b\\u4e09\\u6bb5\\u6587\\u672c\\uff0c\\u901a\\u8fc7\\u6807\\u7b7e\\u9009\\u62e9\\u5668\\u5c06\\u6240\\u6709\\u6bb5\\u843d\\u6587\\u672c\\u5927\\u5c0f\\u5b9a\\u4e49\\u4e3a13px\\uff0c\\u9996\\u884c\\u7f29\\u8fdb2\\u5b57\\u7b26\\uff0c\\u5b57\\u4f53\\u989c\\u8272\\u4e3a\\u84dd\\u8272\\u3002\\n\\u5c42\\u53e0\\u6837\\u5f0f\\u8868\\u662f\\u4e00\\u79cd\\u7528\\u6765\\u8868\\u73b0HTML\\uff08\\u6807\\u51c6\\u901a\\u7528\\u6807\\u8bb0\\u8bed\\u8a00\\u7684\\u4e00\\u4e2a\\u5e94\\u7528\\uff09\\u6216XML\\uff08\\u6807\\u51c6\\u901a\\u7528\\u6807\\u8bb0\\u8bed\\u8a00\\u7684\\u4e00\\u4e2a\\u5b50\\u96c6\\uff09\\u7b49\\u6587\\u4ef6\\u6837\\u5f0f\\u7684\\u8ba1\\u7b97\\u673a\\u8bed\\u8a00\\u3002\\nCSS\\u76ee\\u524d\\u6700\\u65b0\\u7248\\u672c\\u4e3aCSS3\\uff0c\\u662f\\u80fd\\u591f\\u771f\\u6b63\\u505a\\u5230\\u7f51\\u9875\\u8868\\u73b0\\u4e0e\\u5185\\u5bb9\\u5206\\u79bb\\u7684\\u4e00\\u79cd\\u6837\\u5f0f\\u8bbe\\u8ba1\\u8bed\\u8a00\\u3002\\u76f8\\u5bf9\\u4e8e\\u4f20\\u7edfHTML\\u7684\\u8868\\u73b0\\u800c\\u8a00\\uff0cCSS\\u80fd\\u591f\\u5bf9\\u7f51\\u9875\\u4e2d\\u7684\\u5bf9\\u8c61\\u7684\\u4f4d\\u7f6e\\u6392\\u7248\\u8fdb\\u884c\\u50cf\\u7d20\\u7ea7\\u7684\\u7cbe\\u786e\\u63a7\\u5236\\uff0c\\u652f\\u6301\\u51e0\\u4e4e\\u6240\\u6709\\u7684\\u5b57\\u4f53\\u5b57\\u53f7\\u6837\\u5f0f\\uff0c\\u62e5\\u6709\\u5bf9\\u7f51\\u9875\\u5bf9\\u8c61\\u548c\\u6a21\\u578b\\u6837\\u5f0f\\u7f16\\u8f91\\u7684\\u80fd\\u529b\\uff0c\\u5e76\\u80fd\\u591f\\u8fdb\\u884c\\u521d\\u6b65\\u4ea4\\u4e92\\u8bbe\\u8ba1\\uff0c\\u662f\\u76ee\\u524d\\u57fa\\u4e8e\\u6587\\u672c\\u5c55\\u793a\\u6700\\u4f18\\u79c0\\u7684\\u8868\\u73b0\\u8bbe\\u8ba1\\u8bed\\u8a00\\u3002\\nCSS\\u80fd\\u591f\\u6839\\u636e\\u4e0d\\u540c\\u4f7f\\u7528\\u8005\\u7684\\u7406\\u89e3\\u80fd\\u529b\\uff0c\\u7b80\\u5316\\u6216\\u8005\\u4f18\\u5316\\u5199\\u6cd5\\uff0c\\u9488\\u5bf9\\u5404\\u7c7b\\u4eba\\u7fa4\\uff0c\\u6709\\u8f83\\u5f3a\\u7684\\u6613\\u8bfb\\u6027\\u3002\\n\\u5982\\u679c\\u73b0\\u5728\\u8981\\u6c42\\u628a\\u7b2c\\u4e00\\u6bb5\\u5b57\\u4f53\\u5927\\u5c0f\\u6539\\u4e3a20px\\uff0c\\u5b57\\u4f53\\u52a0\\u7c97\\uff0c\\u8fd9\\u65f6\\u5c31\\u53ef\\u4ee5\\u4f7f\\u7528\\u7c7b\\u9009\\u62e9\\u7b26\\u3002\\u5b9a\\u4e49\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a\\n.fontbold{font-size:20px;font-weight:bold;}\\u5c42\\u53e0\\u6837\\u5f0f\\u8868\\u662f\\u4e00\\u79cd\\u7528\\u6765\\u8868\\u73b0HTML\\uff08\\u6807\\u51c6\\u901a\\u7528\\u6807\\u8bb0\\u8bed\\u8a00\\u7684\\u4e00\\u4e2a\\u5e94\\u7528\\uff09\\u6216XML\\uff08\\u6807\\u51c6\\u901a\\u7528\\u6807\\u8bb0\\u8bed\\u8a00\\u7684\\u4e00\\u4e2a\\u5b50\\u96c6\\uff09\\u7b49\\u6587\\u4ef6\\u6837\\u5f0f\\u7684\\u8ba1\\u7b97\\u673a\\u8bed\\u8a00\\u3002\\nCSS\\u662f\\u80fd\\u591f\\u771f\\u6b63\\u505a\\u5230\\u7f51\\u9875\\u8868\\u73b0\\u4e0e\\u5185\\u5bb9\\u5206\\u79bb\\u7684\\u4e00\\u79cd\\u6837\\u5f0f\\u8bbe\\u8ba1\\u8bed\\u8a00\\u3002\\u76f8\\u5bf9\\u4e8e\\u4f20\\u7edfHTML\\u7684\\u8868\\u73b0\\u800c\\u8a00\\uff0cCSS\\u80fd\\u591f\\u5bf9\\u7f51\\u9875\\u4e2d\\u7684\\u5bf9\\u8c61\\u7684\\u4f4d\\u7f6e\\u6392\\u7248\\u8fdb\\u884c\\u50cf\\u7d20\\u7ea7\\u7684\\u7cbe\\u786e\\u63a7\\u5236\\uff0c\\u652f\\u6301\\u51e0\\u4e4e\\u6240\\u6709\\u7684\\u5b57\\u4f53\\u5b57\\u53f7\\u6837\\u5f0f\\uff0c\\u62e5\\u6709\\u5bf9\\u7f51\\u9875\\u5bf9\\u8c61\\u548c\\u6a21\\u578b\\u6837\\u5f0f\\u7f16\\u8f91\\u7684\\u80fd\\u529b\\uff0c\\u5e76\\u80fd\\u591f\\u8fdb\\u884c\\u521d\\u6b65\\u4ea4\\u4e92\\u8bbe\\u8ba1\\uff0c\\u662f\\u76ee\\u524d\\u57fa\\u4e8e\\u6587\\u672c\\u5c55\\u793a\\u6700\\u4f18\\u79c0\\u7684\\u8868\\u73b0\\u8bbe\\u8ba1\\u8bed\\u8a00\\u3002\\n\\nCSS\\u80fd\\u591f\\u6839\\u636e\\u4e0d\\u540c\\u4f7f\\u7528\\u8005\\u7684\\u7406\\u89e3\\u80fd\\u529b\\uff0c\\u7b80\\u5316\\u6216\\u8005\\u4f18\\u5316\\u5199\\u6cd5\\uff0c\\u9488\\u5bf9\\u5404\\u7c7b\\u4eba\\u7fa4\\uff0c\\u6709\\u8f83\\u5f3a\\u7684\\u6613\\u8bfb\\u6027\\u3002\\n\\n\\u5728\\u6d4f\\u89c8\\u5668\\u4e2d\\u9884\\u89c8\\uff0c\\u663e\\u793a\\u6548\\u679c\\u5982\\u56fe3\\u6240\\u793a\\uff0c\\u53ef\\u4ee5\\u770b\\u5230\\u7b2c\\u4e00\\u6bb5\\u5b57\\u4f53\\u88ab\\u5355\\u72ec\\u653e\\u5927\\u5e76\\u52a0\\u7c97\\u3002\\u7c7b\\u9009\\u62e9\\u7b26\\u53ef\\u4ee5\\u7cbe\\u786e\\u5730\\u63a7\\u5236\\u9875\\u9762\\u4e2d\\u67d0\\u4e2a\\u5177\\u4f53\\u5143\\u7d20\\u5bf9\\u8c61\\uff0c\\u800c\\u4e0d\\u7ba1\\u8fd9\\u4e2a\\u5bf9\\u8c61\\u662f\\u5c5e\\u4e8e\\u4ec0\\u4e48\\u7c7b\\u578b\\u7684\\u6807\\u7b7e\\uff0c\\u540c\\u65f6\\u4e00\\u4e2a\\u7c7b\\u6837\\u5f0f\\u53ef\\u4ee5\\u5728\\u591a\\u4e2a\\u6807\\u7b7e\\u4e2d\\u88ab\\u5f15\\u7528\\u3002\\n\\u5728\\u81ea\\u5b9a\\u4e49\\u7c7b\\u540d\\u65f6\\uff0c\\u53ea\\u80fd\\u591f\\u4f7f\\u7528\\u5b57\\u6bcd\\u3001\\u6570\\u5b57\\u3001\\u4e0b\\u5212\\u7ebf\\uff08_\\uff09\\u548c\\u8fde\\u63a5\\u7b26\\u53f7\\uff08-\\uff09\\uff0c\\u7c7b\\u540d\\u5fc5\\u987b\\u4ee5\\u5b57\\u6bcd\\u5f00\\u5934\\uff0c\\u5426\\u5219\\u65e0\\u6548\\u3002\\u53e6\\u5916\\uff0c\\u7c7b\\u540d\\u662f\\u533a\\u5206\\u5927\\u5c0f\\u5199\\u7684\\uff0c\\u6240\\u4ee5\\u7c7bfontbold\\u548c\\u7c7bFontbold\\u662f\\u5b8c\\u5168\\u4e0d\\u540c\\u7684\\u4e24\\u4e2a\\u7c7b\\u3002\\n7.2.3ID\\u9009\\u62e9\\u5668\\nID\\u662f\\u82f1\\u6587Identity\\u7684\\u7f29\\u5199\\uff0c\\u5b83\\u8868\\u793a\\u8eab\\u4efd\\u6807\\u8bc6\\u53f7\\u7801\\uff0c\\u5728\\u7f51\\u7edc\\u4e0a\\u4e00\\u822c\\u6307\\u7528\\u6237\\u8d26\\u53f7\\uff0c\\u4f46\\u662f\\u5728Web\\u8bbe\\u8ba1\\u4e2d\\u4e00\\u822c\\u6307\\u6807\\u7b7e\\u5728HTML\\u6587\\u6863\\u4e2d\\u7684\\u552f\\u4e00\\u7f16\\u53f7\\u3002\\u4ece\\u8fd9\\u70b9\\u6765\\u770b\\uff0cID\\u9009\\u62e9\\u5668\\u53ea\\u80fd\\u591f\\u5728HTML\\u9875\\u9762\\u4e2d\\u7528\\u4e00\\u6b21\\uff0c\\u5b83\\u662f\\u4e0e\\u6807\\u7b7e\\u9009\\u62e9\\u7b26\\u548c\\u7c7b\\u9009\\u62e9\\u7b26\\u4f5c\\u7528\\u8303\\u56f4\\u76f8\\u53cd\\u7684\\u4e00\\u4e2a\\u9009\\u62e9\\u7b26\\u3002ID\\u9009\\u62e9\\u7b26\\u901a\\u5e38\\u88ab\\u6765\\u5b9a\\u4e49HTML\\u6846\\u67b6\\u7ed3\\u6784\\u7684\\u5e03\\u5c40\\u6548\\u679c\\uff0c\\u56e0\\u4e3aHTML\\u6846\\u67b6\\u5143\\u7d20\\u7684ID\\u503c\\u90fd\\u662f\\u552f\\u4e00\\u7684\\u3002\\nID\\u9009\\u62e9\\u7b26\\u5fc5\\u987b\\u4ee5\\u4e95\\u53f7\\uff08#\\uff09\\u524d\\u7f00\\u5f00\\u59cb\\uff0c\\u7136\\u540e\\u662f\\u4e00\\u4e2a\\u81ea\\u5b9a\\u4e49\\u7684ID\\u540d\\uff0c\\u5b9a\\u4e49\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a\\n#box{width:600px;height:auto;}\\u4f8b\\u5982\\uff0c\\u4e0b\\u9762\\u5b9e\\u4f8b\\u5b9a\\u4e49\\u4e00\\u4e2a\\u76d2\\u5b50\\uff0c\\u4e3a\\u8be5\\u76d2\\u5b50\\u6307\\u5b9a\\u5bbd\\u5ea6\\u548c\\u9ad8\\u5ea6\\uff0c\\u5e76\\u8bbe\\u7f6e\\u76d2\\u5b50\\u7684\\u80cc\\u666f\\u989c\\u8272\\u4ee5\\u53ca\\u8fb9\\u6846\\u548c\\u5185\\u8fb9\\u8ddd\\u5927\\u5c0f\\uff0c\\u663e\\u793a\\u6548\\u679c\\u5982\\u56fe4\\u6240\\u793a\\u30027.3\\u590d\\u5408\\u9009\\u62e9\\u5668\\u5982\\u679c\\u4ec5\\u4ec5\\u638c\\u63e1\\u4e86\\u6807\\u7b7e\\u9009\\u62e9\\u7b26\\u3001\\u7c7b\\u9009\\u62e9\\u7b26\\u548cID\\u9009\\u62e9\\u7b26\\u8fd8\\u8fdc\\u8fdc\\u4e0d\\u591f\\uff0c\\u5bf9\\u4e8e\\u7f51\\u9875\\u8bbe\\u8ba1\\u8005\\u6765\\u8bb2\\u8fd8\\u5e94\\u8be5\\u638c\\u63e1\\u9ad8\\u7ea7\\u9009\\u62e9\\u7b26\\u7684\\u4f7f\\u7528\\uff0c\\u5982\\u5b50\\u9009\\u62e9\\u7b26\\u3001\\u76f8\\u90bb\\u9009\\u62e9\\u7b26\\u548c\\u5c5e\\u6027\\u9009\\u62e9\\u7b26\\u3002\\n\\u5229\\u7528\\u6807\\u7b7e\\u9009\\u62e9\\u7b26\\u548c\\u7c7b\\u9009\\u62e9\\u7b26\\u53ef\\u4ee5\\u63a7\\u5236\\u7f51\\u9875\\u4e2d\\u4f17\\u591a\\u5bf9\\u8c61\\u7684\\u6837\\u5f0f\\uff1b\\u800c\\u5229\\u7528ID\\u9009\\u62e9\\u7b26\\u3001\\u5b50\\u9009\\u62e9\\u7b26\\u548c\\u76f8\\u90bb\\u9009\\u62e9\\u7b26\\u53ef\\u4ee5\\u7cbe\\u786e\\u63a7\\u5236\\u9875\\u9762\\u4e2d\\u7684\\u7279\\u5b9a\\u5bf9\\u8c61\\u6837\\u5f0f\\uff1b\\u4f7f\\u7528\\u5c5e\\u6027\\u9009\\u62e9\\u7b26\\u53ef\\u4ee5\\u66f4\\u654f\\u6377\\u3001\\u66f4\\u6a21\\u7cca\\u5730\\u63a7\\u5236\\u9875\\u9762\\u4e2d\\u5305\\u542b\\u4e0d\\u540c\\u5c5e\\u6027\\u7684\\u5bf9\\u8c61\\u6837\\u5f0f\\u3002\\n7.3.1\\u5b50\\u9009\\u62e9\\u7b26\\n\\u5b50\\u9009\\u62e9\\u7b26\\u5c31\\u662f\\u6307\\u5b9a\\u7236\\u5143\\u7d20\\u6240\\u5305\\u542b\\u7684\\u5b50\\u5143\\u7d20\\u7684\\u6837\\u5f0f\\u3002\\u5b50\\u9009\\u62e9\\u7b26\\u4f7f\\u7528\\u5c16\\u89d2\\u53f7\\uff08>\\uff09\\u6765\\u8868\\u793a\\uff0c\\u5b9a\\u4e49\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a\\ndiv>span{font-size:20px;}\\u5176\\u4e2d\\uff0cdiv\\u4e3aspan\\u5143\\u7d20\\u7684\\u7236\\u5143\\u7d20\\uff0c\\u901a\\u8fc7\\u5b50\\u9009\\u62e9\\u7b26\\u8fde\\u63a5\\u3002\\n\\u4f8b\\u5982\\uff0c\\u5b9a\\u4e49span\\u5143\\u7d20\\u7684\\u5b57\\u4f53\\u5927\\u5c0f\\u4e3a10px\\uff0c\\u518d\\u5229\\u7528\\u5b50\\u9009\\u62e9\\u7b26\\u6765\\u5b9a\\u4e49\\u6240\\u6709div\\u5143\\u7d20\\u5305\\u542b\\u7684\\u5b50\\u5143\\u7d20span\\u6837\\u5f0f\\u5b57\\u4f53\\u5927\\u5c0f\\u4e3a20px\\uff0c\\u663e\\u793a\\u6548\\u679c\\u5982\\u56fe5\\u6240\\u793a\\u3002\\nCSS\\u57fa\\u7840\\u5165\\u95e8\\u5c42\\u53e0\\u6837\\u5f0f\\u8868\\u662f\\u4e00\\u79cd\\u7528\\u6765\\u8868\\u73b0HTML\\uff08\\u6807\\u51c6\\u901a\\u7528\\u6807\\u8bb0\\u8bed7.3.2\\u76f8\\u90bb\\u9009\\u62e9\\u5668\\n\\u76f8\\u90bb\\u9009\\u62e9\\u7b26\\u5c31\\u662f\\u6307\\u5b9a\\u4e00\\u4e2a\\u5143\\u7d20\\u76f8\\u90bb\\u7684\\u4e0b\\u4e00\\u4e2a\\u5143\\u7d20\\u7684\\u6837\\u5f0f\\u3002\\u76f8\\u90bb\\u9009\\u62e9\\u7b26\\u4f7f\\u7528\\u52a0\\u53f7\\uff08+\\uff09\\u6765\\u8868\\u793a\\uff0c\\u683c\\u5f0f\\u5982\\u4e0b\\uff1a\\ndiv+span{font-size:20px;}\\u5176\\u4e2d\\uff0cdiv+span\\u8868\\u793adiv\\u5143\\u7d20\\u4e0espan\\u5143\\u7d20\\u76f8\\u90bb\\u3002\\u4f8b\\u5982\\uff0c\\u5229\\u7528\\u76f8\\u90bb\\u9009\\u62e9\\u7b26\\u9012\\u8fdb\\u63a7\\u5236\\u5e76\\u5217\\u663e\\u793a\\u7684\\u51e0\\u4e2a\\u5143\\u7d20\\u7684\\u663e\\u793a\\u6837\\u5f0f\\u3002h1+div\\u8868\\u793a\\u6807\\u9898\\u5143\\u7d20h1\\u540e\\u9762\\u76f8\\u90bb\\u7684div\\u5143\\u7d20\\u6837\\u5f0f\\uff0cdiv+p\\u8868\\u793adiv\\u5143\\u7d20\\u540e\\u9762\\u76f8\\u90bb\\u7684\\u5143\\u7d20p\\u7684\\u6837\\u5f0f\\uff0cp+div\\u8868\\u793ap\\u5143\\u7d20\\u540e\\u9762\\u76f8\\u90bb\\u7684div\\u5143\\u7d20\\u7684\\u6837\\u5f0f\\uff0c\\u800cdiv+div\\u8868\\u793adiv\\u5143\\u7d20\\u540e\\u9762\\u76f8\\u90bb\\u7684div\\u5143\\u7d20\\u7684\\u6837\\u5f0f\\u3002\\u6548\\u679c\\u5982\\u56fe6\\u6240\\u793a\\u3002\\n\\u56fe1\\n\\n\\u56fe2\\n\\n\\u56fe4\\n\\n\\u56fe5\\n\\n\\u56fe6\\n\\n\x22,\x22goodValueNum\x22:1,\x22badValueNum\x22:0,\x22publishTime\x22:\x222020-01-02\x22,\x22c_timestamp\x22:1577951663,\x22isBest\x22:0,\x22isGood\x22:0,\x22isRec\x22:1,\x22isSupport\x22:0,\x22evaluatedType\x22:0,\x22user\x22:{\x22uid\x22:861529425,\x22name\x22:\x22\\u98de\\u626c\\u5929\\u5730\\u95f4_ZM\x22,\x22imId\x22:\x22public.1.a868121c.MtfF6YH7iPmqdUHMozcI0A\x22,\x22isAnonymous\x22:0,\x22isUnLogin\x22:0,\x22isCurrentUser\x22:0,\x22isNoUserName\x22:0,\x22iconType\x22:6,\x22sex\x22:1,\x22isAuth\x22:0,\x22isExpert\x22:0,\x22isExpertImport\x22:0,\x22isUserAdmin\x22:0,\x22isFamous\x22:0,\x22isMaster\x22:0,\x22isFromTorch\x22:0,\x22isFilter\x22:0,\x22shoubaiUser\x22:{\x22avatar\x22:\x22https:\\\/\\\/gips0.baidu.com\\\/it\\\/u=229428845,3871491040&fm=3012&app=3012&autime=1668842178&size=b200,200\x22,\x22displayname\x22:\x22\\u840c\\u5b66\\u5802\\u7ae5\\u4e66\x22,\x22sign\x22:\x22\\u81f4\\u529b\\u4e8e\\u51fa\\u7248\\u6700\\u7f8e\\u539f\\u521b\\u7ae5\\u4e66\x22,\x22third_id\x22:\x221618990200865936\x22,\x22type\x22:\x22media\x22,\x22vip\x22:\x220\x22,\x22vtype\x22:0},\x22chatUserInfo\x22:[],\x22isOpenApp\x22:0,\x22encodeUid\x22:\x2251e54069236f25705e795933\x22,\x22gradeIndex\x22:20,\x22grAnswerNum\x22:43537,\x22praiseNum\x22:52901,\x22goodRate\x22:99.326975725497,\x22adoptRate\x22:100,\x22carefield\x22:[{\x22cid\x22:202,\x22cname\x22:\x22\\u7406\\u5de5\\u5b66\\u79d1\x22}],\x22selfDefinedPhoto\x22:0,\x22isAppAuth\x22:0,\x22BC\x22:52901,\x22JQ\x22:{\x22followMe\x22:6468,\x22myFollow\x22:1},\x22DC\x22:43537,\x22MR\x22:[],\x22answerNum\x22:\x224.4\\u4e07\x22,\x22AX\x22:43846,\x22helpNum\x22:\x227920\\u4e07\x22,\x22business\x22:{\x22businessId\x22:100593,\x22companyName\x22:\x22\\u5317\\u4eac\\u7406\\u5de5\\u5927\\u5b66\\u51fa\\u7248\\u793e\\u6709\\u9650\\u8d23\\u4efb\\u516c\\u53f8\x22,\x22bjhUpgradeStatus\x22:2,\x22bjhAuditStatus\x22:0,\x22cAppId\x22:0,\x22cid\x22:0,\x22name\x22:\x22\\u5317\\u4eac\\u7406\\u5de5\\u5927\\u5b66\\u51fa\\u7248\\u793e\x22,\x22uid\x22:861529425,\x22uname\x22:\x22\\u98de\\u626c\\u5929\\u5730\\u95f4_ZM\x22,\x22siteUrl\x22:\x22http:\\\/\\\/\x22,\x22slogan\x22:\x22\\u5fb7\\u4ee5\\u660e\\u7406\\uff0c\\u5b66\\u4ee5\\u7cbe\\u5de5\\u3002\x22,\x22main\x22:\x22\x22,\x22imgUrl\x22:\x22https:\\\/\\\/cambrian-images.cdn.bcebos.com\\\/1c63fb2932862a09d20401a5f2416b15_1543989216895.jpeg\x22,\x22intro\x22:\x22\x22,\x22type\x22:0,\x22insType\x22:1,\x22xzhId\x22:1618990200865936,\x22servicePhone\x22:\x22010-68944515\x22,\x22replyNum\x22:87754,\x22thumbNum\x22:50931,\x22v_type\x22:0,\x22vipLevel\x22:3,\x22vipRights\x22:\x221,2,3,4,5,6,7,8,9\x22,\x22pluginInfo\x22:{\x22officialPhone\x22:\x22010-68944515\x22,\x22siteUrl\x22:\x22http:\\\/\\\/\x22,\x22isInWhiteList\x22:true,\x22customerInfo\x22:[],\x22onlineUrl\x22:null,\x22tab\x22:[]},\x22isBrandBusiness\x22:false,\x22encodeUid\x22:\x2251e54069236f25705e795933\x22},\x22iconChange\x22:true,\x22showInfo\x22:{\x22type\x22:2,\x22partnerId\x22:100593,\x22companyName\x22:\x22\\u5317\\u4eac\\u7406\\u5de5\\u5927\\u5b66\\u51fa\\u7248\\u793e\\u6709\\u9650\\u8d23\\u4efb\\u516c\\u53f8\x22,\x22bjhUpgradeStatus\x22:2,\x22bjhAuditStatus\x22:0,\x22cAppId\x22:0,\x22name\x22:\x22\\u5317\\u4eac\\u7406\\u5de5\\u5927\\u5b66\\u51fa\\u7248\\u793e\x22,\x22imgUrl\x22:\x22https:\\\/\\\/cambrian-images.cdn.bcebos.com\\\/1c63fb2932862a09d20401a5f2416b15_1543989216895.jpeg\x22,\x22slogan\x22:\x22\\u5fb7\\u4ee5\\u660e\\u7406\\uff0c\\u5b66\\u4ee5\\u7cbe\\u5de5\\u3002\x22,\x22siteUrl\x22:\x22https:\\\/\\\/zhidao.baidu.com\\\/business\\\/profile?id=100593&role=business\x22,\x22siteUrlArr\x22:[],\x22v_type\x22:4,\x22intro\x22:\x22\x22,\x22businessId\x22:100593,\x22encodeUid\x22:\x2251e54069236f25705e795933\x22,\x22thumbNum\x22:50931},\x22isFromBusiness\x22:100593},\x22refContent\x22:\x22\x22,\x22bit_pack\x22:{\x22is_recommend\x22:1,\x22wap_flag\x22:0,\x22is_pic_contained\x22:0,\x22media_flag\x22:0,\x22help_flag\x22:0,\x22anonymous\x22:0,\x22is_really_anonymous\x22:0,\x22level_new\x22:1,\x22comment_flag\x22:0,\x22in_mis\x22:0,\x22auto_recommend\x22:0,\x22content_rich_flag\x22:1,\x22prior_flag\x22:0,\x22hidden_flag\x22:0,\x22rec_canceled_flag\x22:0,\x22mis_flag\x22:0,\x22file_flag\x22:0,\x22read_flag\x22:0,\x22is_challenge\x22:0,\x22ikaudio_flag\x22:0,\x22mavin_flag\x22:0,\x22is_delete_lock\x22:0,\x22authentic_state\x22:0,\x22is_compulsory_best\x22:0,\x22dynamic_stick_flag\x22:0,\x22video_flag\x22:0,\x22vote_affirmative\x22:0,\x22vote_negative\x22:0,\x22is_video\x22:0,\x22is_baiduyun\x22:0,\x22is_yike_card\x22:0},\x22ext_pack\x22:{\x22anony_good_value\x22:1,\x22business\x22:{\x22businessId\x22:100593},\x22ignore_spam\x22:15,\x22mode_begintime\x22:0,\x22mode_qtype\x22:0,\x22op_uid\x22:861529425,\x22partner\x22:[],\x22reco_time\x22:1577968336},\x22deleted\x22:0,\x22value_rank\x22:1009086,\x22threadId\x22:\x2212579474953\x22,\x22type\x22:\x22dynamicBest\x22,\x22next_rid\x22:3193081730,\x22pre_rid\x22:0,\x22team_id\x22:0,\x22import_id\x22:1580,\x22userRewardWealth\x22:null,\x22uafrom\x22:\x22\x22,\x22replyAsk\x22:null,\x22is_appeal\x22:0,\x22musicInfo\x22:[],\x22tiebaInfo\x22:[],\x22is_partner\x22:1,\x22business_partner\x22:{\x22bannerPicUrl\x22:\x22https:\\\/\\\/gss0.bdstatic.com\\\/7051cy89RcgCncy6lo7D0j9wexYrbOWh7c50\\\/shengmingyitian.jpeg\x22,\x22bannerUrl\x22:\x22http:\\\/\\\/product.m.dangdang.com\\\/product.php?pid=27871027&host=product.dangdang.com\x22}}]');

F.context('replies', '[]');

// 是否有料qb页

F.context('discussion', 0);

// 二跳缓存配置

F.context('asyncCachePercent', 1000);

// 用户是否手动关闭过关注推荐弹窗

F.context('isCloseFollow', 0);

// 推荐中台实验类型

F.context('feedExpName', 'wapqb_1');

// 封禁信息:isFilter-是否封禁用户

F.context('banInfo', null);

// 是否是律临法律qb页

F.context('is_law', 0);

F.context('is_law_video', )

F.context('is_from_law_migration', 0)

F.context('isRiskView', '0');

F.context('riskViewIp', '');

F.context('riskViewVid', '');

// 是否是法律临结构页

F.context('is_law_struct', 0);

// nonce

F.context('nonceStr', 'kqo4YtKg4IpIoIwazE6jC6VC4');

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; var headerContainer = '#iknow-common-header';

var searchContainer = '#search-box';

require.async(['m-common:widget/iknow-header/iknow-header-async'], function(header){

header.init(headerContainer,{

nettype: '0',

frameQids: [],

isLogin: 0,

searchWord: "",

anonymousAsk: 0,

isLightStyle: 1 ,adsEid:'289' });

});

require.async(['m-common:widget/iknow-header/search'],function(search){

var offsetX = -51;

var offsetY = 38;

search.init(headerContainer, searchContainer, {

x: offsetX,

y: offsetY

});

});

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; F.context('cmsKey', 'top:defs|mid:defs|fb:');

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; require.async(['m-common:widget/lib/gmu/zepto/zepto','m-question-new:widget/question-answer/question-answer'],function($, answer){

answer.init($('#w-1'));

});

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; require.async(['m-question-new:widget/question-title-operation/question-title-operation.es'], function(operation) {

operation.init();

});

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; require.async(['m-question-new:widget/question-title/question-title.es'], function(title) {

title.init({

qid:'1708728378115901940',

title:'CSS的样式有哪些？',

descContent:'',

descSupply: '',

imgUrl:'[]',

supImgUrl:'[]',

videoInfo: null,

});

});

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; require.async(['m-common:widget/service-plugin/service-plugin.es'],function (plugin) {

plugin.init({

un : "飞扬天地间_ZM",

uid : "51e54069236f25705e795933",

businessName: "北京理工大学出版社",

businessId: "100593",

pageType: "single"

})

})

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; require.async(['m-question-new:widget/ad-top-answer/ad-top-answer.es'], function (mod) {

mod.init();

})

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; require.async(['m-question-new:widget/reply_ad/reply_ad'], function(replyAd){

replyAd.init({

ptrId: '100593',

ptrRole: 'business'

});

});

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; require.async(['m-common:widget/lib/gmu/zepto/zepto','m-question-new:widget/detail-full/detail-async'],function($, detail){

//这部分内容会被加载更多问题功能引用，整个html被写入，不加timeout会导致js执行的时候dom尚未渲染完毕

setTimeout(function(){

detail.init({

container: $("#w-2"),

foldHeight: '778',

longFoldFlag: +'',

isFoldAnswer: '1',

evaluatedType: '0',

uid: '51e54069236f25705e795933',

answerFolderAdv: {"wapSingleAnswer":{"switch":"0","height":"900","eid1":"123456","eid1Height":"1800","eid2":"123457","eid2Height":"1800"},"wapMultiAnswer":{"switch":"0","num":"2","eid":{"123456":"2","123457":"3"}}},

reply: {"rid":3144868738,"content":"\u4ec0\u4e48\u662fCSS\u6837\u5f0f
\u5c42\u53e0\u6837\u5f0f\u8868\uff08CascadingStyleSheet\uff0cCSS\uff09\u662f\u4e00\u7cfb\u5217\u6837\u5f0f\u6216\u683c\u5f0f\u89c4\u683c\u7684\u96c6\u5408\uff0c\u7528\u4e8e\u63a7\u5236\u7f51\u9875\u6837\u5f0f\u5e76\u5141\u8bb8\u5c06\u6837\u5f0f\u4e0e\u7f51\u9875\u5185\u5bb9\u5206\u79bb\u7684\u4e00\u79cd\u6807\u8bb0\u6027\u8bed\u8a00\u3002\u5b83\u662fW3C\u7ec4\u7ec7\u7528\u4e8e\u6539\u5584HTML\u5728\u663e\u793a\u7f51\u9875\u65b9\u9762\u7684\u7f3a\u9677\u3002\u867d\u7136HTML\u5728\u53d1\u5e03\u65f6\u5df2\u7ecf\u5236\u5b9a\u4e86\u5404\u79cd\u7f51\u9875\u6837\u5f0f\u6807\u7b7e\u548c\u5404\u79cd\u9875\u9762\u4fee\u9970\u5c5e\u6027\uff0c\u4f46\u662f\u968f\u7740\u7f51\u9875\u5bb9\u7eb3\u7684\u4fe1\u606f\u8d8a\u6765\u8d8a\u591a\uff0c\u8fd9\u79cd\u628a\u4fe1\u606f\u663e\u793a\u5185\u5bb9\u4e0e\u4fe1\u606f\u663e\u793a\u6837\u5f0f\u6df7\u5728\u4e00\u8d77\u7684\u65b9\u6cd5\uff0c\u5df2\u7ecf\u65e0\u6cd5\u6ee1\u8db3\u4eba\u4eec\u5bf9\u7f51\u7edc\u4fe1\u606f\u7684\u5feb\u901f\u641c\u7d22\u9700\u6c42\uff0c\u66f4\u4e0d\u80fd\u9002\u5e94\u5927\u6570\u636e\u65f6\u4ee3\u7684\u5c55\u793a\u6570\u636e\u7684\u8981\u6c42\u3002
CSS\u7684\u6bcf\u4e00\u4e2a\u6837\u5f0f\u8868\u90fd\u662f\u7531\u76f8\u5bf9\u5e94\u7684\u6837\u5f0f\u89c4\u5219\u7ec4\u6210\u7684\uff0c\u4f7f\u7528HTML\u4e2d\u7684\u6807\u7b7e\u53ef\u4ee5\u5c06\u6837\u5f0f\u8868\u89c4\u5219\u52a0\u5165\u5230HTML\u3002\u6807\u7b7e\u4f4d\u4e8eHTML\u7684head\u90e8\u5206\uff0c\u5176\u4e2d\u4e5f\u5305\u542b\u7f51\u9875\u7684\u6837\u5f0f\u89c4\u5212\uff0c\u5982\u56fe1\u6240\u793a\u3002CSS\u8bed\u53e5\u53ef\u4ee5\u5185\u5d4c\u5728HTML\u4e2d\uff0c\u6240\u4ee5\u7f16\u5199CSS\u6837\u5f0f\u89c4\u5219\u548c\u7f16\u5199HTML\u7684\u65b9\u6cd5\u76f8\u540c\u3002CSS\u8bed\u8a00\u4e0d\u9700\u8981\u7f16\u8bd1\uff0c\u4e5f\u4e0d\u9700\u8981\u7279\u6b8a\u5904\u7406\u3002\u7528\u6237\u53ea\u8981\u628a\u5b83\u4eec\u653e\u5728\u6807\u7b7e\u4e4b\u95f4\u6216\u8005\u7f16\u5199\u4e3a\u4e00\u4e2a\u5355\u72ec\u7684\u6587\u4ef6\uff0c\u7136\u540e\u5c06\u6587\u4ef6\u7684\u6269\u5c55\u540d\u4fdd\u5b58\u4e3a.css\uff0c\u5229\u7528\u6807\u7b7e\u94fe\u63a5\u6216\u8005\u5bfc\u5165\u5230\u7f51\u9875\u4e2d\u5373\u53ef\u3002
CSS\u6837\u5f0f\u7684\u4f18\u52bf
\u4f7f\u7528CSS\u6837\u5f0f\u53ef\u4ee5\u5bf9\u591a\u4e2a\u6587\u6863\u7684\u6837\u5f0f\u8fdb\u884c\u63a7\u5236\uff0c\u5f53CSS\u6837\u5f0f\u66f4\u65b0\u540e\uff0c\u6240\u6709\u5e94\u7528\u8be5CSS\u6837\u5f0f\u7684\u9875\u9762\u90fd\u4f1a\u81ea\u52a8\u66f4\u65b0\u3002CSS\u6837\u5f0f\u53ef\u4ee5\u9875\u9762\u5143\u7d20\u8fdb\u884c\u5b9a\u4f4d\u3001\u7279\u6b8a\u6548\u679c\u548c\u8d85\u94fe\u63a5\u6548\u679c\u7b49\u72ec\u7279\u7684HTML\u5c5e\u6027\uff0c\u53ef\u4ee5\u5145\u5206\u5730\u5f25\u8865HTML\u7684\u4e0d\u8db3\uff0c\u7b80\u5316\u7f51\u9875\u7684\u6e90\u4ee3\u7801\uff0c\u907f\u514d\u91cd\u590d\u52b3\u52a8\uff0c\u51cf\u8f7b\u5de5\u4f5c\u91cf\u3002CSS\u5177\u6709\u4ee5\u4e0b\u4f18\u52bf\uff1a
CSS\u7b26\u5408Web\u6807\u51c6\u3002W3C\u7ec4\u7ec7\u63a8\u8350CSS\u6280\u672f\u5c06\u66ff\u4ee3HTML\u7684\u8868\u683c\u6807\u7b7e\u3001\u6807\u7b7e\u3001\u6807\u7b7e\u4ee5\u53ca\u5176\u4ed6\u7528\u4e8e\u8868\u73b0\u7684HTLM\u5143\u7d20\u3002
\u63d0\u9ad8\u9875\u9762\u7684\u6d4f\u89c8\u901f\u5ea6\u3002\u4f7f\u7528CSS\u6837\u5f0f\u6bd4\u4f20\u7edf\u7684Web\u8bbe\u8ba1\u65b9\u6cd5\u81f3\u5c11\u8282\u7ea650%\u4ee5\u4e0a\u7684\u6587\u4ef6\u5927\u5c0f\u3002
\u7f29\u77ed\u7f51\u7ad9\u6539\u7248\u5468\u671f\u3002\u53ea\u9700\u8981\u4fee\u6539\u76f8\u5e94CSS\u6587\u4ef6\u5c31\u53ef\u4ee5\u91cd\u65b0\u8bbe\u8ba1\u4e00\u4e2a\u6709\u6210\u767e\u4e0a\u5343\u9875\u9762\u7684\u7ad9\u70b9\u3002
\u5f3a\u5927\u7684\u5b57\u4f53\u63a7\u5236\u548c\u6392\u7248\u80fd\u529b\u3002Font\u6807\u7b7e\u5bf9\u4e8e\u5b57\u4f53\u63a7\u5236\u80fd\u529b\u8fdc\u6ca1\u6709CSS\u5bf9\u4e8e\u5b57\u4f53\u7684\u63a7\u5236\u80fd\u529b\u5f3a\uff0c\u4f7f\u7528CSS\u6837\u5f0f\u540e\u4e0d\u9700\u8981\u5728\u4f7f\u7528font\u6807\u7b7e\u6765\u63a7\u5236\u6587\u7ae0\u6807\u9898\u3001\u5b57\u4f53\u989c\u8272\u4ee5\u53ca\u5b57\u4f53\u6837\u5f0f\u7b49\u3002
CSS\u6613\u4e8e\u7f16\u5199\u3002Dreamweaver\u63d0\u4f9b\u4e86CSS\u7f16\u5199\u8f85\u52a9\u5de5\u5177\u3002
CSS\u5177\u6709\u826f\u597d\u7684\u517c\u5bb9\u6027\u3002\u53ea\u8981\u6d4f\u89c8\u5668\u80fd\u591f\u8bc6\u522bCSS\u6837\u5f0f\u90fd\u53ef\u4ee5\u5f88\u597d\u7684\u5e94\u7528\u5b83\u3002
\u8868\u73b0\u548c\u5185\u5bb9\u76f8\u5206\u79bb\u3002\u5c06\u8bbe\u8ba1\u90e8\u5206\u5265\u79bb\u51fa\u6765\u653e\u5728\u4e00\u4e2a\u72ec\u7acb\u6837\u5f0f\u6587\u4ef6\u4e2d\uff0c\u8ba9\u591a\u4e2a\u7f51\u9875\u6587\u4ef6\u5171\u540c\u4f7f\u7528\u5b83\uff0c\u7701\u53bb\u5728\u6bcf\u4e00\u4e2a\u7f51\u9875\u6587\u4ef6\u4e2d\u90fd\u8981\u91cd\u590d\u8bbe\u5b9a\u6837\u5f0f\u7684\u9ebb\u70e6\u3002
CSS\u6837\u5f0f\u57fa\u672c\u8bed\u6cd5
CSS\u7684\u8bed\u6cd5\u7ed3\u6784\u75313\u90e8\u5206\u6784\u6210\uff1a\u9009\u62e9\u5668\u3001\u5c5e\u6027\u548c\u503c\u3002
\u9009\u62e9\u5668{\u6837\u5f0f\u5c5e\u6027:\u53d6\u503c;\u6837\u5f0f\u5c5e\u6027:\u53d6\u503c;\u6837\u5f0f\u5c5e\u6027:\u53d6\u503c;\u2026\u2026}\u9009\u62e9\u5668\uff08Selector\uff09\u901a\u5e38\u662f\u6307\u7528\u6237\u5e0c\u671b\u5b9a\u4e49\u7684HTML\u5143\u7d20\u6216\u6807\u7b7e\uff0c\u5982body\u3001h1\uff1b\u4e5f\u53ef\u4ee5\u662f\u81ea\u5b9a\u4e49\u7684id\u6216class\u7684\u6807\u7b7e\uff0c\u5982#main\u9009\u62e9\u5668\u8868\u793a\u9009\u62e9\uff0c\u5373\u4e00\u4e2a\u88ab\u6307\u5b9a\u4e86main\u4e3aid\u7684\u5bf9\u8c61\u3002\u6d4f\u89c8\u5668\u5c06\u5bf9CSS\u9009\u62e9\u5668\u8fdb\u884c\u4e25\u683c\u7684\u89e3\u6790\uff0c\u6bcf\u4e00\u7ec4\u6837\u5f0f\u5747\u4f1a\u88ab\u6d4f\u89c8\u5668\u5e94\u7528\u5230\u5bf9\u5e94\u7684\u5bf9\u8c61\u4e0a\u3002
\u5c5e\u6027\uff08Property\uff09\u662f\u7528\u6237\u5e0c\u671b\u6539\u53d8\u7684\u5c5e\u6027\uff0c\u5e76\u4e14\u6bcf\u4e2a\u5c5e\u6027\u90fd\u6709\u4e00\u4e2a\u503c\u3002\u5bf9\u4e8e\u6bcf\u4e00\u4e2aHTML\u4e2d\u7684\u6807\u7b7e\uff0cCSS\u90fd\u63d0\u4f9b\u4e86\u4e30\u5bcc\u7684\u6837\u5f0f\u5c5e\u6027\uff0c\u5982\u989c\u8272\u3001\u5927\u5c0f\u3001\u4f4d\u7f6e\u4ee5\u53ca\u6d6e\u52a8\u65b9\u5f0f\u7b49\u3002
\u503c\uff08Value\uff09\u6307\u5c5e\u6027\u7684\u503c\u3002\u5c5e\u6027\u548c\u503c\u88ab\u5192\u53f7\u5206\u5f00\uff0c\u5e76\u7531\u82b1\u62ec\u53f7\u5305\u56f4\uff0c\u8fd9\u6837\u5c31\u7ec4\u6210\u4e86\u4e00\u4e2a\u5b8c\u6574\u7684\u6837\u5f0f\u58f0\u660e\uff08declaration\uff09\u3002\u5c5e\u6027\u503c\u6709\u4e24\u79cd\u5f62\u5f0f\uff1a\u4e00\u79cd\u662f\u6307\u5b9a\u8303\u56f4\u7684\u503c\uff0c\u5982float\u5c5e\u6027\u7684\u53d6\u503c\u4e3aleft\u3001right\u548cnone\uff1b\u53e6\u4e00\u79cd\u4e3a\u6570\u503c\uff0c\u5982height\u5c5e\u6027\u53d6\u503c\u4e3a0~9999px\u6216\u8005\u901a\u8fc7\u5176\u4ed6\u6570\u5b66\u5355\u4f4d\u6765\u6307\u5b9a\u3002
\u4f8b\u5982\uff0c\u5b9a\u4e49\u4e00\u4e2a\u7f51\u9875\u5b57\u4f53\u5927\u5c0f\u4e3a12\u50cf\u7d20\u3001\u52a0\u7c97\uff0c\u6bb5\u843d\u9996\u884c\u7f29\u8fdb2\u5b57\u7b26\uff0c\u5219\u53ef\u4ee5\u8bbe\u7f6e\u6837\u5f0f\u5982\u4e0b\uff1a\u65e0\u6807\u9898\u6587\u6863\u5c42\u53e0\u6837\u5f0f\u8868\u662f\u4e00\u79cd\u7528\u6765\u8868\u73b0HTML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5e94\u7528\uff09\u6216XML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5b50\u96c6\uff09\u7b49\u6587\u4ef6\u6837\u5f0f\u7684\u8ba1\u7b97\u673a\u8bed\u8a00\u3002
CSS\u76ee\u524d\u6700\u65b0\u7248\u672c\u4e3aCSS3\uff0c\u662f\u80fd\u591f\u771f\u6b63\u505a\u5230\u7f51\u9875\u8868\u73b0\u4e0e\u5185\u5bb9\u5206\u79bb\u7684\u4e00\u79cd\u6837\u5f0f\u8bbe\u8ba1\u8bed\u8a00\u3002\u76f8\u5bf9\u4e8e\u4f20\u7edfHTML\u7684\u8868\u73b0\u800c\u8a00\uff0cCSS\u80fd\u591f\u5bf9\u7f51\u9875\u4e2d\u7684\u5bf9\u8c61\u7684\u4f4d\u7f6e\u6392\u7248\u8fdb\u884c\u50cf\u7d20\u7ea7\u7684\u7cbe\u786e\u63a7\u5236\uff0c\u652f\u6301\u51e0\u4e4e\u6240\u6709\u7684\u5b57\u4f53\u5b57\u53f7\u6837\u5f0f\uff0c\u62e5\u6709\u5bf9\u7f51\u9875\u5bf9\u8c61\u548c\u6a21\u578b\u6837\u5f0f\u7f16\u8f91\u7684\u80fd\u529b\uff0c\u5e76\u80fd\u591f\u8fdb\u884c\u521d\u6b65\u4ea4\u4e92\u8bbe\u8ba1\uff0c\u662f\u76ee\u524d\u57fa\u4e8e\u6587\u672c\u5c55\u793a\u6700\u4f18\u79c0\u7684\u8868\u73b0\u8bbe\u8ba1\u8bed\u8a00\u3002CSS\u80fd\u591f\u6839\u636e\u4e0d\u540c\u4f7f\u7528\u8005\u7684\u7406\u89e3\u80fd\u529b\uff0c\u7b80\u5316\u6216\u8005\u4f18\u5316\u5199\u6cd5\uff0c\u9488\u5bf9\u5404\u7c7b\u4eba\u7fa4\uff0c\u6709\u8f83\u5f3a\u7684\u6613\u8bfb\u6027\u3002
\u6d4f\u89c8\u5668\u901a\u8fc7\u89e3\u6790\u5c5e\u6027\u5305\u542b\u7684\u5185\u5bb9\uff0c\u5c06CSS\u6837\u5f0f\u5e94\u7528\u5230\u9875\u9762\u4e0a\uff0c\u5982\u56fe2\u6240\u793a\u3002\u591a\u4e2a\u6837\u5f0f\u53ef\u4ee5\u5e76\u5217\u5728\u4e00\u8d77\u5199\uff0c\u4e0d\u9700\u8981\u8003\u8651\u5982\u4f55\u8fdb\u884c\u5206\u9694\u3002\u4f8b\u5982\uff0c\u5b9a\u4e49\u4e00\u4e2a\u6bb5\u843d\u6587\u672c\u7684\u80cc\u666f\u8272\u4e3a\u7d2b\u8272\uff0c\u5219\u53ef\u4ee5\u5728\u4e0a\u9762\u6837\u5f0f\u7684\u57fa\u7840\u4e0a\u8fdb\u884c\u589e\u52a0\u6837\u5f0f\uff1a
Body{font-size:12px;font-weight:bold;text-indent:2em;}p{backgroundcolor:#FF00FF;}\u7531\u4e8eCSS\u8bed\u8a00\u81ea\u52a8\u5ffd\u7565\u7a7a\u683c\uff08\u9664\u4e86\u9009\u62e9\u5668\u5185\u90e8\u7684\u7a7a\u683c\uff09\uff0c\u56e0\u6b64\u53ef\u4ee5\u5229\u7528\u7a7a\u683c\u548c\u6362\u884c\u7b26\u6765\u7f8e\u5316CSS\u6837\u5f0f\u6e90\u4ee3\u7801\uff0c\u4e0a\u9762\u7684\u4ee3\u7801\u53ef\u4ee5\u8fdb\u884c\u5982\u4e0b\u7f8e\u5316\uff1a
Body{font-size:12px;font-weight:bold;text-indent:2em;}p{background-color:#FF00FF;}\u7ecf\u8fc7\u7f8e\u5316\u7684CSS\u6e90\u4ee3\u7801\u770b\u4e0a\u53bb\u4e00\u76ee\u4e86\u7136\uff0c\u65e2\u65b9\u4fbf\u9605\u8bfb\uff0c\u4e5f\u4fbf\u4e8e\u4fee\u6539\u3002
CSS\u6e90\u4ee3\u7801\u6709\u65f6\u5019\u9700\u8981\u901a\u8fc7\u4e00\u4e9b\u6ce8\u91ca\u6765\u6807\u6ce8\uff0cCSS\u4ee3\u7801\u8868\u793a\u4ec0\u4e48\u610f\u601d\u3002\u5728HTML\u4e2d\u6ce8\u91ca\u6807\u8bb0\u4f7f\u7528\u201c\u201d\uff0cCSS\u4e2d\u6ce8\u91ca\u6807\u8bb0\u4f7f\u7528\u201c*\u6ce8\u91ca\u5185\u5bb9*\u201d\u3002\u4f8b\u5982\uff0c\u53ef\u4ee5\u5bf9\u4e0a\u9762\u7684\u4ee3\u7801\u8fdb\u884c\u6ce8\u91ca\uff1a
Body{*\u9875\u9762\u7684\u57fa\u672c\u5c5e\u6027*font-size:12px;font-weight:bold;text-indent:2em;}*\u8bbe\u7f6e\u6bb5\u843d\u7684\u80cc\u666f\u989c\u8272\u4e3a\u7d2b\u8272*p{background-color:#FF00FF;}\u6dfb\u52a0CSS\u7684\u65b9\u6cd5
\u5728HTML\u4e2d\u6dfb\u52a0CSS\u7684\u65b9\u6cd5\u4e3b\u8981\u67094\u79cd\uff0c\u5206\u522b\u4e3a\u94fe\u63a5\u5185\u5d4c\u6837\u5f0f\u3001\u5185\u90e8\u6837\u5f0f\u8868\u3001\u94fe\u63a5\u5916\u90e8\u6837\u5f0f\u8868\u548c\u5bfc\u5165\u5916\u90e8\u6837\u5f0f\u8868\u3002
1\uff0e\u5185\u5d4c\u6837\u5f0f\u8868
\u5185\u5d4c\u6837\u5f0f\u8868\u662f\u6df7\u5408\u5728HTML\u6807\u8bb0\u91cc\u4f7f\u7528\u7684\uff0c\u8be5\u65b9\u6cd5\u53ef\u4ee5\u5f88\u7b80\u5355\u5730\u5bf9\u67d0\u4e2a\u5143\u7d20\u5355\u72ec\u5b9a\u4e49\u6837\u5f0f\uff0c\u4e3b\u8981\u662f\u5728body\u5185\u5b9e\u73b0\u3002
\u5185\u5d4c\u6837\u5f0f\u8868\u7684\u4f7f\u7528\u662f\u76f4\u63a5\u5728HTML\u6807\u8bb0\u91cc\u52a0\u5165style\u53c2\u6570\uff0c\u800cstyle\u53c2\u6570\u7684\u5185\u5bb9\u5c31\u662fCSS\u7684\u5c5e\u6027\u548c\u503c\uff0c\u5728style\u5f15\u53f7\u91cc\u7684\u5185\u5bb9\u76f8\u5f53\u4e8e\u5728\u6837\u5f0f\u8868\u7684\u5927\u62ec\u53f7\u91cc\u7684\u5185\u5bb9\uff0c\u5176\u683c\u5f0f\u5982\u4e0b\uff1a
\u5b57\u4f53\u5927\u5c0f\u4e3a12px\uff0c\u989c\u8272\u4e3a\u7ea2\u8272\u5f53\u6d4f\u89c8\u5668\u89e3\u6790\u5230\u8fd9\u4e9b\u6807\u7b7e\u65f6\uff0c\u68c0\u6d4b\u5230\u8be5\u6807\u7b7e\u4e2d\u5305\u542bstyle\u5c5e\u6027\uff0c\u5c31\u4f1a\u8c03\u7528CSS\u5f15\u64ce\u6765\u89e3\u6790style\u5c5e\u6027\uff0c\u5e76\u628a\u6548\u679c\u5c55\u73b0\u5230\u9875\u9762\u4e0a\u3002
\u8be5\u65b9\u6cd5\u4e0e\u4f20\u7edf\u7f51\u9875\u8bbe\u8ba1\u5728\u6807\u7b7e\u5185\u589e\u52a0\u5c5e\u6027\u7684\u8bbe\u8ba1\u65b9\u6cd5\u76f8\u540c\uff0c\u8be5\u65b9\u6cd5\u5b9e\u9645\u5e76\u6ca1\u6709\u6ee1\u8db3W3C\u63d0\u51fa\u7684\u5c06HTML\u7ed3\u6784\u4e0eCSS\u8868\u73b0\u5265\u79bb\u6765\u8fdb\u884c\u8bbe\u8ba1\uff0c\u56e0\u6b64\u5728\u7f51\u9875\u8bbe\u8ba1\u4e2d\u4e0d\u5efa\u8bae\u4f7f\u7528\u8be5\u65b9\u6cd5\uff0c\u9664\u975e\u4e3a\u9875\u9762\u4e2d\u4e2a\u522b\u5143\u7d20\u8bbe\u7f6e\u67d0\u4e2a\u7279\u5b9a\u6837\u5f0f\u6548\u679c\u800c\u5355\u72ec\u5b9a\u4e49\u3002
2\uff0e\u5185\u90e8\u6837\u5f0f\u8868
\u5185\u90e8\u6837\u5f0f\u8868\u4e0e\u5185\u5d4c\u6837\u5f0f\u8868\u7684\u76f8\u4f3c\u4e4b\u5904\u5728\u4e8e\uff0c\u90fd\u5c06CSS\u6837\u5f0f\u7f16\u5199\u5230\u9875\u9762\u4e2d\u3002\u800c\u4e0d\u540c\u7684\u662f\uff0c\u5185\u90e8\u6837\u5f0f\u8868\u53ef\u4ee5\u7edf\u4e00\u653e\u7f6e\u5728\u4e00\u4e2a\u56fa\u5b9a\u7684\u4f4d\u7f6e\uff0c\u5176\u683c\u5f0f\u5982\u4e0b\uff1a
\u5185\u90e8\u6837\u5f0f\u8868\u901a\u5e38\u4f4d\u4e8e\u7f51\u9875\u7684\u5934\u90e8\u533a\u57df\uff0c\u76ee\u7684\u662f\u8ba9CSS\u6e90\u4ee3\u7801\u5728\u9875\u9762\u52a0\u8f7d\u524d\u5148\u88ab\u89e3\u6790\u6267\u884c\uff0c\u8fd9\u6837\u53ef\u4ee5\u907f\u514d\u5f53\u7f51\u9875\u52a0\u8f7d\u5b8c\u6210\u540e\uff0c\u6ca1\u6709CSS\u6837\u5f0f\u6e32\u67d3\u800c\u4f7f\u7684\u9875\u9762\u4fe1\u606f\u65e0\u6cd5\u6b63\u5e38\u663e\u793a\u30023\uff0e\u94fe\u63a5\u5916\u90e8\u6837\u5f0f\u8868\u94fe\u63a5\u5916\u90e8\u6837\u5f0f\u8868\u662f\u5728CSS\u4e2d\u6700\u5e38\u7528\u7684\u4e00\u79cd\u5f62\u5f0f\uff0c\u5b83\u5c06CSS\u6837\u5f0f\u4ee3\u7801\u5355\u72ec\u7f16\u5199\u5230\u4e00\u4e2a\u72ec\u7acb\u7684\u6587\u4ef6\u4e2d\uff0c\u7531\u7f51\u9875\u8fdb\u884c\u8c03\u7528\uff0c\u591a\u4e2a\u7f51\u9875\u53ef\u4ee5\u540c\u65f6\u4f7f\u7528\u540c\u4e00\u4e2a\u6837\u5f0f\u6587\u4ef6\uff0c\u5176\u683c\u5f0f\u5982\u4e0b\uff1a
\u5176\u4e2d\uff0chref\u5c5e\u6027\u8bbe\u7f6e\u5916\u90e8\u6837\u5f0f\u8868\u6587\u4ef6\u7684\u5730\u5740\uff0c\u8be5\u5730\u5740\u53ef\u4ee5\u662f\u76f8\u5bf9\u5730\u5740\uff0c\u4e5f\u53ef\u4ee5\u662f\u7edd\u5bf9\u5730\u5740\uff1brel\u5c5e\u6027\u5b9a\u4e49\u8be5\u6807\u7b7e\u5173\u8054\u7684\u662f\u6837\u5f0f\u8868\u6807\u7b7e\uff1btype\u5c5e\u6027\u5b9a\u4e49\u6587\u6863\u7684\u7c7b\u578b\uff0c\u5373CSS\u6587\u672c\u6587\u4ef6\u3002
\u7f51\u7ad9\u901a\u5e38\u91c7\u7528\u94fe\u63a5\u5916\u90e8\u6837\u5f0f\u8868\u6765\u8bbe\u8ba1\u7f51\u7ad9\u7684\u8868\u73b0\u5c42\uff0c\u80fd\u591f\u5b9e\u73b0CSS\u6837\u5f0f\u4e0eHTML\u7ed3\u6784\u7684\u5206\u79bb\uff0c\u8fd9\u79cd\u5206\u79bb\u539f\u5219\u662fW3C\u6240\u63d0\u5021\u7684\uff0c\u56e0\u4e3a\u8fd9\u6837\u53ef\u4ee5\u9ad8\u6548\u5730\u7ba1\u7406\u6587\u6863\u7ed3\u6784\u548c\u6837\u5f0f\u8868\u6587\u4ef6\uff0c\u5b9e\u73b0\u4ee3\u7801\u7684\u4f18\u5316\u548c\u91cd\u7528\u3002
4\uff0e\u5bfc\u5165\u5916\u90e8\u6837\u5f0f\u8868\u5bfc\u5165\u5916\u90e8\u6837\u5f0f\u8868\u662f\u6307\u5728\u5185\u90e8\u6837\u5f0f\u8868\u7684\u6807\u7b7e\u5185\u4f7f\u7528@import\u5173\u952e\u5b57\u5bfc\u5165\u5916\u90e8\u6837\u5f0f\u8868\u6587\u4ef6\uff0c\u683c\u5f0f\u5982\u4e0b\uff1a
\u5728@import\u5173\u952e\u5b57\u540e\u9762\uff0c\u4f7f\u7528url()\u51fd\u6570\u6765\u628a\u5916\u90e8\u6837\u5f0f\u8868\u6587\u4ef6\u5bfc\u5165\u3002\u6ce8\u610f\u4f7f\u7528\u65f6\uff0c\u5916\u90e8\u6837\u5f0f\u8868\u7684\u8def\u5f84\u3001\u65b9\u6cd5\u548c\u94fe\u63a5\u5916\u90e8\u6837\u5f0f\u8868\u7684\u65b9\u6cd5\u7c7b\u4f3c\uff0c\u4f46\u5bfc\u5165\u5916\u90e8\u6837\u5f0f\u8868\u8f93\u5165\u65b9\u5f0f\u66f4\u6709\u4f18\u52bf\u3002\u5b9e\u8d28\u4e0a\u5b83\u662f\u76f8\u5f53\u4e8e\u5b58\u5728\u5185\u90e8\u6837\u5f0f\u8868\u4e2d\u7684\u3002
7.2CSS\u57fa\u672c\u9009\u62e9\u5668
\u9009\u62e9\u5668\u51b3\u5b9a\u6837\u5f0f\u89c4\u5219\u4f5c\u7528\u4e8e\u54ea\u4e9b\u5143\u7d20\u3002\u4f8b\u5982\uff0c\u5982\u679c\u8981\u5bf9table\u5143\u7d20\u6dfb\u52a0\u8fb9\u6846\u4e3a\u5b9e\u7ebf\u3001\u7ebf\u5bbd1\u50cf\u7d20\u3001\u84dd\u8272\u7684\u8fb9\u6846\uff0c\u5219\u9700\u8981\u521b\u5efa\u4e00\u4e2a\u53ea\u8bc6\u522btable\u5143\u7d20\u800c\u4e0d\u5f71\u54cd\u5176\u4ed6\u5143\u7d20\u7684\u9009\u62e9\u5668\u3002\u5982\u679c\u8981\u5bf9\u6bcf\u4e2a\u533a\u57df\u4e2d\u7684table\u8bbe\u7f6e\u7279\u6b8a\u683c\u5f0f\uff0c\u5c31\u9700\u8981\u521b\u5efa\u4e00\u4e2a\u7a0d\u5fae\u590d\u6742\u4e00\u4e9b\u7684\u9009\u62e9\u5668\uff0c\u5b83\u53ea\u8bc6\u522b\u6307\u5b9a\u533a\u57df\u4e2d\u7684table\u5143\u7d20\u3002
7.2.1\u6807\u7b7e\u9009\u62e9\u5668
HTML\u6587\u6863\u90fd\u662f\u7531\u5f88\u591a\u6807\u7b7e\u901a\u8fc7\u4e00\u5b9a\u7684\u89c4\u5219\u7f16\u7ec7\u800c\u6210\u7684\uff0c\u6211\u4eec\u4e5f\u53ef\u4ee5\u628a\u8fd9\u4e9b\u6807\u7b7e\u79f0\u4e3a\u7f51\u9875\u5143\u7d20\u3002\u6807\u7b7e\u9009\u62e9\u5668\u4f7f\u7528\u7f51\u9875\u5143\u7d20\u5b9a\u4e49\u6837\u5f0f\u3002
\u4f8b\u5982\uff0c\u58f0\u660ep\u5143\u7d20\u9996\u884c\u7f29\u8fdb2\u5b57\u7b26\uff0c\u5b57\u4f53\u989c\u8272\u4e3a\u7ea2\u8272\uff1b\u6240\u6709h1\u5b57\u53f7\u4e3a15px\u3001\u52a0\u7c97\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a
\u5176\u4e2d\uff0cp\u548ch1\u90fd\u662fHTML\u7279\u5b9a\u7684\u6807\u7b7e\u540d\u79f0\uff0c\u76f4\u63a5\u5f15\u7528\u5373\u53ef\u3002
\u6ce8\u610f\uff1a*\u53f7\u4e3a\u901a\u914d\u7b26\u5339\u914d\u9875\u9762\u4e2d\u7684\u6240\u6709\u5143\u7d20\u540d\u79f0\u3002\u4e0a\u9762\u7684\u4ee3\u7801\u8bbe\u7f6e\u6bcf\u4e2a\u5143\u7d20\u7684\u5185\u5916\u8fb9\u8ddd\u4e3a0px\u3002\u7531\u4e8e\u6bcf\u4e2a\u5143\u7d20\u90fd\u6709\u7cfb\u7edf\u9ed8\u8ba4\u7684\u5185\u5916\u8fb9\u8ddd\u503c\uff0c\u4e14\u5728\u4e0d\u540c\u7684\u6d4f\u89c8\u5668\u4e2d\u663e\u793a\u7684\u6548\u679c\u4e5f\u4e0d\u540c\uff0c\u56e0\u6b64\u5728\u8bbe\u7f6e\u7f51\u9875\u6837\u5f0f\u4e4b\u521d\u4f7f\u7528\u901a\u914d\u7b26*\u5c06\u6240\u6709\u5143\u7d20\u9ed8\u8ba4\u7684\u5185\u5916\u8fb9\u8ddd\u53bb\u6389\u662f\u5e38\u89c1\u505a\u6cd5\u3002
7.2.2\u7c7b\u522b\u9009\u62e9\u5668
\u4f7f\u7528\u6807\u7b7e\u9009\u62e9\u7b26\u53ef\u4ee5\u65b9\u4fbf\u5730\u5bf9\u6807\u7b7e\u8fdb\u884c\u6837\u5f0f\u8bbe\u7f6e\uff0c\u540c\u65f6\u6807\u7b7e\u9009\u62e9\u7b26\u4e5f\u5b58\u5728\u8f83\u591a\u95ee\u9898\u3002\u56e0\u4e3a\u6807\u7b7e\u9009\u62e9\u7b26\u5bf9\u6807\u7b7e\u6240\u505a\u7684\u5b9a\u4e49\u4e0d\u5355\u5355\u5f71\u54cd\u6240\u9009\u62e9\u7684\u6807\u7b7e\u5143\u7d20\uff0c\u800c\u662f\u5bf9\u6574\u4e2a\u9875\u9762\u4e2d\u6240\u6709\u76f8\u540c\u6807\u7b7e\u90fd\u4f1a\u8d77\u4f5c\u7528\u3002\u5982\u679c\u9700\u8981\u5bf9\u540c\u4e00\u4e2a\u6807\u7b7e\u5728\u7f51\u9875\u4e2d\u7684\u4e0d\u540c\u4f4d\u7f6e\u663e\u793a\u4e0d\u540c\u7684\u6837\u5f0f\uff0c\u4f7f\u7528\u8fd9\u79cd\u65b9\u6cd5\u5b9a\u4e49\u7684\u6837\u5f0f\u5c31\u5b58\u5728\u5f88\u591a\u4e0d\u8db3\u3002\u5bf9\u4e8e\u8fd9\u4e2a\u95ee\u9898\u53ef\u4ee5\u4f7f\u7528\u7c7b\u9009\u62e9\u5668\u6765\u89e3\u51b3\u3002
\u7c7b\uff08Class\uff09\u9009\u62e9\u7b26\u5c31\u662f\u4e3a\u4e86\u4e0d\u540c\u5143\u7d20\u62e5\u6709\u76f8\u540c\u7684\u663e\u793a\u6837\u5f0f\u800c\u5b9a\u4e49\u7684\u3002\u4f8b\u5982\uff0c\u5728\u4e0b\u9762\u8fd9\u4e2a\u9875\u9762\u4e2d\u5305\u542b\u4e09\u6bb5\u6587\u672c\uff0c\u901a\u8fc7\u6807\u7b7e\u9009\u62e9\u5668\u5c06\u6240\u6709\u6bb5\u843d\u6587\u672c\u5927\u5c0f\u5b9a\u4e49\u4e3a13px\uff0c\u9996\u884c\u7f29\u8fdb2\u5b57\u7b26\uff0c\u5b57\u4f53\u989c\u8272\u4e3a\u84dd\u8272\u3002
\u5c42\u53e0\u6837\u5f0f\u8868\u662f\u4e00\u79cd\u7528\u6765\u8868\u73b0HTML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5e94\u7528\uff09\u6216XML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5b50\u96c6\uff09\u7b49\u6587\u4ef6\u6837\u5f0f\u7684\u8ba1\u7b97\u673a\u8bed\u8a00\u3002
CSS\u76ee\u524d\u6700\u65b0\u7248\u672c\u4e3aCSS3\uff0c\u662f\u80fd\u591f\u771f\u6b63\u505a\u5230\u7f51\u9875\u8868\u73b0\u4e0e\u5185\u5bb9\u5206\u79bb\u7684\u4e00\u79cd\u6837\u5f0f\u8bbe\u8ba1\u8bed\u8a00\u3002\u76f8\u5bf9\u4e8e\u4f20\u7edfHTML\u7684\u8868\u73b0\u800c\u8a00\uff0cCSS\u80fd\u591f\u5bf9\u7f51\u9875\u4e2d\u7684\u5bf9\u8c61\u7684\u4f4d\u7f6e\u6392\u7248\u8fdb\u884c\u50cf\u7d20\u7ea7\u7684\u7cbe\u786e\u63a7\u5236\uff0c\u652f\u6301\u51e0\u4e4e\u6240\u6709\u7684\u5b57\u4f53\u5b57\u53f7\u6837\u5f0f\uff0c\u62e5\u6709\u5bf9\u7f51\u9875\u5bf9\u8c61\u548c\u6a21\u578b\u6837\u5f0f\u7f16\u8f91\u7684\u80fd\u529b\uff0c\u5e76\u80fd\u591f\u8fdb\u884c\u521d\u6b65\u4ea4\u4e92\u8bbe\u8ba1\uff0c\u662f\u76ee\u524d\u57fa\u4e8e\u6587\u672c\u5c55\u793a\u6700\u4f18\u79c0\u7684\u8868\u73b0\u8bbe\u8ba1\u8bed\u8a00\u3002
CSS\u80fd\u591f\u6839\u636e\u4e0d\u540c\u4f7f\u7528\u8005\u7684\u7406\u89e3\u80fd\u529b\uff0c\u7b80\u5316\u6216\u8005\u4f18\u5316\u5199\u6cd5\uff0c\u9488\u5bf9\u5404\u7c7b\u4eba\u7fa4\uff0c\u6709\u8f83\u5f3a\u7684\u6613\u8bfb\u6027\u3002
\u5982\u679c\u73b0\u5728\u8981\u6c42\u628a\u7b2c\u4e00\u6bb5\u5b57\u4f53\u5927\u5c0f\u6539\u4e3a20px\uff0c\u5b57\u4f53\u52a0\u7c97\uff0c\u8fd9\u65f6\u5c31\u53ef\u4ee5\u4f7f\u7528\u7c7b\u9009\u62e9\u7b26\u3002\u5b9a\u4e49\u683c\u5f0f\u5982\u4e0b\uff1a
.fontbold{font-size:20px;font-weight:bold;}\u5c42\u53e0\u6837\u5f0f\u8868\u662f\u4e00\u79cd\u7528\u6765\u8868\u73b0HTML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5e94\u7528\uff09\u6216XML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5b50\u96c6\uff09\u7b49\u6587\u4ef6\u6837\u5f0f\u7684\u8ba1\u7b97\u673a\u8bed\u8a00\u3002
CSS\u662f\u80fd\u591f\u771f\u6b63\u505a\u5230\u7f51\u9875\u8868\u73b0\u4e0e\u5185\u5bb9\u5206\u79bb\u7684\u4e00\u79cd\u6837\u5f0f\u8bbe\u8ba1\u8bed\u8a00\u3002\u76f8\u5bf9\u4e8e\u4f20\u7edfHTML\u7684\u8868\u73b0\u800c\u8a00\uff0cCSS\u80fd\u591f\u5bf9\u7f51\u9875\u4e2d\u7684\u5bf9\u8c61\u7684\u4f4d\u7f6e\u6392\u7248\u8fdb\u884c\u50cf\u7d20\u7ea7\u7684\u7cbe\u786e\u63a7\u5236\uff0c\u652f\u6301\u51e0\u4e4e\u6240\u6709\u7684\u5b57\u4f53\u5b57\u53f7\u6837\u5f0f\uff0c\u62e5\u6709\u5bf9\u7f51\u9875\u5bf9\u8c61\u548c\u6a21\u578b\u6837\u5f0f\u7f16\u8f91\u7684\u80fd\u529b\uff0c\u5e76\u80fd\u591f\u8fdb\u884c\u521d\u6b65\u4ea4\u4e92\u8bbe\u8ba1\uff0c\u662f\u76ee\u524d\u57fa\u4e8e\u6587\u672c\u5c55\u793a\u6700\u4f18\u79c0\u7684\u8868\u73b0\u8bbe\u8ba1\u8bed\u8a00\u3002
CSS\u80fd\u591f\u6839\u636e\u4e0d\u540c\u4f7f\u7528\u8005\u7684\u7406\u89e3\u80fd\u529b\uff0c\u7b80\u5316\u6216\u8005\u4f18\u5316\u5199\u6cd5\uff0c\u9488\u5bf9\u5404\u7c7b\u4eba\u7fa4\uff0c\u6709\u8f83\u5f3a\u7684\u6613\u8bfb\u6027\u3002
\u5728\u6d4f\u89c8\u5668\u4e2d\u9884\u89c8\uff0c\u663e\u793a\u6548\u679c\u5982\u56fe3\u6240\u793a\uff0c\u53ef\u4ee5\u770b\u5230\u7b2c\u4e00\u6bb5\u5b57\u4f53\u88ab\u5355\u72ec\u653e\u5927\u5e76\u52a0\u7c97\u3002\u7c7b\u9009\u62e9\u7b26\u53ef\u4ee5\u7cbe\u786e\u5730\u63a7\u5236\u9875\u9762\u4e2d\u67d0\u4e2a\u5177\u4f53\u5143\u7d20\u5bf9\u8c61\uff0c\u800c\u4e0d\u7ba1\u8fd9\u4e2a\u5bf9\u8c61\u662f\u5c5e\u4e8e\u4ec0\u4e48\u7c7b\u578b\u7684\u6807\u7b7e\uff0c\u540c\u65f6\u4e00\u4e2a\u7c7b\u6837\u5f0f\u53ef\u4ee5\u5728\u591a\u4e2a\u6807\u7b7e\u4e2d\u88ab\u5f15\u7528\u3002
\u5728\u81ea\u5b9a\u4e49\u7c7b\u540d\u65f6\uff0c\u53ea\u80fd\u591f\u4f7f\u7528\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u4e0b\u5212\u7ebf\uff08_\uff09\u548c\u8fde\u63a5\u7b26\u53f7\uff08-\uff09\uff0c\u7c7b\u540d\u5fc5\u987b\u4ee5\u5b57\u6bcd\u5f00\u5934\uff0c\u5426\u5219\u65e0\u6548\u3002\u53e6\u5916\uff0c\u7c7b\u540d\u662f\u533a\u5206\u5927\u5c0f\u5199\u7684\uff0c\u6240\u4ee5\u7c7bfontbold\u548c\u7c7bFontbold\u662f\u5b8c\u5168\u4e0d\u540c\u7684\u4e24\u4e2a\u7c7b\u3002
7.2.3ID\u9009\u62e9\u5668
ID\u662f\u82f1\u6587Identity\u7684\u7f29\u5199\uff0c\u5b83\u8868\u793a\u8eab\u4efd\u6807\u8bc6\u53f7\u7801\uff0c\u5728\u7f51\u7edc\u4e0a\u4e00\u822c\u6307\u7528\u6237\u8d26\u53f7\uff0c\u4f46\u662f\u5728Web\u8bbe\u8ba1\u4e2d\u4e00\u822c\u6307\u6807\u7b7e\u5728HTML\u6587\u6863\u4e2d\u7684\u552f\u4e00\u7f16\u53f7\u3002\u4ece\u8fd9\u70b9\u6765\u770b\uff0cID\u9009\u62e9\u5668\u53ea\u80fd\u591f\u5728HTML\u9875\u9762\u4e2d\u7528\u4e00\u6b21\uff0c\u5b83\u662f\u4e0e\u6807\u7b7e\u9009\u62e9\u7b26\u548c\u7c7b\u9009\u62e9\u7b26\u4f5c\u7528\u8303\u56f4\u76f8\u53cd\u7684\u4e00\u4e2a\u9009\u62e9\u7b26\u3002ID\u9009\u62e9\u7b26\u901a\u5e38\u88ab\u6765\u5b9a\u4e49HTML\u6846\u67b6\u7ed3\u6784\u7684\u5e03\u5c40\u6548\u679c\uff0c\u56e0\u4e3aHTML\u6846\u67b6\u5143\u7d20\u7684ID\u503c\u90fd\u662f\u552f\u4e00\u7684\u3002
ID\u9009\u62e9\u7b26\u5fc5\u987b\u4ee5\u4e95\u53f7\uff08#\uff09\u524d\u7f00\u5f00\u59cb\uff0c\u7136\u540e\u662f\u4e00\u4e2a\u81ea\u5b9a\u4e49\u7684ID\u540d\uff0c\u5b9a\u4e49\u683c\u5f0f\u5982\u4e0b\uff1a
#box{width:600px;height:auto;}\u4f8b\u5982\uff0c\u4e0b\u9762\u5b9e\u4f8b\u5b9a\u4e49\u4e00\u4e2a\u76d2\u5b50\uff0c\u4e3a\u8be5\u76d2\u5b50\u6307\u5b9a\u5bbd\u5ea6\u548c\u9ad8\u5ea6\uff0c\u5e76\u8bbe\u7f6e\u76d2\u5b50\u7684\u80cc\u666f\u989c\u8272\u4ee5\u53ca\u8fb9\u6846\u548c\u5185\u8fb9\u8ddd\u5927\u5c0f\uff0c\u663e\u793a\u6548\u679c\u5982\u56fe4\u6240\u793a\u30027.3\u590d\u5408\u9009\u62e9\u5668\u5982\u679c\u4ec5\u4ec5\u638c\u63e1\u4e86\u6807\u7b7e\u9009\u62e9\u7b26\u3001\u7c7b\u9009\u62e9\u7b26\u548cID\u9009\u62e9\u7b26\u8fd8\u8fdc\u8fdc\u4e0d\u591f\uff0c\u5bf9\u4e8e\u7f51\u9875\u8bbe\u8ba1\u8005\u6765\u8bb2\u8fd8\u5e94\u8be5\u638c\u63e1\u9ad8\u7ea7\u9009\u62e9\u7b26\u7684\u4f7f\u7528\uff0c\u5982\u5b50\u9009\u62e9\u7b26\u3001\u76f8\u90bb\u9009\u62e9\u7b26\u548c\u5c5e\u6027\u9009\u62e9\u7b26\u3002
\u5229\u7528\u6807\u7b7e\u9009\u62e9\u7b26\u548c\u7c7b\u9009\u62e9\u7b26\u53ef\u4ee5\u63a7\u5236\u7f51\u9875\u4e2d\u4f17\u591a\u5bf9\u8c61\u7684\u6837\u5f0f\uff1b\u800c\u5229\u7528ID\u9009\u62e9\u7b26\u3001\u5b50\u9009\u62e9\u7b26\u548c\u76f8\u90bb\u9009\u62e9\u7b26\u53ef\u4ee5\u7cbe\u786e\u63a7\u5236\u9875\u9762\u4e2d\u7684\u7279\u5b9a\u5bf9\u8c61\u6837\u5f0f\uff1b\u4f7f\u7528\u5c5e\u6027\u9009\u62e9\u7b26\u53ef\u4ee5\u66f4\u654f\u6377\u3001\u66f4\u6a21\u7cca\u5730\u63a7\u5236\u9875\u9762\u4e2d\u5305\u542b\u4e0d\u540c\u5c5e\u6027\u7684\u5bf9\u8c61\u6837\u5f0f\u3002
7.3.1\u5b50\u9009\u62e9\u7b26
\u5b50\u9009\u62e9\u7b26\u5c31\u662f\u6307\u5b9a\u7236\u5143\u7d20\u6240\u5305\u542b\u7684\u5b50\u5143\u7d20\u7684\u6837\u5f0f\u3002\u5b50\u9009\u62e9\u7b26\u4f7f\u7528\u5c16\u89d2\u53f7\uff08\uff09\u6765\u8868\u793a\uff0c\u5b9a\u4e49\u683c\u5f0f\u5982\u4e0b\uff1a
divspan{font-size:20px;}\u5176\u4e2d\uff0cdiv\u4e3aspan\u5143\u7d20\u7684\u7236\u5143\u7d20\uff0c\u901a\u8fc7\u5b50\u9009\u62e9\u7b26\u8fde\u63a5\u3002
\u4f8b\u5982\uff0c\u5b9a\u4e49span\u5143\u7d20\u7684\u5b57\u4f53\u5927\u5c0f\u4e3a10px\uff0c\u518d\u5229\u7528\u5b50\u9009\u62e9\u7b26\u6765\u5b9a\u4e49\u6240\u6709div\u5143\u7d20\u5305\u542b\u7684\u5b50\u5143\u7d20span\u6837\u5f0f\u5b57\u4f53\u5927\u5c0f\u4e3a20px\uff0c\u663e\u793a\u6548\u679c\u5982\u56fe5\u6240\u793a\u3002
CSS\u57fa\u7840\u5165\u95e8\u5c42\u53e0\u6837\u5f0f\u8868\u662f\u4e00\u79cd\u7528\u6765\u8868\u73b0HTML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed7.3.2\u76f8\u90bb\u9009\u62e9\u5668
\u76f8\u90bb\u9009\u62e9\u7b26\u5c31\u662f\u6307\u5b9a\u4e00\u4e2a\u5143\u7d20\u76f8\u90bb\u7684\u4e0b\u4e00\u4e2a\u5143\u7d20\u7684\u6837\u5f0f\u3002\u76f8\u90bb\u9009\u62e9\u7b26\u4f7f\u7528\u52a0\u53f7\uff08+\uff09\u6765\u8868\u793a\uff0c\u683c\u5f0f\u5982\u4e0b\uff1a
div+span{font-size:20px;}\u5176\u4e2d\uff0cdiv+span\u8868\u793adiv\u5143\u7d20\u4e0espan\u5143\u7d20\u76f8\u90bb\u3002\u4f8b\u5982\uff0c\u5229\u7528\u76f8\u90bb\u9009\u62e9\u7b26\u9012\u8fdb\u63a7\u5236\u5e76\u5217\u663e\u793a\u7684\u51e0\u4e2a\u5143\u7d20\u7684\u663e\u793a\u6837\u5f0f\u3002h1+div\u8868\u793a\u6807\u9898\u5143\u7d20h1\u540e\u9762\u76f8\u90bb\u7684div\u5143\u7d20\u6837\u5f0f\uff0cdiv+p\u8868\u793adiv\u5143\u7d20\u540e\u9762\u76f8\u90bb\u7684\u5143\u7d20p\u7684\u6837\u5f0f\uff0cp+div\u8868\u793ap\u5143\u7d20\u540e\u9762\u76f8\u90bb\u7684div\u5143\u7d20\u7684\u6837\u5f0f\uff0c\u800cdiv+div\u8868\u793adiv\u5143\u7d20\u540e\u9762\u76f8\u90bb\u7684div\u5143\u7d20\u7684\u6837\u5f0f\u3002\u6548\u679c\u5982\u56fe6\u6240\u793a\u3002
\u56fe1
\u56fe2
\u56fe4
\u56fe5
\u56fe6
","contentRich":"

\u4ec0\u4e48\u662fCSS\u6837\u5f0f

\u5c42\u53e0\u6837\u5f0f\u8868\uff08CascadingStyleSheet\uff0cCSS\uff09\u662f\u4e00\u7cfb\u5217\u6837\u5f0f\u6216\u683c\u5f0f\u89c4\u683c\u7684\u96c6\u5408\uff0c\u7528\u4e8e\u63a7\u5236\u7f51\u9875\u6837\u5f0f\u5e76\u5141\u8bb8\u5c06\u6837\u5f0f\u4e0e\u7f51\u9875\u5185\u5bb9\u5206\u79bb\u7684\u4e00\u79cd\u6807\u8bb0\u6027\u8bed\u8a00\u3002\u5b83\u662fW3C\u7ec4\u7ec7\u7528\u4e8e\u6539\u5584HTML\u5728\u663e\u793a\u7f51\u9875\u65b9\u9762\u7684\u7f3a\u9677\u3002\u867d\u7136HTML\u5728\u53d1\u5e03\u65f6\u5df2\u7ecf\u5236\u5b9a\u4e86\u5404\u79cd\u7f51\u9875\u6837\u5f0f\u6807\u7b7e\u548c\u5404\u79cd\u9875\u9762\u4fee\u9970\u5c5e\u6027\uff0c\u4f46\u662f\u968f\u7740\u7f51\u9875\u5bb9\u7eb3\u7684\u4fe1\u606f\u8d8a\u6765\u8d8a\u591a\uff0c\u8fd9\u79cd\u628a\u4fe1\u606f\u663e\u793a\u5185\u5bb9\u4e0e\u4fe1\u606f\u663e\u793a\u6837\u5f0f\u6df7\u5728\u4e00\u8d77\u7684\u65b9\u6cd5\uff0c\u5df2\u7ecf\u65e0\u6cd5\u6ee1\u8db3\u4eba\u4eec\u5bf9\u7f51\u7edc\u4fe1\u606f\u7684\u5feb\u901f\u641c\u7d22\u9700\u6c42\uff0c\u66f4\u4e0d\u80fd\u9002\u5e94\u5927\u6570\u636e\u65f6\u4ee3\u7684\u5c55\u793a\u6570\u636e\u7684\u8981\u6c42\u3002

CSS\u7684\u6bcf\u4e00\u4e2a\u6837\u5f0f\u8868\u90fd\u662f\u7531\u76f8\u5bf9\u5e94\u7684\u6837\u5f0f\u89c4\u5219\u7ec4\u6210\u7684\uff0c\u4f7f\u7528HTML\u4e2d\u7684\u6807\u7b7e\u53ef\u4ee5\u5c06\u6837\u5f0f\u8868\u89c4\u5219\u52a0\u5165\u5230HTML\u3002\u6807\u7b7e\u4f4d\u4e8eHTML\u7684head\u90e8\u5206\uff0c\u5176\u4e2d\u4e5f\u5305\u542b\u7f51\u9875\u7684\u6837\u5f0f\u89c4\u5212\uff0c\u5982\u56fe1\u6240\u793a\u3002CSS\u8bed\u53e5\u53ef\u4ee5\u5185\u5d4c\u5728HTML\u4e2d\uff0c\u6240\u4ee5\u7f16\u5199CSS\u6837\u5f0f\u89c4\u5219\u548c\u7f16\u5199HTML\u7684\u65b9\u6cd5\u76f8\u540c\u3002CSS\u8bed\u8a00\u4e0d\u9700\u8981\u7f16\u8bd1\uff0c\u4e5f\u4e0d\u9700\u8981\u7279\u6b8a\u5904\u7406\u3002\u7528\u6237\u53ea\u8981\u628a\u5b83\u4eec\u653e\u5728\u6807\u7b7e\u4e4b\u95f4\u6216\u8005\u7f16\u5199\u4e3a\u4e00\u4e2a\u5355\u72ec\u7684\u6587\u4ef6\uff0c\u7136\u540e\u5c06\u6587\u4ef6\u7684\u6269\u5c55\u540d\u4fdd\u5b58\u4e3a.css\uff0c\u5229\u7528\u6807\u7b7e\u94fe\u63a5\u6216\u8005\u5bfc\u5165\u5230\u7f51\u9875\u4e2d\u5373\u53ef\u3002

CSS\u6837\u5f0f\u7684\u4f18\u52bf

\u4f7f\u7528CSS\u6837\u5f0f\u53ef\u4ee5\u5bf9\u591a\u4e2a\u6587\u6863\u7684\u6837\u5f0f\u8fdb\u884c\u63a7\u5236\uff0c\u5f53CSS\u6837\u5f0f\u66f4\u65b0\u540e\uff0c\u6240\u6709\u5e94\u7528\u8be5CSS\u6837\u5f0f\u7684\u9875\u9762\u90fd\u4f1a\u81ea\u52a8\u66f4\u65b0\u3002CSS\u6837\u5f0f\u53ef\u4ee5\u9875\u9762\u5143\u7d20\u8fdb\u884c\u5b9a\u4f4d\u3001\u7279\u6b8a\u6548\u679c\u548c\u8d85\u94fe\u63a5\u6548\u679c\u7b49\u72ec\u7279\u7684HTML\u5c5e\u6027\uff0c\u53ef\u4ee5\u5145\u5206\u5730\u5f25\u8865HTML\u7684\u4e0d\u8db3\uff0c\u7b80\u5316\u7f51\u9875\u7684\u6e90\u4ee3\u7801\uff0c\u907f\u514d\u91cd\u590d\u52b3\u52a8\uff0c\u51cf\u8f7b\u5de5\u4f5c\u91cf\u3002CSS\u5177\u6709\u4ee5\u4e0b\u4f18\u52bf\uff1a

CSS\u7b26\u5408Web\u6807\u51c6\u3002W3C\u7ec4\u7ec7\u63a8\u8350CSS\u6280\u672f\u5c06\u66ff\u4ee3HTML\u7684\u8868\u683c\u6807\u7b7e\u3001\u6807\u7b7e\u3001\u6807\u7b7e\u4ee5\u53ca\u5176\u4ed6\u7528\u4e8e\u8868\u73b0\u7684HTLM\u5143\u7d20\u3002

\u63d0\u9ad8\u9875\u9762\u7684\u6d4f\u89c8\u901f\u5ea6\u3002\u4f7f\u7528CSS\u6837\u5f0f\u6bd4\u4f20\u7edf\u7684Web\u8bbe\u8ba1\u65b9\u6cd5\u81f3\u5c11\u8282\u7ea650%\u4ee5\u4e0a\u7684\u6587\u4ef6\u5927\u5c0f\u3002

\u7f29\u77ed\u7f51\u7ad9\u6539\u7248\u5468\u671f\u3002\u53ea\u9700\u8981\u4fee\u6539\u76f8\u5e94CSS\u6587\u4ef6\u5c31\u53ef\u4ee5\u91cd\u65b0\u8bbe\u8ba1\u4e00\u4e2a\u6709\u6210\u767e\u4e0a\u5343\u9875\u9762\u7684\u7ad9\u70b9\u3002

\u5f3a\u5927\u7684\u5b57\u4f53\u63a7\u5236\u548c\u6392\u7248\u80fd\u529b\u3002Font\u6807\u7b7e\u5bf9\u4e8e\u5b57\u4f53\u63a7\u5236\u80fd\u529b\u8fdc\u6ca1\u6709CSS\u5bf9\u4e8e\u5b57\u4f53\u7684\u63a7\u5236\u80fd\u529b\u5f3a\uff0c\u4f7f\u7528CSS\u6837\u5f0f\u540e\u4e0d\u9700\u8981\u5728\u4f7f\u7528font\u6807\u7b7e\u6765\u63a7\u5236\u6587\u7ae0\u6807\u9898\u3001\u5b57\u4f53\u989c\u8272\u4ee5\u53ca\u5b57\u4f53\u6837\u5f0f\u7b49\u3002

CSS\u6613\u4e8e\u7f16\u5199\u3002Dreamweaver\u63d0\u4f9b\u4e86CSS\u7f16\u5199\u8f85\u52a9\u5de5\u5177\u3002

CSS\u5177\u6709\u826f\u597d\u7684\u517c\u5bb9\u6027\u3002\u53ea\u8981\u6d4f\u89c8\u5668\u80fd\u591f\u8bc6\u522bCSS\u6837\u5f0f\u90fd\u53ef\u4ee5\u5f88\u597d\u7684\u5e94\u7528\u5b83\u3002

\u8868\u73b0\u548c\u5185\u5bb9\u76f8\u5206\u79bb\u3002\u5c06\u8bbe\u8ba1\u90e8\u5206\u5265\u79bb\u51fa\u6765\u653e\u5728\u4e00\u4e2a\u72ec\u7acb\u6837\u5f0f\u6587\u4ef6\u4e2d\uff0c\u8ba9\u591a\u4e2a\u7f51\u9875\u6587\u4ef6\u5171\u540c\u4f7f\u7528\u5b83\uff0c\u7701\u53bb\u5728\u6bcf\u4e00\u4e2a\u7f51\u9875\u6587\u4ef6\u4e2d\u90fd\u8981\u91cd\u590d\u8bbe\u5b9a\u6837\u5f0f\u7684\u9ebb\u70e6\u3002

CSS\u6837\u5f0f\u57fa\u672c\u8bed\u6cd5

CSS\u7684\u8bed\u6cd5\u7ed3\u6784\u75313\u90e8\u5206\u6784\u6210\uff1a\u9009\u62e9\u5668\u3001\u5c5e\u6027\u548c\u503c\u3002

\u9009\u62e9\u5668{\u6837\u5f0f\u5c5e\u6027:\u53d6\u503c;\u6837\u5f0f\u5c5e\u6027:\u53d6\u503c;\u6837\u5f0f\u5c5e\u6027:\u53d6\u503c;\u2026\u2026}\u9009\u62e9\u5668\uff08Selector\uff09\u901a\u5e38\u662f\u6307\u7528\u6237\u5e0c\u671b\u5b9a\u4e49\u7684HTML\u5143\u7d20\u6216\u6807\u7b7e\uff0c\u5982body\u3001h1\uff1b\u4e5f\u53ef\u4ee5\u662f\u81ea\u5b9a\u4e49\u7684id\u6216class\u7684\u6807\u7b7e\uff0c\u5982#main\u9009\u62e9\u5668\u8868\u793a\u9009\u62e9\uff0c\u5373\u4e00\u4e2a\u88ab\u6307\u5b9a\u4e86main\u4e3aid\u7684\u5bf9\u8c61\u3002\u6d4f\u89c8\u5668\u5c06\u5bf9CSS\u9009\u62e9\u5668\u8fdb\u884c\u4e25\u683c\u7684\u89e3\u6790\uff0c\u6bcf\u4e00\u7ec4\u6837\u5f0f\u5747\u4f1a\u88ab\u6d4f\u89c8\u5668\u5e94\u7528\u5230\u5bf9\u5e94\u7684\u5bf9\u8c61\u4e0a\u3002

\u5c5e\u6027\uff08Property\uff09\u662f\u7528\u6237\u5e0c\u671b\u6539\u53d8\u7684\u5c5e\u6027\uff0c\u5e76\u4e14\u6bcf\u4e2a\u5c5e\u6027\u90fd\u6709\u4e00\u4e2a\u503c\u3002\u5bf9\u4e8e\u6bcf\u4e00\u4e2aHTML\u4e2d\u7684\u6807\u7b7e\uff0cCSS\u90fd\u63d0\u4f9b\u4e86\u4e30\u5bcc\u7684\u6837\u5f0f\u5c5e\u6027\uff0c\u5982\u989c\u8272\u3001\u5927\u5c0f\u3001\u4f4d\u7f6e\u4ee5\u53ca\u6d6e\u52a8\u65b9\u5f0f\u7b49\u3002

\u503c\uff08Value\uff09\u6307\u5c5e\u6027\u7684\u503c\u3002\u5c5e\u6027\u548c\u503c\u88ab\u5192\u53f7\u5206\u5f00\uff0c\u5e76\u7531\u82b1\u62ec\u53f7\u5305\u56f4\uff0c\u8fd9\u6837\u5c31\u7ec4\u6210\u4e86\u4e00\u4e2a\u5b8c\u6574\u7684\u6837\u5f0f\u58f0\u660e\uff08declaration\uff09\u3002\u5c5e\u6027\u503c\u6709\u4e24\u79cd\u5f62\u5f0f\uff1a\u4e00\u79cd\u662f\u6307\u5b9a\u8303\u56f4\u7684\u503c\uff0c\u5982float\u5c5e\u6027\u7684\u53d6\u503c\u4e3aleft\u3001right\u548cnone\uff1b\u53e6\u4e00\u79cd\u4e3a\u6570\u503c\uff0c\u5982height\u5c5e\u6027\u53d6\u503c\u4e3a0~9999px\u6216\u8005\u901a\u8fc7\u5176\u4ed6\u6570\u5b66\u5355\u4f4d\u6765\u6307\u5b9a\u3002

\u4f8b\u5982\uff0c\u5b9a\u4e49\u4e00\u4e2a\u7f51\u9875\u5b57\u4f53\u5927\u5c0f\u4e3a12\u50cf\u7d20\u3001\u52a0\u7c97\uff0c\u6bb5\u843d\u9996\u884c\u7f29\u8fdb2\u5b57\u7b26\uff0c\u5219\u53ef\u4ee5\u8bbe\u7f6e\u6837\u5f0f\u5982\u4e0b\uff1a\u65e0\u6807\u9898\u6587\u6863

\u5c42\u53e0\u6837\u5f0f\u8868\u662f\u4e00\u79cd\u7528\u6765\u8868\u73b0HTML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5e94\u7528\uff09\u6216XML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5b50\u96c6\uff09\u7b49\u6587\u4ef6\u6837\u5f0f\u7684\u8ba1\u7b97\u673a\u8bed\u8a00\u3002

CSS\u76ee\u524d\u6700\u65b0\u7248\u672c\u4e3aCSS3\uff0c\u662f\u80fd\u591f\u771f\u6b63\u505a\u5230\u7f51\u9875\u8868\u73b0\u4e0e\u5185\u5bb9\u5206\u79bb\u7684\u4e00\u79cd\u6837\u5f0f\u8bbe\u8ba1\u8bed\u8a00\u3002\u76f8\u5bf9\u4e8e\u4f20\u7edfHTML\u7684\u8868\u73b0\u800c\u8a00\uff0cCSS\u80fd\u591f\u5bf9\u7f51\u9875\u4e2d\u7684\u5bf9\u8c61\u7684\u4f4d\u7f6e\u6392\u7248\u8fdb\u884c\u50cf\u7d20\u7ea7\u7684\u7cbe\u786e\u63a7\u5236\uff0c\u652f\u6301\u51e0\u4e4e\u6240\u6709\u7684\u5b57\u4f53\u5b57\u53f7\u6837\u5f0f\uff0c\u62e5\u6709\u5bf9\u7f51\u9875\u5bf9\u8c61\u548c\u6a21\u578b\u6837\u5f0f\u7f16\u8f91\u7684\u80fd\u529b\uff0c\u5e76\u80fd\u591f\u8fdb\u884c\u521d\u6b65\u4ea4\u4e92\u8bbe\u8ba1\uff0c\u662f\u76ee\u524d\u57fa\u4e8e\u6587\u672c\u5c55\u793a\u6700\u4f18\u79c0\u7684\u8868\u73b0\u8bbe\u8ba1\u8bed\u8a00\u3002CSS\u80fd\u591f\u6839\u636e\u4e0d\u540c\u4f7f\u7528\u8005\u7684\u7406\u89e3\u80fd\u529b\uff0c\u7b80\u5316\u6216\u8005\u4f18\u5316\u5199\u6cd5\uff0c\u9488\u5bf9\u5404\u7c7b\u4eba\u7fa4\uff0c\u6709\u8f83\u5f3a\u7684\u6613\u8bfb\u6027\u3002\u6d4f\u89c8\u5668\u901a\u8fc7\u89e3\u6790\u5c5e\u6027\u5305\u542b\u7684\u5185\u5bb9\uff0c\u5c06CSS\u6837\u5f0f\u5e94\u7528\u5230\u9875\u9762\u4e0a\uff0c\u5982\u56fe2\u6240\u793a\u3002\u591a\u4e2a\u6837\u5f0f\u53ef\u4ee5\u5e76\u5217\u5728\u4e00\u8d77\u5199\uff0c\u4e0d\u9700\u8981\u8003\u8651\u5982\u4f55\u8fdb\u884c\u5206\u9694\u3002\u4f8b\u5982\uff0c\u5b9a\u4e49\u4e00\u4e2a\u6bb5\u843d\u6587\u672c\u7684\u80cc\u666f\u8272\u4e3a\u7d2b\u8272\uff0c\u5219\u53ef\u4ee5\u5728\u4e0a\u9762\u6837\u5f0f\u7684\u57fa\u7840\u4e0a\u8fdb\u884c\u589e\u52a0\u6837\u5f0f\uff1a

Body{font-size:12px;font-weight:bold;text-indent:2em;}p{backgroundcolor:#FF00FF;}\u7531\u4e8eCSS\u8bed\u8a00\u81ea\u52a8\u5ffd\u7565\u7a7a\u683c\uff08\u9664\u4e86\u9009\u62e9\u5668\u5185\u90e8\u7684\u7a7a\u683c\uff09\uff0c\u56e0\u6b64\u53ef\u4ee5\u5229\u7528\u7a7a\u683c\u548c\u6362\u884c\u7b26\u6765\u7f8e\u5316CSS\u6837\u5f0f\u6e90\u4ee3\u7801\uff0c\u4e0a\u9762\u7684\u4ee3\u7801\u53ef\u4ee5\u8fdb\u884c\u5982\u4e0b\u7f8e\u5316\uff1a

Body{font-size:12px;font-weight:bold;text-indent:2em;}p{background-color:#FF00FF;}\u7ecf\u8fc7\u7f8e\u5316\u7684CSS\u6e90\u4ee3\u7801\u770b\u4e0a\u53bb\u4e00\u76ee\u4e86\u7136\uff0c\u65e2\u65b9\u4fbf\u9605\u8bfb\uff0c\u4e5f\u4fbf\u4e8e\u4fee\u6539\u3002

CSS\u6e90\u4ee3\u7801\u6709\u65f6\u5019\u9700\u8981\u901a\u8fc7\u4e00\u4e9b\u6ce8\u91ca\u6765\u6807\u6ce8\uff0cCSS\u4ee3\u7801\u8868\u793a\u4ec0\u4e48\u610f\u601d\u3002\u5728HTML\u4e2d\u6ce8\u91ca\u6807\u8bb0\u4f7f\u7528\u201c\u201d\uff0cCSS\u4e2d\u6ce8\u91ca\u6807\u8bb0\u4f7f\u7528\u201c\/*\u6ce8\u91ca\u5185\u5bb9*\/\u201d\u3002\u4f8b\u5982\uff0c\u53ef\u4ee5\u5bf9\u4e0a\u9762\u7684\u4ee3\u7801\u8fdb\u884c\u6ce8\u91ca\uff1a

Body{\/*\u9875\u9762\u7684\u57fa\u672c\u5c5e\u6027*\/font-size:12px;font-weight:bold;text-indent:2em;}\/*\u8bbe\u7f6e\u6bb5\u843d\u7684\u80cc\u666f\u989c\u8272\u4e3a\u7d2b\u8272*\/p{background-color:#FF00FF;}\u6dfb\u52a0CSS\u7684\u65b9\u6cd5

\u5728HTML\u4e2d\u6dfb\u52a0CSS\u7684\u65b9\u6cd5\u4e3b\u8981\u67094\u79cd\uff0c\u5206\u522b\u4e3a\u94fe\u63a5\u5185\u5d4c\u6837\u5f0f\u3001\u5185\u90e8\u6837\u5f0f\u8868\u3001\u94fe\u63a5\u5916\u90e8\u6837\u5f0f\u8868\u548c\u5bfc\u5165\u5916\u90e8\u6837\u5f0f\u8868\u3002

1\uff0e\u5185\u5d4c\u6837\u5f0f\u8868

\u5185\u5d4c\u6837\u5f0f\u8868\u662f\u6df7\u5408\u5728HTML\u6807\u8bb0\u91cc\u4f7f\u7528\u7684\uff0c\u8be5\u65b9\u6cd5\u53ef\u4ee5\u5f88\u7b80\u5355\u5730\u5bf9\u67d0\u4e2a\u5143\u7d20\u5355\u72ec\u5b9a\u4e49\u6837\u5f0f\uff0c\u4e3b\u8981\u662f\u5728body\u5185\u5b9e\u73b0\u3002

\u5185\u5d4c\u6837\u5f0f\u8868\u7684\u4f7f\u7528\u662f\u76f4\u63a5\u5728HTML\u6807\u8bb0\u91cc\u52a0\u5165style\u53c2\u6570\uff0c\u800cstyle\u53c2\u6570\u7684\u5185\u5bb9\u5c31\u662fCSS\u7684\u5c5e\u6027\u548c\u503c\uff0c\u5728style\u5f15\u53f7\u91cc\u7684\u5185\u5bb9\u76f8\u5f53\u4e8e\u5728\u6837\u5f0f\u8868\u7684\u5927\u62ec\u53f7\u91cc\u7684\u5185\u5bb9\uff0c\u5176\u683c\u5f0f\u5982\u4e0b\uff1a

\u5b57\u4f53\u5927\u5c0f\u4e3a12px\uff0c\u989c\u8272\u4e3a\u7ea2\u8272\u5f53\u6d4f\u89c8\u5668\u89e3\u6790\u5230\u8fd9\u4e9b\u6807\u7b7e\u65f6\uff0c\u68c0\u6d4b\u5230\u8be5\u6807\u7b7e\u4e2d\u5305\u542bstyle\u5c5e\u6027\uff0c\u5c31\u4f1a\u8c03\u7528CSS\u5f15\u64ce\u6765\u89e3\u6790style\u5c5e\u6027\uff0c\u5e76\u628a\u6548\u679c\u5c55\u73b0\u5230\u9875\u9762\u4e0a\u3002

\u8be5\u65b9\u6cd5\u4e0e\u4f20\u7edf\u7f51\u9875\u8bbe\u8ba1\u5728\u6807\u7b7e\u5185\u589e\u52a0\u5c5e\u6027\u7684\u8bbe\u8ba1\u65b9\u6cd5\u76f8\u540c\uff0c\u8be5\u65b9\u6cd5\u5b9e\u9645\u5e76\u6ca1\u6709\u6ee1\u8db3W3C\u63d0\u51fa\u7684\u5c06HTML\u7ed3\u6784\u4e0eCSS\u8868\u73b0\u5265\u79bb\u6765\u8fdb\u884c\u8bbe\u8ba1\uff0c\u56e0\u6b64\u5728\u7f51\u9875\u8bbe\u8ba1\u4e2d\u4e0d\u5efa\u8bae\u4f7f\u7528\u8be5\u65b9\u6cd5\uff0c\u9664\u975e\u4e3a\u9875\u9762\u4e2d\u4e2a\u522b\u5143\u7d20\u8bbe\u7f6e\u67d0\u4e2a\u7279\u5b9a\u6837\u5f0f\u6548\u679c\u800c\u5355\u72ec\u5b9a\u4e49\u3002

2\uff0e\u5185\u90e8\u6837\u5f0f\u8868

\u5185\u90e8\u6837\u5f0f\u8868\u4e0e\u5185\u5d4c\u6837\u5f0f\u8868\u7684\u76f8\u4f3c\u4e4b\u5904\u5728\u4e8e\uff0c\u90fd\u5c06CSS\u6837\u5f0f\u7f16\u5199\u5230\u9875\u9762\u4e2d\u3002\u800c\u4e0d\u540c\u7684\u662f\uff0c\u5185\u90e8\u6837\u5f0f\u8868\u53ef\u4ee5\u7edf\u4e00\u653e\u7f6e\u5728\u4e00\u4e2a\u56fa\u5b9a\u7684\u4f4d\u7f6e\uff0c\u5176\u683c\u5f0f\u5982\u4e0b\uff1a

\u5185\u90e8\u6837\u5f0f\u8868\u901a\u5e38\u4f4d\u4e8e\u7f51\u9875\u7684\u5934\u90e8\u533a\u57df\uff0c\u76ee\u7684\u662f\u8ba9CSS\u6e90\u4ee3\u7801\u5728\u9875\u9762\u52a0\u8f7d\u524d\u5148\u88ab\u89e3\u6790\u6267\u884c\uff0c\u8fd9\u6837\u53ef\u4ee5\u907f\u514d\u5f53\u7f51\u9875\u52a0\u8f7d\u5b8c\u6210\u540e\uff0c\u6ca1\u6709CSS\u6837\u5f0f\u6e32\u67d3\u800c\u4f7f\u7684\u9875\u9762\u4fe1\u606f\u65e0\u6cd5\u6b63\u5e38\u663e\u793a\u30023\uff0e\u94fe\u63a5\u5916\u90e8\u6837\u5f0f\u8868\u94fe\u63a5\u5916\u90e8\u6837\u5f0f\u8868\u662f\u5728CSS\u4e2d\u6700\u5e38\u7528\u7684\u4e00\u79cd\u5f62\u5f0f\uff0c\u5b83\u5c06CSS\u6837\u5f0f\u4ee3\u7801\u5355\u72ec\u7f16\u5199\u5230\u4e00\u4e2a\u72ec\u7acb\u7684\u6587\u4ef6\u4e2d\uff0c\u7531\u7f51\u9875\u8fdb\u884c\u8c03\u7528\uff0c\u591a\u4e2a\u7f51\u9875\u53ef\u4ee5\u540c\u65f6\u4f7f\u7528\u540c\u4e00\u4e2a\u6837\u5f0f\u6587\u4ef6\uff0c\u5176\u683c\u5f0f\u5982\u4e0b\uff1a

\u5176\u4e2d\uff0chref\u5c5e\u6027\u8bbe\u7f6e\u5916\u90e8\u6837\u5f0f\u8868\u6587\u4ef6\u7684\u5730\u5740\uff0c\u8be5\u5730\u5740\u53ef\u4ee5\u662f\u76f8\u5bf9\u5730\u5740\uff0c\u4e5f\u53ef\u4ee5\u662f\u7edd\u5bf9\u5730\u5740\uff1brel\u5c5e\u6027\u5b9a\u4e49\u8be5\u6807\u7b7e\u5173\u8054\u7684\u662f\u6837\u5f0f\u8868\u6807\u7b7e\uff1btype\u5c5e\u6027\u5b9a\u4e49\u6587\u6863\u7684\u7c7b\u578b\uff0c\u5373CSS\u6587\u672c\u6587\u4ef6\u3002

\u7f51\u7ad9\u901a\u5e38\u91c7\u7528\u94fe\u63a5\u5916\u90e8\u6837\u5f0f\u8868\u6765\u8bbe\u8ba1\u7f51\u7ad9\u7684\u8868\u73b0\u5c42\uff0c\u80fd\u591f\u5b9e\u73b0CSS\u6837\u5f0f\u4e0eHTML\u7ed3\u6784\u7684\u5206\u79bb\uff0c\u8fd9\u79cd\u5206\u79bb\u539f\u5219\u662fW3C\u6240\u63d0\u5021\u7684\uff0c\u56e0\u4e3a\u8fd9\u6837\u53ef\u4ee5\u9ad8\u6548\u5730\u7ba1\u7406\u6587\u6863\u7ed3\u6784\u548c\u6837\u5f0f\u8868\u6587\u4ef6\uff0c\u5b9e\u73b0\u4ee3\u7801\u7684\u4f18\u5316\u548c\u91cd\u7528\u3002

4\uff0e\u5bfc\u5165\u5916\u90e8\u6837\u5f0f\u8868\u5bfc\u5165\u5916\u90e8\u6837\u5f0f\u8868\u662f\u6307\u5728\u5185\u90e8\u6837\u5f0f\u8868\u7684\u6807\u7b7e\u5185\u4f7f\u7528@import\u5173\u952e\u5b57\u5bfc\u5165\u5916\u90e8\u6837\u5f0f\u8868\u6587\u4ef6\uff0c\u683c\u5f0f\u5982\u4e0b\uff1a

\u5728@import\u5173\u952e\u5b57\u540e\u9762\uff0c\u4f7f\u7528url()\u51fd\u6570\u6765\u628a\u5916\u90e8\u6837\u5f0f\u8868\u6587\u4ef6\u5bfc\u5165\u3002\u6ce8\u610f\u4f7f\u7528\u65f6\uff0c\u5916\u90e8\u6837\u5f0f\u8868\u7684\u8def\u5f84\u3001\u65b9\u6cd5\u548c\u94fe\u63a5\u5916\u90e8\u6837\u5f0f\u8868\u7684\u65b9\u6cd5\u7c7b\u4f3c\uff0c\u4f46\u5bfc\u5165\u5916\u90e8\u6837\u5f0f\u8868\u8f93\u5165\u65b9\u5f0f\u66f4\u6709\u4f18\u52bf\u3002\u5b9e\u8d28\u4e0a\u5b83\u662f\u76f8\u5f53\u4e8e\u5b58\u5728\u5185\u90e8\u6837\u5f0f\u8868\u4e2d\u7684\u3002

7.2CSS\u57fa\u672c\u9009\u62e9\u5668

\u9009\u62e9\u5668\u51b3\u5b9a\u6837\u5f0f\u89c4\u5219\u4f5c\u7528\u4e8e\u54ea\u4e9b\u5143\u7d20\u3002\u4f8b\u5982\uff0c\u5982\u679c\u8981\u5bf9table\u5143\u7d20\u6dfb\u52a0\u8fb9\u6846\u4e3a\u5b9e\u7ebf\u3001\u7ebf\u5bbd1\u50cf\u7d20\u3001\u84dd\u8272\u7684\u8fb9\u6846\uff0c\u5219\u9700\u8981\u521b\u5efa\u4e00\u4e2a\u53ea\u8bc6\u522btable\u5143\u7d20\u800c\u4e0d\u5f71\u54cd\u5176\u4ed6\u5143\u7d20\u7684\u9009\u62e9\u5668\u3002\u5982\u679c\u8981\u5bf9\u6bcf\u4e2a\u533a\u57df\u4e2d\u7684table\u8bbe\u7f6e\u7279\u6b8a\u683c\u5f0f\uff0c\u5c31\u9700\u8981\u521b\u5efa\u4e00\u4e2a\u7a0d\u5fae\u590d\u6742\u4e00\u4e9b\u7684\u9009\u62e9\u5668\uff0c\u5b83\u53ea\u8bc6\u522b\u6307\u5b9a\u533a\u57df\u4e2d\u7684table\u5143\u7d20\u3002

7.2.1\u6807\u7b7e\u9009\u62e9\u5668

HTML\u6587\u6863\u90fd\u662f\u7531\u5f88\u591a\u6807\u7b7e\u901a\u8fc7\u4e00\u5b9a\u7684\u89c4\u5219\u7f16\u7ec7\u800c\u6210\u7684\uff0c\u6211\u4eec\u4e5f\u53ef\u4ee5\u628a\u8fd9\u4e9b\u6807\u7b7e\u79f0\u4e3a\u7f51\u9875\u5143\u7d20\u3002\u6807\u7b7e\u9009\u62e9\u5668\u4f7f\u7528\u7f51\u9875\u5143\u7d20\u5b9a\u4e49\u6837\u5f0f\u3002

\u4f8b\u5982\uff0c\u58f0\u660ep\u5143\u7d20\u9996\u884c\u7f29\u8fdb2\u5b57\u7b26\uff0c\u5b57\u4f53\u989c\u8272\u4e3a\u7ea2\u8272\uff1b\u6240\u6709h1\u5b57\u53f7\u4e3a15px\u3001\u52a0\u7c97\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a

\u5176\u4e2d\uff0cp\u548ch1\u90fd\u662fHTML\u7279\u5b9a\u7684\u6807\u7b7e\u540d\u79f0\uff0c\u76f4\u63a5\u5f15\u7528\u5373\u53ef\u3002

\u6ce8\u610f\uff1a*\u53f7\u4e3a\u901a\u914d\u7b26\u5339\u914d\u9875\u9762\u4e2d\u7684\u6240\u6709\u5143\u7d20\u540d\u79f0\u3002\u4e0a\u9762\u7684\u4ee3\u7801\u8bbe\u7f6e\u6bcf\u4e2a\u5143\u7d20\u7684\u5185\u5916\u8fb9\u8ddd\u4e3a0px\u3002\u7531\u4e8e\u6bcf\u4e2a\u5143\u7d20\u90fd\u6709\u7cfb\u7edf\u9ed8\u8ba4\u7684\u5185\u5916\u8fb9\u8ddd\u503c\uff0c\u4e14\u5728\u4e0d\u540c\u7684\u6d4f\u89c8\u5668\u4e2d\u663e\u793a\u7684\u6548\u679c\u4e5f\u4e0d\u540c\uff0c\u56e0\u6b64\u5728\u8bbe\u7f6e\u7f51\u9875\u6837\u5f0f\u4e4b\u521d\u4f7f\u7528\u901a\u914d\u7b26*\u5c06\u6240\u6709\u5143\u7d20\u9ed8\u8ba4\u7684\u5185\u5916\u8fb9\u8ddd\u53bb\u6389\u662f\u5e38\u89c1\u505a\u6cd5\u3002

7.2.2\u7c7b\u522b\u9009\u62e9\u5668

\u4f7f\u7528\u6807\u7b7e\u9009\u62e9\u7b26\u53ef\u4ee5\u65b9\u4fbf\u5730\u5bf9\u6807\u7b7e\u8fdb\u884c\u6837\u5f0f\u8bbe\u7f6e\uff0c\u540c\u65f6\u6807\u7b7e\u9009\u62e9\u7b26\u4e5f\u5b58\u5728\u8f83\u591a\u95ee\u9898\u3002\u56e0\u4e3a\u6807\u7b7e\u9009\u62e9\u7b26\u5bf9\u6807\u7b7e\u6240\u505a\u7684\u5b9a\u4e49\u4e0d\u5355\u5355\u5f71\u54cd\u6240\u9009\u62e9\u7684\u6807\u7b7e\u5143\u7d20\uff0c\u800c\u662f\u5bf9\u6574\u4e2a\u9875\u9762\u4e2d\u6240\u6709\u76f8\u540c\u6807\u7b7e\u90fd\u4f1a\u8d77\u4f5c\u7528\u3002\u5982\u679c\u9700\u8981\u5bf9\u540c\u4e00\u4e2a\u6807\u7b7e\u5728\u7f51\u9875\u4e2d\u7684\u4e0d\u540c\u4f4d\u7f6e\u663e\u793a\u4e0d\u540c\u7684\u6837\u5f0f\uff0c\u4f7f\u7528\u8fd9\u79cd\u65b9\u6cd5\u5b9a\u4e49\u7684\u6837\u5f0f\u5c31\u5b58\u5728\u5f88\u591a\u4e0d\u8db3\u3002\u5bf9\u4e8e\u8fd9\u4e2a\u95ee\u9898\u53ef\u4ee5\u4f7f\u7528\u7c7b\u9009\u62e9\u5668\u6765\u89e3\u51b3\u3002

\u7c7b\uff08Class\uff09\u9009\u62e9\u7b26\u5c31\u662f\u4e3a\u4e86\u4e0d\u540c\u5143\u7d20\u62e5\u6709\u76f8\u540c\u7684\u663e\u793a\u6837\u5f0f\u800c\u5b9a\u4e49\u7684\u3002\u4f8b\u5982\uff0c\u5728\u4e0b\u9762\u8fd9\u4e2a\u9875\u9762\u4e2d\u5305\u542b\u4e09\u6bb5\u6587\u672c\uff0c\u901a\u8fc7\u6807\u7b7e\u9009\u62e9\u5668\u5c06\u6240\u6709\u6bb5\u843d\u6587\u672c\u5927\u5c0f\u5b9a\u4e49\u4e3a13px\uff0c\u9996\u884c\u7f29\u8fdb2\u5b57\u7b26\uff0c\u5b57\u4f53\u989c\u8272\u4e3a\u84dd\u8272\u3002

\u5c42\u53e0\u6837\u5f0f\u8868\u662f\u4e00\u79cd\u7528\u6765\u8868\u73b0HTML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5e94\u7528\uff09\u6216XML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5b50\u96c6\uff09\u7b49\u6587\u4ef6\u6837\u5f0f\u7684\u8ba1\u7b97\u673a\u8bed\u8a00\u3002

CSS\u76ee\u524d\u6700\u65b0\u7248\u672c\u4e3aCSS3\uff0c\u662f\u80fd\u591f\u771f\u6b63\u505a\u5230\u7f51\u9875\u8868\u73b0\u4e0e\u5185\u5bb9\u5206\u79bb\u7684\u4e00\u79cd\u6837\u5f0f\u8bbe\u8ba1\u8bed\u8a00\u3002\u76f8\u5bf9\u4e8e\u4f20\u7edfHTML\u7684\u8868\u73b0\u800c\u8a00\uff0cCSS\u80fd\u591f\u5bf9\u7f51\u9875\u4e2d\u7684\u5bf9\u8c61\u7684\u4f4d\u7f6e\u6392\u7248\u8fdb\u884c\u50cf\u7d20\u7ea7\u7684\u7cbe\u786e\u63a7\u5236\uff0c\u652f\u6301\u51e0\u4e4e\u6240\u6709\u7684\u5b57\u4f53\u5b57\u53f7\u6837\u5f0f\uff0c\u62e5\u6709\u5bf9\u7f51\u9875\u5bf9\u8c61\u548c\u6a21\u578b\u6837\u5f0f\u7f16\u8f91\u7684\u80fd\u529b\uff0c\u5e76\u80fd\u591f\u8fdb\u884c\u521d\u6b65\u4ea4\u4e92\u8bbe\u8ba1\uff0c\u662f\u76ee\u524d\u57fa\u4e8e\u6587\u672c\u5c55\u793a\u6700\u4f18\u79c0\u7684\u8868\u73b0\u8bbe\u8ba1\u8bed\u8a00\u3002

CSS\u80fd\u591f\u6839\u636e\u4e0d\u540c\u4f7f\u7528\u8005\u7684\u7406\u89e3\u80fd\u529b\uff0c\u7b80\u5316\u6216\u8005\u4f18\u5316\u5199\u6cd5\uff0c\u9488\u5bf9\u5404\u7c7b\u4eba\u7fa4\uff0c\u6709\u8f83\u5f3a\u7684\u6613\u8bfb\u6027\u3002\u5982\u679c\u73b0\u5728\u8981\u6c42\u628a\u7b2c\u4e00\u6bb5\u5b57\u4f53\u5927\u5c0f\u6539\u4e3a20px\uff0c\u5b57\u4f53\u52a0\u7c97\uff0c\u8fd9\u65f6\u5c31\u53ef\u4ee5\u4f7f\u7528\u7c7b\u9009\u62e9\u7b26\u3002\u5b9a\u4e49\u683c\u5f0f\u5982\u4e0b\uff1a

.fontbold{font-size:20px;font-weight:bold;}

\u5c42\u53e0\u6837\u5f0f\u8868\u662f\u4e00\u79cd\u7528\u6765\u8868\u73b0HTML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5e94\u7528\uff09\u6216XML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5b50\u96c6\uff09\u7b49\u6587\u4ef6\u6837\u5f0f\u7684\u8ba1\u7b97\u673a\u8bed\u8a00\u3002

CSS\u662f\u80fd\u591f\u771f\u6b63\u505a\u5230\u7f51\u9875\u8868\u73b0\u4e0e\u5185\u5bb9\u5206\u79bb\u7684\u4e00\u79cd\u6837\u5f0f\u8bbe\u8ba1\u8bed\u8a00\u3002\u76f8\u5bf9\u4e8e\u4f20\u7edfHTML\u7684\u8868\u73b0\u800c\u8a00\uff0cCSS\u80fd\u591f\u5bf9\u7f51\u9875\u4e2d\u7684\u5bf9\u8c61\u7684\u4f4d\u7f6e\u6392\u7248\u8fdb\u884c\u50cf\u7d20\u7ea7\u7684\u7cbe\u786e\u63a7\u5236\uff0c\u652f\u6301\u51e0\u4e4e\u6240\u6709\u7684\u5b57\u4f53\u5b57\u53f7\u6837\u5f0f\uff0c\u62e5\u6709\u5bf9\u7f51\u9875\u5bf9\u8c61\u548c\u6a21\u578b\u6837\u5f0f\u7f16\u8f91\u7684\u80fd\u529b\uff0c\u5e76\u80fd\u591f\u8fdb\u884c\u521d\u6b65\u4ea4\u4e92\u8bbe\u8ba1\uff0c\u662f\u76ee\u524d\u57fa\u4e8e\u6587\u672c\u5c55\u793a\u6700\u4f18\u79c0\u7684\u8868\u73b0\u8bbe\u8ba1\u8bed\u8a00\u3002

CSS\u80fd\u591f\u6839\u636e\u4e0d\u540c\u4f7f\u7528\u8005\u7684\u7406\u89e3\u80fd\u529b\uff0c\u7b80\u5316\u6216\u8005\u4f18\u5316\u5199\u6cd5\uff0c\u9488\u5bf9\u5404\u7c7b\u4eba\u7fa4\uff0c\u6709\u8f83\u5f3a\u7684\u6613\u8bfb\u6027\u3002

\u5728\u6d4f\u89c8\u5668\u4e2d\u9884\u89c8\uff0c\u663e\u793a\u6548\u679c\u5982\u56fe3\u6240\u793a\uff0c\u53ef\u4ee5\u770b\u5230\u7b2c\u4e00\u6bb5\u5b57\u4f53\u88ab\u5355\u72ec\u653e\u5927\u5e76\u52a0\u7c97\u3002\u7c7b\u9009\u62e9\u7b26\u53ef\u4ee5\u7cbe\u786e\u5730\u63a7\u5236\u9875\u9762\u4e2d\u67d0\u4e2a\u5177\u4f53\u5143\u7d20\u5bf9\u8c61\uff0c\u800c\u4e0d\u7ba1\u8fd9\u4e2a\u5bf9\u8c61\u662f\u5c5e\u4e8e\u4ec0\u4e48\u7c7b\u578b\u7684\u6807\u7b7e\uff0c\u540c\u65f6\u4e00\u4e2a\u7c7b\u6837\u5f0f\u53ef\u4ee5\u5728\u591a\u4e2a\u6807\u7b7e\u4e2d\u88ab\u5f15\u7528\u3002

\u5728\u81ea\u5b9a\u4e49\u7c7b\u540d\u65f6\uff0c\u53ea\u80fd\u591f\u4f7f\u7528\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u4e0b\u5212\u7ebf\uff08_\uff09\u548c\u8fde\u63a5\u7b26\u53f7\uff08-\uff09\uff0c\u7c7b\u540d\u5fc5\u987b\u4ee5\u5b57\u6bcd\u5f00\u5934\uff0c\u5426\u5219\u65e0\u6548\u3002\u53e6\u5916\uff0c\u7c7b\u540d\u662f\u533a\u5206\u5927\u5c0f\u5199\u7684\uff0c\u6240\u4ee5\u7c7bfontbold\u548c\u7c7bFontbold\u662f\u5b8c\u5168\u4e0d\u540c\u7684\u4e24\u4e2a\u7c7b\u3002

7.2.3ID\u9009\u62e9\u5668

ID\u662f\u82f1\u6587Identity\u7684\u7f29\u5199\uff0c\u5b83\u8868\u793a\u8eab\u4efd\u6807\u8bc6\u53f7\u7801\uff0c\u5728\u7f51\u7edc\u4e0a\u4e00\u822c\u6307\u7528\u6237\u8d26\u53f7\uff0c\u4f46\u662f\u5728Web\u8bbe\u8ba1\u4e2d\u4e00\u822c\u6307\u6807\u7b7e\u5728HTML\u6587\u6863\u4e2d\u7684\u552f\u4e00\u7f16\u53f7\u3002\u4ece\u8fd9\u70b9\u6765\u770b\uff0cID\u9009\u62e9\u5668\u53ea\u80fd\u591f\u5728HTML\u9875\u9762\u4e2d\u7528\u4e00\u6b21\uff0c\u5b83\u662f\u4e0e\u6807\u7b7e\u9009\u62e9\u7b26\u548c\u7c7b\u9009\u62e9\u7b26\u4f5c\u7528\u8303\u56f4\u76f8\u53cd\u7684\u4e00\u4e2a\u9009\u62e9\u7b26\u3002ID\u9009\u62e9\u7b26\u901a\u5e38\u88ab\u6765\u5b9a\u4e49HTML\u6846\u67b6\u7ed3\u6784\u7684\u5e03\u5c40\u6548\u679c\uff0c\u56e0\u4e3aHTML\u6846\u67b6\u5143\u7d20\u7684ID\u503c\u90fd\u662f\u552f\u4e00\u7684\u3002

ID\u9009\u62e9\u7b26\u5fc5\u987b\u4ee5\u4e95\u53f7\uff08#\uff09\u524d\u7f00\u5f00\u59cb\uff0c\u7136\u540e\u662f\u4e00\u4e2a\u81ea\u5b9a\u4e49\u7684ID\u540d\uff0c\u5b9a\u4e49\u683c\u5f0f\u5982\u4e0b\uff1a

#box{width:600px;height:auto;}\u4f8b\u5982\uff0c\u4e0b\u9762\u5b9e\u4f8b\u5b9a\u4e49\u4e00\u4e2a\u76d2\u5b50\uff0c\u4e3a\u8be5\u76d2\u5b50\u6307\u5b9a\u5bbd\u5ea6\u548c\u9ad8\u5ea6\uff0c\u5e76\u8bbe\u7f6e\u76d2\u5b50\u7684\u80cc\u666f\u989c\u8272\u4ee5\u53ca\u8fb9\u6846\u548c\u5185\u8fb9\u8ddd\u5927\u5c0f\uff0c\u663e\u793a\u6548\u679c\u5982\u56fe4\u6240\u793a\u30027.3\u590d\u5408\u9009\u62e9\u5668\u5982\u679c\u4ec5\u4ec5\u638c\u63e1\u4e86\u6807\u7b7e\u9009\u62e9\u7b26\u3001\u7c7b\u9009\u62e9\u7b26\u548cID\u9009\u62e9\u7b26\u8fd8\u8fdc\u8fdc\u4e0d\u591f\uff0c\u5bf9\u4e8e\u7f51\u9875\u8bbe\u8ba1\u8005\u6765\u8bb2\u8fd8\u5e94\u8be5\u638c\u63e1\u9ad8\u7ea7\u9009\u62e9\u7b26\u7684\u4f7f\u7528\uff0c\u5982\u5b50\u9009\u62e9\u7b26\u3001\u76f8\u90bb\u9009\u62e9\u7b26\u548c\u5c5e\u6027\u9009\u62e9\u7b26\u3002

\u5229\u7528\u6807\u7b7e\u9009\u62e9\u7b26\u548c\u7c7b\u9009\u62e9\u7b26\u53ef\u4ee5\u63a7\u5236\u7f51\u9875\u4e2d\u4f17\u591a\u5bf9\u8c61\u7684\u6837\u5f0f\uff1b\u800c\u5229\u7528ID\u9009\u62e9\u7b26\u3001\u5b50\u9009\u62e9\u7b26\u548c\u76f8\u90bb\u9009\u62e9\u7b26\u53ef\u4ee5\u7cbe\u786e\u63a7\u5236\u9875\u9762\u4e2d\u7684\u7279\u5b9a\u5bf9\u8c61\u6837\u5f0f\uff1b\u4f7f\u7528\u5c5e\u6027\u9009\u62e9\u7b26\u53ef\u4ee5\u66f4\u654f\u6377\u3001\u66f4\u6a21\u7cca\u5730\u63a7\u5236\u9875\u9762\u4e2d\u5305\u542b\u4e0d\u540c\u5c5e\u6027\u7684\u5bf9\u8c61\u6837\u5f0f\u3002

7.3.1\u5b50\u9009\u62e9\u7b26

\u5b50\u9009\u62e9\u7b26\u5c31\u662f\u6307\u5b9a\u7236\u5143\u7d20\u6240\u5305\u542b\u7684\u5b50\u5143\u7d20\u7684\u6837\u5f0f\u3002\u5b50\u9009\u62e9\u7b26\u4f7f\u7528\u5c16\u89d2\u53f7\uff08>\uff09\u6765\u8868\u793a\uff0c\u5b9a\u4e49\u683c\u5f0f\u5982\u4e0b\uff1a

div>span{font-size:20px;}\u5176\u4e2d\uff0cdiv\u4e3aspan\u5143\u7d20\u7684\u7236\u5143\u7d20\uff0c\u901a\u8fc7\u5b50\u9009\u62e9\u7b26\u8fde\u63a5\u3002

\u4f8b\u5982\uff0c\u5b9a\u4e49span\u5143\u7d20\u7684\u5b57\u4f53\u5927\u5c0f\u4e3a10px\uff0c\u518d\u5229\u7528\u5b50\u9009\u62e9\u7b26\u6765\u5b9a\u4e49\u6240\u6709div\u5143\u7d20\u5305\u542b\u7684\u5b50\u5143\u7d20span\u6837\u5f0f\u5b57\u4f53\u5927\u5c0f\u4e3a20px\uff0c\u663e\u793a\u6548\u679c\u5982\u56fe5\u6240\u793a\u3002

CSS\u57fa\u7840\u5165\u95e8\u5c42\u53e0\u6837\u5f0f\u8868\u662f\u4e00\u79cd\u7528\u6765\u8868\u73b0HTML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed7.3.2\u76f8\u90bb\u9009\u62e9\u5668

\u76f8\u90bb\u9009\u62e9\u7b26\u5c31\u662f\u6307\u5b9a\u4e00\u4e2a\u5143\u7d20\u76f8\u90bb\u7684\u4e0b\u4e00\u4e2a\u5143\u7d20\u7684\u6837\u5f0f\u3002\u76f8\u90bb\u9009\u62e9\u7b26\u4f7f\u7528\u52a0\u53f7\uff08+\uff09\u6765\u8868\u793a\uff0c\u683c\u5f0f\u5982\u4e0b\uff1a

div+span{font-size:20px;}\u5176\u4e2d\uff0cdiv+span\u8868\u793adiv\u5143\u7d20\u4e0espan\u5143\u7d20\u76f8\u90bb\u3002\u4f8b\u5982\uff0c\u5229\u7528\u76f8\u90bb\u9009\u62e9\u7b26\u9012\u8fdb\u63a7\u5236\u5e76\u5217\u663e\u793a\u7684\u51e0\u4e2a\u5143\u7d20\u7684\u663e\u793a\u6837\u5f0f\u3002h1+div\u8868\u793a\u6807\u9898\u5143\u7d20h1\u540e\u9762\u76f8\u90bb\u7684div\u5143\u7d20\u6837\u5f0f\uff0cdiv+p\u8868\u793adiv\u5143\u7d20\u540e\u9762\u76f8\u90bb\u7684\u5143\u7d20p\u7684\u6837\u5f0f\uff0cp+div\u8868\u793ap\u5143\u7d20\u540e\u9762\u76f8\u90bb\u7684div\u5143\u7d20\u7684\u6837\u5f0f\uff0c\u800cdiv+div\u8868\u793adiv\u5143\u7d20\u540e\u9762\u76f8\u90bb\u7684div\u5143\u7d20\u7684\u6837\u5f0f\u3002\u6548\u679c\u5982\u56fe6\u6240\u793a\u3002

\u56fe1

\u56fe2

\u56fe4

\u56fe5

\u56fe6

","contentText":"\u4ec0\u4e48\u662fCSS\u6837\u5f0f\n\u5c42\u53e0\u6837\u5f0f\u8868\uff08CascadingStyleSheet\uff0cCSS\uff09\u662f\u4e00\u7cfb\u5217\u6837\u5f0f\u6216\u683c\u5f0f\u89c4\u683c\u7684\u96c6\u5408\uff0c\u7528\u4e8e\u63a7\u5236\u7f51\u9875\u6837\u5f0f\u5e76\u5141\u8bb8\u5c06\u6837\u5f0f\u4e0e\u7f51\u9875\u5185\u5bb9\u5206\u79bb\u7684\u4e00\u79cd\u6807\u8bb0\u6027\u8bed\u8a00\u3002\u5b83\u662fW3C\u7ec4\u7ec7\u7528\u4e8e\u6539\u5584HTML\u5728\u663e\u793a\u7f51\u9875\u65b9\u9762\u7684\u7f3a\u9677\u3002\u867d\u7136HTML\u5728\u53d1\u5e03\u65f6\u5df2\u7ecf\u5236\u5b9a\u4e86\u5404\u79cd\u7f51\u9875\u6837\u5f0f\u6807\u7b7e\u548c\u5404\u79cd\u9875\u9762\u4fee\u9970\u5c5e\u6027\uff0c\u4f46\u662f\u968f\u7740\u7f51\u9875\u5bb9\u7eb3\u7684\u4fe1\u606f\u8d8a\u6765\u8d8a\u591a\uff0c\u8fd9\u79cd\u628a\u4fe1\u606f\u663e\u793a\u5185\u5bb9\u4e0e\u4fe1\u606f\u663e\u793a\u6837\u5f0f\u6df7\u5728\u4e00\u8d77\u7684\u65b9\u6cd5\uff0c\u5df2\u7ecf\u65e0\u6cd5\u6ee1\u8db3\u4eba\u4eec\u5bf9\u7f51\u7edc\u4fe1\u606f\u7684\u5feb\u901f\u641c\u7d22\u9700\u6c42\uff0c\u66f4\u4e0d\u80fd\u9002\u5e94\u5927\u6570\u636e\u65f6\u4ee3\u7684\u5c55\u793a\u6570\u636e\u7684\u8981\u6c42\u3002\nCSS\u7684\u6bcf\u4e00\u4e2a\u6837\u5f0f\u8868\u90fd\u662f\u7531\u76f8\u5bf9\u5e94\u7684\u6837\u5f0f\u89c4\u5219\u7ec4\u6210\u7684\uff0c\u4f7f\u7528HTML\u4e2d\u7684\u6807\u7b7e\u53ef\u4ee5\u5c06\u6837\u5f0f\u8868\u89c4\u5219\u52a0\u5165\u5230HTML\u3002\u6807\u7b7e\u4f4d\u4e8eHTML\u7684head\u90e8\u5206\uff0c\u5176\u4e2d\u4e5f\u5305\u542b\u7f51\u9875\u7684\u6837\u5f0f\u89c4\u5212\uff0c\u5982\u56fe1\u6240\u793a\u3002CSS\u8bed\u53e5\u53ef\u4ee5\u5185\u5d4c\u5728HTML\u4e2d\uff0c\u6240\u4ee5\u7f16\u5199CSS\u6837\u5f0f\u89c4\u5219\u548c\u7f16\u5199HTML\u7684\u65b9\u6cd5\u76f8\u540c\u3002CSS\u8bed\u8a00\u4e0d\u9700\u8981\u7f16\u8bd1\uff0c\u4e5f\u4e0d\u9700\u8981\u7279\u6b8a\u5904\u7406\u3002\u7528\u6237\u53ea\u8981\u628a\u5b83\u4eec\u653e\u5728\u6807\u7b7e\u4e4b\u95f4\u6216\u8005\u7f16\u5199\u4e3a\u4e00\u4e2a\u5355\u72ec\u7684\u6587\u4ef6\uff0c\u7136\u540e\u5c06\u6587\u4ef6\u7684\u6269\u5c55\u540d\u4fdd\u5b58\u4e3a.css\uff0c\u5229\u7528\u6807\u7b7e\u94fe\u63a5\u6216\u8005\u5bfc\u5165\u5230\u7f51\u9875\u4e2d\u5373\u53ef\u3002\nCSS\u6837\u5f0f\u7684\u4f18\u52bf\n\u4f7f\u7528CSS\u6837\u5f0f\u53ef\u4ee5\u5bf9\u591a\u4e2a\u6587\u6863\u7684\u6837\u5f0f\u8fdb\u884c\u63a7\u5236\uff0c\u5f53CSS\u6837\u5f0f\u66f4\u65b0\u540e\uff0c\u6240\u6709\u5e94\u7528\u8be5CSS\u6837\u5f0f\u7684\u9875\u9762\u90fd\u4f1a\u81ea\u52a8\u66f4\u65b0\u3002CSS\u6837\u5f0f\u53ef\u4ee5\u9875\u9762\u5143\u7d20\u8fdb\u884c\u5b9a\u4f4d\u3001\u7279\u6b8a\u6548\u679c\u548c\u8d85\u94fe\u63a5\u6548\u679c\u7b49\u72ec\u7279\u7684HTML\u5c5e\u6027\uff0c\u53ef\u4ee5\u5145\u5206\u5730\u5f25\u8865HTML\u7684\u4e0d\u8db3\uff0c\u7b80\u5316\u7f51\u9875\u7684\u6e90\u4ee3\u7801\uff0c\u907f\u514d\u91cd\u590d\u52b3\u52a8\uff0c\u51cf\u8f7b\u5de5\u4f5c\u91cf\u3002CSS\u5177\u6709\u4ee5\u4e0b\u4f18\u52bf\uff1a\nCSS\u7b26\u5408Web\u6807\u51c6\u3002W3C\u7ec4\u7ec7\u63a8\u8350CSS\u6280\u672f\u5c06\u66ff\u4ee3HTML\u7684\u8868\u683c\u6807\u7b7e\u3001\u6807\u7b7e\u3001\u6807\u7b7e\u4ee5\u53ca\u5176\u4ed6\u7528\u4e8e\u8868\u73b0\u7684HTLM\u5143\u7d20\u3002\n\u63d0\u9ad8\u9875\u9762\u7684\u6d4f\u89c8\u901f\u5ea6\u3002\u4f7f\u7528CSS\u6837\u5f0f\u6bd4\u4f20\u7edf\u7684Web\u8bbe\u8ba1\u65b9\u6cd5\u81f3\u5c11\u8282\u7ea650%\u4ee5\u4e0a\u7684\u6587\u4ef6\u5927\u5c0f\u3002\n\u7f29\u77ed\u7f51\u7ad9\u6539\u7248\u5468\u671f\u3002\u53ea\u9700\u8981\u4fee\u6539\u76f8\u5e94CSS\u6587\u4ef6\u5c31\u53ef\u4ee5\u91cd\u65b0\u8bbe\u8ba1\u4e00\u4e2a\u6709\u6210\u767e\u4e0a\u5343\u9875\u9762\u7684\u7ad9\u70b9\u3002\n\u5f3a\u5927\u7684\u5b57\u4f53\u63a7\u5236\u548c\u6392\u7248\u80fd\u529b\u3002Font\u6807\u7b7e\u5bf9\u4e8e\u5b57\u4f53\u63a7\u5236\u80fd\u529b\u8fdc\u6ca1\u6709CSS\u5bf9\u4e8e\u5b57\u4f53\u7684\u63a7\u5236\u80fd\u529b\u5f3a\uff0c\u4f7f\u7528CSS\u6837\u5f0f\u540e\u4e0d\u9700\u8981\u5728\u4f7f\u7528font\u6807\u7b7e\u6765\u63a7\u5236\u6587\u7ae0\u6807\u9898\u3001\u5b57\u4f53\u989c\u8272\u4ee5\u53ca\u5b57\u4f53\u6837\u5f0f\u7b49\u3002\nCSS\u6613\u4e8e\u7f16\u5199\u3002Dreamweaver\u63d0\u4f9b\u4e86CSS\u7f16\u5199\u8f85\u52a9\u5de5\u5177\u3002\nCSS\u5177\u6709\u826f\u597d\u7684\u517c\u5bb9\u6027\u3002\u53ea\u8981\u6d4f\u89c8\u5668\u80fd\u591f\u8bc6\u522bCSS\u6837\u5f0f\u90fd\u53ef\u4ee5\u5f88\u597d\u7684\u5e94\u7528\u5b83\u3002\n\u8868\u73b0\u548c\u5185\u5bb9\u76f8\u5206\u79bb\u3002\u5c06\u8bbe\u8ba1\u90e8\u5206\u5265\u79bb\u51fa\u6765\u653e\u5728\u4e00\u4e2a\u72ec\u7acb\u6837\u5f0f\u6587\u4ef6\u4e2d\uff0c\u8ba9\u591a\u4e2a\u7f51\u9875\u6587\u4ef6\u5171\u540c\u4f7f\u7528\u5b83\uff0c\u7701\u53bb\u5728\u6bcf\u4e00\u4e2a\u7f51\u9875\u6587\u4ef6\u4e2d\u90fd\u8981\u91cd\u590d\u8bbe\u5b9a\u6837\u5f0f\u7684\u9ebb\u70e6\u3002\nCSS\u6837\u5f0f\u57fa\u672c\u8bed\u6cd5\nCSS\u7684\u8bed\u6cd5\u7ed3\u6784\u75313\u90e8\u5206\u6784\u6210\uff1a\u9009\u62e9\u5668\u3001\u5c5e\u6027\u548c\u503c\u3002\n\u9009\u62e9\u5668{\u6837\u5f0f\u5c5e\u6027:\u53d6\u503c;\u6837\u5f0f\u5c5e\u6027:\u53d6\u503c;\u6837\u5f0f\u5c5e\u6027:\u53d6\u503c;\u2026\u2026}\u9009\u62e9\u5668\uff08Selector\uff09\u901a\u5e38\u662f\u6307\u7528\u6237\u5e0c\u671b\u5b9a\u4e49\u7684HTML\u5143\u7d20\u6216\u6807\u7b7e\uff0c\u5982body\u3001h1\uff1b\u4e5f\u53ef\u4ee5\u662f\u81ea\u5b9a\u4e49\u7684id\u6216class\u7684\u6807\u7b7e\uff0c\u5982#main\u9009\u62e9\u5668\u8868\u793a\u9009\u62e9\uff0c\u5373\u4e00\u4e2a\u88ab\u6307\u5b9a\u4e86main\u4e3aid\u7684\u5bf9\u8c61\u3002\u6d4f\u89c8\u5668\u5c06\u5bf9CSS\u9009\u62e9\u5668\u8fdb\u884c\u4e25\u683c\u7684\u89e3\u6790\uff0c\u6bcf\u4e00\u7ec4\u6837\u5f0f\u5747\u4f1a\u88ab\u6d4f\u89c8\u5668\u5e94\u7528\u5230\u5bf9\u5e94\u7684\u5bf9\u8c61\u4e0a\u3002\n\u5c5e\u6027\uff08Property\uff09\u662f\u7528\u6237\u5e0c\u671b\u6539\u53d8\u7684\u5c5e\u6027\uff0c\u5e76\u4e14\u6bcf\u4e2a\u5c5e\u6027\u90fd\u6709\u4e00\u4e2a\u503c\u3002\u5bf9\u4e8e\u6bcf\u4e00\u4e2aHTML\u4e2d\u7684\u6807\u7b7e\uff0cCSS\u90fd\u63d0\u4f9b\u4e86\u4e30\u5bcc\u7684\u6837\u5f0f\u5c5e\u6027\uff0c\u5982\u989c\u8272\u3001\u5927\u5c0f\u3001\u4f4d\u7f6e\u4ee5\u53ca\u6d6e\u52a8\u65b9\u5f0f\u7b49\u3002\n\u503c\uff08Value\uff09\u6307\u5c5e\u6027\u7684\u503c\u3002\u5c5e\u6027\u548c\u503c\u88ab\u5192\u53f7\u5206\u5f00\uff0c\u5e76\u7531\u82b1\u62ec\u53f7\u5305\u56f4\uff0c\u8fd9\u6837\u5c31\u7ec4\u6210\u4e86\u4e00\u4e2a\u5b8c\u6574\u7684\u6837\u5f0f\u58f0\u660e\uff08declaration\uff09\u3002\u5c5e\u6027\u503c\u6709\u4e24\u79cd\u5f62\u5f0f\uff1a\u4e00\u79cd\u662f\u6307\u5b9a\u8303\u56f4\u7684\u503c\uff0c\u5982float\u5c5e\u6027\u7684\u53d6\u503c\u4e3aleft\u3001right\u548cnone\uff1b\u53e6\u4e00\u79cd\u4e3a\u6570\u503c\uff0c\u5982height\u5c5e\u6027\u53d6\u503c\u4e3a0~9999px\u6216\u8005\u901a\u8fc7\u5176\u4ed6\u6570\u5b66\u5355\u4f4d\u6765\u6307\u5b9a\u3002\n\u4f8b\u5982\uff0c\u5b9a\u4e49\u4e00\u4e2a\u7f51\u9875\u5b57\u4f53\u5927\u5c0f\u4e3a12\u50cf\u7d20\u3001\u52a0\u7c97\uff0c\u6bb5\u843d\u9996\u884c\u7f29\u8fdb2\u5b57\u7b26\uff0c\u5219\u53ef\u4ee5\u8bbe\u7f6e\u6837\u5f0f\u5982\u4e0b\uff1a\u65e0\u6807\u9898\u6587\u6863\u5c42\u53e0\u6837\u5f0f\u8868\u662f\u4e00\u79cd\u7528\u6765\u8868\u73b0HTML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5e94\u7528\uff09\u6216XML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5b50\u96c6\uff09\u7b49\u6587\u4ef6\u6837\u5f0f\u7684\u8ba1\u7b97\u673a\u8bed\u8a00\u3002\nCSS\u76ee\u524d\u6700\u65b0\u7248\u672c\u4e3aCSS3\uff0c\u662f\u80fd\u591f\u771f\u6b63\u505a\u5230\u7f51\u9875\u8868\u73b0\u4e0e\u5185\u5bb9\u5206\u79bb\u7684\u4e00\u79cd\u6837\u5f0f\u8bbe\u8ba1\u8bed\u8a00\u3002\u76f8\u5bf9\u4e8e\u4f20\u7edfHTML\u7684\u8868\u73b0\u800c\u8a00\uff0cCSS\u80fd\u591f\u5bf9\u7f51\u9875\u4e2d\u7684\u5bf9\u8c61\u7684\u4f4d\u7f6e\u6392\u7248\u8fdb\u884c\u50cf\u7d20\u7ea7\u7684\u7cbe\u786e\u63a7\u5236\uff0c\u652f\u6301\u51e0\u4e4e\u6240\u6709\u7684\u5b57\u4f53\u5b57\u53f7\u6837\u5f0f\uff0c\u62e5\u6709\u5bf9\u7f51\u9875\u5bf9\u8c61\u548c\u6a21\u578b\u6837\u5f0f\u7f16\u8f91\u7684\u80fd\u529b\uff0c\u5e76\u80fd\u591f\u8fdb\u884c\u521d\u6b65\u4ea4\u4e92\u8bbe\u8ba1\uff0c\u662f\u76ee\u524d\u57fa\u4e8e\u6587\u672c\u5c55\u793a\u6700\u4f18\u79c0\u7684\u8868\u73b0\u8bbe\u8ba1\u8bed\u8a00\u3002CSS\u80fd\u591f\u6839\u636e\u4e0d\u540c\u4f7f\u7528\u8005\u7684\u7406\u89e3\u80fd\u529b\uff0c\u7b80\u5316\u6216\u8005\u4f18\u5316\u5199\u6cd5\uff0c\u9488\u5bf9\u5404\u7c7b\u4eba\u7fa4\uff0c\u6709\u8f83\u5f3a\u7684\u6613\u8bfb\u6027\u3002\n\u6d4f\u89c8\u5668\u901a\u8fc7\u89e3\u6790\u5c5e\u6027\u5305\u542b\u7684\u5185\u5bb9\uff0c\u5c06CSS\u6837\u5f0f\u5e94\u7528\u5230\u9875\u9762\u4e0a\uff0c\u5982\u56fe2\u6240\u793a\u3002\u591a\u4e2a\u6837\u5f0f\u53ef\u4ee5\u5e76\u5217\u5728\u4e00\u8d77\u5199\uff0c\u4e0d\u9700\u8981\u8003\u8651\u5982\u4f55\u8fdb\u884c\u5206\u9694\u3002\u4f8b\u5982\uff0c\u5b9a\u4e49\u4e00\u4e2a\u6bb5\u843d\u6587\u672c\u7684\u80cc\u666f\u8272\u4e3a\u7d2b\u8272\uff0c\u5219\u53ef\u4ee5\u5728\u4e0a\u9762\u6837\u5f0f\u7684\u57fa\u7840\u4e0a\u8fdb\u884c\u589e\u52a0\u6837\u5f0f\uff1a\nBody{font-size:12px;font-weight:bold;text-indent:2em;}p{backgroundcolor:#FF00FF;}\u7531\u4e8eCSS\u8bed\u8a00\u81ea\u52a8\u5ffd\u7565\u7a7a\u683c\uff08\u9664\u4e86\u9009\u62e9\u5668\u5185\u90e8\u7684\u7a7a\u683c\uff09\uff0c\u56e0\u6b64\u53ef\u4ee5\u5229\u7528\u7a7a\u683c\u548c\u6362\u884c\u7b26\u6765\u7f8e\u5316CSS\u6837\u5f0f\u6e90\u4ee3\u7801\uff0c\u4e0a\u9762\u7684\u4ee3\u7801\u53ef\u4ee5\u8fdb\u884c\u5982\u4e0b\u7f8e\u5316\uff1a\nBody{font-size:12px;font-weight:bold;text-indent:2em;}p{background-color:#FF00FF;}\u7ecf\u8fc7\u7f8e\u5316\u7684CSS\u6e90\u4ee3\u7801\u770b\u4e0a\u53bb\u4e00\u76ee\u4e86\u7136\uff0c\u65e2\u65b9\u4fbf\u9605\u8bfb\uff0c\u4e5f\u4fbf\u4e8e\u4fee\u6539\u3002\nCSS\u6e90\u4ee3\u7801\u6709\u65f6\u5019\u9700\u8981\u901a\u8fc7\u4e00\u4e9b\u6ce8\u91ca\u6765\u6807\u6ce8\uff0cCSS\u4ee3\u7801\u8868\u793a\u4ec0\u4e48\u610f\u601d\u3002\u5728HTML\u4e2d\u6ce8\u91ca\u6807\u8bb0\u4f7f\u7528\u201c\u201d\uff0cCSS\u4e2d\u6ce8\u91ca\u6807\u8bb0\u4f7f\u7528\u201c\/*\u6ce8\u91ca\u5185\u5bb9*\/\u201d\u3002\u4f8b\u5982\uff0c\u53ef\u4ee5\u5bf9\u4e0a\u9762\u7684\u4ee3\u7801\u8fdb\u884c\u6ce8\u91ca\uff1a\nBody{\/*\u9875\u9762\u7684\u57fa\u672c\u5c5e\u6027*\/font-size:12px;font-weight:bold;text-indent:2em;}\/*\u8bbe\u7f6e\u6bb5\u843d\u7684\u80cc\u666f\u989c\u8272\u4e3a\u7d2b\u8272*\/p{background-color:#FF00FF;}\u6dfb\u52a0CSS\u7684\u65b9\u6cd5\n\u5728HTML\u4e2d\u6dfb\u52a0CSS\u7684\u65b9\u6cd5\u4e3b\u8981\u67094\u79cd\uff0c\u5206\u522b\u4e3a\u94fe\u63a5\u5185\u5d4c\u6837\u5f0f\u3001\u5185\u90e8\u6837\u5f0f\u8868\u3001\u94fe\u63a5\u5916\u90e8\u6837\u5f0f\u8868\u548c\u5bfc\u5165\u5916\u90e8\u6837\u5f0f\u8868\u3002\n1\uff0e\u5185\u5d4c\u6837\u5f0f\u8868\n\u5185\u5d4c\u6837\u5f0f\u8868\u662f\u6df7\u5408\u5728HTML\u6807\u8bb0\u91cc\u4f7f\u7528\u7684\uff0c\u8be5\u65b9\u6cd5\u53ef\u4ee5\u5f88\u7b80\u5355\u5730\u5bf9\u67d0\u4e2a\u5143\u7d20\u5355\u72ec\u5b9a\u4e49\u6837\u5f0f\uff0c\u4e3b\u8981\u662f\u5728body\u5185\u5b9e\u73b0\u3002\n\u5185\u5d4c\u6837\u5f0f\u8868\u7684\u4f7f\u7528\u662f\u76f4\u63a5\u5728HTML\u6807\u8bb0\u91cc\u52a0\u5165style\u53c2\u6570\uff0c\u800cstyle\u53c2\u6570\u7684\u5185\u5bb9\u5c31\u662fCSS\u7684\u5c5e\u6027\u548c\u503c\uff0c\u5728style\u5f15\u53f7\u91cc\u7684\u5185\u5bb9\u76f8\u5f53\u4e8e\u5728\u6837\u5f0f\u8868\u7684\u5927\u62ec\u53f7\u91cc\u7684\u5185\u5bb9\uff0c\u5176\u683c\u5f0f\u5982\u4e0b\uff1a\n\u5b57\u4f53\u5927\u5c0f\u4e3a12px\uff0c\u989c\u8272\u4e3a\u7ea2\u8272\u5f53\u6d4f\u89c8\u5668\u89e3\u6790\u5230\u8fd9\u4e9b\u6807\u7b7e\u65f6\uff0c\u68c0\u6d4b\u5230\u8be5\u6807\u7b7e\u4e2d\u5305\u542bstyle\u5c5e\u6027\uff0c\u5c31\u4f1a\u8c03\u7528CSS\u5f15\u64ce\u6765\u89e3\u6790style\u5c5e\u6027\uff0c\u5e76\u628a\u6548\u679c\u5c55\u73b0\u5230\u9875\u9762\u4e0a\u3002\n\u8be5\u65b9\u6cd5\u4e0e\u4f20\u7edf\u7f51\u9875\u8bbe\u8ba1\u5728\u6807\u7b7e\u5185\u589e\u52a0\u5c5e\u6027\u7684\u8bbe\u8ba1\u65b9\u6cd5\u76f8\u540c\uff0c\u8be5\u65b9\u6cd5\u5b9e\u9645\u5e76\u6ca1\u6709\u6ee1\u8db3W3C\u63d0\u51fa\u7684\u5c06HTML\u7ed3\u6784\u4e0eCSS\u8868\u73b0\u5265\u79bb\u6765\u8fdb\u884c\u8bbe\u8ba1\uff0c\u56e0\u6b64\u5728\u7f51\u9875\u8bbe\u8ba1\u4e2d\u4e0d\u5efa\u8bae\u4f7f\u7528\u8be5\u65b9\u6cd5\uff0c\u9664\u975e\u4e3a\u9875\u9762\u4e2d\u4e2a\u522b\u5143\u7d20\u8bbe\u7f6e\u67d0\u4e2a\u7279\u5b9a\u6837\u5f0f\u6548\u679c\u800c\u5355\u72ec\u5b9a\u4e49\u3002\n2\uff0e\u5185\u90e8\u6837\u5f0f\u8868\n\u5185\u90e8\u6837\u5f0f\u8868\u4e0e\u5185\u5d4c\u6837\u5f0f\u8868\u7684\u76f8\u4f3c\u4e4b\u5904\u5728\u4e8e\uff0c\u90fd\u5c06CSS\u6837\u5f0f\u7f16\u5199\u5230\u9875\u9762\u4e2d\u3002\u800c\u4e0d\u540c\u7684\u662f\uff0c\u5185\u90e8\u6837\u5f0f\u8868\u53ef\u4ee5\u7edf\u4e00\u653e\u7f6e\u5728\u4e00\u4e2a\u56fa\u5b9a\u7684\u4f4d\u7f6e\uff0c\u5176\u683c\u5f0f\u5982\u4e0b\uff1a\n\u5185\u90e8\u6837\u5f0f\u8868\u901a\u5e38\u4f4d\u4e8e\u7f51\u9875\u7684\u5934\u90e8\u533a\u57df\uff0c\u76ee\u7684\u662f\u8ba9CSS\u6e90\u4ee3\u7801\u5728\u9875\u9762\u52a0\u8f7d\u524d\u5148\u88ab\u89e3\u6790\u6267\u884c\uff0c\u8fd9\u6837\u53ef\u4ee5\u907f\u514d\u5f53\u7f51\u9875\u52a0\u8f7d\u5b8c\u6210\u540e\uff0c\u6ca1\u6709CSS\u6837\u5f0f\u6e32\u67d3\u800c\u4f7f\u7684\u9875\u9762\u4fe1\u606f\u65e0\u6cd5\u6b63\u5e38\u663e\u793a\u30023\uff0e\u94fe\u63a5\u5916\u90e8\u6837\u5f0f\u8868\u94fe\u63a5\u5916\u90e8\u6837\u5f0f\u8868\u662f\u5728CSS\u4e2d\u6700\u5e38\u7528\u7684\u4e00\u79cd\u5f62\u5f0f\uff0c\u5b83\u5c06CSS\u6837\u5f0f\u4ee3\u7801\u5355\u72ec\u7f16\u5199\u5230\u4e00\u4e2a\u72ec\u7acb\u7684\u6587\u4ef6\u4e2d\uff0c\u7531\u7f51\u9875\u8fdb\u884c\u8c03\u7528\uff0c\u591a\u4e2a\u7f51\u9875\u53ef\u4ee5\u540c\u65f6\u4f7f\u7528\u540c\u4e00\u4e2a\u6837\u5f0f\u6587\u4ef6\uff0c\u5176\u683c\u5f0f\u5982\u4e0b\uff1a\n\u5176\u4e2d\uff0chref\u5c5e\u6027\u8bbe\u7f6e\u5916\u90e8\u6837\u5f0f\u8868\u6587\u4ef6\u7684\u5730\u5740\uff0c\u8be5\u5730\u5740\u53ef\u4ee5\u662f\u76f8\u5bf9\u5730\u5740\uff0c\u4e5f\u53ef\u4ee5\u662f\u7edd\u5bf9\u5730\u5740\uff1brel\u5c5e\u6027\u5b9a\u4e49\u8be5\u6807\u7b7e\u5173\u8054\u7684\u662f\u6837\u5f0f\u8868\u6807\u7b7e\uff1btype\u5c5e\u6027\u5b9a\u4e49\u6587\u6863\u7684\u7c7b\u578b\uff0c\u5373CSS\u6587\u672c\u6587\u4ef6\u3002\n\u7f51\u7ad9\u901a\u5e38\u91c7\u7528\u94fe\u63a5\u5916\u90e8\u6837\u5f0f\u8868\u6765\u8bbe\u8ba1\u7f51\u7ad9\u7684\u8868\u73b0\u5c42\uff0c\u80fd\u591f\u5b9e\u73b0CSS\u6837\u5f0f\u4e0eHTML\u7ed3\u6784\u7684\u5206\u79bb\uff0c\u8fd9\u79cd\u5206\u79bb\u539f\u5219\u662fW3C\u6240\u63d0\u5021\u7684\uff0c\u56e0\u4e3a\u8fd9\u6837\u53ef\u4ee5\u9ad8\u6548\u5730\u7ba1\u7406\u6587\u6863\u7ed3\u6784\u548c\u6837\u5f0f\u8868\u6587\u4ef6\uff0c\u5b9e\u73b0\u4ee3\u7801\u7684\u4f18\u5316\u548c\u91cd\u7528\u3002\n4\uff0e\u5bfc\u5165\u5916\u90e8\u6837\u5f0f\u8868\u5bfc\u5165\u5916\u90e8\u6837\u5f0f\u8868\u662f\u6307\u5728\u5185\u90e8\u6837\u5f0f\u8868\u7684\u6807\u7b7e\u5185\u4f7f\u7528@import\u5173\u952e\u5b57\u5bfc\u5165\u5916\u90e8\u6837\u5f0f\u8868\u6587\u4ef6\uff0c\u683c\u5f0f\u5982\u4e0b\uff1a\n\u5728@import\u5173\u952e\u5b57\u540e\u9762\uff0c\u4f7f\u7528url()\u51fd\u6570\u6765\u628a\u5916\u90e8\u6837\u5f0f\u8868\u6587\u4ef6\u5bfc\u5165\u3002\u6ce8\u610f\u4f7f\u7528\u65f6\uff0c\u5916\u90e8\u6837\u5f0f\u8868\u7684\u8def\u5f84\u3001\u65b9\u6cd5\u548c\u94fe\u63a5\u5916\u90e8\u6837\u5f0f\u8868\u7684\u65b9\u6cd5\u7c7b\u4f3c\uff0c\u4f46\u5bfc\u5165\u5916\u90e8\u6837\u5f0f\u8868\u8f93\u5165\u65b9\u5f0f\u66f4\u6709\u4f18\u52bf\u3002\u5b9e\u8d28\u4e0a\u5b83\u662f\u76f8\u5f53\u4e8e\u5b58\u5728\u5185\u90e8\u6837\u5f0f\u8868\u4e2d\u7684\u3002\n7.2CSS\u57fa\u672c\u9009\u62e9\u5668\n\u9009\u62e9\u5668\u51b3\u5b9a\u6837\u5f0f\u89c4\u5219\u4f5c\u7528\u4e8e\u54ea\u4e9b\u5143\u7d20\u3002\u4f8b\u5982\uff0c\u5982\u679c\u8981\u5bf9table\u5143\u7d20\u6dfb\u52a0\u8fb9\u6846\u4e3a\u5b9e\u7ebf\u3001\u7ebf\u5bbd1\u50cf\u7d20\u3001\u84dd\u8272\u7684\u8fb9\u6846\uff0c\u5219\u9700\u8981\u521b\u5efa\u4e00\u4e2a\u53ea\u8bc6\u522btable\u5143\u7d20\u800c\u4e0d\u5f71\u54cd\u5176\u4ed6\u5143\u7d20\u7684\u9009\u62e9\u5668\u3002\u5982\u679c\u8981\u5bf9\u6bcf\u4e2a\u533a\u57df\u4e2d\u7684table\u8bbe\u7f6e\u7279\u6b8a\u683c\u5f0f\uff0c\u5c31\u9700\u8981\u521b\u5efa\u4e00\u4e2a\u7a0d\u5fae\u590d\u6742\u4e00\u4e9b\u7684\u9009\u62e9\u5668\uff0c\u5b83\u53ea\u8bc6\u522b\u6307\u5b9a\u533a\u57df\u4e2d\u7684table\u5143\u7d20\u3002\n7.2.1\u6807\u7b7e\u9009\u62e9\u5668\nHTML\u6587\u6863\u90fd\u662f\u7531\u5f88\u591a\u6807\u7b7e\u901a\u8fc7\u4e00\u5b9a\u7684\u89c4\u5219\u7f16\u7ec7\u800c\u6210\u7684\uff0c\u6211\u4eec\u4e5f\u53ef\u4ee5\u628a\u8fd9\u4e9b\u6807\u7b7e\u79f0\u4e3a\u7f51\u9875\u5143\u7d20\u3002\u6807\u7b7e\u9009\u62e9\u5668\u4f7f\u7528\u7f51\u9875\u5143\u7d20\u5b9a\u4e49\u6837\u5f0f\u3002\n\u4f8b\u5982\uff0c\u58f0\u660ep\u5143\u7d20\u9996\u884c\u7f29\u8fdb2\u5b57\u7b26\uff0c\u5b57\u4f53\u989c\u8272\u4e3a\u7ea2\u8272\uff1b\u6240\u6709h1\u5b57\u53f7\u4e3a15px\u3001\u52a0\u7c97\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a\n\u5176\u4e2d\uff0cp\u548ch1\u90fd\u662fHTML\u7279\u5b9a\u7684\u6807\u7b7e\u540d\u79f0\uff0c\u76f4\u63a5\u5f15\u7528\u5373\u53ef\u3002\n\u6ce8\u610f\uff1a*\u53f7\u4e3a\u901a\u914d\u7b26\u5339\u914d\u9875\u9762\u4e2d\u7684\u6240\u6709\u5143\u7d20\u540d\u79f0\u3002\u4e0a\u9762\u7684\u4ee3\u7801\u8bbe\u7f6e\u6bcf\u4e2a\u5143\u7d20\u7684\u5185\u5916\u8fb9\u8ddd\u4e3a0px\u3002\u7531\u4e8e\u6bcf\u4e2a\u5143\u7d20\u90fd\u6709\u7cfb\u7edf\u9ed8\u8ba4\u7684\u5185\u5916\u8fb9\u8ddd\u503c\uff0c\u4e14\u5728\u4e0d\u540c\u7684\u6d4f\u89c8\u5668\u4e2d\u663e\u793a\u7684\u6548\u679c\u4e5f\u4e0d\u540c\uff0c\u56e0\u6b64\u5728\u8bbe\u7f6e\u7f51\u9875\u6837\u5f0f\u4e4b\u521d\u4f7f\u7528\u901a\u914d\u7b26*\u5c06\u6240\u6709\u5143\u7d20\u9ed8\u8ba4\u7684\u5185\u5916\u8fb9\u8ddd\u53bb\u6389\u662f\u5e38\u89c1\u505a\u6cd5\u3002\n7.2.2\u7c7b\u522b\u9009\u62e9\u5668\n\u4f7f\u7528\u6807\u7b7e\u9009\u62e9\u7b26\u53ef\u4ee5\u65b9\u4fbf\u5730\u5bf9\u6807\u7b7e\u8fdb\u884c\u6837\u5f0f\u8bbe\u7f6e\uff0c\u540c\u65f6\u6807\u7b7e\u9009\u62e9\u7b26\u4e5f\u5b58\u5728\u8f83\u591a\u95ee\u9898\u3002\u56e0\u4e3a\u6807\u7b7e\u9009\u62e9\u7b26\u5bf9\u6807\u7b7e\u6240\u505a\u7684\u5b9a\u4e49\u4e0d\u5355\u5355\u5f71\u54cd\u6240\u9009\u62e9\u7684\u6807\u7b7e\u5143\u7d20\uff0c\u800c\u662f\u5bf9\u6574\u4e2a\u9875\u9762\u4e2d\u6240\u6709\u76f8\u540c\u6807\u7b7e\u90fd\u4f1a\u8d77\u4f5c\u7528\u3002\u5982\u679c\u9700\u8981\u5bf9\u540c\u4e00\u4e2a\u6807\u7b7e\u5728\u7f51\u9875\u4e2d\u7684\u4e0d\u540c\u4f4d\u7f6e\u663e\u793a\u4e0d\u540c\u7684\u6837\u5f0f\uff0c\u4f7f\u7528\u8fd9\u79cd\u65b9\u6cd5\u5b9a\u4e49\u7684\u6837\u5f0f\u5c31\u5b58\u5728\u5f88\u591a\u4e0d\u8db3\u3002\u5bf9\u4e8e\u8fd9\u4e2a\u95ee\u9898\u53ef\u4ee5\u4f7f\u7528\u7c7b\u9009\u62e9\u5668\u6765\u89e3\u51b3\u3002\n\u7c7b\uff08Class\uff09\u9009\u62e9\u7b26\u5c31\u662f\u4e3a\u4e86\u4e0d\u540c\u5143\u7d20\u62e5\u6709\u76f8\u540c\u7684\u663e\u793a\u6837\u5f0f\u800c\u5b9a\u4e49\u7684\u3002\u4f8b\u5982\uff0c\u5728\u4e0b\u9762\u8fd9\u4e2a\u9875\u9762\u4e2d\u5305\u542b\u4e09\u6bb5\u6587\u672c\uff0c\u901a\u8fc7\u6807\u7b7e\u9009\u62e9\u5668\u5c06\u6240\u6709\u6bb5\u843d\u6587\u672c\u5927\u5c0f\u5b9a\u4e49\u4e3a13px\uff0c\u9996\u884c\u7f29\u8fdb2\u5b57\u7b26\uff0c\u5b57\u4f53\u989c\u8272\u4e3a\u84dd\u8272\u3002\n\u5c42\u53e0\u6837\u5f0f\u8868\u662f\u4e00\u79cd\u7528\u6765\u8868\u73b0HTML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5e94\u7528\uff09\u6216XML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5b50\u96c6\uff09\u7b49\u6587\u4ef6\u6837\u5f0f\u7684\u8ba1\u7b97\u673a\u8bed\u8a00\u3002\nCSS\u76ee\u524d\u6700\u65b0\u7248\u672c\u4e3aCSS3\uff0c\u662f\u80fd\u591f\u771f\u6b63\u505a\u5230\u7f51\u9875\u8868\u73b0\u4e0e\u5185\u5bb9\u5206\u79bb\u7684\u4e00\u79cd\u6837\u5f0f\u8bbe\u8ba1\u8bed\u8a00\u3002\u76f8\u5bf9\u4e8e\u4f20\u7edfHTML\u7684\u8868\u73b0\u800c\u8a00\uff0cCSS\u80fd\u591f\u5bf9\u7f51\u9875\u4e2d\u7684\u5bf9\u8c61\u7684\u4f4d\u7f6e\u6392\u7248\u8fdb\u884c\u50cf\u7d20\u7ea7\u7684\u7cbe\u786e\u63a7\u5236\uff0c\u652f\u6301\u51e0\u4e4e\u6240\u6709\u7684\u5b57\u4f53\u5b57\u53f7\u6837\u5f0f\uff0c\u62e5\u6709\u5bf9\u7f51\u9875\u5bf9\u8c61\u548c\u6a21\u578b\u6837\u5f0f\u7f16\u8f91\u7684\u80fd\u529b\uff0c\u5e76\u80fd\u591f\u8fdb\u884c\u521d\u6b65\u4ea4\u4e92\u8bbe\u8ba1\uff0c\u662f\u76ee\u524d\u57fa\u4e8e\u6587\u672c\u5c55\u793a\u6700\u4f18\u79c0\u7684\u8868\u73b0\u8bbe\u8ba1\u8bed\u8a00\u3002\nCSS\u80fd\u591f\u6839\u636e\u4e0d\u540c\u4f7f\u7528\u8005\u7684\u7406\u89e3\u80fd\u529b\uff0c\u7b80\u5316\u6216\u8005\u4f18\u5316\u5199\u6cd5\uff0c\u9488\u5bf9\u5404\u7c7b\u4eba\u7fa4\uff0c\u6709\u8f83\u5f3a\u7684\u6613\u8bfb\u6027\u3002\n\u5982\u679c\u73b0\u5728\u8981\u6c42\u628a\u7b2c\u4e00\u6bb5\u5b57\u4f53\u5927\u5c0f\u6539\u4e3a20px\uff0c\u5b57\u4f53\u52a0\u7c97\uff0c\u8fd9\u65f6\u5c31\u53ef\u4ee5\u4f7f\u7528\u7c7b\u9009\u62e9\u7b26\u3002\u5b9a\u4e49\u683c\u5f0f\u5982\u4e0b\uff1a\n.fontbold{font-size:20px;font-weight:bold;}\u5c42\u53e0\u6837\u5f0f\u8868\u662f\u4e00\u79cd\u7528\u6765\u8868\u73b0HTML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5e94\u7528\uff09\u6216XML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5b50\u96c6\uff09\u7b49\u6587\u4ef6\u6837\u5f0f\u7684\u8ba1\u7b97\u673a\u8bed\u8a00\u3002\nCSS\u662f\u80fd\u591f\u771f\u6b63\u505a\u5230\u7f51\u9875\u8868\u73b0\u4e0e\u5185\u5bb9\u5206\u79bb\u7684\u4e00\u79cd\u6837\u5f0f\u8bbe\u8ba1\u8bed\u8a00\u3002\u76f8\u5bf9\u4e8e\u4f20\u7edfHTML\u7684\u8868\u73b0\u800c\u8a00\uff0cCSS\u80fd\u591f\u5bf9\u7f51\u9875\u4e2d\u7684\u5bf9\u8c61\u7684\u4f4d\u7f6e\u6392\u7248\u8fdb\u884c\u50cf\u7d20\u7ea7\u7684\u7cbe\u786e\u63a7\u5236\uff0c\u652f\u6301\u51e0\u4e4e\u6240\u6709\u7684\u5b57\u4f53\u5b57\u53f7\u6837\u5f0f\uff0c\u62e5\u6709\u5bf9\u7f51\u9875\u5bf9\u8c61\u548c\u6a21\u578b\u6837\u5f0f\u7f16\u8f91\u7684\u80fd\u529b\uff0c\u5e76\u80fd\u591f\u8fdb\u884c\u521d\u6b65\u4ea4\u4e92\u8bbe\u8ba1\uff0c\u662f\u76ee\u524d\u57fa\u4e8e\u6587\u672c\u5c55\u793a\u6700\u4f18\u79c0\u7684\u8868\u73b0\u8bbe\u8ba1\u8bed\u8a00\u3002\n\nCSS\u80fd\u591f\u6839\u636e\u4e0d\u540c\u4f7f\u7528\u8005\u7684\u7406\u89e3\u80fd\u529b\uff0c\u7b80\u5316\u6216\u8005\u4f18\u5316\u5199\u6cd5\uff0c\u9488\u5bf9\u5404\u7c7b\u4eba\u7fa4\uff0c\u6709\u8f83\u5f3a\u7684\u6613\u8bfb\u6027\u3002\n\n\u5728\u6d4f\u89c8\u5668\u4e2d\u9884\u89c8\uff0c\u663e\u793a\u6548\u679c\u5982\u56fe3\u6240\u793a\uff0c\u53ef\u4ee5\u770b\u5230\u7b2c\u4e00\u6bb5\u5b57\u4f53\u88ab\u5355\u72ec\u653e\u5927\u5e76\u52a0\u7c97\u3002\u7c7b\u9009\u62e9\u7b26\u53ef\u4ee5\u7cbe\u786e\u5730\u63a7\u5236\u9875\u9762\u4e2d\u67d0\u4e2a\u5177\u4f53\u5143\u7d20\u5bf9\u8c61\uff0c\u800c\u4e0d\u7ba1\u8fd9\u4e2a\u5bf9\u8c61\u662f\u5c5e\u4e8e\u4ec0\u4e48\u7c7b\u578b\u7684\u6807\u7b7e\uff0c\u540c\u65f6\u4e00\u4e2a\u7c7b\u6837\u5f0f\u53ef\u4ee5\u5728\u591a\u4e2a\u6807\u7b7e\u4e2d\u88ab\u5f15\u7528\u3002\n\u5728\u81ea\u5b9a\u4e49\u7c7b\u540d\u65f6\uff0c\u53ea\u80fd\u591f\u4f7f\u7528\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u4e0b\u5212\u7ebf\uff08_\uff09\u548c\u8fde\u63a5\u7b26\u53f7\uff08-\uff09\uff0c\u7c7b\u540d\u5fc5\u987b\u4ee5\u5b57\u6bcd\u5f00\u5934\uff0c\u5426\u5219\u65e0\u6548\u3002\u53e6\u5916\uff0c\u7c7b\u540d\u662f\u533a\u5206\u5927\u5c0f\u5199\u7684\uff0c\u6240\u4ee5\u7c7bfontbold\u548c\u7c7bFontbold\u662f\u5b8c\u5168\u4e0d\u540c\u7684\u4e24\u4e2a\u7c7b\u3002\n7.2.3ID\u9009\u62e9\u5668\nID\u662f\u82f1\u6587Identity\u7684\u7f29\u5199\uff0c\u5b83\u8868\u793a\u8eab\u4efd\u6807\u8bc6\u53f7\u7801\uff0c\u5728\u7f51\u7edc\u4e0a\u4e00\u822c\u6307\u7528\u6237\u8d26\u53f7\uff0c\u4f46\u662f\u5728Web\u8bbe\u8ba1\u4e2d\u4e00\u822c\u6307\u6807\u7b7e\u5728HTML\u6587\u6863\u4e2d\u7684\u552f\u4e00\u7f16\u53f7\u3002\u4ece\u8fd9\u70b9\u6765\u770b\uff0cID\u9009\u62e9\u5668\u53ea\u80fd\u591f\u5728HTML\u9875\u9762\u4e2d\u7528\u4e00\u6b21\uff0c\u5b83\u662f\u4e0e\u6807\u7b7e\u9009\u62e9\u7b26\u548c\u7c7b\u9009\u62e9\u7b26\u4f5c\u7528\u8303\u56f4\u76f8\u53cd\u7684\u4e00\u4e2a\u9009\u62e9\u7b26\u3002ID\u9009\u62e9\u7b26\u901a\u5e38\u88ab\u6765\u5b9a\u4e49HTML\u6846\u67b6\u7ed3\u6784\u7684\u5e03\u5c40\u6548\u679c\uff0c\u56e0\u4e3aHTML\u6846\u67b6\u5143\u7d20\u7684ID\u503c\u90fd\u662f\u552f\u4e00\u7684\u3002\nID\u9009\u62e9\u7b26\u5fc5\u987b\u4ee5\u4e95\u53f7\uff08#\uff09\u524d\u7f00\u5f00\u59cb\uff0c\u7136\u540e\u662f\u4e00\u4e2a\u81ea\u5b9a\u4e49\u7684ID\u540d\uff0c\u5b9a\u4e49\u683c\u5f0f\u5982\u4e0b\uff1a\n#box{width:600px;height:auto;}\u4f8b\u5982\uff0c\u4e0b\u9762\u5b9e\u4f8b\u5b9a\u4e49\u4e00\u4e2a\u76d2\u5b50\uff0c\u4e3a\u8be5\u76d2\u5b50\u6307\u5b9a\u5bbd\u5ea6\u548c\u9ad8\u5ea6\uff0c\u5e76\u8bbe\u7f6e\u76d2\u5b50\u7684\u80cc\u666f\u989c\u8272\u4ee5\u53ca\u8fb9\u6846\u548c\u5185\u8fb9\u8ddd\u5927\u5c0f\uff0c\u663e\u793a\u6548\u679c\u5982\u56fe4\u6240\u793a\u30027.3\u590d\u5408\u9009\u62e9\u5668\u5982\u679c\u4ec5\u4ec5\u638c\u63e1\u4e86\u6807\u7b7e\u9009\u62e9\u7b26\u3001\u7c7b\u9009\u62e9\u7b26\u548cID\u9009\u62e9\u7b26\u8fd8\u8fdc\u8fdc\u4e0d\u591f\uff0c\u5bf9\u4e8e\u7f51\u9875\u8bbe\u8ba1\u8005\u6765\u8bb2\u8fd8\u5e94\u8be5\u638c\u63e1\u9ad8\u7ea7\u9009\u62e9\u7b26\u7684\u4f7f\u7528\uff0c\u5982\u5b50\u9009\u62e9\u7b26\u3001\u76f8\u90bb\u9009\u62e9\u7b26\u548c\u5c5e\u6027\u9009\u62e9\u7b26\u3002\n\u5229\u7528\u6807\u7b7e\u9009\u62e9\u7b26\u548c\u7c7b\u9009\u62e9\u7b26\u53ef\u4ee5\u63a7\u5236\u7f51\u9875\u4e2d\u4f17\u591a\u5bf9\u8c61\u7684\u6837\u5f0f\uff1b\u800c\u5229\u7528ID\u9009\u62e9\u7b26\u3001\u5b50\u9009\u62e9\u7b26\u548c\u76f8\u90bb\u9009\u62e9\u7b26\u53ef\u4ee5\u7cbe\u786e\u63a7\u5236\u9875\u9762\u4e2d\u7684\u7279\u5b9a\u5bf9\u8c61\u6837\u5f0f\uff1b\u4f7f\u7528\u5c5e\u6027\u9009\u62e9\u7b26\u53ef\u4ee5\u66f4\u654f\u6377\u3001\u66f4\u6a21\u7cca\u5730\u63a7\u5236\u9875\u9762\u4e2d\u5305\u542b\u4e0d\u540c\u5c5e\u6027\u7684\u5bf9\u8c61\u6837\u5f0f\u3002\n7.3.1\u5b50\u9009\u62e9\u7b26\n\u5b50\u9009\u62e9\u7b26\u5c31\u662f\u6307\u5b9a\u7236\u5143\u7d20\u6240\u5305\u542b\u7684\u5b50\u5143\u7d20\u7684\u6837\u5f0f\u3002\u5b50\u9009\u62e9\u7b26\u4f7f\u7528\u5c16\u89d2\u53f7\uff08>\uff09\u6765\u8868\u793a\uff0c\u5b9a\u4e49\u683c\u5f0f\u5982\u4e0b\uff1a\ndiv>span{font-size:20px;}\u5176\u4e2d\uff0cdiv\u4e3aspan\u5143\u7d20\u7684\u7236\u5143\u7d20\uff0c\u901a\u8fc7\u5b50\u9009\u62e9\u7b26\u8fde\u63a5\u3002\n\u4f8b\u5982\uff0c\u5b9a\u4e49span\u5143\u7d20\u7684\u5b57\u4f53\u5927\u5c0f\u4e3a10px\uff0c\u518d\u5229\u7528\u5b50\u9009\u62e9\u7b26\u6765\u5b9a\u4e49\u6240\u6709div\u5143\u7d20\u5305\u542b\u7684\u5b50\u5143\u7d20span\u6837\u5f0f\u5b57\u4f53\u5927\u5c0f\u4e3a20px\uff0c\u663e\u793a\u6548\u679c\u5982\u56fe5\u6240\u793a\u3002\nCSS\u57fa\u7840\u5165\u95e8\u5c42\u53e0\u6837\u5f0f\u8868\u662f\u4e00\u79cd\u7528\u6765\u8868\u73b0HTML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed7.3.2\u76f8\u90bb\u9009\u62e9\u5668\n\u76f8\u90bb\u9009\u62e9\u7b26\u5c31\u662f\u6307\u5b9a\u4e00\u4e2a\u5143\u7d20\u76f8\u90bb\u7684\u4e0b\u4e00\u4e2a\u5143\u7d20\u7684\u6837\u5f0f\u3002\u76f8\u90bb\u9009\u62e9\u7b26\u4f7f\u7528\u52a0\u53f7\uff08+\uff09\u6765\u8868\u793a\uff0c\u683c\u5f0f\u5982\u4e0b\uff1a\ndiv+span{font-size:20px;}\u5176\u4e2d\uff0cdiv+span\u8868\u793adiv\u5143\u7d20\u4e0espan\u5143\u7d20\u76f8\u90bb\u3002\u4f8b\u5982\uff0c\u5229\u7528\u76f8\u90bb\u9009\u62e9\u7b26\u9012\u8fdb\u63a7\u5236\u5e76\u5217\u663e\u793a\u7684\u51e0\u4e2a\u5143\u7d20\u7684\u663e\u793a\u6837\u5f0f\u3002h1+div\u8868\u793a\u6807\u9898\u5143\u7d20h1\u540e\u9762\u76f8\u90bb\u7684div\u5143\u7d20\u6837\u5f0f\uff0cdiv+p\u8868\u793adiv\u5143\u7d20\u540e\u9762\u76f8\u90bb\u7684\u5143\u7d20p\u7684\u6837\u5f0f\uff0cp+div\u8868\u793ap\u5143\u7d20\u540e\u9762\u76f8\u90bb\u7684div\u5143\u7d20\u7684\u6837\u5f0f\uff0c\u800cdiv+div\u8868\u793adiv\u5143\u7d20\u540e\u9762\u76f8\u90bb\u7684div\u5143\u7d20\u7684\u6837\u5f0f\u3002\u6548\u679c\u5982\u56fe6\u6240\u793a\u3002\n\u56fe1\n\n\u56fe2\n\n\u56fe4\n\n\u56fe5\n\n\u56fe6\n\n","publishTime":"2020-01-02","c_timestamp":1577951663,"isAdopt":0,"user":{"uid":861529425,"name":"\u98de\u626c\u5929\u5730\u95f4_ZM","imId":"public.1.a868121c.MtfF6YH7iPmqdUHMozcI0A","isAnonymous":0,"isUnLogin":0,"isCurrentUser":0,"isNoUserName":0,"iconType":6,"sex":1,"isAuth":0,"isExpert":0,"isExpertImport":0,"isUserAdmin":0,"isFamous":0,"isMaster":0,"isFromTorch":0,"isFilter":0,"shoubaiUser":{"avatar":"https:\/\/gips0.baidu.com\/it\/u=229428845,3871491040&fm=3012&app=3012&autime=1668842178&size=b200,200","displayname":"\u840c\u5b66\u5802\u7ae5\u4e66","sign":"\u81f4\u529b\u4e8e\u51fa\u7248\u6700\u7f8e\u539f\u521b\u7ae5\u4e66","third_id":"1618990200865936","type":"media","vip":"0","vtype":0},"chatUserInfo":[],"isOpenApp":0,"encodeUid":"51e54069236f25705e795933","gradeIndex":20,"grAnswerNum":43537,"praiseNum":52901,"goodRate":99.326975725497,"adoptRate":100,"carefield":[{"cid":202,"cname":"\u7406\u5de5\u5b66\u79d1"}],"selfDefinedPhoto":0,"isAppAuth":0,"BC":52901,"JQ":{"followMe":6468,"myFollow":1},"DC":43537,"MR":[],"answerNum":"4.4\u4e07","AX":43846,"helpNum":"7920\u4e07","business":{"businessId":100593,"companyName":"\u5317\u4eac\u7406\u5de5\u5927\u5b66\u51fa\u7248\u793e\u6709\u9650\u8d23\u4efb\u516c\u53f8","bjhUpgradeStatus":2,"bjhAuditStatus":0,"cAppId":0,"cid":0,"name":"\u5317\u4eac\u7406\u5de5\u5927\u5b66\u51fa\u7248\u793e","uid":861529425,"uname":"\u98de\u626c\u5929\u5730\u95f4_ZM","siteUrl":"http:\/\/","slogan":"\u5fb7\u4ee5\u660e\u7406\uff0c\u5b66\u4ee5\u7cbe\u5de5\u3002","main":"","imgUrl":"https:\/\/cambrian-images.cdn.bcebos.com\/1c63fb2932862a09d20401a5f2416b15_1543989216895.jpeg","intro":"","type":0,"insType":1,"xzhId":1618990200865936,"servicePhone":"010-68944515","replyNum":87754,"thumbNum":50931,"v_type":0,"vipLevel":3,"vipRights":"1,2,3,4,5,6,7,8,9","pluginInfo":{"officialPhone":"010-68944515","siteUrl":"http:\/\/","isInWhiteList":true,"customerInfo":[],"onlineUrl":null,"tab":[]},"isBrandBusiness":false,"encodeUid":"51e54069236f25705e795933"},"iconChange":true,"showInfo":{"type":2,"partnerId":100593,"companyName":"\u5317\u4eac\u7406\u5de5\u5927\u5b66\u51fa\u7248\u793e\u6709\u9650\u8d23\u4efb\u516c\u53f8","bjhUpgradeStatus":2,"bjhAuditStatus":0,"cAppId":0,"name":"\u5317\u4eac\u7406\u5de5\u5927\u5b66\u51fa\u7248\u793e","imgUrl":"https:\/\/cambrian-images.cdn.bcebos.com\/1c63fb2932862a09d20401a5f2416b15_1543989216895.jpeg","slogan":"\u5fb7\u4ee5\u660e\u7406\uff0c\u5b66\u4ee5\u7cbe\u5de5\u3002","siteUrl":"https:\/\/zhidao.baidu.com\/business\/profile?id=100593&role=business","siteUrlArr":[],"v_type":4,"intro":"","businessId":100593,"encodeUid":"51e54069236f25705e795933","thumbNum":50931},"isFromBusiness":100593},"goodValueNum":1,"badValueNum":0,"refContent":"","bit_pack":{"is_recommend":1,"wap_flag":0,"is_pic_contained":0,"media_flag":0,"help_flag":0,"anonymous":0,"is_really_anonymous":0,"level_new":1,"comment_flag":0,"in_mis":0,"auto_recommend":0,"content_rich_flag":1,"prior_flag":0,"hidden_flag":0,"rec_canceled_flag":0,"mis_flag":0,"file_flag":0,"read_flag":0,"is_challenge":0,"ikaudio_flag":0,"mavin_flag":0,"is_delete_lock":0,"authentic_state":0,"is_compulsory_best":0,"dynamic_stick_flag":0,"video_flag":0,"vote_affirmative":0,"vote_negative":0,"is_video":0,"is_baiduyun":0,"is_yike_card":0},"ext_pack":{"anony_good_value":1,"business":{"businessId":100593},"ignore_spam":15,"mode_begintime":0,"mode_qtype":0,"op_uid":861529425,"partner":[],"reco_time":1577968336},"isSupport":0,"evaluatedType":0,"deleted":0,"value_rank":1009086,"type":"normal","threadId":"12579474953","next_rid":3193081730,"pre_rid":0,"team_id":0,"import_id":1580,"userRewardWealth":null,"uafrom":"","replyAsk":null,"is_appeal":0,"musicInfo":[],"tiebaInfo":[],"is_partner":1,"business_partner":{"bannerPicUrl":"http:\/\/iknow02.bosstatic.bdimg.com\/shengmingyitian.jpeg","bannerUrl":"http:\/\/product.m.dangdang.com\/product.php?pid=27871027&host=product.dangdang.com"}}

});

},0);

})

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; require.async(['m-question-new:widget/single-meta-exp/single-meta-exp.es'], function (A) {

A.init({

rid: 3144868738,

encodeUid: '51e54069236f25705e795933',

threadId: 12579474953

});

});

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; require.async(['m-question-new:widget/ad-asp-ads/ad-asp-ads-async'], function (rec) {

rec.init({

container: $('#wgt-xjksr637c4e-asp'),

adPlaceholder: $('#ad-PLACEHODER-id')

});

})

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; require.async(['m-question-new:widget/ad-top-banner/ad-top-banner-async'], function(b){

b.init('.mlalw637c4e', {

naResource: 'viewer-middle',

classId: '',

data: 'mlalw637c4e',

// cms策略标识

cmsId: 'other',

appData: {

url: '',

imgSrc: "",

name: '百度知道',

slogan: '十分钟有问必答',

btn: '立即下载'

}

});

});

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; require.async(['m-question-new:widget/rfq-card/rfq-card.es'], function (rfq) {

rfq.init({"index":"","encode_qid":"1708728378115901940"});

});

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; require.async(['m-question-new:widget/contextual-earches/contextual-earches-async'], function (rec) {

rec.init({

container: $('#contextual-urljq637c4e-earches')

});

})

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; F.context('now', 1669091046);

require.async(['m-question-new:widget/ad-union-new/ad-union-new-async'], function (rec) {

rec.init($('#wgt-yqigt637c4e-youx'));

})

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; F.context('relatedName', 'abpls637c4e');

require.async(["m-question-new:widget/related-question-new/related-question-new-async.es"], function (relateQuestion) {

relateQuestion.init({

container: '#related-list-target',

mixClass: '#abpls637c4e',

word: '' || '',

title: 'CSS的样式有哪些？',

toNaSample: 0,

isLightStyle: 1

});

});

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; F.context({

feedOpt:{

tag:'CSS',

word: '' || '',

adapt: {"_lbs_loc":{"rgc_flag":"5"},"_adapt_result":{"bd_page_type":"1","is_wifi":"0","tn":"middle"},"js":"0","resolution_height":"220","resolution_width":"1501","utn":"0"},

naAdObj: {"name":"3656\u4eba\u6b63\u5728\u70ed\u8bae","btn":"\u53c2\u4e0e\u8ba8\u8bba","banner":"https:\/\/iknow-base.bj.bcebos.com\/wulin\/feed_6_qian_1114.jpg","android":"https:\/\/downpack.baidu.com\/baiduzhidao_AndroidPhone_qbashezuo.apk","ios":"https:\/\/itunes.apple.com\/cn\/app\/bai-du-zhi-dao\/id465885800?mt=8","desc":"\u4e3a\u4ec0\u4e48\u73b0\u5728\u8d8a\u6765\u8d8a\u96be\u8d5a\u94b1\u4e86\uff1f","start":"2018-08-10 16:20:21"}

}

});

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require;require.async(['m-question-new:widget/bg-mask/bg-mask.es'], function(mask) {

mask.default.init();

});

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require;require.async(['m-question-new:widget/index/morebar/morebar.es'], function(morebar) {

morebar.default.init(1);

});

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require;require.async(['m-question-new:widget/index/question-reward/question-reward.es'], function(index) {

index.init({"usersurplus":"","isLogin":"","isSingleReply":"1"});

});

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require;require.async(['m-question-new:widget/index/accusation/accusation.es'], function(accusation) {

accusation.default.init();

});

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; F.context('singleReply', '3144868738');

F.context('isLightTheme', 1);

F.context('singleImport', 1580);

F.context('pvid', '1446367221');

F.context('singleUid', '51e54069236f25705e795933');

F.context('businessId', '100593');

// 知识头条是否内容制作包

F.context('knowledgeCardType', 0);

require.async(['m-common:widget/js/util/log/log'], function (log) {

log.addKey({

rid: '3144868738',

pinzhuanFlag: 0,

businessId: 100593

});

log.send({

action: 'pv',

area: 'pv',

});

});

require.async(["m-question-new:widget/js/page/index"]);

require.async(["m-question-new:widget/js/page/single.es"], function (single) {

single.init({

videoCount: 0,

rid: '3144868738',

answerIsBusiness: 100593

});

});

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; require.async(['m-question-new:widget/comment-layer/comment-layer.es'], function (comment) {

comment.init({

rid: '3144868738'

});

});

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; require.async(["m-question-new:widget/gotop/gotop"],function(gotop){

gotop.init('#w-gotop');

})

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; require.async(["m-common:widget/js/logic/duration/duration"],function(dur){

// 手百中，如果document.referrer中含有xcx=\d+时，在此链接中添加xcx参数

var match = (document.referrer).match(/xcx=\d+/i);

if (window.history && navigator.userAgent.match(/baiduboxapp/i) && match) {

var hash = location.hash;

var search = location.search;

var joiner = search.indexOf('?') === -1 ? '?' : '&';

window.history.replaceState(null, '', search + joiner + match[0] + hash);

}

dur.init({

uid: ''

});

});

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; }();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; require.async(['m-common:widget/lib/gmu/zepto/zepto'], function($) {

var businessIds = [100593,14630];

businessIds && businessIds instanceof Array && $.ajax({

url: '/business/submit/dailystatistics',

type: 'GET',

timeout: 30 * 1000,

data: {

type: 1,

businessIds: businessIds.join('_'),

qid: F.context('question').qid

}

});

});

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require;require.async(['m-question-new:widget/trans-yun/trans-yun-log'], function(YunLog){

YunLog.init();

});

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require;require.async(['m-question-new:widget/yike-card/yike-card-log'], function(yikeCardLog){

yikeCardLog.init();

});

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; require.async(['m-common:widget/pushStateQuery/pushStateQuery'], function (app) {

app.init();

});

}();

!function(){var F = (window.__IKNOW_GLOBAL__ || window).F;var require = (window.__IKNOW_GLOBAL__ || window).require; require.async(['m-common:widget/js/util/monitor/monitor.es'], function(m) {

window.iPerformance && m.monitor && m.monitor.init();

});

}();

if(typeof PDC!="undefined"){PDC.tti();}

var _hmt = _hmt || [];

(function() {

var hm = document.createElement("script");

hm.src = "//hm.baidu.com/hm.js?16bc67e4f6394c05d03992ea0a0e9123";

var s = document.getElementsByTagName("script")[0];

s.parentNode.insertBefore(hm, s);

})();

!function(document, window){

var log = {

list: [],

host: 'https://' + location.host + '/api/httpscheck',

log: function(param) {

var a = [];

a.push('wap=1');

for(var k in param) {

a.push(k + '=' + param[k]);

}

var msg = a.join('&');

if(~this.list.indexOf(msg)){

return;

}

this.list.push(msg);

var img = new Image();

var key = '_ik_log_' + (Math.random()*2147483648 ^ 0).toString(36);

window[key] = img;

img.onload = img.onerror = img.onabort = function() {

img.onload = img.onerror = img.onabort = null;

window[key] = null;

img = null;

};

img.src = this.host + '?' + msg;

}

};

function HTTPSWarningLog(){

this.selector = [

'link',

'script',

'img',

'embed',

'iframe'

];

this.warningCounter = 0;

this.init();

};

HTTPSWarningLog.prototype = {

init: function(){

this.fetch();

},

fetch: function(){

for(var tags = this.selector, i =0, len = tags.length; i < len;i++) {

this.getTag(tags[i]);

}

},

getTag: function(tag) {

var domList = document.getElementsByTagName(tag);

if(!domList.length) {

return;

}

for(var i = 0,len = domList.length;i