CSS：（Cascading Style Sheets）层叠样式设置表。
网页的展示效果跟其排版有很大的关系。排版则主要依靠CSS来设置、调节。
下面说CSS与HTML的联合使用的过程：
（1）新建CSS文件（一般放在与HTML文件同一路径下的css文件夹中）
（2）在HTML的
标签中，用对CSS进行引用（3）根据HTML的标签或标识符，在CSS文件中编写样式设置代码
CSS的基本语法为：选择器（Selector）、属性（Property）和属性值（Value）
代码形式为：selector{property：value}
主要的选择器：tag标签（html自身的标签）、class标识符（自定义）和id标识符（自定义）。
选择器使用语法为：
（1）tag标签直接使用标签后跟{}，例body{}、table{}、p{}、font{}等。
（2）Class标识符，用“.标识符{ 属性:属性值; }”的形式，例 .xs{ color:blue; }
（3）id标识符，用“#标识符{ 属性:属性值; }”的形式，例 #xs{ color:blue; }
补充：tag标签选择器在使用时，若多个标签设置相同效果，可联合写。将多个标签用空格隔开用一个{}进行设置即可，不同的效果可单独外加设置。
举例：
HTML代码：
网页标题</tiltle> <body> <table> <tr> <td class=”set”>第1行第1列 内容</td> <td>第1行第2列 内容</td> </tr> </table> <div style="display:none;"><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?de973f4fc4fc27c651135a4cd7781c2b";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script></div></body> </html></pre> <p>CSS代码：</p> <pre name="code" class="sycode"> /*id标识符·示例*/ #all{ Background-color:#F0F0F0; /*设置背景颜色为淡灰色*/ width：600px; /*设置这个版块的宽度为600像素*/ height:700px; /*高度为700像素*/ } .set{ /*针对第1行第1列样式设置*/ text-align:center; /*文本居中*/ font-weight:bold /*文本加粗*/ } table{ /*对表格整体进行样式设置*/ width:500px; /*设置表格的宽度为500像素*/ height:400px; /*表格高度400像素*/ }</pre> <p>样式设置的方式有四种：（可参看CSS特点及加入网页的四种方法）</p> <p>常用的3种为：</p> <p>（1）直接写在标签中，如</p> <pre name="code" class="sycode"> <table style=”border-left-width:2px ”></table> /*设置表格左边框宽度为2像素*/</pre> <p>（2）写在<head>中，语法为：</p> <pre name="code" class="sycode"> <style type=”text/css”> p{ text-align:center; } /*设置p标签的文本居中*/ </style></pre> <p>（3）保存为外部.css文件，通过语句引用。例</p> <pre name="code" class="sycode"> </pre> 样式表 setTable.css 文件放在 css 文件夹中。 </p><a class="downbb html2word" href="javascript:;" data-model="article" data-id="arhgsc">下载本文</a> <script type="text/javascript" src="https://jss.51dongshi.net/mwz/nrhou.js"></script></div> </mip-showmore> <div on="click:showmore01.toggle" data-closetext="收起全文" class="mip-showmore-btn">显示全文</div></section> <script type="text/javascript" src="https://jss.51dongshi.net/mwz/dajia.js"></script> <script type="text/javascript" src="https://jss.51dongshi.net/mwz/cnxh.js"></script> <script type="text/javascript" src="https://jss.51dongshi.net/mwz/cnxhhou.js"></script> <script type="text/javascript" src="https://jss.51dongshi.net/mwz/wntj.js"></script> <script type="text/javascript" src="https://jss.51dongshi.net/mwz/wntjhou.js"></script> <script type="text/javascript" src="https://jss.51dongshi.net/mwz/end.js"></script> <div style="display:none"><a href="https://m.51dongshi.net/wzztf/ar/arhgsc/">专题</a></div><iframe src="https://hits.51dongshi.net/?biao=ho_article&id=915438" border="0" frameborder="0" style="width: 0px; height: 0px"></iframe> <link rel="stylesheet" href="https://jss.51dongshi.net/js/fffz/css/box.css"> <script id="fffz" data-domain="//m.51dongshi.net" src="https://js.51dongshi.net/js/fffz/fffz.js"></script> <div class="foot_new"> <div class="footlogo"></div> <div class="copyright">动视 51dongshi.net 版权所有<br>Copyright © 2019-2025 </div> </div> </div><script type="text/javascript" src="https://jss.51dongshi.net/mwz/zuihou.js"></script> <script> $(function(){ var downbox_top = $('.downbox').offset().top-$(window).scrollTop(); $(window).scroll(function(){ if ($(window).scrollTop()>$('.downbox').offset().top+$('.downbox').height()) { if($('.downbb').length>0) $('.downbb').show() }else{ if($('.downbb').length>0) $('.downbb').hide() } }) }) </script> <div style="display:none;"><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?de973f4fc4fc27c651135a4cd7781c2b";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script></div></body> </html>
