选择器分类:基本选择器,组合选择器,伪类选择器,伪对象选择器和属性选择器。
1、基本选择器
(1)标签选择器:
格式:标签名称{样式}
例:p {
font-size: 12px; /* 字体大小为12像素 */
color: red; /* 字体颜色为红色 */
}
(2)类选择器:
格式:.类名{样式}
例:<html>
<head>
<meta charset="utf-8">
<title>CSS基础</title>
<style type="text/css">
p {
font-size: 12px; /* 字体大小为12像素 */
color: red; /* 字体颜色为红色 */
}
.font18px { font-size: 18px; }
</style>
</head>
<body>
<p>问君能有几多愁,恰似一江春水向东流。</p>
<p class="font18px">剪不断,理还乱,是离愁。别是一般滋味在心头。</p>
<p>独自莫凭栏,无限江山,别时容易见时难。流水落花春去也,天上人间。</p>
</body>
</html>
(3)ID选择器
格式:#id名{样式}
例:<html>
<head>
<meta charset="utf-8">
<title>CSS基础</title>
<style type="text/css">
#box {/* ID样式 */
background:url(images/2.jpg) center bottom; /* 定义背景图像并居中、底部对齐 */
height:200px; /* 固定盒子的高度 */
width:400px; /* 固定盒子的宽度 */
border:solid 2px red; /* 边框样式 */
padding:100px; /* 增加内边距 */
}
</style>
</head>
<body>
<div id="box">问君能有几多愁,恰似一江春水向东流。</div>
</body>
</html>
(4)通配选择器
格式:*{样式}
例:<html>
<head>
<meta charset="utf-8">
<title>CSS基础</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="box">问君能有几多愁,恰似一江春水向东流。</div>
</body>
</html>