css层叠样式表实例,css层叠样式表的三种类型

什么是CSS样式，怎样定义和使用它？

CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。链入外部样式表文件 (Linking to a Style Sheet) 你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下： head titletitle of article/title link rel=stylesheet href=" " type="text/css"/head 而在XML中，你应该如下例所示在声明区中加入： ? xml-stylesheet type="text/css" href=" " ?定义内部样式块对象 (Embedding a Style Block) 你可以在你的HTML文档的HTML和BODY标记之间插入一个STYLE.../STYLE块对象。 定义方式请参阅样式表语法。示例如下： html style type="text/css" !-- body {font: 10pt "Arial"} h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon} h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue} p {font: 10pt/12pt "Arial"; color: black} -- /style body 请注意，这里将style对象的type属性设置为"text/css"，是允许不支持这类型的浏览器忽略样式表单。 内联定义 (Inline Styles) 内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下： 这一行被增加了左右的外补丁 样式表语法 (CSS Syntax) Selector { property: value } 参数说明： Selector -- 选择符 property : value -- 样式表定义。属性和属性值之间用冒号(:)隔开。定义之间用分号(;)隔开 继承的值 (The ' Inherit ' Value) 每个属性都有一个指定的值：Inherit。它的意思是：将父对象的值等同为计算机值得到。这个值通常仅仅是备用的。显式的声明它可用来强调。 选择符说明： #表示选择id .表示选择class 比如我有个 这时就得用#test{属性}来给id为test的div来制定样式 而 则应该用.test{属性}来给其指定样式。 编辑本段根据分辨率不同，调用不同的css文件 dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0 SCRIPT LANGUAGE="javascript" !-- if (window.navigator.userAgent.indexOf("MSIE")=1) { var IE1024=""; var IE800=""; var IE1152=""; var IEother=""; ScreenWidth(IE1024,IE800,IE1152,IEother) }else{ if (window.navigator.userAgent.indexOf("Firefox")=1) { file://如果浏览器为Firefox var Firefox1024=""; var Firefox800=""; var Firefox1152=""; var Firefoxother=""; ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother) }else{ file://如果浏览器为其他 var Other1024=""; var Other800=""; var Other1152=""; var Otherother=""; ScreenWidth(Other1024,Other800,Other1152,Otherother) } } function ScreenWidth(CSS1,CSS2,CSS3,CSS4){ if ((screen.width == 1024) (screen.height == 768)){ setActiveStyleSheet(CSS1); }else{ if ((screen.width == 800) (screen.height == 600)){ setActiveStyleSheet(CSS2); }else{ if ((screen.width == 1152) (screen.height == 864)){ setActiveStyleSheet(CSS3); }else{ setActiveStyleSheet(CSS4); }}} } function setActiveStyleSheet(title){ document.getElementsByTagName("link")[0].href="style/"+title; } ; /SCRIPT 解释： var IE1024=""; var IE800=""; var IE1152=""; var IEother=""; 引号里面分别填写，用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名. var Firefox1024=""; var Firefox800=""; var Firefox1152=""; var Firefoxother=""; 引号里面分别填写，用户使用FF的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名. var Other1024=""; var Other800=""; var Other1152=""; var Otherother=""; 引号里面分别填写，用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名. 不判断分辨率，只判断浏览器 应E.Qiang提议，编如下代码。实现根据浏览器类型自动调用不同CSS。 代码： SCRIPT LANGUAGE="javascript" !-- if (window.navigator.userAgent.indexOf("MSIE")=1) { file://如果浏览器为IE setActiveStyleSheet("default.css"); }else{ if (window.navigator.userAgent.indexOf("Firefox")=1) { file://如果浏览器为Firefox setActiveStyleSheet("default2.css"); }else{ file://如果浏览器为其他 setActiveStyleSheet("newsky.css"); } } function setActiveStyleSheet(title){ document.getElementsByTagName("link")[0].href="style/"+title; } ; /SCRIPT 解释： 如果浏览器为IE，则调用default.css 如果浏览器为Firefox，则调用default2.css 如果浏览器为其他，则调用newsky.css 用法：放在head/head中即可。 中国专业css标准化推广网站 【Div之家】 css 层叠样式表 引入层叠样式表的方法包括： 1，外联式样式表 2，内嵌样式表 3，元素内定 4，导入样式表 外联式样式表 例：head link rel="stylesheet" href="/css/default.css" /head body .... /body /html 属性：rel 用来说明link元素在这里要完成的任务是连接一个独立的css文件。而href属性给出了所要连接css文件的url地址 内嵌式样式表： 例：html head style type="text/css" !-- td{font:9pt;color:red} .font105{font:10.5pt;color:blue} -- /style /head body..../body /html 元素内定 格式： 导入式样式表 〈html head style type="text/css" !-- @import url(css/home.css); -- /style body .... /body /html

相关问答

Q1: css层叠样式表有哪几种类型

CSS（Cascading Style Sheets）

层叠样式表

优势：

CSS可以提高页面的浏览速度。

缩短改版时间，降低维护费用。

强大的字体控制能力和排版能力。

css容易编写。

可以一次设计随处发布。

更好的控制页面布局。

实现表现和结构、内容相分离。

更方便搜索引擎的搜索/page Rank

样式规则：

语法：选择器｛属性1：值1；属性2：值2；...属性N：值N；｝

选择器就是要改变页面中的哪些标签元素

声明要用｛｝括起来，；结束

如果属性中包含空格要用“”括起来

可以指定多个选择器使用相同的样式

样式表：

外部样式表，新建.css文件，在文件中写入样式规则link rel="stylesheet" href = "xxx.css"

内联样式表，在元素中添加style属性

嵌入式样式表，在html使用style标签，style type="text/css"/style

选择器：

元素选择器，元素名

id选择器，用#id

类选择器，用.class

后代选择器，选择器1 选择器2

css深化：

就近原则，！important提高元素优先级，伪类选择器，伪对象选择器，@import导入其他css文件，响应式布局可以解决多设备的兼容问题。

文本属性：

font-family：字体

font-size：字体大小

font-style：斜体

font-weight：粗体

color：颜色

line-height：行高

letter-spacing：字符间距

text-decoration：文本修饰

text-overflow：文字溢出处理

white-space : no wrap

text-overflow:hidden

text-align：文本对齐

背景属性：

background-color：背景颜色

background-image：背景图片

background-repeat：背景重复

background-attachment：背景图片附着

基于占满一整行与否，标签分为两大类（文档流）：

占满：行级元素（div，p，h1~h6）

不占满：行内元素（span，）

定位属性：

position：定位

absolute：绝对定位

relative：相对定位

Q2: 创建css层叠样式表

如果想让CSS控制页面的样式，就需要加载CSS文件，这里有四种方式，行内方式、内嵌方式、链接方式、导入方式。

【行内方式】

行内样式是所有加载CSS方式种最为直接的一种，他直接对HTML的标记使用style属性，然后将CSS代码直接写在其中。

p style=”background:#900; border:1px #333 dashed; margin:5px;”CSS学习网/p

【内嵌方式】

内嵌方式是将CSS写在head/head之间，并且用style/style标记进行声明，如：

html

head

title小叶子/title

style type=”text/css”

.red { color: #900; font-size:14px; font-weight:bold;}

/style

/head

body

p class=”red”小叶子/p

/body

/html

【链接方式】

链接方式是使用频率最高的，也是最实用的方法。他将HTML页面本身与CSS样式分离为两个或者多个文件，视线了页面框架HTML代码与CSS代码的完全分离，是的前期制作和后期维护都十分方便，网站后台的技术人员与美工设计者也可以很好的分工合作。

而其对于同一个CSS文件可以连接到多个HTML文件中，甚至可以连接到整个网站的所有页面中，似的网站整体风格统一、协调，并且后期维护的工作量也大大减少。样式为：

html

head

title小叶子/title

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

/head

body

… …

/body

/html

===============================================

楼主的图片几乎都是使用绝对路径，这样不便迁移的，使用相对路径更好。

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

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

question:{

qid:'1708728378115901940',

cid:'',

quid: '303487790',

score:'0',

import_id:'1580',

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

replyNum:"1" ,

createTime: '1577951036',

replyCount: '2',

content: '',

update_time: '0',

singleRid: '3144868738',

ext_word: '',

status: '0',

is_appeal: 0,

deleted: 0

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

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

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

,category_v1: '信息技术'

},

bestAnswerCount: '1',

isMyQuestion: 0,

answerKey: 0,

adsAll:{

youx:'',

adsEids: null

},

adsEids: {

asp: [289,11102]

},

nettype:'0',

word: '' || '',

evaSampling_lowVal: '-1',

pageType: 'single',

sourceIsOut: 0,

argueNum: 0

});

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

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

F.context('feedbackInfo', {

feedback: '1',

feedback_rid: 0

});

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7.2.3ID\\u9009\\u62e9\\u5668

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

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

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

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

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

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

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

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

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

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

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

\\u56fe1

\\u56fe2

\\u56fe4

\\u56fe5

\\u56fe6

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

}();

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

var searchContainer = '#search-box';

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

header.init(headerContainer,{

nettype: '0',

frameQids: [],

isLogin: 0,

searchWord: "",

anonymousAsk: 0,

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

});

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

var offsetX = -51;

var offsetY = 38;

search.init(headerContainer, searchContainer, {

x: offsetX,

y: offsetY

});

});

}();

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

}();

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

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

});

}();

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

operation.init();

});

}();

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

title.init({

qid:'1708728378115901940',

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

descContent:'',

descSupply: '',

imgUrl:'[]',

supImgUrl:'[]',

videoInfo: null,

});

});

}();

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

plugin.init({

un : "飞扬天地间_ZM",

uid : "51e54069236f25705e795933",

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

businessId: "100593",

pageType: "single"

})

})

}();

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

mod.init();

})

}();

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

replyAd.init({

ptrId: '100593',

ptrRole: 'business'

});

});

}();

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

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

setTimeout(function(){

detail.init({

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

foldHeight: '778',

longFoldFlag: +'',

isFoldAnswer: '1',

evaluatedType: '0',

uid: '51e54069236f25705e795933',

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

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

\u4ec0\u4e48\u662fCSS\u6837\u5f0f

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

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

CSS\u6837\u5f0f\u7684\u4f18\u52bf

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7.2.1\u6807\u7b7e\u9009\u62e9\u5668

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

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

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

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

7.2.2\u7c7b\u522b\u9009\u62e9\u5668

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

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

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

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

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

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

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

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

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

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

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

7.2.3ID\u9009\u62e9\u5668

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

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

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

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

7.3.1\u5b50\u9009\u62e9\u7b26

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

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

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

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

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

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

\u56fe1

\u56fe2

\u56fe4

\u56fe5

\u56fe6

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

naResource: 'viewer-middle',

classId: '',

data: 'rdarc637962',

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

});

})

}();

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

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

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

})

}();

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

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

relateQuestion.init({

container: '#qyvrk637962-related-list',

mixClass: '#qyvrk637962',

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

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

Q4: 什么是css，如何定义css，在html里如何使用css

什么是css？

css ：叠层样式表（Cascading Style Sheets），是能够真正做到网页表现与内容分离的一种样式设计语言。通俗的讲，可以把网页内容以更好的方式呈现在用户面前。

如何定义css？

定义css分三类：

标签元素

body,ul,li等，直接定义 ，格式：标签名{属性：样式};body{font-size:12px;}

类定义 在前面都是要加点

.top{margin-top:20px;}

id定义，id定义是样式里做高的，一般不建议用。id定义用#

#footer{ margin-top:20px;}

在html里如何使用css？

使用方式可以分三种：

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

     表现形式为：

html

head

!----头部部分-----

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

/head

body

!----内容部分-----

/body

/html

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

     表现形式为：

body

   div class="btn"

      p这是一段话/p

   /div

/body

style

body {margin:0; padding:0;}

.btn {border:1px #ccc solid; width:500px; height:300px;background:#fbfbfb;}

.btn p {font-size:21px;}

/style

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

     表现形式为：

body

   div class="btn"

      p style="font-size:21px;"这是一段话/p

   /div

/body

Q5: css 层叠样式表 解释

.nav_main ul li a#nav_current

这个一长串的 解释是： 类名为nav_main的元素里面的 ul标签里面的 li里面的 id号为a的该元素

对应的基本 html标签框架为：

div class="nav_main"

ul

lia href="" id="nav_curent"CCC/a/li

lia href=""CCC/a/li

/ul

/div

其实 他这个写法都有多余了 不怎么规范

因为id本来就是 唯一选择符 同一个页面 id 不应该重名的。

如果那个是class类名呢，还可以理解

其实只要 记住 一个标签后面在 跟一个类名或者 id 主要是提高其权重。 使其变为唯一性

如：div

p class="a"dddddd/p

pddddd/p

div

div p.a{color:#f00;} div P{color:#fff;}

前者者的权重大于后者 此时按一般的原则 后面的 属性覆盖前面的 但是 这里 他 只会是执行

color:#f000;

列子不全面，总之：就是为了提高权重 单独控制哪一个