1.标签选择器
所有该标签都会被加上此效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>标签选择器</title>
<style type="text/css">
p{
font-size: 40px;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>测试文本1</p>
<p>测试文本2</p>
</body>
</html>
2.类选择器
类选择器可以同时作用在不同的标签元素上
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>类选择器</title>
<style type="text/css">
.blue{
font-size: 40px;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p class="blue">测试文本1</p>
<h1 class="blue">这是h标签</h1>
<p>测试文本2</p>
</body>
</html>
在一个标签中可以使用多个类选择器，达到复合使用的效果，
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>类选择器</title>
<style type="text/css">
.red{
color: red;
}
.big{
font-size: 32px;
}
</style>
</head>
<body>
<p class="red">红色</p>
<p class="big">大的</p>
<p class="red big">红的大的</p>
</body>
</html>
3.id选择器
每个id名称只可使用一次。id选择器的基本作用是对每个页面中出现的唯一元素进行定义。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>id选择器</title>
<style type="text/css">
#red{
color: red;
}
#big{
font-size: 32px;
}
</style>
</head>
<body>
<p id="red">红色</p>
<p id="big">大的</p>
</body>
</html>
时间： 2024-08-05 07:28:41