一、这一节我们先讲样式单
简单来说,网页的制作实现分为三种,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>
执行结果相同。