样式单和CSS选择器

一、这一节我们先讲样式单

简单来说,网页的制作实现分为三种,HTML、CSS和JavaScript 

HTML主要用来对网页进行文本域图片相结合,对网页进行分块(div),而对文字图片位置进行布局

样式表是专门描述结构文档表现方式的文档。比起传统方式他更具有优势。

样式表有两种1、级联样式单CSS

                      2、扩展样式单语言XSL

现在我们主要讲解下CSS。

CSS可以将显示逻辑与数据逻辑分离,提高文件可读性。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> CSS样式表</title>
</head>
<body>
<table >
	<tr>
	<td>测试1</td>
	</tr>
	<tr>
	<td>测试2</td>
	</tr><tr>
	<td>测试3</td>
	</tr>
	
</table>
</body>
</html>

运行结果表示没有样式,表格未显示。

CSS样式单可以放在三个地方,首先

1、放在外部文件中

用link链接外部文件地址如下

在<head></head>中添加  <link href ="ceshi.css" rel="stylesheet" type="text/css"/>

然后建立一个名字为ceshi.css的文件,内容为:

table{
	background-color:#003366;
	width:400px;
}
td{
	background-color:#fff;
	font-family:"楷体_gb2312";
	font-size;20pt;
	text-shadow:-8px 6px 2px #333;
}

运行html文件

这是table样式显现,并且文字样式也有变化。

除此之外,也可以把css文件里面的内容放在htmml文件中,也就是

2、将CSS放在内部

具体操作为将ceshi.css文件里面的内容放在<style type="text/css"></style>中再放在html文件的<head></head>里面,具有同样的效果。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> CSS样式表</title>
<style type="text/css">
table{
	background-color:#003366;
	width:400px;
}
td{
	background-color:#fff;
	font-family:"楷体_gb2312";
	font-size;20pt;
	text-shadow:-8px 6px 2px #333;
}
</style>
</head>
<body>
<table >
	<tr>
	<td>测试1</td>
	</tr>
	<tr>
	<td>测试2</td>
	</tr><tr>
	<td>测试3</td>
	</tr>
	
</table>
</body>
</html>

3、使用行内样式,放在div  table等属性的里面

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> CSS样式表</title>
</head>
<body>
<table style="width:400px; background-color:#003366;"/>
	<tr>
	<td style=" background-color:#fff;font-family:"楷体_gb2312";
	font-size;20pt;text-shadow:-8px 6px 2px #333;">测试</td>
	</tr>
</table>
</body>
</html>

执行结果相同。

猜你喜欢

转载自blog.csdn.net/eggplant_/article/details/82822341