console
<h2>盒子模型演示</h2>
<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
<div id="kk" >这里是盒子内的实际内容。有 50px 内间距，10px 外间距、30px 绿色边框。</div>
<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
<body>
<h1>CSS background-color 实例!</h1>
<div >
该文本插入在 div 元素中。
<p>该段落有自己的背景颜色。</p>
我们仍然在同一个 div 中。
</div >
</body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
#kk
{
background-color: lightgrey;
width: 300px;
border: 30px solid green;
padding: 50px;
margin: 10px;
}
<style>
#para1
{
text-align:center;
}
</style>
<style>
.center
{
text-align:center;
color：red ；
}
</style>
<style>
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
<style>
ul
{
list-style-image:url('sqpurple.gif');
}
</style>
<style>
a:link {color:#000000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}
</style>