HTML+CSS样式设置--CSS一学就会_html/css_WEB-ITnose-html教程-PHP中文网

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

php中文网

发布： 2016-06-24 11:43:10

原创

1078人浏览过

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标签选择器在使用时，若多个标签设置相同效果，可联合写。将多个标签用空格隔开用一个{}进行设置即可，不同的效果可单独外加设置。

会译·对照式翻译

会译是一款AI智能翻译浏览器插件，支持多语种对照式翻译

查看详情

举例：

HTML代码：

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

登录后复制

CSS代码：

   			        /*id标识符&middot;示例*/				#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）直接写在标签中，如

      <table style=”border-left-width:2px ”></table> /*设置表格左边框宽度为2像素*/

登录后复制

（2）写在

中，语法为：

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

登录后复制

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

      <link rel=”stylesheet” type=”text/css” href=”css/setTable.css” />

登录后复制

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

大家都在看：

HTML注释残留漏洞怎么检测_HTML注释残留漏洞利用浏览器查看源码检测技巧 vb如何打印html_VB程序调用HTML内容打印（WebBrowser）方法如何处理HTML事件属性绑定的解决办法 HTML表单数据截获漏洞怎么防护_传输过程中表单数据被截获防护方案如何使用HTML构建博客文章布局的详细教程