css body的背景颜色设置

最新推荐文章于 2023-02-14 15:24:32 发布

weixin_30698297

最新推荐文章于 2023-02-14 15:24:32 发布

阅读量1.8k

点赞数 1

原文链接：http://www.cnblogs.com/hellokittyblog/p/9128384.html

版权

一：使用标签类型定义样式

1.内部样式

body的背景颜色设置的一个代码样例

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8">
		<title> css背景</title>
	</head>
	<style>
		body{
			background-color:green;
		}
		h1{
			color:orange;
			text-align:center;
		}
	</style>
	<body>
		<h1>css3 实例</h1>
	</body>
</html>

第二种写法

这个是内联样式，直接对标签操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8">
		<title> css背景</title>
	</head>

	<body style="background-color:green">
		<h1 style="color:orange;text-align:center">css3 实例</h1>
	</body>
</html>

还可以放在外面，如同茴香豆的茴有好几种写法一样

第三种写法

放在外面，是外部样式，相当于第一种内部样式把<style></style>变成文件名称

编写style.css文件

body{
	background-color:green;
}
h1{
	color:orange;
	text-align:center;
}

编写index.html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8">
		<title> css背景</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>

	<body >
		<h1 >css3 实例</h1>
	</body>
</html>

二：使用标签id制定样式

使用#表示对id的样式，其实和内联样式一样，就是可能在style代码很多的时候放在外面增加可读性

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8">
		<title> css背景</title>
	</head>
    <style>
		#e1{
			text-align:center;
			color:red;
		}
	</style>
	<body >
		<h1 id="e1">css3 实例 1</h1>
		<h1 id="e2">css3 实例 2</h1>
	</body>
</html>

三：使用.class定义一般样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8">
		<title> css背景</title>
	</head>
    <style>
		.classhh{
			text-align:center;
			color:red;
		}
	</style>
	<body >
		<h1 id="e1" class="classhh">css3 实例 1</h1>
		<h1 id="e2">css3 实例 2</h1>
	</body>
</html>

总结:

1.指定样式类型有三种方式：

1.根据标签类型指定:label_tyle{}

2.根据标签名制指定:#id_name{}

3.根据类名制定:.class_name{}

2.样式的存放有三个地方

1.内联，直接放在<,style:"">

2.内部，head中<style></style>

3.外部，最常见

转载于:https://www.cnblogs.com/hellokittyblog/p/9128384.html

weixin_30698297

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css body的背景颜色设置

一：使用标签类型定义样式1.内部样式body的背景颜色设置的一个代码样例<!DOCTYPE html><html> <head> <meta charset = "utf-8"> <title> css背景</title> </head> <styl...
复制链接

扫一扫