css常规样式,常用的css样式

css排版样式有哪几种类型

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

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

css是英文Cascading Style Sheets的缩写。

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

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

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

以div为例

行内样式写法：

在style里面写样式

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

内部样式：

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

style

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

/style

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

举个例子：

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

在里面写入

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

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

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

相关问答

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

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

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

十、外部样式表

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

1、文本编辑器

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

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

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

2、外部样式表

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

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

/* by TeliuTe */

body {

background-color: #ccffff;

font-size:1.2em;

span {

color:#800000;

.myblue {

color:blue;

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

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

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

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

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

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

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

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

本教程由86团学校TeliuTe制作

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

CSS标签大全(一)

字体属性：(font)

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

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

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

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

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

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

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

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

背景属性：(background)

色彩background-color: #FFFFFF;

图片background-image: url();

重复background-repeat: no-repeat;

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

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

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

区块属性： (Block)

字间距letter-spacing: normal; 数值

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

缩进text-indent: 数值px;

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

词间距word-spacing: normal; 数值

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

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

方框属性：(Box)

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

边框属性： (Border)

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

border-wid

th:; 边框宽度

border-color:#;

简写方法border：width style color;

列表属性： (List-style)

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

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

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

定位属性： (Position)

Position: absolute; relative; static;

visibility: inherit; visible; hidden;

overflow: visible; hidden; scroll; auto;

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

一 CSS文字属性：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

vertical-align属性

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

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

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

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

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

二、CSS边框空白

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

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

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

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

三、CSS符号属性：

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

list-st

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

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

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

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

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

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

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

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

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

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

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

四、CSS背景样式：

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

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

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

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

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

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

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

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

指定背景位置

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

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

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

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

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

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

五、CSS连接属性：

a /*所有超链接*/

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

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

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

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

鼠标光标样式：

链接手指 CURSOR: hand

十字体 cursor:crosshair

箭头朝下 cursor:s-resize

十字箭头 cursor:move

箭头朝右 cursor:move

加一问号 cursor:help

箭头朝左 cursor:w-resize

箭头朝上 cursor:n-resize

箭头朝右上 cursor:ne-resize

箭头朝左上 cursor:nw-resize

文字I型 cursor:text

箭头斜右下 cursor:se-resize

箭头斜左下 cursor:sw-resize

漏斗 cursor:wait

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

六、CSS框线一览表：

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

border-bottom : 1px solid #6699cc;

/*下框线*/

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

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

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

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

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

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

其他框线样式

solid /*实线框*/

dotted /*虚线框*/

double /*双线框*/

groove /*立体内凸框*/

ridge /*立体浮雕框*/

inset /*凹框*/

outset /*凸框*/

七、CSS表单运用：

文字方块

按钮

复选框

选择钮

多行文字方块

下拉式菜单 选项1选项2

八、CSS边界样式：

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

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

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

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

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

序号 中文说明 标记语法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

文本样式(Text Style)

序号 中文说明 标记语法

1

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

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

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

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

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

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

背景样式

序号 中文说明 标记语法

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

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

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

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

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

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

框架样式(Box Style)

序号 中文说明 标记语法

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

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

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

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

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

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

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

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

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

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

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

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

8 高 度 {height:数值|auto}

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

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

分类列表

序号 中文说明 标记语法

1 控制显示 {display:none

|block|inline|list-item}

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

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

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

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

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

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

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

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

九、链接样式

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

1、文本编辑器

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

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

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

2、设置伪类

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

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

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

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

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

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

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

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

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

八、内部样式表

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

1、文本编辑器

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

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

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

2、内部样式表

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

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

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

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

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

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

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

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

.myblue {

color:blue;

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

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

标签分成两段；

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

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

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

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

七、ul 列表

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

1、文本编辑器

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

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

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

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

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

第一课

第二课

第三课

2）前面的

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

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

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

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

第一课

第二课

第三课

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

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

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

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

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

六、div 布局

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

1、文本编辑器

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

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

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

2、定位布局

1）在下面加一个

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

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

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

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

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

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

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

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

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

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

;

Q2: CSS常用样式二

实际应用，更多的使用italic属性值

实际应用中， 行高的数值通过设计图获取， 量取数值时需要使用一些辅助软件工具

选中文字工具，属性选中：不消除锯齿

字体、 字号、 行高、 加粗、 斜体 都是font综合属性的单一属性。

font属性五个单一属性的值可以进行合写， 属性值可以有2到多个， 值之间用空格进行分隔。

font进行综合书写时， 必须有字号和字体参与， 而且必须字号在前， 字体在后， 不能颠倒顺序。

font属性经常对字体、 字号、 行高进行合写， 书写顺序必须是字号、 行高、 字体， 字号和行高之间必须用/进行分隔

如果font属性需要设置加粗和斜体， 两个属性值只能写在最前面， 两个值之间可以互换位置。 后面的字号、 行高、 字体不能更改位置

作用：设置文本整体是否有线条的装饰效果

作用：设置段落首行是否进行缩进

实际应用中，常用em

属性值区分正负， 正数表示向右缩进， 负数表示向左缩进

浏览器控制台中的盒模型图

作用： 设置可以添加元素内容的区域的宽度。

作用： 设置可以添加元素内容的区域的高度。

如果一个元素不添加 height 属性， 默认属性值为auto， 浏览器会自动计算出实际高度， 也就是是内部元素内容自动撑开的高度。 元素的高度自适应内部内容的高度。

书写四个方向单一属性时， 一般是按照顺时针规律书写： 上、 右、 下、 左

设置四个属性值， 分配方向上、 右、 下、 左。

设置三个值分配给上、 左右、 下。

设置两个值， 分配给上下、 左右 。

设置属性值只有一个， 四边的值相同。

作用： 设置边框的颜色。

属性值： 颜色名或颜色值， 整体类似 padding 综合属性写法。

每个单一属性都必须与复合属性 border 一致， 设置三个属性值。

书写四个方向单一属性时， 一般是按照顺时针规律书写： 上、 右、 下、 左

设置四个属性值， 分配方向上、 右、 下、 左。

设置三个值分配给上、 左右、 下。

设置两个值， 分配给上下、 左右 。

设置属性值只有一个， 四边的值相同。

给 body 标签设置整体文字样式， 让大部分后代标签全部去继承

设计图中盒子高度占位是固定的， 后面同级元素在高度下面加载。多余内容会溢出盒子。

设置了高度的盒子， 如果内部元素的加载高度超过父级， 会溢出。可以通过一个溢出的属性 overflow， 进行溢出部分内容的显示效果设置。

要求盒子高度必须自适应内部内容的高度。

或者设置height的属性值是自动的。

一个元素内部嵌套的子元素， 在父元素中居中。

针对类似 div 样式上必须独占一行的盒子， 如果子盒子宽度低于父盒子宽度， 可以设置子盒子的 margin 值， 水平方向的值都设置为 auto。

原因： auto 只在水平方向有作用， 水平方向的 margin 如果设置为 auto， 边距会自动无限增大， 直到撑满整个父元素除了子元素宽度之外剩余的区域， 如果两个水平方向都是 auto， 两边都要无限大， 只能达到一个平衡， 两边距离相同， 导致盒子居中。

一般情况下， 一个父元素内部可以放一个或多个子元素， 而且多个子元素要排成一行显示， 必须保证父元素的宽度一定要足够（不考虑溢出情况） ， 需要遵循一个设置尺寸的规律： 所有子元素的宽度加在一起不能大于父元素的宽度 width。父元素的width ≥ 所有子元素width + padding + border + margin

如果不满足条件： 要么多余的子元素掉下来不能在一排， 要么溢出父元素

父子盒模型中， 只有一个子元素， 且子元素是类似 div 标签必须占一行的。不设置子元素的 width 属性， 子元素的 width 属性值会自动加载父级元素的 width。如果同时设置了子元素水平方向的 padding 和 border 、 margin， 不需要手动去进行内减， 子元素的 width 会自动收缩尺寸。

子元素所有的水平方向的位置所有属性的加和等于父元素的 width 。

在垂直方向如果有两个元素的外边距有相遇的， 浏览器中加载的真正的外边距不是两个间距的加和， 而是两个边距中值较大的， 边距值小的塌陷到了边距值大的值内部。

上面的元素有下边距， 下面的元素有上边距， 两个边距相遇， 真正的盒子间距离是较大的那个值

父子元素之间也会出现 margin 塌陷， 父元素和子元素都设置了同方向的margin-top 值， 两个属性之间没有其他的内容进行隔离， 导致两个属性相遇， 发生margin 塌陷。

本身父元素与上一个元素的距离是0， 子元素如果设置了垂直方向的上边距， 会带着父级一起掉下来。

水平方向的 margin 没有塌陷现象。

在标准流中， 大部分元素是区分等级的， 习惯将元素划分为几种常见的加载级别：块级元素、 行内元素、 行内块元素等。

大部分容器级标签包括p标签都是块级元素， 比如 div 、 h1 等。

大部分的文本级标签， 比如 span、 a、 b 等。

比如 img、 input 等。

可以通过 display 属性更改一个标签的显示模式。

属性值： 元素根据属性值不同， 可以加载对应元素等级的显示模式的特点。

display 属性更改的显示模式并没有改变标准流本质性质， 页面还是只能从上往下加载， 存在空白折叠现象等微观性质。 要想实现更多的界面布局效果需要脱离标准流的限制。

标签元素脱离标准流的方法包括： 浮动、 绝对定位、 固定定位。

margin 塌陷现象出现在标准流中的， 浮动元素已经脱离标准流， 不再具有 margin塌陷现象。

与前面压盖效果结构类似， 同级元素中前面的元素浮动， 后面的元素不浮动， 不浮动的元素内部还有一些文字， 浮动的蓝盒子会压盖住粉盒子的一部分， 但是文字内容不会被盖住， 粉盒子中的文字会让开蓝盒子位置， 围绕它进行加载。这种效果称为字围现象。

可以利用字围现象制作一些特殊的图文混排布局效果

给标准流的父元素强制给一个合适的高度

作用： 清除标签元素自身受到的前面的浮动元素的影响。

给标准流父元素添加 clear 属性， 父元素不受前面浮动影响， 不会再占有浮动让出的位置。

给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden; 属性， 可以解决浮动的所有问题。

父元素有了高度后， 可以管理住内部所有的浮动元素， 不会延伸到后面标签中影响贴边。

a 标签可以根据用户行为不同， 划分为四种状态， 通过a 标签的伪类可以将四种状态选中设置为不同的样式效果， 用户触发对应行为， 就可以加载对应的样式。

一般会将访问前和访问后状态设置为一样的效果， 保证了页面的统一性， 可以选择性的设置鼠标移上和鼠标点击状态。

更加常用的一种设置方式如下：

a 标签任何普通的选择器， 可以同时选中四种状态， 可以将四种状态设置为相同的样式， 属性可以设置所有的 a 默认显示样式的属性， 包括盒模型、 文字等。

a:hover 伪类选择器： 设置鼠标移上时不一样的样式属性。

属性值都是使用代表方向的单词进行书写。

使用像素值作为背景定位的属性值。

百分比表示法使用百分比数字作为属性值。

100%代表的数值：

background 属性可以将五个单一属性的值进行合写。

属性值： 可以有 1-5 个属性值， 值之间用空格进行分隔， 背景定位的两个属性值算作一个属性值， 不能被分开也不能颠倒顺序。 五个属性值之间可以互换位置。

在h1 标签是权重最高的标签， 一般会在内部书写最重要的内容， 比如 logo 图片、 最大的标题等。

另外 h1 内部的文字， 可以帮助提高 SEO 搜索排名。

在设置的是 logo 图片时， 如果使用插入图， 就不能书写搜索关键字。

如果想解决 SEO 问题， 可以将 HTML 结构中， 插入图换成搜索关键字， 然后使用 css 添加背景图给 a 标签或 h1 标签。

在一个盒子中有背景图部分， 而且有文字内容， 文字会让开背景图区域进行加载，

背景区域应该使用 padding 挤出位置。

四个方向的 padding 都可能用于添加背景图。

当用户访问一个网站时， 需要向服务器发送请求， 网页上的每张图像都要经过一次求才能展现给用户。

然而， 一个网页中往往会应用很多小的背景图像作为修饰， 当网页中的图像过多时，服务器就会频繁地接受和发送请求， 这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数， 提高页面的加载速度， 出现了 CSS精灵技术（也称 CSS Sprites、 CSS 雪碧） 。

CSS 精灵是一种处理网页背景图像的方式。

它将一个页面涉及到的所有零星背景图像都集中到一张大图中去， 然后将大图应用于网页， 这样， 当用户访问该页面时， 只需向服务发送一次请求， 网页中的背景图像即可全部展示出来。

通常情况下， 这个由很多小的背景图像合成的大图被称为精灵图。

CSS3 支持背景半透明的写法， 颜色值增加了一种 rgba 模式。

rgba 模式 ： 在 rgb 基础上增加了一个不透明度的设置， 不透明度 alpha 取值范围在0-1 之间， 0 表示完全透明， 1 表示完全不透明， 0.5 表示半透明。

书写方式： rgba(红色， 绿色， 蓝色， 不透明度)

注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响。

通过 background-size 设置背景图片的尺寸， 就像我们设置 img 的尺寸一样， 在移动 Web 开发中做屏幕适配应用非常广泛。

CSS3 中规定， 一个盒子上， 可以添加多个背景图片。

background-image 的属性值书写时， 以逗号分隔多背景的 URL路径地址。

注意： 背景加载时， 先写的背景压盖后写的背景图片。

属性名： position。

作用： 设置定位的元素， 它需要根据某个参考元素发生位置的偏移。

定位的元素要想发生位置的移动， 必须搭配偏移量属性进行设置。

水平方向： left、 right。

垂直方向： top、 bottom。

属性值： 常用 px 为单位的数值， 或者百分比。

子绝父相、 子绝父绝、 子绝父固

属性值： absolute， 绝对的意思。

参考元素： 参考的是距离最近的有定位的祖先元素， 如果祖先都没有定位， 参考body。必须搭配偏移量属性才会发生位置移动。

性质： 绝对定位的元素脱离标准流， 会让出标准流位置， 可以设置宽高， 也可以随时定义位置， 绝对定位的元素不设置宽高只能被内容撑开。

注意1： 绝对定位的参考元素是不固定的， 不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同， 具体位移效果不同。

注意2： 在绝对定位中， 由于参考点不同， left 正值不再等价于 right 的负值。

以 body 为参考元素时， 参考点的确定与偏移量方向有关

第一， 如果有 top 参与的定位， 参考点就是 body 页面的左上顶点和右上顶点。 自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。

第二， 如果有 bottom 参与的绝对定位， 参考点是 body 页面首屏的左下顶点或右下顶点。 对比点是盒子的所有盒模型属性最外面的左下角或右下角。

实际应用中， 如果以 body 为参考元素， 不同分辨率的浏览器中， 绝对定位的元素位置是不同的， 所以较少使用 body 作为参考元素。

祖先级为参考元素

如果祖先级中有定位的元素， 就不会去参考 body 。

参考元素： 参考的是祖先元素中有任意定位的， 在 HTML 结构中距离目标最近的祖先。

如果绝对定位的参考元素是某个祖先级， 参考点是盒子 border 以内的四个顶点， 组合方向决定了参考点。 绝对定位的元素只关心对比点和参考点之间的距离， 会忽视参考元素的 padding 区域。

所有的定位类型都可以实现压盖效果。

由于绝对定位的元素脱标， 不占标准流位置， 压盖效果更彻底， 实际工作中， 常见的是 绝对定位制作压盖。

定位的元素不区分定位类型， 都会去压盖标准流或浮动的元素。

如果都是定位的元素， 在 HTML 中 后写定位压盖先写的定位 。

更改定位的元素的压盖顺序， 设置一个 z-index 属性。

属性值： 数字。

Q3: 常用重要CSS样式的属性

盒子模型是CSS中一个很重要的概念，页面中的所有元素都可以看成一个盒子，并占据一定的页面空间，一个页面由很多盒子组成，盒子之间会互相影响。只有掌握盒模型以及其中每个属性的用法，才能真正控制好页面元素。

盒子模型主要定义四个区域： 内容(content)、内边距/填充(padding)、边框(border)和外边距(margin) 。

盒子的内容区域存放文本和图片等页面元素，拥有如下属性：

边框基本属性：

通过一个属性设置四个方向边框的宽度、样式、颜色

属性：border

取值：width style color;

只设置某一条边框的宽度、样式、颜色

语法：border-方向（top/right/bottom/left）：width style color;

只设置边框的宽度、样式、颜色中的一种

语法：border-属性（width/style/color）：取值;

只设置某一条边框的宽度、样式、颜色中的一种

语法：border-方向（top/right/bottom/left）-属性（width/style/color）：取值;

属性：border-radius

作用：设置倒角位置处圆的半径，半径越大，弧度越大。

取值：

属性：border-image

语法：

border-image-source ：引入背景图片

取值：

默认值：无图片

url(图片URL地址)

border-image-slice ：切割引入背景图片，把边框背景切成9份

取值：

number：默认单位px

百分比：

fill：保留边框图像的中间部分

border-image-width ：指定边框图片的宽度

border-image-repeat ：指定边框背景图片的排列方式，可定义2个参数，即水平和垂直方向

取值：

Stretch：默认值，拉伸

Repeat：平铺

Round：取整平铺

内容区域和边框（边缘）之间的距离

语法：padding: 值；

单边设置：padding-方向（top/right/bottom/left）:值；

取值：

数值px

百分比

内边距的简写方式：

padding:value;

四个方向内边距的值均为value

padding:value1 value2;

Value1为上下内边距的值，value2为左右内边距的值

padding:value1 value2 value3;

Value1为上内边距的值，value2为左右内边距的值，value3为下内边距的值

padding:value1 value2 value3 value4;

上右下左内边距的值分别为value1， value2， value3， value4

外边距指元素与元素之间的距离，即围绕在元素边框之外的空白区域，通过外边距可以为元素创建额外的“空间”。默认不能被其他元素所占据，用于拉伸两个元素间的距离。

语法：margin: 值；

单边设置：margin-方向（top/right/bottom/left）:值；

取值：

重新制定元素尺寸计算模式

属性：box-sizing

取值：

属性：resize

取值：

位于元素边框之外的一条线

属性：

outline：width style color;

属性：box-shadow

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

取值：由一组值构成的值列表

属性：background-color

取值：颜色值或transparent

注意：背景颜色是从边框位置处开始绘制

属性：background-image

取值：url(背景图像URL)

属性：background-repeat

取值：

属性：background-attchment

取值：

scroll：默认值，滚动

fixed：固定

属性：background-position

取值：

属性：background-size

取值：

属性：background-origin

取值：

属性：background-clip

取值：

CSS3多背景通过为每个背景属性提供多个属性值实现。

font 简写属性语法：

将所有字体属性合写为一行，其中font-family是复合属性中必不可少的属性。

可以不设置其中的某个值，如果省略值地话，就使用属性的默认值。

②文本属性：

（2）CSS3文本阴影属性：

属性：text-shadow

作用：产生阴影和模糊主体

语法：

作用：定义列表的编号样式

属性：list-style-type

作用：用于设置列表项的图像属性

语法：

图像URL地址：图像的相对路径或绝对路径

none：默认值，不指定图像

注意：图片图标与文字之间的距离在不同浏览器中是不一样的，因此，一般情况下不采用这种方式来设置列表的图片样式。

通过设置li的背景图片的方式来设置列表图片基本步骤：

设置list-style-type属性值为none

设置li标记的背景属性backgruond

作用：用于声明列表标志相对于列表项内容的位置

语法：

作用：可以同时设定列表样式类型、列表样式位置、列表样式图片等属性的值。

语法：

注意：

可以不设置其中的某个值，未设置的属性采用默认值

同时指定list-style-image和list-style-type时，list-style-image优先显示，除非list-style-image设置为none，或图片路径错误无法显示

当列表与列表项目同时使用样式时，列表项目的样式优先显示

特点：

可以设置宽度和高度

默认情况下每个块级元素独占一行

作用：

块级元素主要用于页面布局

常用块级元素：

div、p、h1~h6、ol、ul等

特点：

不可以设置宽度和高度，其宽度就是自身文字或图片的宽度

默认情况下多个行内元素会在一行内显示，遇父元素边界时会自动换行

作用：

行内元素主要用于设置文样式

常用行内元素：

a、span、em、b、i、strong、img、input等

作用：控制页面元素脱离原有文档流，实现向左或向右移动，直到该元素外边缘碰到其包含框或另一个浮动框的边缘停止，标准流中的其他盒子将顶到浮动盒子的位置。浮动的元素不占据实际空间。

属性： float

取值：

浮动元素不会相互重叠；

浮动元素不会上下浮动，如果一个浮动元素在另一个浮动元素之后显示，而且会超出容纳块，则它下降到低于先前任何浮动元素的位置。

作用：规定元素的哪一侧不允许出现其他浮动元素。

取值：

作用：控制页面元素在页面中的位置。

属性：position

取值：static/relative/absolute/fiexed

默认属性值，元素按照标准文档流进行排列，块级元素独占一行， 行内元素位于一行内显示，一行显示不下，自动换行。

特点：

相对于自身原有位置进行偏移

仍处于标准文档流中

随即拥有偏移属性和z-idex属性

偏移属性:

left:数值px;

right:数值px;

top:数值px;

bottom:数值px;

当元素相对定位后会产生Z轴上的堆叠，不设置z-index属性时，默认该元素出现在X轴和Y轴构成的平面上。

特点：

建立了以包含块为基准的定位

绝对定位的元素的位置相对于最近的已定位祖先元素（设定了绝对定位、相对定位或固定定位中的任何一种），如果元素没有已定位的祖先元素，则该元素的位置相对于浏览器窗口。

完全脱离了标准文档流

随即拥有偏移属性和z-idex属性

偏移属性：

left:数值px;

right:数值px;

top:数值px;

bottom:数值px;

绝对定位未设置偏移量的特点：

无论是否存在已经定位的祖先元素，都保持在元素的初始位置

脱离了标准文档流

设定固定定位的元素框的表现类似于将position设置为absolute，不过其包含块是浏览器窗口本身。

在计算机显示中把垂直于屏幕平面的方向称为Z方向，CSS绝对定位容器的z-index属性即对应该方向。

作用：用于控制元素的层叠次序，使得某个元素浮于其他元素之上。

语法：

auto：遵循其父元素的定位

number：整数，可负，值大者叠加在上层

注意：使用z-index属性时，要求该元素的position属性值为absolute、relative或fixed。

作用：用于定义建立布局时元素生成的显示框类型

语法：dispaly:值;

作用：用于定义建立布局时元素生成的显示框类型

语法：visibility:值;

Q4: CSS的样式有哪些？

什么是CSS样式

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

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

CSS样式的优势

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

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

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

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

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

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

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

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

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

CSS样式基本语法

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

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

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

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

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

无标题文档

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

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

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

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

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

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

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

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

1．内嵌样式表

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

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

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

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

2．内部样式表

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

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

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

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

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

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

7.2CSS基本选择器

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

7.2.1标签选择器

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

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

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

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

7.2.2类别选择器

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

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

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

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

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

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

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

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

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

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

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

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

7.2.3ID选择器

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

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

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

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

7.3.1子选择符

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

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

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

CSS基础入门

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

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

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

图1

图2

图4

图5

图6

回答于 2020-01-02

详情

该链接由问题回答方推荐

官方电话

向TA提问

官方服务

官方网站

赞同1

已踩

下一条回答

下一条

立即下载

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

正在加载

加载失败 点击重新加载

微信

微博

QQ

QQ空间

答案纠错

举报

取消

赞赏答主

5

10

50

100

200

已赞赏0财富值

合计：0 财富值

登录后赞赏

选择举报类型

侵犯版权

色情低俗

涉嫌违法犯罪

时政信息不实

垃圾广告

低质灌水

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

确定

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

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

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

question:{

qid:'1708728378115901940',

cid:'',

quid: '303487790',

score:'0',

import_id:'1580',

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

replyNum:"1" ,

createTime: '1577951036',

replyCount: '2',

content: '',

update_time: '0',

singleRid: '3144868738',

ext_word: '',

status: '0',

is_appeal: 0,

deleted: 0

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

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

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

,category_v1: '信息技术'

},

bestAnswerCount: '1',

isMyQuestion: 0,

answerKey: 0,

adsAll:{

youx:'',

adsEids: null

},

adsEids: {

asp: [289,11102]

},

eid: Number(289),

isWyw: Boolean(),

nettype:'0',

word: '' || '',

evaSampling_lowVal: '-1',

pageType: 'single',

sourceIsOut: 0,

argueNum: 0

});

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

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

F.context('feedbackInfo', {

feedback: '1',

feedback_rid: 0

});

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7.2.3ID\\u9009\\u62e9\\u5668

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

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

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

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

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

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

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

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

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

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

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

\\u56fe1

\\u56fe2

\\u56fe4

\\u56fe5

\\u56fe6

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

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

// 是否有料qb页

F.context('discussion', 0);

// 二跳缓存配置

F.context('asyncCachePercent', 1000);

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

F.context('isCloseFollow', 0);

// 推荐中台实验类型

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

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

F.context('banInfo', null);

// 是否是律临法律qb页

F.context('is_law', 0);

F.context('is_law_video', )

F.context('is_from_law_migration', 0)

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

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

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

// 是否是法律临结构页

F.context('is_law_struct', 0);

// nonce

F.context('nonceStr', '5iRUAlPAv1I6HK8urscdyAGIB');

}();

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

var searchContainer = '#search-box';

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

header.init(headerContainer,{

nettype: '0',

frameQids: [],

isLogin: 0,

searchWord: "",

anonymousAsk: 0,

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

});

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

var offsetX = -51;

var offsetY = 38;

search.init(headerContainer, searchContainer, {

x: offsetX,

y: offsetY

});

});

}();

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

}();

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

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

});

}();

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

operation.init();

});

}();

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

title.init({

qid:'1708728378115901940',

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

descContent:'',

descSupply: '',

imgUrl:'[]',

supImgUrl:'[]',

videoInfo: null,

});

});

}();

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

plugin.init({

un : "飞扬天地间_ZM",

uid : "51e54069236f25705e795933",

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

businessId: "100593",

pageType: "single"

})

})

}();

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

mod.init();

})

}();

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

replyAd.init({

ptrId: '100593',

ptrRole: 'business'

});

});

}();

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

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

setTimeout(function(){

detail.init({

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

foldHeight: '778',

longFoldFlag: +'',

isFoldAnswer: '1',

evaluatedType: '0',

uid: '51e54069236f25705e795933',

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

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

\u4ec0\u4e48\u662fCSS\u6837\u5f0f

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

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

CSS\u6837\u5f0f\u7684\u4f18\u52bf

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7.2.1\u6807\u7b7e\u9009\u62e9\u5668

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

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

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

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

7.2.2\u7c7b\u522b\u9009\u62e9\u5668

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

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

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

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

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

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

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

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

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

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

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

7.2.3ID\u9009\u62e9\u5668

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

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

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

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

7.3.1\u5b50\u9009\u62e9\u7b26

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

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

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

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

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

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

\u56fe1

\u56fe2

\u56fe4

\u56fe5

\u56fe6

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

naResource: 'viewer-middle',

classId: '',

data: 'piosd638f09',

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

});

})

}();

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

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

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

})

}();

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

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

relateQuestion.init({

container: '#related-list-target',

mixClass: '#awzms638f09',

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

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

Q5: CSS 样式表有哪几种？

1.1 内联样式表

在标签中直接添加style 例：p style=“” /p

1.2 内嵌样式表

作为一个独立区域内嵌在网页内，必须卸载head标签内

例：head

style=“”

/style

/head

1.3 外部样式表

即css样式表，需要新建一个css文件，用来放样式表。如果在html文件中调用样式表，需在html文件中点击 右键→CSS样式→附加样式表。（一般用link连接方式）

注：有些标签会有默认的边距，一般写代码的时候会先去除（也可以设置其他需要的样式）

* （对所有标签起作用）

{margin：0px； （边距）

padding：0px；} （间距）