（1）类选择器与ID选择器
在demo.css中 的代码：
@charset "UTF-8";
.style1{
color:red;
font-size:40;
}
#div2{
background:#0000ff;
}
在HTML中的代码：
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<p class="style1">哈哈</p>
<div class="style1">div</div>
<p >呵呵</p>
<div id="div2">div2</div>
</body>
注意：对于类用.类名的形式。对于ID，用#ID的形式。
结果：
（2）关联选择器
css文件：
@charset "UTF-8";
div p{
background:#0000ff;
}
这表示只对div中的p标签进行设定。
HTML代码：
<head>
<meta charset="UTF-8">
<!--使用下面这个type="text/css"表示用css，而且连接到了demo.css文件 -->
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div>
<h1>一级</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<p>lalala</p>
</div>
<p>hehehe</p>
结果：
(3)组合选择器：
css：
@charset "UTF-8";
.h1,#p1{
background:#0000ff;
}
HTML代码：
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div>
<h1 class="h1">一级</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<p>lalala</p>
</div>
<p id="p1">hehehe</p>
（4）盒子模型