腾讯云618限量抢购
  1. HTML教程

CSS 改进的小例子-5

最后更新:2010-10-07 21:48阅读:10406

应用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的使用以及选择器、属性和属性值的用法。

腾讯云618限量抢购