HTML+CSS样式设置--CSS一学就会_html/css

HTML+CSS样式设置

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>					<div id=”all”>						<table><!--建立一个表格，1行2列-->							<tr>								<td class=”set”>第1行第1列 内容</td>								<td>第1行第2列 内容</td>							</tr>						</table>					</div>				</body>			</html></script></pre>  <p></p>  <p></p>  <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像素*/				}</script></pre>  <p>样式设置的方式有四种：（可参看CSS特点及加入网页的四种方法）</p>  <p>常用的3种为：</p>  <p>（1）直接写在标签中，如</p>  <p></p>  <pre name="code" class="sycode">      <table style=”border-left-width:2px ”></table> /*设置表格左边框宽度为2像素*/</script></pre>  <p></p>  <p>（2）写在<head>中，语法为：</p>  <pre name="code" class="sycode">		<style type=”text/css”>			p{ text-align:center; } /*设置p标签的文本居中*/		</style></script></pre>  <p>（3）保存为外部.css文件，通过语句引用。例</p>  <p></p>  <pre name="code" class="sycode">       </script></pre> 样式表 setTable.css 文件放在 css 文件夹中。  </div>

  </div>

<script type="text/javascript" src="/layui/layui.js"></script>
<script>
layui.use('code', function(){
  
layui.code({
  elem: 'pre', //默认值为.layui-code
  about:false,
  title:'HTML+CSS样式设置--CSS一学就会_html/css_WEB-ITnose代码块',
  encode: true //是否转义html标签。默认不开启
});
});
</script>
<footer class="comm-footer">
           <ul class="channels">
              <li>
                <a target="_top" href="/system/">操作系统</a>
            </li><li>
                <a target="_top" href="/down/">程序下载</a>
            </li><li>
                <a target="_top" href="/jquery/">jquery插件库</a>
            </li><li>
                <a target="_top" href="/jiaoben/">编程</a>
            </li><li>
                <a target="_top" href="/db/">数据库</a>
            </li><li>
                <a target="_top" href="/tools/">在线工具</a>
            </li><li>
                <a target="_top" href="/framebook/">框架书籍</a>
            </li><li>
                <a target="_top" href="/xitongjiaocheng/">系统教程</a>
            </li><li>
                <a target="_top" href="/ruanjianxiazai/">软件下载</a>
            </li>            </ul>
            <ul class="versions">
            <li>
                <a href="https://m.gxlcms.com" class="active">触屏版</a>
            </li>

            <li>
                <a href="https://www.gxlcms.com" target="_top">电脑版</a>
            </li>
            </ul>
           
              
     
        <p><a href="https://beian.miit.gov.cn/" target="_blank"  style="color:#ffffff"></a><script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?6c9b8cea1903c9f813f150c04aeebc3c";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script></p>
        </footer>	

</body>
</html>