一：使用标签类型定义样式
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;
-
}
-
<!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.外部，最常见
2086
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
