CSS 改进的小例子-5_DIV+CSS教程

应用CSS

打开《XHTML教程》中的小例子index.html文件，在<head>标签之间加入引用外部样式表的代码：

<link rel="stylesheet" href="style/default.css" type="text/css">

添加CSS基本设定

新建一个CSS文档，命名为default.css，存储于E:htmlstyle文件夹内。

编辑default.css文件，加入基本设定信息：

/*基本设定*/
*{
    margin: 0;
    padding: 0;
}
html{
    font-size:12px;
    font-family: "Tahoma","verdana","arial", "sans-serif";
}
img{
    border: 0;
}
h2,h3{
    font-size:14px;
}
a{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}

里面使用通配符让所有网页元素内外边距都是0，以及设定图片img的边框为0，这些属性设置会在后面相关章节学习到。其他设定信息可参考前面的教程理解。

左侧分类列表

编辑index.html文件，在 id="sidebar" 的div内，添加<ul>标签的类名：

<div id="sidebar">
<h3>文章分类</h3>
<ul class="catlist">
<li>情感世界</li>
<li>技术文章</li>
<li>网络文摘</li>
<li>其他</li>
</ul>

编辑default.css文件，添加对左侧分类列表的样式设定：

/*左侧列表*/
#sidebar h3{
    width: 90%;
    color: #d51300;
}
.catlist{
    line-height: 1.6em;
}
.cat-list li a{
    color: #3c3c3c;	
}

保持完毕之后，在浏览器里刷新index.html浏览，小例子已经应用上了一些CSS样式设定。由于我们还没学习DIV布局，所以CSS的效果还不是很明显。这个例子只是为了熟悉CSS的使用以及选择器、属性和属性值的用法。