嵌套声明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌套声明</title>
<!-- 这里p span 的含义是p标签下面的span标签 所以有嵌套关系-->
<style>
p span {
font-weight: bold;
color: burlywood;
}
</style>
</head>
<body>
<p><span>天使投资</span>是投资的一种方式</p>
</body>
</html>
执行结果
集体声明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>集体声明</title>
<!-- 语法上是多个标签通过逗号分割-->
<style>
p,h1 {
font-weight: bold;
color: burlywood;
}
</style>
</head>
<body>
<h1></h1>
<p>欢迎访问论坛</p>
</body>
</html>
全局声明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局声明</title>
<!-- 含义是对全局进行统一申明-->
<style>
* {
font-weight: bold;
color: burlywood;
}
</style>
</head>
<body>
<h1>欢迎访问论坛</h1>
<h2>欢迎访问论坛</h2>
<p>欢迎访问论坛</p>
</body>
</html>
执行结果
混合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>混合选择器</title>
<!-- 类名属性是用.控制-->
<style>
.font {
font-size: 18px;
}
.red {
color: red;
}
.blue {
color: blue;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.bgcolor {
background-color: burlywood;
}
</style>
</head>
<body>
<!-- 混合选择器主要使用类名来实现-->
<p class = "font red right">这里的文字，18px红色，右对齐</p>
<div class="font blue center">这里的文字，18px蓝色，居中对齐</div>
<div class="font blue center bgcolor">这里的文字，18px蓝色，居中对齐，有背景色</div>
</body>
</html>
执行结果
