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

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

时间:2022-08-15

按着网站制作布局的通常习惯，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; 才行。

上一篇: 企业该如何进行有效的企业网站建设洽谈

下一篇: 企业网站建设不可忽略的三个基本步骤

本文网址：http://www.chinafangzhan.com{dede:field name='arcurl'/}
本文由企盟仿站网发布( http://www.chinafangzhan.com )，如果您还想了解更多关于 网站仿制 的文章，请点击查看 仿站知识 的其它文章。
承接以下业务：传统网站改自适应网站、网站增加手机站、网站改全屏网站改大屏展示、GBK转UFT-8、DEDECMS转WORDPRESS、网站站群制作、企业网站设计、企业网站优化、网站托管等业务

相似内容

推荐资讯

热点标签