<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
/*这里是全局申明*/
* {
text-align: center;
}
/*普通的标签选择器*/
body{
background-color:white;
font-size: 12px;
}
h1{
font: "黑体";
font-size: 20px;
}
/* 这里是集体申明*/
h1,p{
color: red;
font-size: 16px;
}
hr{
width:200px;
}
/* 类名选择器*/
.green{
color: green;
}
.black{
color:black;
}
.blue{
color: blue;
}
.left{
text-align: left;
}
.one
{
font-size:30px;
}
/* ID选择器*/
#pink{
color:pink;
}
#yellow{
color:yellow;
}
/*这里是嵌套申明*/
p span{
color:red;
}
</style>
</head>
<body>
<h1>web前端开发</h1>
<h2>HTML</h2>
<p class="green">超文本标记语言,<span>用于构建</span>网页结构</p>
<hr />
<h2>CSS</h2>
<p class="black" id="pink">层叠样式表,用于构建网页样式</p>
<hr />
<h2>JS</h2>
<p class="blue" id="yellow">javascript,脚本语言,用于构建网页行为</p>
<!-- 这里是叠加引用,三个类叠加引用 id和类叠加引用-->
<p class="one blue left" >这将是30px,蓝色字体,靠左对齐</p> <p class="one blue left" id="yellow" >这将是30px,黄色字体,靠左对齐</p>
<hr />
</body>
</html>
CSS选择器示例
最新推荐文章于 2024-03-11 18:48:29 发布