1. 通配选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>通配选择器</title>
<style>
* {
color: cadetblue;
font-size: 16px;
}
</style>
</head>
<body>
<h1>将进酒·君不见</h1>
<p>【作者】李白 【朝代】唐</p>
<pre>
君不见，黄河之水天上来，奔流到海不复回。
君不见，高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
与君歌一曲，请君为我倾耳听。
钟鼓馔玉不足贵，但愿长醉不愿醒。
古来圣贤皆寂寞，惟有饮者留其名。
陈王昔时宴平乐，斗酒十千恣欢谑。
主人何为言少钱，径须沽取对君酌。
五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
</pre>
</body>
</html>2. 元素选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
h1 {
color: chocolate;
}
h4 {
color: green;
}
p {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<h1>将进酒·君不见</h1>
<h4>【作者】李白 【朝代】唐</h4>
<p>君不见，黄河之水天上来，奔流到海不复回。</p>
<p>君不见，高堂明镜悲白发，朝如青丝暮成雪。</p>
<p>人生得意须尽欢，莫使金樽空对月。</p>
<p>天生我材必有用，千金散尽还复来。</p>
<p>烹羊宰牛且为乐，会须一饮三百杯。</p>
<p>岑夫子，丹丘生，将进酒，杯莫停。</p>
<p>与君歌一曲，请君为我倾耳听。</p>
<p>钟鼓馔玉不足贵，但愿长醉不愿醒。</p>
<p>古来圣贤皆寂寞，惟有饮者留其名。</p>
<p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
<p>主人何为言少钱，径须沽取对君酌。</p>
<p>五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
<br/>
<h1>静夜思</h1>
<h4>【作者】李白 【朝代】唐</h4>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
</body>
</html>3. 类选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
/* 选中页面中所有类名为p1的元素 */
.p1 {
color: red;
}
/* 选中页面中所有类名为p2的元素 */
.p2 {
color: skyblue;
}
.p3 {
font-size: 20px;
}
</style>
</head>
<body>
<h1>将进酒·君不见</h1>
<h4>【作者】李白 【朝代】唐</h4>
<p class="p1">君不见，黄河之水天上来，奔流到海不复回。</p>
<p class="p1">君不见，高堂明镜悲白发，朝如青丝暮成雪。</p>
<p class="p1">人生得意须尽欢，莫使金樽空对月。</p>
<p class="p1">天生我材必有用，千金散尽还复来。</p>
<p class="p1">烹羊宰牛且为乐，会须一饮三百杯。</p>
<p class="p1">岑夫子，丹丘生，将进酒，杯莫停。</p>
<p class="p1">与君歌一曲，请君为我倾耳听。</p>
<p class="p1">钟鼓馔玉不足贵，但愿长醉不愿醒。</p>
<p class="p1">古来圣贤皆寂寞，惟有饮者留其名。</p>
<p class="p1">陈王昔时宴平乐，斗酒十千恣欢谑。</p>
<p class="p1">主人何为言少钱，径须沽取对君酌。</p>
<p class="p1">五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
<span class="p1 p3">2023年10月19日22点41分</span>
<br/>
<h1>静夜思</h1>
<h4>【作者】李白 【朝代】唐</h4>
<p class="p2">床前明月光，疑是地上霜。</p>
<p class="p2">举头望明月，低头思故乡。</p>
</body>
</html>4. ID选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style>
#title1 {
color: red;
}
#title2 {
color: blue;
}
.title2 {
font-size: 16px;
}
</style>
</head>
<body>
<h1 id="title1">将进酒·君不见</h1>
<h4>【作者】李白 【朝代】唐</h4>
<p>君不见，黄河之水天上来，奔流到海不复回。</p>
<p>君不见，高堂明镜悲白发，朝如青丝暮成雪。</p>
<p>人生得意须尽欢，莫使金樽空对月。</p>
<p>天生我材必有用，千金散尽还复来。</p>
<p>烹羊宰牛且为乐，会须一饮三百杯。</p>
<p>岑夫子，丹丘生，将进酒，杯莫停。</p>
<p>与君歌一曲，请君为我倾耳听。</p>
<p>钟鼓馔玉不足贵，但愿长醉不愿醒。</p>
<p>古来圣贤皆寂寞，惟有饮者留其名。</p>
<p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
<p>主人何为言少钱，径须沽取对君酌。</p>
<p>五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
<br/>
<h1 id="title2" class="title2">静夜思</h1>
<h4>【作者】李白 【朝代】唐</h4>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
</body>
</html>
评论 (0)