样式单和CSS选择器

最新推荐文章于 2024-03-09 13:40:17 发布

eggplant_

最新推荐文章于 2024-03-09 13:40:17 发布

阅读量180

点赞数

本文链接：https://blog.csdn.net/eggplant_/article/details/82822341

版权

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

简单来说，网页的制作实现分为三种，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>

执行结果相同。

eggplant_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
样式单和CSS选择器

一、这一节我们先讲样式单简单来说，网页的制作实现分为三种，HTML、CSS和JavaScript HTML主要用来对网页进行文本域图片相结合，对网页进行分块（div），而对文字图片位置进行布局而样式表是专门描述结构文档表现方式的文档。比起传统方式他更具有优势。样式表有两种1、级联样式单CSS 2、扩展样式单语言XSL现在我们主要讲解...
复制链接

扫一扫