强大的字体控制和排版能力。Font标签对于字体控制能力远没有CSS对于字体的控制能力强,使用CSS样式后不需要在使用font标签来控制文章标题、字体颜色以及字体样式等。
选择器{样式属性:取值样式属性:取值样式属性:取值……}选择器(Selector)通常是指用户希望定义的HTML元素或标签,如body、h1;也可以是自定义的id或class的标签,如#main选择器表示选择,即一个被指定了main为id的对象。浏览器将对CSS选择器进行严格的解析,每一组样式均会被浏览器应用到对应的对象上。
属性(Property)是用户希望改变的属性,并且每个属性都有一个值。对于每一个HTML中的标签,CSS都提供了丰富的样式属性,如颜色、大小、位置以及浮动方式等。
值(Value)指属性的值。属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明(declaration)。属性值有两种形式:一种是指定范围的值,如float属性的取值为left、right和none;另一种为数值,如height属性取值为0~9999px或者通过其他数学单位来指定。
CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。
浏览器通过解析属性包含的内容,将CSS样式应用到页面上,如图2所示。多个样式可以并列在一起写,不需要考虑如何进行分隔。例如,定义一个段落文本的背景色为紫色,则可以在上面样式的基础上进行增加样式:Body{font-size:12pxfont-weight:boldtext-indent:2em}p{backgroundcolor:#FF00FF}由于CSS语言自动忽略空格(除了选择器内部的空格),因此可以利用空格和换行符来美化CSS样式源代码,上面的代码可以进行如下美化:
Body{font-size:12pxfont-weight:boldtext-indent:2em}p{background-color:#FF00FF}经过美化的CSS源代码看上去一目了然,既方便阅读,也便于修改。
CSS源代码有时候需要通过一些注释来标注,CSS代码表示什么意思。在HTML中注释标记使用“”,CSS中注释标记使用“/*注释内容*/”。例如,可以对上面的代码进行注释:
Body{/*页面的基本属性*/font-size:12pxfont-weight:boldtext-indent:2em}/*设置段落的背景颜色为紫色*/p{background-color:#FF00FF}添加CSS的方法
内嵌样式表的使用是直接在HTML标记里加入style参数,而style参数的内容就是CSS的属性和值,在style引号里的内容相当于在样式表的大括号里的内容,其格式如下:
该方法与传统网页设计在标签内增加属性的设计方法相同,该方法实际并没有满足W3C提出的将HTML结构与CSS表现剥离来进行设计,因此在网页设计中不建议使用该方法,除非为页面中个别元素设置某个特定样式效果而单独定义。
内部样式表通常位于网页的头部区域,目的是让CSS源代码在页面加载前先被解析执行,这样可以避免当网页加载完成后,没有CSS样式渲染而使的页面信息无法正常显示。3.链接外部样式表链接外部样式表是在CSS中最常用的一种形式,它将CSS样式代码单独编写到一个独立的文件中,由网页进行调用,多个网页可以同时使用同一个样式文件,其格式如下:
其中,href属性设置外部样式表文件的地址,该地址可以是相对地址,也可以是绝对地址;rel属性定义该标签关联的是样式表标签;type属性定义文档的类型,即CSS文本文件。
网站通常采用链接外部样式表来设计网站的表现层,能够实现CSS样式与HTML结构的分离,这种分离原则是W3C所提倡的,因为这样可以高效地管理文档结构和样式表文件,实现代码的优化和重用。
在@import关键字后面,使用url()函数来把外部样式表文件导入。注意使用时,外部样式表的路径、方法和链接外部样式表的方法类似,但导入外部样式表输入方式更有优势。实质上它是相当于存在内部样式表中的。
选择器决定样式规则作用于哪些元素。例如,如果要对table元素添加边框为实线、线宽1像素、蓝色的边框,则需要创建一个只识别table元素而不影响其他元素的选择器。如果要对每个区域中的table设置特殊格式,就需要创建一个稍微复杂一些的选择器,它只识别指定区域中的table元素。
注意:*号为通配符匹配页面中的所有元素名称。上面的代码设置每个元素的内外边距为0px。由于每个元素都有系统默认的内外边距值,且在不同的浏览器中显示的效果也不同,因此在设置网页样式之初使用通配符*将所有元素默认的内外边距去掉是常见做法。
使用标签选择符可以方便地对标签进行样式设置,同时标签选择符也存在较多问题。因为标签选择符对标签所做的定义不单单影响所选择的标签元素,而是对整个页面中所有相同标签都会起作用。如果需要对同一个标签在网页中的不同位置显示不同的样式,使用这种方法定义的样式就存在很多不足。对于这个问题可以使用类选择器来解决。
类(Class)选择符就是为了不同元素拥有相同的显示样式而定义的。例如,在下面这个页面中包含三段文本,通过标签选择器将所有段落文本大小定义为13px,首行缩进2字符,字体颜色为蓝色。
CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。
CSS是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。
在自定义类名时,只能够使用字母、数字、下划线(_)和连接符号(-),类名必须以字母开头,否则无效。另外,类名是区分大小写的,所以类fontbold和类Fontbold是完全不同的两个类。
ID是英文Identity的缩写,它表示身份标识号码,在网络上一般指用户账号,但是在Web设计中一般指标签在HTML文档中的唯一编号。从这点来看,ID选择器只能够在HTML页面中用一次,它是与标签选择符和类选择符作用范围相反的一个选择符。ID选择符通常被来定义HTML框架结构的布局效果,因为HTML框架元素的ID值都是唯一的。
#box{width:600pxheight:auto}例如,下面实例定义一个盒子,为该盒子指定宽度和高度,并设置盒子的背景颜色以及边框和内边距大小,显示效果如图4所示。7.3复合选择器如果仅仅掌握了标签选择符、类选择符和ID选择符还远远不够,对于网页设计者来讲还应该掌握高级选择符的使用,如子选择符、相邻选择符和属性选择符。
利用标签选择符和类选择符可以控制网页中众多对象的样式;而利用ID选择符、子选择符和相邻选择符可以精确控制页面中的特定对象样式;使用属性选择符可以更敏捷、更模糊地控制页面中包含不同属性的对象样式。
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所示。
\\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
\\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:12pxfont-weight:boldtext-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:12pxfont-weight:boldtext-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:12pxfont-weight:boldtext-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:20pxfont-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:600pxheight: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:12pxfont-weight:boldtext-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:12pxfont-weight:boldtext-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:12pxfont-weight:boldtext-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:20pxfont-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:600pxheight: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:43498,\x22praiseNum\x22:53132,\x22goodRate\x22:99.23799963497,\x22adoptRate\x22:100,\x22carefield\x22:[{\x22cid\x22:202,\x22cname\x22:\x22\\u7406\\u5de5\\u5b66\\u79d1\x22}],\x22selfDefinedPhoto\x22:0,\x22isAppAuth\x22:0,\x22BC\x22:53132,\x22JQ\x22:{\x22followMe\x22:6469,\x22myFollow\x22:1},\x22DC\x22:43498,\x22MR\x22:[],\x22answerNum\x22:\x224.4\\u4e07\x22,\x22AX\x22:43846,\x22helpNum\x22:\x229659\\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:\\\/\\\/www.bitpress.com.cn\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:43841,\x22thumbNum\x22:51156,\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:\\\/\\\/www.bitpress.com.cn\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:51156},\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,\x22is_baidumap\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', 'wap_qb_feed_gr')
// 封禁信息: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', 'oMihhwAQLhz3iuhfDLRdWbCKP')
}()
!function(){var F = (window.__IKNOW_GLOBAL__ || window).Fvar 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).Fvar require = (window.__IKNOW_GLOBAL__ || window).require F.context('cmsKey', 'top:defs|mid:defs|fb:')
}()
!function(){var F = (window.__IKNOW_GLOBAL__ || window).Fvar 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).Fvar 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).Fvar 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).Fvar 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).Fvar 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).Fvar 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).Fvar 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: new Object({"rid":"3144868738","content":"\u6d60","contentRich":"
\u6d60","contentText":"\u6d60","publishTime":"2020-01-02","c_timestamp":"1577951663","isAdopt":"0","user":{"uid":"861529425","name":"\u690b\u70b4\u58c3\u6fb6\u2541\u6e74\u95c2\u78baZM","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":"\u9480\u5c7d","sign":"\u9477\u6751\u59cf\u6d5c\u5ea1\u56ad\u9417\u581f\u6e36\u7f07\u5ea1\u5e2b\u9352\u6d9a","third_id":"1618990200865936","type":"media","vip":"0","vtype":"0"},"chatUserInfo":[],"isOpenApp":"0","encodeUid":"51e54069236f25705e795933","gradeIndex":"20","grAnswerNum":"43498","praiseNum":"53132","goodRate":"99.23799963497","adoptRate":"100","carefield":[{"cid":"202","cname":"\u941e\u55d7\u4f10\u701b\ufe3e"}],"selfDefinedPhoto":"0","isAppAuth":"0","BC":"53132","JQ":{"followMe":"6469","myFollow":"1"},"DC":"43498","MR":[],"answerNum":"4.4\u6d93","AX":"43846","helpNum":"9659\u6d93","business":{"businessId":"100593","companyName":"\u9356\u693e\u542b\u941e\u55d7\u4f10\u6fb6\u0443","bjhUpgradeStatus":"2","bjhAuditStatus":"0","cAppId":"0","cid":"0","name":"\u9356\u693e\u542b\u941e\u55d7\u4f10\u6fb6\u0443","uid":"861529425","uname":"\u690b\u70b4\u58c3\u6fb6\u2541\u6e74\u95c2\u78baZM","siteUrl":"http:\/\/www.bitpress.com.cn","slogan":"\u5bf0\u8702\u4e92\u93c4\u5ea3\u608a\u951b\u5c7d","main":"","imgUrl":"https:\/\/cambrian-images.cdn.bcebos.com\/1c63fb2932862a09d20401a5f2416b15_1543989216895.jpeg","intro":"","type":"0","insType":"1","xzhId":"1618990200865936","servicePhone":"010-68944515","replyNum":"43841","thumbNum":"51156","v_type":"0","vipLevel":"3","vipRights":"1,2,3,4,5,6,7,8,9","pluginInfo":{"officialPhone":"010-68944515","siteUrl":"http:\/\/www.bitpress.com.cn","isInWhiteList":"1","customerInfo":[],"onlineUrl":"","tab":[]},"isBrandBusiness":"","encodeUid":"51e54069236f25705e795933"},"iconChange":"1","showInfo":{"type":"2","partnerId":"100593","companyName":"\u9356\u693e\u542b\u941e\u55d7\u4f10\u6fb6\u0443","bjhUpgradeStatus":"2","bjhAuditStatus":"0","cAppId":"0","name":"\u9356\u693e\u542b\u941e\u55d7\u4f10\u6fb6\u0443","imgUrl":"https:\/\/cambrian-images.cdn.bcebos.com\/1c63fb2932862a09d20401a5f2416b15_1543989216895.jpeg","slogan":"\u5bf0\u8702\u4e92\u93c4\u5ea3\u608a\u951b\u5c7d","siteUrl":"https:\/\/zhidao.baidu.com\/business\/profile?id=100593&role=business","siteUrlArr":[],"v_type":"4","intro":"","businessId":"100593","encodeUid":"51e54069236f25705e795933","thumbNum":"51156"},"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","is_baidumap":"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":"","uafrom":"","replyAsk":"","is_appeal":"0","musicInfo":[],"tiebaInfo":[],"is_partner":"1","business_partner":{"bannerPicUrl":"https:\/\/gss0.bdstatic.com\/7051cy89RcgCncy6lo7D0j9wexYrbOWh7c50\/shengmingyitian.jpeg","bannerUrl":"http:\/\/product.m.dangdang.com\/product.php?pid=27871027&host=product.dangdang.com"}}),
isPartnerHosting: 0,
baidumapContainerId: 'baidumap-card',
})
},0)
})
}()
!function(){var F = (window.__IKNOW_GLOBAL__ || window).Fvar 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).Fvar 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-bokpa63f448-asp'),
adPlaceholder: $('#ad-PLACEHODER-id')
})
})
}()
!function(){var F = (window.__IKNOW_GLOBAL__ || window).Fvar 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).Fvar require = (window.__IKNOW_GLOBAL__ || window).require require.async(['m-question-new:widget/contextual-earches/contextual-earches-async'], function (rec) {
rec.init({
container: $('#contextual-zvaqe63f448-earches')
})
})
}()
!function(){var F = (window.__IKNOW_GLOBAL__ || window).Fvar require = (window.__IKNOW_GLOBAL__ || window).require F.context('now', 1676953778)
require.async(['m-question-new:widget/ad-union-new/ad-union-new-async'], function (rec) {
rec.init($('#wgt-fulsk63f448-youx'))
})
}()
!function(){var F = (window.__IKNOW_GLOBAL__ || window).Fvar require = (window.__IKNOW_GLOBAL__ || window).require F.context('relatedName', 'qxfnc63f448')
require.async(["m-question-new:widget/related-question-new/related-question-new-async.es"], function (relateQuestion) {
relateQuestion.init({
container: '#related-list-target',
mixClass: '#qxfnc63f448',
word: '' || '',
title: 'CSS的样式有哪些?',
toNaSample: 0,
isLightStyle: 1
})
})
}()
!function(){var F = (window.__IKNOW_GLOBAL__ || window).Fvar 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"},"browser":"chrome","ecom_mobile_browser_id":"3","js":"0","mobile_browser":"chrome","mobile_browser_id":"24","mobile_browser_version":"58.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).Fvar require = (window.__IKNOW_GLOBAL__ || window).requirerequire.async(['m-question-new:widget/bg-mask/bg-mask.es'], function(mask) {
mask.default.init()
})
}()
!function(){var F = (window.__IKNOW_GLOBAL__ || window).Fvar require = (window.__IKNOW_GLOBAL__ || window).requirerequire.async(['m-question-new:widget/index/morebar/morebar.es'], function(morebar) {
morebar.default.init(1)
})
}()
!function(){var F = (window.__IKNOW_GLOBAL__ || window).Fvar require = (window.__IKNOW_GLOBAL__ || window).requirerequire.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).Fvar require = (window.__IKNOW_GLOBAL__ || window).requirerequire.async(['m-question-new:widget/index/accusation/accusation.es'], function(accusation) {
accusation.default.init()
})
}()
!function(){var F = (window.__IKNOW_GLOBAL__ || window).Fvar require = (window.__IKNOW_GLOBAL__ || window).require F.context('singleReply', '3144868738')
F.context('isLightTheme', 1)
F.context('singleImport', 1580)
F.context('pvid', '1778232287')
F.context('singleUid', '51e54069236f25705e795933')
F.context('businessId', '100593')
// 知识头条是否内容制作包
F.context('knowledgeCardType', 0)
F.context('isPartnerHosting', 0)
F.context('hostedContentFrom', '')
require.async(['m-common:widget/js/util/log/log'], function (log) {
log.addKey({
rid: '3144868738',
pinzhuanFlag: 0,
typeSqbFlag: 0,
isPartnerHosting: 0,
hostedContentFrom: '',
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).Fvar 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).Fvar 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).Fvar 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).Fvar require = (window.__IKNOW_GLOBAL__ || window).require }()
!function(){var F = (window.__IKNOW_GLOBAL__ || window).Fvar 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).Fvar require = (window.__IKNOW_GLOBAL__ || window).requirerequire.async(['m-question-new:widget/trans-yun/trans-yun-log'], function(YunLog){
YunLog.init()
})
}()
!function(){var F = (window.__IKNOW_GLOBAL__ || window).Fvar require = (window.__IKNOW_GLOBAL__ || window).requirerequire.async(['m-question-new:widget/yike-card/yike-card-log'], function(yikeCardLog){
yikeCardLog.init()
})
}()
!function(){var F = (window.__IKNOW_GLOBAL__ || window).Fvar require = (window.__IKNOW_GLOBAL__ || window).require require.async(['m-common:widget/pushStateQuery/pushStateQuery'], function (app) {
app.init()
})
}()
!function(){var F = (window.__IKNOW_GLOBAL__ || window).Fvar 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.lengthi < leni++) {
this.getTag(tags[i])
}
},
getTag: function(tag) {
var domList = document.getElementsByTagName(tag)
if(!domList.length) {
return
}
for(var i = 0,len = domList.lengthi
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://teliute.laxjyj.com
(计算机基础知识,电脑知识入门学习,请到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(下标) toptext-topmiddlebottomtext-bottom
词间距word-spacing: normal数值
空格white-space: pre(保留) nowrap(不换行)
显示display:block(块) inline(内嵌) list-item(列表项) run-in(追加部分) compact(紧凑) marker(标记) tableinline-tabletable-raw-grouptable-header-grouptable-footer-grouptable-rawtable-column-grouptable-columntable-celltable-caption(表格标题)
方框属性:(Box)
width:height:float:clear:bothmargin: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-romanlower-alphaupper-alpha
位置list-style-position: outside(外) inside
图像list-style-image: url(..)
定位属性: (Position)
Position: absoluterelativestatic
visibility: inheritvisiblehidden
overflow: visiblehiddenscrollauto
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-wordword-break:break-all。但是,此方式会导致,普通的英文语句中的单词会被断开(ie下也是)。目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而已。即英文单词应不应该被断开那?那问题很明显了,显然不应该被断开了。对于长串英文,就是恶意的东西,自然不用去管了。但是,也要想些办法,不让它把容器撑大。用:overflow:autoie下,长串会自动折行。ff下,长串会被遮盖。所以,综上,最好的方式是word-wrap:break-wordoverflow:hidden而不是word-wrap:break-wordword-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 布局的基本方法,如果你成功地完成了练习,请继续学习下一课内容;
定义2种不同的链接样式,然后再文件中调用不同的样式,就可以实现不同的链接效果<title>南天门永远的橘子</title>
<style type="text/css">
<!--
.orange{
background-color:orange
padding:10px}
.one A:link {
color: white
text-decoration: underline
}
.one A:visited {
text-decoration: none
color: white
}
.one A:hover {
color: blue
text-decoration:underline
}
.one A:active {
color: red
text-decoration:none
}
.two A:link {
color: black
text-decoration: none
}
.two A:visited {
text-decoration: none
color:black
}
.two A:hover {
color: white
text-decoration:underline
}
.two A:active {
color: red
text-decoration:none
}
-->
</style></head>
<body>
<div class="orange">
<div class="one">22<a href="#">连接效果1</a>22</div>
<div class="two">22<a href="#">不同的连接效果2</a>22</div>
</div>
</body>
</html>