（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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
</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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
</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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
</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）盒子模型