当前位置:网站首页 / 建站知识 / 网站制作知识

网站制作布局css的书写格式

来源:未知时间:2015-04-06 07:31点击:

按着网站制作布局的通常习惯,css的书写与html分离,两个文件在编辑器里左一个右一个,同步编写。html 写下结构,css 里就写对应的样式。那么比如我写下了如下的 html:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="topbox">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, delectus, quas, sapiente, hic vero quos <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, totam neque non quam reiciendis itaque distinctio <div class="box">Eum, placeat, illum, nobis at doloremque ut perspiciatis dolor vel perferendis debitis commodi voluptatibus a </body>
</html>

然后我就要在这个 html 文件所在目录新建一个 文件,名叫 style.css (被引用的 css 文件名)。然后在这个 css 文件里些如下内容:

/* 这里是CSS 的注释,你爱写点啥写点啥 */

#topbox {
color:red;
}
.box {
color:blue;
}

css的书写格式其实就是:

选择器 {属性:属性值;}

然后属性和属性值可以多次重复,就像下面:

#topbox {
color:red;
width:100px;
height:300px;
}

其实你都写在一行也行,我一个属性一行,前边还有缩进纯粹是为了便于阅读。所以还有 css 压缩一说,就是把 css 文件里所有不必须的空白和换行全部去掉,这样可以减小 css 文件的体积。当然这样的文件想要阅读……代码高亮了也如线团一般,所以我都是冲洗格式化以后再读。

然后在 html 中的属性值很多都不带单位,比如 width=100 就是宽度是 100 像素。但是在 CSS 里则必须带上单位width:100px; 才行。