css开始样式,CSS的常用样式

CSS样式是什么?

不知你是否真知道，答案很长，学习总是枯燥的!

要有耐心看喔!

样式

CSS是Cascading style Sheets的简称，中文译作“层叠样式表单”.

实际上它是一组样式。你可能对CSS这个名词比较陌生，实际上无论你用Internet Explorer还是Netscape Navigator在网上冲浪，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，为什么同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB，CSS在其中的作用是不言而喻的。我把我在使用CSS中的一些小经验以及一些网友来信提问的问题整理出来，供诸位参考。

1、CSS在网页制作中一般有三种方式的用法，那么具体在使用时该采用哪种用法？

当有多个网页要用到的CSS，采用外连CSS文件的方式，这样网页的代码大大减少，修改起来非常方便；只在单个网页中使用的CSS，采用文档头部方式；只有在一个网页一、两个地方才用到的CSS，采用行内插入方式。

2、CSS的三种用法在一个网页中要以混用吗？

三种用法可以混用，且不会造成混乱。这就是它为什么称之为“层叠样式表”的原因，浏览器在显示网页时是这样处理的：先检查有没有行内插入式CSS，有就执行了，针对本句的其它CSS就不去管它了；其次检查头部方式的CSS，有就执行了；在前两者都没有的情况下再检查外连文件方式的CSS。因此可看出，三种CSS的执行优先级是：行内插入式、头部方式、外连文件方式。

3、在Dreamweaver3中如何使外部文件式CSS？

在Dreamweaver3中使用外连文件式CSS并没有特殊要求，同样是用记事本创建一个*.css文件，在网页的head与/head之间加上一句这样的代码：link rel="stylesheet" href="在这里填上你的CSS文件地址（相对路径+文件名）" type="text/css" 就行了。

4、如何用Dreamweaver3快速创建CSS外连式文件？

对于一个初接触CSS的网页设计人员来讲，要用记事之类的编辑器，去创建一个CSS外连式文件是相当困难的。由于Dreamweaver3对CSS支持的很好，用它来帮助就轻松多了。具体可以这样操作：

1）先在纸上写好在网站的网页中可能要用到的格名称，然后在Dreamweaver3的编辑窗中调出CSS面板，一个一个地定义，并在一个空白页上适当地写一点相关内容，边定义边试用，效果不满意，立即修改；

2）全部定义好后，再用记事本创建一个空的CSS外连式文件，把在head与/head之间的那段定义好的CSS复制到CSS文件中去，就大功告成了。整个过程就是点鼠标，方便吧？

5、在Dreamweaver3中采用行内插入式CSS要手动写代码吗？

不用！先用CSS面板定义好要用的CSS，然后，在要插入CSS的标记插入：style=""，再把你刚才定义的CSS从head后面拖到这个双引号中来，把花括号以外的部分删去就行了。

6、在方档头部方式和外连文件方式的CSS中都有“!--”和“--”，好象没什么用，不要可以吗？

这一对东东的作用是为了不引起低版本浏览器的错误。如果某个执行此页面的浏览器不支持CSS，它将忽略其中的内容。虽然现在使用不支持CSS浏览器的人已很少了，由于互联网上几乎什么可能都会发生，所以还是留着为妙。

7、如何给一部分文字加背景色？

给文字加上不同颜色，在DW3中只要在属性面板上选取文字的颜色就行了，非常方便，但要给部分文字加不同的背景色却没有相应的功能，我们可以先做一个定义背景色的CSS（如：bgstyle），在DW3中点几下鼠就完成了。如一个定义淡黄色背景的CSS是这样的：

style type="text/css"

!--

.bgstyle { background: #FFFFCC}

--

/style

在要用时选取那段文字，再在CSS面板上点一下“bgstyle”就行了。

8、如何给部分文字加背景图像？

与加背景色操作类似，中是在背景在选择加载图象就是了，一个定义好的加背景图象的CSS例子的代码是这样的：

style type="text/css"

!--

.imgbgstyle { background-image: url(/logo.gif)}

--

/style

在要用时选取那段文字，再在CSS面板上点一下“imgbgstyle”就行了。

9、如何使页面的背景在文字“滚动”时背景图案静止不动？

要使背景图案不随文字“滚动”的CSS是这样的：

style type="text/css"

!--

BODY { background: purple url(/bg.jpg);

background-repeat:repeat-y;

background-attachment:fixed

}

--

/style

10、如何定义字间距？

在DW3中CSS的属性定义对话框（style Definition for .style1)的“Block”上的“letter spaceing”属性定义的就是字间距，它指的是每一个字符之间的额外间距，经长度为单位，正负值均可，当取负值时产生字符挤在一起的效果。下面代码是一个定义好的字间距CSS例子：

style type="text/css"

!--

.style1 { letter-spacing: 3px}

--

/style

11、如何给文字加上划线、下划线、删除线和闪烁？

在DW3中CSS的属性定义对话框(style Definition for .style1)的“Type”上的“decoration”属性定义的就是这些内容，要注意的是闪烁属性有些版本的浏览器不支持，少用为好。下面是一个定义好上述效果的CSS例子：

style type="text/css"

!--

.style1 { text-decoration: underline overline line-through blink}

--

/style

其中： “underline”是定义下划线；“overline ”是定义上划线；“ line-through”定义的是删除线；“blink”

定义的是文字闪烁。

12、如何使网页具有“首行缩进”功能？

由于DW3输入空格不方便，利用“首行缩进”将弥补这个不足。在DW3中CSS的属性定义对话框（style Definition for .style1)的“Block”上的“text-indent”属性定义的就是“首行缩进”，所谓“首行”是指每段内容的第一行，也就是直接按回车键就形成了一个新的段落。缩进最好以“em”（字符）为单位，比如：汉字编排要求每段开始缩进两个汉字，设置好的CSS如下所示：

style type="text/css"

!--

.style1 { text-indent: 2em}

--

/style

在DW3要注意：在DW3中CSS的属性定义对话框（style Definition for .style1)的“Block”上的“text-indent”右面的缩进单位选择框中“ems”指的就是“em”。

13、在用表格进行排版时，能使某一方向上的内容离开表格线一点吗？

可以！在DW3中CSS的属性定义对话框（style Definition for .style1)的“Box”上的“margin”定义的就是内容离开边缘的距离，分别可定义四个方向：“top”“bottom”“left”“right”。下面就是定义在左边离开“10px”的CSS例子代码：

style type="text/css"

!--

.style1 { margin: 0px 0px 0px 10px}

--

/style

14、能给某部分内容加边框吗？

用CSS可以给某部分内容加边框，在DW3中CSS的属性定义对话框（style Definition for .style1)的“Border”定义的就是边框线，“top”“bottom”“left”“right”四边可分别定义线的粗细和颜色，这些定义好后不要忘记在下面的“style”中定义线型，否则将看不边框线，因为默认的线型是“none”。下面是一个定义了上边框为：蓝色细线；左边框为：绿色中粗线的CSS例子：

style type="text/css"

!--

.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}

--

参考：百度百科

相关问答

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 = 1670093767;(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.ff2d67e.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:43536,\x22praiseNum\x22:52936,\x22goodRate\x22:99.324694287279,\x22adoptRate\x22:100,\x22carefield\x22:[{\x22cid\x22:202,\x22cname\x22:\x22\\u7406\\u5de5\\u5b66\\u79d1\x22}],\x22selfDefinedPhoto\x22:0,\x22isAppAuth\x22:0,\x22BC\x22:52936,\x22JQ\x22:{\x22followMe\x22:6469,\x22myFollow\x22:1},\x22DC\x22:43536,\x22MR\x22:[],\x22answerNum\x22:\x224.4\\u4e07\x22,\x22AX\x22:43846,\x22helpNum\x22:\x228142\\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:43881,\x22thumbNum\x22:50962,\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:50962},\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', '3Mohn6qWWe9N1YjyrqUXmbFlN');

}();

!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":43536,"praiseNum":52936,"goodRate":99.324694287279,"adoptRate":100,"carefield":[{"cid":202,"cname":"\u7406\u5de5\u5b66\u79d1"}],"selfDefinedPhoto":0,"isAppAuth":0,"BC":52936,"JQ":{"followMe":6469,"myFollow":1},"DC":43536,"MR":[],"answerNum":"4.4\u4e07","AX":43846,"helpNum":"8142\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":43881,"thumbNum":50962,"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":50962},"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-maiho638b9b-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('.gkvnp638b9b', {

naResource: 'viewer-middle',

classId: '',

data: 'gkvnp638b9b',

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

});

})

}();

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

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

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

})

}();

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

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

relateQuestion.init({

container: '#related-list-target',

mixClass: '#fhzgj638b9b',

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

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基础知识点全面解析（转载）

基本

常识与实践

链接方式

基本

最基本的方式就是直接在html文件中指定元素样式，这种方式不推荐，因为将表现层和结构层混起来了

"style="background-image:url({{user.avatar}})"

内部链接

要为html直接增加css样式，需要在元素中增加开始和结束style标记，css规则放在里面

style

p {

color: gray;

}

/style

css文件外置

另一种方式将css文件外置，如style.css,作为样式表(stylesheets),然后从html众创建一个到这个文件的外部链接,用元素,用外部样式表的好处是要修改整个网站的样式，只要进入这个样式表，对css进行几处修改即可。如:

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

多样式表

使用多个样式表,顺序很重要，一个样式表会覆盖在它上面链接的样式表中的样式,有时会有一个样式表作为页面的基础样式，要修改样式，链接这个样式表，然后在下面提供自己的样式表，指定要修改的样式,如下所示:

link rel="stylesheet" href="corperate.css"//总公司样式

link rel="stylesheet" href="beverage-division.css"//部门对总公司的样式做了一些补充，甚至可以覆盖公司的样式

link rel="stylesheet" href="lounge-seattle.css"//西雅图休闲室对样式表做了自己的调整

简写

css属性太多，能不能不费吹灰之力就指定这些属性呢？可以把同一属性的值结合起来写成一句,即简写。

简写格式

padding

padding: 0px 40px 30px 20px;,顺序是上右下左,顺时针有木有,如果都相同可以用padding: 20px;

padding-top: 0px;

padding-right: 40px;

padding-bottom:30px;

padding-left: 20px;

margin

上面的padding格式同样对margin也适用,还有另一种方法,如果上下一样，左右一致,可以这样写:margin: 0px 20px,前面指定上下，后面指定左右。

border

边框属性简写 border: thin solid #007e73;,可以用你喜欢的任何顺序。

background

背景简写 background: white url(images/cocktail.gif) repeat-x;，同样顺序随便

字体

字体简写的格式稍微复杂一些:

font : font-style font-variant font-weight font-size/line-height font-family

选择

子孙选择器

父元素和子孙元素名之间有一个空格,子孙选择器会选择所有子孙，包括这个元素中嵌套的所有,不管嵌套多深,例如

color: black;

}

直接孩子

如果要选择直接的孩子,用

color: black;

}

复杂选择

更复杂的选择,方法还是一样

color: blue;

}

规则添加

类

当我们用选择器选择元素使用一个规则时,会对所有该元素应用这个样式，所以如何单独地选择这些元素呢?这里就需要类class,class可以定义一类元素，对属于该类的所有元素应用样式.要将一个元素加入一个类，只需要增加属性”class”,并提供类名,如”greentea”:

p class="greentea"

...

/p

类元素选择器

先选择这个类中的元素,再用”.”指定一个类,最后是类名,如:

p.greentea {

color: green;

}

添加类元素

如果想对所有blockquote也做同样的处理，可以:

blockquote.greentea,p.greentea {

color: green;

}

blockquote class = "greentea"

类选择器

如果想把h1,h2,h3,p和blockquote都增加到greentea呢？要对类中的所有元素都用同一样式可以用:

.greentea{

color: green;

}

/ 省略所有元素名,只有一个点,则会应用到所有成员 /

多类元素

元素可以有多个类,例如:

p class="greentea raspberry blueberry"

特定元素选择器

如果多个选择器都选择了一个元素呢？例如上面的3个类都与p元素匹配，并且都定义了color属性，那么那个会胜出?

id

id的作用

id属性用来唯一地命名元素,通常你想对多个元素重用某些样式，才能真正发挥类的作用。但是如果只有一个元素需要样式，或者页面上只有一个元素，那就应该使用id,每个元素只能有一个id，页面中只能有一个元素拥有特定id,一个元素有一个id，同时可以属于一个或多个类,id中不允许出现空格或其他特殊字符,如

p id="footer".../p

选择元素

用id选择一个元素,需要在id前面使用一个#字符(类是[.]),id选择器只与页面中的一个元素匹配

color: red;

}//选择id为footer的任意元素

p#footer{

color: red;

}//选择id为footer的p元素

实践建议

继承

样式继承

层叠

媒体查询

link媒体查询

你可能想针对将要显示页面的设备调整页面的样式，可以用media属性,在link元素中增加这个属性.如

link rel="stylesheet" href="lounge-mobile.css" mdeia="screen and (max-device-width: 480px)"

link rel="stylesheet" href="lounge-print.css" media="print"

css媒体查询

可以直接在css中增加媒体查询,使用@media规则,把对所有媒体类型都通用的规则放在@media规则下面,例如

@media screen and (min-device-width: 481px){//当设备屏幕宽度大于480px时使用

margin-right: 250px;

}

}

@media screen and (max-device-width: 480px){//当设备屏幕小于等于480px时使用

margin-right: 30px;

}

}

@media print { // 如果要打印页面，使用该规则

body {

font-family: Times, "Times New Roman", serif;

}

}

实践建议

属性

盒模型

盒模型是css看待元素的一种方式，css将每个元素看作由一个盒子表示,每个盒子由一个内容区以及可选的内边距，边框和外边距组成。由内而外分别是:

border 边框

color 颜色

文本元素的字体颜色

body{

background-color: rgb(80%, 40% , 0%)//橙色

}

还可以指定0-255之间的一个数值,例如:

body{

background-color: rgb(204, 102, 0)//和上面颜色一致,255*80% = 204...

}

font-family 字体

大多数计算机上通常只安装了部分字体,所以选择字体时要当心,通常指定的font-family包含一个候选字体列表,他们都来自同一个字体系列,候选字体用逗号分隔,大小写字母必须一致,最后总是放一个通用的字体系列名,如果一个字体名中包含多个单词,比如Courier New，如何指定？用引号,”Courier New”,如:

body{

font-family: Verdana, Geneva, Arial, sans-serif; 一一首选字体呈降序

}

字体系列

每个font-family包含一组有共同特征的字体。共有5个字体系列:

body { font-size : small; }

h1 { font-size : 150%; }

h2 { font-size : 120%; }

注意老版IE不支持用像素指定的文本缩放

浏览器默认字体大小

其他属性

left 指定一个元素的左边所在位置

top 控制一个元素顶部的位置

background-image 在元素后面放置一个图像,如

background-image: url(images/background.gif);

//用url括起来,注意没有引号

background-repeat 背景图像是否重复

line-height: 1;//代表elixirs中的所有元素的行间距为其自己字体大小的1倍

}

width: 200px;

float: right;

}

background-color: #675c47;

color: #efe5d0;

text-align: center;

padding: 15px;

margin: 10px;

font-size: 90%;

clear: right;

}

width: 800px;

padding-top: 5px;

padding-bottom: 5px;

background-color: #675c47;

}

那么页面的宽度将被限制为800px，无论浏览器宽度如何变化都不会移动,但这会导致浏览器很宽时，右边有很多空白空间

凝胶布局 Jello

width: 800px;

padding-top: 5px;

padding-bottom: 5px;

background-color: #675c47;

margin-left: auto;

margin-right: auto;

}

绝对定位

position: absolute;

top: 100px;

right: 200px;

width: 280px;

}

display: table;

border-spacing: 10px;//于是不再需要div中的外边距

}

display: table-row;

}

display: table-cell;

background: #efe5d0 url(images/background.gif) top left;

font-size: 105%;

padding: 15px;

/ margin: 0px 10px 10px 10px; /

vertical-align: top;//确保表格两个单元格中的所有内容相对于单元格上边对齐，默认为中间对齐,可以设置为top,middle,bottom

}

display: table-cell;

background: #efe5d0 url(images/background.gif) bottom right;

font-size: 105%;

padding: 15px;

/ margin: 0px 10px 10px 10px; /

vertical-align: top;

}

Q3: CSS样式表代码布局基础教程

CSS样式表代码布局基础教程

CSS样式表代码布局基础教程—课程10：外部样式表(一)

十、外部样式表

外部样式表是把各种样式单独存在一个文件里，供其他多个网页调用，下面我们来看一个练习；

1、文本编辑器

1）打开记事本或 gedit、leafpad 文本编辑器，gedit 在查看菜单里选择“HTML”；

2）点菜单“文件－保存”命令，以“lx10.html”为文件名，类型所有文件，编码 UTF-8，保存到自己的文件夹；

3）按照基础02课的方法，输入、和的内容；

2、外部样式表

1）点菜单“文件－新建”，新建一个空白文档，保存文件名为 style.css ，位置跟 lx10 放一起，这是一个单独的文件；

2）在里面输入下面的内容；

/* by TeliuTe */

body {

background-color: #ccffff;

font-size:1.2em;

span {

color:#800000;

.myblue {

color:blue;

3）第一行 /* ... */ 是注释，注明作者版权用途等，根据自己的需要，

下面的内容跟内部样式表相同，各个标签和它的样式，保存一下文件；

4）回到 lx10.html 文档中，在 head 区内加上下面一行外部引用标识；

5）然后在 body 区内，输入下面的内容；

1）点菜单“文件－新建”，新建一个空白文档，保存文件名为 style.css ，位置跟 lx10 放一起，这是一个单独的文件；

6）保存一下文件，回到自己文件夹中，打开 lx10 网页，看一下效果；

7）在多个网页具有相同样式时，使用外部样式表可以节省空间和减小网页大小；

本节学习了外部样式表的使用方法，你成功地完成了本教程，欢迎继续学习本站的其他课程！

本教程由86团学校TeliuTe制作

（计算机基础知识，电脑知识入门学习，请到http://电脑知识网）

CSS标签大全(一)

字体属性：(font)

大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD

样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)

行高 line-height: normal;(正常) 单位：PX、PD、EM

粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)

变体 font-variant: small-caps;(小型大写字母) normal;(正常)

大小写 text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)

修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)

常用字体：(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

背景属性：(background)

色彩background-color: #FFFFFF;

图片background-image: url();

重复background-repeat: no-repeat;

滚动background-attachment: fixed;(固定) scroll;(滚动)

位置background-position: left(水平) top(垂直);

简写方法 background:#000 url(..) repeat fixe辅助图片一律用背景处理d left top;

区块属性： (Block)

字间距letter-spacing: normal; 数值

对刘text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)

缩进text-indent: 数值px;

垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;

词间距word-spacing: normal; 数值

空格white-space: pre;(保留) nowrap;(不换行)

显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)

方框属性：(Box)

width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左

边框属性： (Border)

border-style: dotted(点线); dashed(虚线); solid(实线); double(双线); groove(槽线); ridge;(脊状) inset;(凹陷) outset;

border-wid

th:; 边框宽度

border-color:#;

简写方法border：width style color;

列表属性： (List-style)

类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;

位置list-style-position: outside;(外) inside;

图像list-style-image: url(..);

定位属性： (Position)

Position: absolute; relative; static;

visibility: inherit; visible; hidden;

overflow: visible; hidden; scroll; auto;

clip: rect(12px,auto,12px,auto) (裁切) css属性代码大全

一 CSS文字属性：

color : #999999; /*文字颜色*/

font-family : 宋体,sans-serif; /*文字字体*/

font-size : 9pt; /*文字大小*/

font-style:itelic; /*文字斜体*/

font-variant:small-caps; /*小字体*/

letter-spacing : 1pt; /*字间距离*/

line-height : 200%; /*设置行高*/

font-weight:bold; /*文字粗体*/

vertical-align:sub; /*下标字*/

vertical-align:super; /*上标字*/

text-decoration:line-through; /*加删除线*/

text-decoration: overline; /*加顶线*/

text-decoration:underline; /*加下划线*/

text-decoration:none; /*删除链接下划线*/

text-transform : capitalize; /*首字大写*/

text-transform : uppercase; /*英文大写*/

text-transform : lowercase; /*英文小写*/

text-align:right; /*文字右对齐*/

text-align:left; /*文字左对齐*/

text-align:center; /*文字居中对齐*/

text-align:justify; /*文字分散对齐*/

vertical-align属性

vertical-align:top; /*垂直向上对齐*/

vertical-align:bottom; /*垂直向下对齐*/

vertical-align:middle; /*垂直居中对齐*/

vertical-align:text-top; /*文字垂直向上对齐*/

vertical-align:text-bottom; /*文字垂直向下对齐*/

二、CSS边框空白

padding-top:10px; /*上边框留空白*/

padding-right:10px; /*右边框留空白*/

padding-bottom:10px; /*下边框留空白*/

padding-left:10px; /*左边框留空白*/

三、CSS符号属性：

list-style-type:none; /*不编号*/

list-st

yle-type:decimal; /*阿拉伯数字*/

list-style-type:lower-roman; /*小写罗马数字*/

list-style-type:upper-roman; /*大写罗马数字*/

list-style-type:lower-alpha; /*小写英文字母*/

list-style-type:upper-alpha; /*大写英文字母*/

list-style-type:disc; /*实心圆形符号*/

list-style-type:circle; /*空心圆形符号*/

list-style-type:square; /*实心方形符号*/

list-style-image:url(/dot.gif); /*图片式符号*/

list-style-position: outside; /*凸排*/

list-style-position:inside; /*缩进*/

四、CSS背景样式：

background-color:#F5E2EC; /*背景颜色*/

background:transparent; /*透视背景*/

background-image : url(/image/bg.gif); /*背景图片*/

background-attachment : fixed; /*浮水印固定背景*/

background-repeat : repeat; /*重复排列-网页默认*/

background-repeat : no-repeat; /*不重复排列*/

background-repeat : repeat-x; /*在x轴重复排列*/

background-repeat : repeat-y; /*在y轴重复排列*/

指定背景位置

background-position : 90% 90%; /*背景图片x与y轴的位置*/

background-position : top; /*向上对齐*/

background-position : buttom; /*向下对齐*/

background-position : left; /*向左对齐*/

background-position : right; /*向右对齐*/

background-position : center; /*居中对齐*/

五、CSS连接属性：

a /*所有超链接*/

a:link /*超链接文字格式*/

a:visited /*浏览过的链接文字格式*/

a:active /*按下链接的格式*/

a:hover /*鼠标转到链接*/

鼠标光标样式：

链接手指 CURSOR: hand

十字体 cursor:crosshair

箭头朝下 cursor:s-resize

十字箭头 cursor:move

箭头朝右 cursor:move

加一问号 cursor:help

箭头朝左 cursor:w-resize

箭头朝上 cursor:n-resize

箭头朝右上 cursor:ne-resize

箭头朝左上 cursor:nw-resize

文字I型 cursor:text

箭头斜右下 cursor:se-resize

箭头斜左下 cursor:sw-resize

漏斗 cursor:wait

光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}

六、CSS框线一览表：

border-top : 1px solid #6699cc; /*上框线*/

border-bottom : 1px solid #6699cc;

/*下框线*/

border-left : 1px solid #6699cc; /*左框线*/

border-right : 1px solid #6699cc; /*右框线*/

以上是建议书写方式,但也可以使用常规的方式 如下:

border-top-color : #369 /*设置上框线top颜色*/

border-top-width :1px /*设置上框线top宽度*/

border-top-style : solid/*设置上框线top样式*/

其他框线样式

solid /*实线框*/

dotted /*虚线框*/

double /*双线框*/

groove /*立体内凸框*/

ridge /*立体浮雕框*/

inset /*凹框*/

outset /*凸框*/

七、CSS表单运用：

文字方块

按钮

复选框

选择钮

多行文字方块

下拉式菜单 选项1选项2

八、CSS边界样式：

margin-top:10px; /*上边界*/

margin-right:10px; /*右边界值*/

margin-bottom:10px; /*下边界值*/

margin-left:10px; /*左边界值*/

CSS 属性： 字体样式(Font Style)

序号 中文说明 标记语法

1 字体样式 {font:font-style font-variant font-weight font-size font-family}

2 字体类型 {font-family:"字体1","字体2","字体3",...}

3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}

4 字体风格 {font-style:inherit|italic|normal|oblique}

5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}

6 字体颜色 {color:数值;}

7 阴影颜色 {text-shadow:16位色值}

8 字体行高 {line-height:数值|inherit|normal;}

9 字 间 距 {letter-spacing:数值|inherit|normal}

10 单词间距 {word-spacing:数值|inherit|normal}

11 字体变形 {font-variant:inherit|normal|small-cps }

12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}

13 字体变形 {font-size-adjust:inherit|none}

14 字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

文本样式(Text Style)

序号 中文说明 标记语法

1

行 间 距 {line-height:数值|inherit|normal;}

2 文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}

3 段首空格 {text-indent:数值|inherit}

4 水平对齐 {text-align:left|right|center|justify}

5 垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}

6 书写方式 {writing-mode:lr-tb|tb-rl}

背景样式

序号 中文说明 标记语法

1 背景颜色 {background-color:数值}

2 背景图片 {background-image: url(URL)|none}

3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}

4 背景固定 {background-attachment:fixed|scroll}

5 背景定位 {background-position:数值|top|bottom|left|right|center}

6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}

框架样式(Box Style)

序号 中文说明 标记语法

1 边界留白 {margin:margin-top margin-right margin-bottom margin-left}

2 补 白 {padding:padding-top padding-right padding-bottom padding-left}

3 边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}

宽度值： thin|medium|thick|数值

4 边框颜色 {border-color:数值 数值 数值 数值} 数值：分别代表top、right、bottom、left颜色值

5 边框风格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}

6 边 框 {border:border-width border-style color}

上 边 框 {border-top:border-top-width border-style color}

右 边 框 {border-right:border-right-width border-style color}

下 边 框 {border-bottom:border-bottom-width border-style color}

左 边 框 {border-left:border-left-width border-style color}

7 宽 度 {width:长度|百分比| auto}

8 高 度 {height:数值|auto}

9 漂 浮 {float:left|right|none}

10 清 除 {clear:none|left|right|both}

分类列表

序号 中文说明 标记语法

1 控制显示 {display:none

|block|inline|list-item}

2 控制空白 {white-space:normal|pre|nowarp}

3 符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}

4 图形列表 {list-style-image:URL}

5 位置列表 {list-style-position:inside|outside}

6 目录列表 {list-style:目录样式类型|目录样式位置|url}

7 鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

word-wrap是控制换行的。使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。break-word是控制是否断词的。normal是默认情况，英文单词不被拆开。break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）ie下：使用word-wrap:break- word;所有的都正常。ff下：如这2个都不用的话，中文不会出任何问题。英文语句也不会出问题。但是，长串英文会出问题。为了解决长串英文，一般用 word-wrap:break-word;word-break:break-all;。但是，此方式会导致，普通的英文语句中的单词会被断开（ie下也是）。目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而已。即英文单词应不应该被断开那？那问题很明显了，显然不应该被断开了。对于长串英文，就是恶意的东西，自然不用去管了。但是，也要想些办法，不让它把容器撑大。用：overflow:auto; ie下，长串会自动折行。ff下，长串会被遮盖。所以，综上，最好的方式是word-wrap:break-word; overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。

CSS样式表代码布局基础教程—课程9：链接样式

九、链接样式

使用伪类可以设置链接的样式，比如改变颜色、去掉下划线等，下面我们来看一个练习；

1、文本编辑器

1）打开记事本或 gedit、leafpad 文本编辑器，gedit 在查看菜单里选择“HTML”；

2）点菜单“文件－打开”命令，打开自己文件夹里的lx7.html

3）再点菜单“文件－另存为”命令，保存文件名为 “lx9.html”

2、设置伪类

1）在 head 区内，输入内部样式表，设定各个 的锚标记样式，如下；

2）第一个 a 设定全局锚点的样式，用块显示、宽度是50像素、背景色是浅绿色，接下来是锚点 a 的成员：

link 是链接，设定页面中的链接样式，颜色蓝色，不带下划线，

visted 是访问过的链接，设定样式为栗色、不带下划线，

active 是按下鼠标时的链接，设定颜色为绿色、无下划线，

hover 是鼠标移过来悬停，设定颜色为红色、有下划线，背景色改成黄色，hover 放在其他几个成员的后面；

3）保存一下文件，回到自己的文件夹中，打开 lx9 网页，试着用鼠标点击、拖动链接，看一下效果；

本节学习了设置链接样式的基本方法，如果你成功地完成了练习，请继续学习下一课内容；

CSS样式表代码布局基础教程—课程8：内部样式表(一)

八、内部样式表

内部样式表放在网页的...区内，集中在一起方便管理，下面我们来看一个练习；

1、文本编辑器

1）打开记事本或 gedit、leafpad 文本编辑器，gedit 在查看菜单里选择“HTML”；

2）点菜单“文件－保存”命令，以“lx8.html”为文件名，类型所有文件，编码 UTF-8，保存到自己的文件夹；

3）按照基础02课的方法，输入、和的内容；

2、内部样式表

1）对系统标签使用样式，这会影响所有的这种标签，在 head 区输入下面的代码；

2）第一行是样式表开始，最后是样式表结束， 是注释标签，

首先是对 body 标签设置样式，这样凡是在 body 区里的内容，都会使用这个样式，设置背景色和文字大小

然后对 span 标签设置样式，设置内容的颜色，以后凡是用到 span 的地方，都使用这个颜色；

3）接着在 body 区里输入下面的内容；

1）对系统标签使用样式，这会影响所有的这种标签，在 head 区输入下面的代码；

4）保存一下文件，回到自己的文件夹里，打开 lx8 网页，看一下效果；

5）自定义样式选择符，除了系统的标签外，也可以自己定义需要的样式标记，在 head 的.样式表里加入下面的代码；

.myblue {

color:blue;

前面的点，表示这是一个通用的样式，可以重复使用，如果是 #号，表示是一个标识符，是专用唯一的 id，myblue 是自定义的样式名称；

6）在 body 区里加入下面的代码，加在上一行的前面，再加上

标签分成两段；

7）这儿使用的是 span，里面的 class 套用的是 myblue 样式，替换了前面设的样式，

保存一下文件，到浏览器中看看效果；

本节学习了使用内部样式表的基本方法，如果你成功地完成了练习，请继续学习下一课内容；

CSS样式表代码布局基础教程—课程7：ul列表(一)

七、ul 列表

对于排列有序的条目，可以使用列表来实现，下面我们来看一个练习；

1、文本编辑器

1）打开记事本或 gedit、leafpad 文本编辑器，gedit 在查看菜单里选择“HTML”；

2）点菜单“文件－保存”命令，以“lx8.html”为文件名，类型所有文件，编码 UTF-8，保存到自己的文件夹；

3）按照基础02课的方法，输入、和的内容；

2、使用列表（计算机基础知识，电脑知识入门学习，请到http://电脑知识网）

1）在后面接着输入下面的代码；

第一课

第二课

第三课

2）前面的

建立一个列表，里面的各个

是列表项，各个列表项排列对齐缩进，前面有一个圆点列表符号，

保存一下文件，到自己文件夹里，打开 lx7 网页，看看列表的效果，这儿加了 超级链接；

3）如果要去掉前面的圆点，可以在 ul 的样式里设定，前面的缩进也可以设定内边距为 0，输入下面的代码；

第一课

第二课

第三课

4）保存一下，再到浏览器里看一下，三个列表都排到了左边对齐；

5）如果要排列成横向水平的菜单样式，可以在每个列表项里加上 float 属性，防止重叠再设定一个宽度，代码如下；

6）保存一下，再到浏览器里看一下，三个列表项都水平排列了；

本节学习了列表的基本使用方法，如果你成功地完成了练习，请继续学习下一课内容；

CSS样式表代码布局基础教程—课程6：div布局(一)

六、div 布局

默认 div 占据一行，第二个 div 到下一行去，怎样用 div 进行分栏布局，我们来看一个练习；

1、文本编辑器

1）打开记事本或 gedit、leafpad 文本编辑器，gedit 在查看菜单里选择“HTML”；

2）点菜单“文件－打开”命令，打开上次的 lx5 网页，再点“文件－另存为”，以“lx6.html”为文件名，保存到自己的文件夹；

3）按照两列并排来进行布局；

2、定位布局

1）在下面加一个

标签，作为主框架，在标签里加入下面的样式；

2）前面的 id 是这个 div 的标识符，用来标记这个 div 容器，

在里面的样式里设置了颜色、边框、内边距，

设定了固定宽度 604，高度 202，这个可以计算出来，根据下面两列的宽度再加上内边距；

3）修改里面的古诗的 div 样式，加上背景色、去掉内外边距，最后加上一个左浮动 float:left

4）在这个后面，再加上另一个 div，样式相同，里面输入另一首古诗 ；

5）这儿的 float:left; 让这个 div 框，跟上一个框并排左对齐，而不是到下一行去，

最后再加一个标签，结束最外面的大框架；

6）保存一下文件，回到自己文件夹里，打开 lx6 网页看看效果；

本节学习了使用 div 布局的基本方法，如果你成功地完成了练习，请继续学习下一课内容；

;

Q4: 怎样创建css样式表？

CSS（层叠样式表）级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML

（标准通用标记语言的一个子集）等文件样式的计算机语言。

有三种方法可以在站点网页上使用样式表：

外联式Linking（也叫外部样式）：将网页链接到外部样式表。

嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。

内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。

在Dreamweaver 8中，可以在开始弹出框中点击新建CSS文件。也可以在最上面的菜单栏里占击

文件，新建。在弹出框中选择CSS文件就可以了。

Q5: CSS样式是什么？

CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

简单举例：

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

HTML

HEAD

TITLE New Document /TITLE

META http-equiv="Content-Type" content="text/html; charset=gb2312"

META NAME="Generator" CONTENT="EditPlus"

!-- 样式表开始 --

style

a.aa{COLOR:#FF0000; TEXT-DECORATION: none; Cursor:hand}

/style

!-- 样式表结束 --

/HEAD

BODY

A HREF="#" class="aa"用了样式表/ABR

A HREF="#"不用样式表/ABR

/BODY

/HTML