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

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代码：

												<title>网页标题					<link type="”text/css”" rel="”stylesheet”">				</title>					<div id="”all”">						<table>
<!--建立一个表格，1行2列-->							<tr>								<td class="”set”">第1行第1列 内容</td>								<td>第1行第2列 内容</td>							</tr>						</table>					</div>							

CSS代码：

   			        /*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像素*/				}

样式设置的方式有四种：（可参看CSS特点及加入网页的四种方法）

常用的3种为：

（1）直接写在标签中，如

/*设置表格左边框宽度为2像素*/

（2）写在

中，语法为：

		<style type="”text/css”">			p{ text-align:center; } /*设置p标签的文本居中*/		</style>

（3）保存为外部.css文件，通过语句引用。例

      <link rel="”stylesheet”" type="”text/css”" href="%E2%80%9Dcss/setTable.css%E2%80%9D"> 

样式表 setTable.css 文件放在 css 文件夹中。