css副标题样式,html副标题

Div+CSS技术是干嘛用的？

什么是DIV+CSS 网页重构

DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。

CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。

HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。即标记越来越多，甚至各个浏览器生产商也开发出只适合于其特定浏览器的HTML标记，这显然有碍于HTML网页的兼容性。于是W3C组织进而重新从SGML中获取营养，随后，发布了XML，XML是一种比HTML更加严格的标记语言，全称是可扩展标记语言（EXtensible Markup Language ）。但是XML过于复杂，且当前的大部分浏览器都不完全支持XML。于是XHTML这种语言就派上了用场，XHTML语言就是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。说了这么多，现在该说正题了——CSS。其实CSS单独使用除了麻烦一点之外，我个人觉得并无明显的优于HTML的好处。而关键就在于其与脚本语言（如Javascript）及XML技术的融合，即CSS+Javascript+XML（实际上有一种更好的融合：XML+XSL+Javascript）——但XSL，即可扩展样式表语言相较于CSS过于复杂，不太容易上手。自从CSS出现之后，HTML终于摆脱了杂乱无章的恶梦，开始将页面内容与样式分离。说了这么多，其实，个中真谛，还得使用过后才知道，所以，现在就开始学习使用吧。

DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

在可以预计的将来，table的地位依然十分重要，于是，如google之流依然会生意兴隆。但是div代表的是网络世界发展的方向。它们一个简单，一个先进，萝卜白菜，您选什么都是有可取只处的．我们都很按您的要求认真服务的！

div是html(超文本语言)中的一个元素,div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的table布局,真正地达到了w3c内容与表现相分离.

div 是标签 css是层叠样式表

DIV+CSS高级布局已逐渐流行，但面对所谓DIV+CSS布局的叫法让人更为担心，不要让DIV成为Table的替代品，多层嵌套的DIV会严重影响代码的可阅读性，活用HTML为我们提供的标签吧。

什么时候应该用DIV?在中有详细解释。

虽然在这方面没有什么硬性的规定,但个人认为DIV更适用于大体框架的定位.例如我们要定义一块头部的区域,一般会这样定义一个DIV:

这里就是头部框架里要写的内容

当然,可以用class来定义,但一般来讲如不是在同一页面会重复的元素,用id能更好的区别开来.

查看如下定义代码

ul id="navbar"

li id="articles"

Articles/li

li id="topics"

Topics/li

li id="about"

About/li

li id="contact"

Contact/li

li id="contribute"

Contribute/li

li id="feed"

Feed/li

/ul

h1 id="masthead"

a href="/"

img src="/pix/alalogo.gif" alt="A LIST Apart: For People Who Make Websites" /

/h1

No. 214

定义了最上面的导航(ul部分),左边的大logo和那个圆圆的No.xxxx的标记.

他没有使用DIV来做顶部的框架,但却很好的说明了这些代码的用途,为什么?因为他活用了HTML提供的标签,以及样式名称的定义

其它最常用的布局标签

h1

这个标签或许真正会去用的人很少,因为它显示的字体真的是太"大"了,但我们是CSSer,有什么标签样式不能改呢?而且它所能表达的意思就如同它原先的作用一样明显(大标题)我想你已经知道怎么去用它了 ^_^

ul

这个标签很多情况是用来定义导航部分的,当然也可以用ol来代替,但导航连接没有什么顺序之分吧,所以还是用ul来的比较确切(去掉CSS后效果更明显)

b

这个已经不再推荐使用的标签,在布局上却能带来不少的方便(因为短),虽然我不是太赞成使用这个标签,但有些时候(比如细小地方的布局定义)还是不错的选择

h2

h2使用最多的地方应该不是布局上,而是副标题,但有些地方需要定义栏目样式的话,用这个标签比较合适,栏目内容就使用p

[编辑本段]DIV+CSS的优势何在？

1、符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。 2、支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。 3、搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。 4、样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。5、CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。6、表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

[编辑本段]CSS放入网页的几种方式

行内套用

我们可以在HTML文件内直接宣告样式。

举例来说，Thisisfontsize16.

以上的HTML文件在浏览器上会显现为：Thisisfontsize16.

嵌入套用样式可以嵌入于HTML文件中(通常是在head内)。

举例来说，headstyletype="text/css"styletype="text/css"div{div{background-color:#FF0000;}/style/headbody背景颜色是红色/body

以上的HTML会显现出：背景颜色是红色

外部连接套用在这种方式下，所有的CSS样式宣告都是存在另外一个档案中。

该档案通常名称为.css。

在HTML文件的header../header之中，我们将用以下的程式码将这个.css档案连接进入：

linkrel=stylesheettype="text/css" href="external-stylesheet.css"

以上这一行会将在external-stylesheet.css这个档案内所宣告的样式加入HTML文件内。

汇入套用汇入套用外部的CSS样式也可以被汇入进HTML文件。

汇入的做法为利用@import这个指令。

@import的语法为：STYLETYPE="text/css"STYLETYPE="text/css"/STYLE@import"!--@importurl();@importurl(/STYLE

@import指令最初的用意，是为了能够针对不同的浏览器而运用不同的样式。不过，现在已经没有这个必要。现在用@import的目的，最常是要加入多个CSS样式。当多个CSS样式被@import的方式加入，而不同CSS样式互相有冲突时，后被加入的CSS样式有优先的顺位(详情请见CSS串接)。

[编辑本段]CSS＋DIV网站设计的问题

尽管DIV+CSS具有一定的优势，不过现阶段CSS+DIV网站建设存在的问题也比较明显，主要表现在：

第一，对于CSS的高度依赖使得网页设计变得比较复杂。相对于HTML4.0中的表格布局（table），CSS+DIV尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了，这在一定程度上影响了XHTML网站设计语言的普及应用。

第二，CSS文件异常将影响整个网站的正常浏览。CSS网站制作的设计元素通常放在几个l外部文件中，这一个或几个文件有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。

第三，对于CSS网站设计的浏览器兼容性问题比较突出。基于HTML4.0的网页设计在IE4.0之后的版本中几乎不存在浏览器兼容性问题，但CSS+DIV设计的网站在IE浏览器里面正常显示的页面，到火狐浏览器（FireFox ）中却可能面目全非（这也是为什么建议网络营销人员使用火狐浏览器的原因所在 ）。CSS+DIV还有待于各个浏览器厂商的进一步支持。

第四，CSS+DIV对搜索引擎优化与否取决于网页设计的专业水平而不是CSS+DIV本身。CSS+DIV网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。

[编辑本段]使用DIV+CSS布局网站的优点和缺陷

随着WEB2.0标准化设计理念的普及，国内很多大型门户网站已经纷纷采用DIV+CSS制作方法，奋斗网络也成为了CSS网页布局技术学习的先锋站点，从实际应用情况来看，此种方法绝对好于表格制作页面的方法。

如今大部分网站仍然采用表格嵌套内容的方式来制作网站，虽然此方法对于我们来说比较熟悉、比较上手；但是，它却阻碍了一种更好的、更有亲和力的、更灵活的，而且功能更强大的网站设计方法——DIV+CSS。

CSS网页布局的意义体现在如下方面：

一、使页面载入得更快

由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。

二、降低流量费用

页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。

三、修改设计时更有效率

由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。

四、保持视觉的一致性

DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。

五、更好地被搜索引擎收录

由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。

六、对浏览者和浏览器更具亲和力

我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV+CSS在这方面更具优势。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。

说了这么多CSS网页布局的意义与优点，同时也不能轻视CSS网页布局的副作用：

一、DIV+CSS尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了。

二、CSS网站制作的设计元素通常放在1个外部文件中，或几个文件，有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。

三、虽然说DIV+CSS解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常，比如火狐浏览器，在IE中显示正常的页面，到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题，但是可以说在目前来看，DIV+CSS还没有实现所有浏览器的统一兼容。

四、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。DIV+CSS网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。

综合以上讨论的DIV+CSS优势和略势，我认为不可盲目跟风，如何更有效、更合理的运用WEB2.0设计标准，这需要很长时间的学习和锻炼。而如何将DIV+CSS运用的更好，我觉得这需要通过不断的实践和体检，积累丰富的设计经验，才能很好的掌握这门技术。

[编辑本段]Div+CSS常见错误总结

CSS＋DIV是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位。应用应用DIV+CSS编码时很容易犯一些错误。本文列举了一些常见的错误：

1. 检查HTML元素是否有拼写错误、是否忘记结束标记

即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。

2. 检查CSS是否正确

检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。

3. 确定错误发生的位置

如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。

4. 利用border属性确定出错元素的布局特性

使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。

5. float元素的父元素不能指定clear属性

MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。

6. float元素务必指定width属性

很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。

另外指定元素时尽量使用em而不是px做单位。

7. float元素不能指定margin和padding等属性

IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。

8. float元素的宽度之和要小于100%

如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

9. 是否重设了默认的样式?

某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。

10. 是否忘记了写DTD?

如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD：

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""[1]

相关问答

Q1: 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 = 1669411323;(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=1669095132&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:52909,\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:52909,\x22JQ\x22:{\x22followMe\x22:6469,\x22myFollow\x22:1},\x22DC\x22:43537,\x22MR\x22:[],\x22answerNum\x22:\x224.4\\u4e07\x22,\x22AX\x22:43846,\x22helpNum\x22:\x227991\\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:43876,\x22thumbNum\x22:50938,\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:50938},\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', 'PxIsRab16ZApXlbIXkaDfVVPe');

}();

!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=1669095132&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":52909,"goodRate":99.326975725497,"adoptRate":100,"carefield":[{"cid":202,"cname":"\u7406\u5de5\u5b66\u79d1"}],"selfDefinedPhoto":0,"isAppAuth":0,"BC":52909,"JQ":{"followMe":6469,"myFollow":1},"DC":43537,"MR":[],"answerNum":"4.4\u4e07","AX":43846,"helpNum":"7991\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":43876,"thumbNum":50938,"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":50938},"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-sqlnr638131-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('.aorvz638131', {

naResource: 'viewer-middle',

classId: '',

data: 'aorvz638131',

// 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-susxj638131-earches')

});

})

}();

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

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

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

})

}();

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

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

relateQuestion.init({

container: '#related-list-target',

mixClass: '#ptjpn638131',

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', '1323739221');

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

Q2: css 中title属性怎样设置文本样式？如加颜色、设置大小

1、打开开发工具，新建一个HTML文件。

2、使用font-family属性设置，字体代码：.demo1{font-family: "microsoft yahei";}。

3、使用font-size属性设置字体的大小代码：.demo1{font-size: 20px;}。

4、使用font-style 属性设置字体风格：normal - 文本正常显示italic - 文本斜体显示oblique - 文本倾斜显示。

5、使用font-weight属性设置字体的粗细代码：.demo2{font-weight: 600;}。

6、使用color设置字体颜色代码：.demo1{color: #FF0000;}。就完成了。

Q3: 问下当主标题过长时换行切副标题隐藏，如果主标题不换行则副标题显示（共2行）怎么用css写出来

副标题和主标题用一个div包起来，相对这个div进行绝对定位，主标题的高度自适应，层级比副标题高，设置个背景，副标题位置定义在主标题一行高度的下面，主标题超过两行，那么就会把副标题盖住，就达到了你要的隐藏副标题的效果