CSS笔记及展示（1）（级联样式单）

CSS是在HTML结构上进行装潢，使HTML网页更富表现力。

一、CSS样式单的基本使用
CSS样式单可以控制HTML文档的显示。但在控制文档的显示之前，首先应在需要显示的HTML文档中导入CSS样式单，有如下4中使用样式单的方式。
1.链接外部样式文件（最常用）：这种方式将样式文件彻底与HTML文档分离，样式文件需要额外引入。在这种方式下，一批样式可控制多份文档。
引入外部样式文件应在<head…/>元素中增加如下<link…/>子元素；

<link href="CSS样式文件的URL" rel="stylesheet" type="text/css"/>

2.导入外部样式文件：这种方式与上一中方式类似，只是使用@import来引入外部样式单。

@import url (样式单地址) sMedia ;

代码示例：
HTML中

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<!--<title>链接外部CSS样式单</title>-->
	<title>导入外部CSS样式单</title>
	<!--引入 outer.css样式表单文件-->
	<!--<link href="outer.css" rel="stylesheet" type="text/css"/>-->
	<!--导入外部样式单-->
	<style type="text/css">
		@import "outer.css";
	</style>
</head>
<body>
	<table>
		<tr>
			<td>这是练习</td>
		</tr>
		<tr>
			<td>日后会在我的网址</td>
		</tr>
		<tr>
			<td>展示链接</td>
		</tr>
	</table>
</body>

outer.css中

/*设置整个表格的背景色*/
table{
	background-color:#003366;
	width:400px;
}
/*设置单元格的背景色、字体等*/
td{
	background-color:#fff;
	font-family:"楷体_GB2312";
	font-size:20pt;
	text-shadow:0 6px 2px #333;
}

3.使用内部样式定义：这种方式是通过HTML文档头定义样式单部分来实现的，这种方式下，每批CSS样式只控制一份文档。
内部CSS样式需要放在<style…/>元素定义，<style…/>元应放在<head…/>元素内。

<style type="text/css">
	样式单文件定义
</style>

示例：

<head>
	<meta http-equiv="Content-Type" content="text/html";charset="UTF-8"/>
	<title>内部样式单</title>
	<style type="text/css">
		table{
			background-color:#036;
		}
		td{
			background-color:#0ff;
			font-family:"楷体_GB2312";
			font-size:20pt;
			text-shadow:-8px 6px 2px #f00;
		}
		.title{
			font-size:18px;
			color:#60C;
			height:30px;
			width:200px;
			border:3px solid #0f0;
		}
	</style>
</head>

4.使用行内样式：这种方式将样式行内定义到具体的HTML元素，通常用于精确控制一个HTML元素的表现，每份CSS样式只控制单个HTML元素。
这里就不做示例了。

CSS笔记及展示（1）（级联样式单）

猜你喜欢