整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

css书写规范

件引用规范

先说加载的规范,这个规范主要是为了提高页面加载速度或者是首屏的速度。

1 CSS 文件或样式在 head 标签中引用。页面的渲染需要 CSS,所以尽量早的让 CSS 文件加载出来。

2 JS 文件要放在 body 标签尾部。页面里加载和运行 JS 都会阻塞页面的渲染过程,所以把 JS 放在尾部可以加快首屏显示的速度,但对整个页面完成加载的时间没什么影响。

3 使用压缩后的文件。线上使用的静态文件,尽量都是压缩好的,CSS 使用 .min.css 形式,JS 使用 .min.js 形式,这样可以减少文件的体积,从而减少下载的时间。

4 减少 import 方式引用 css 文件。import 方式引入的 CSS 文件要等原 CSS 文件加载并解析后才会去请求, 会拖慢 CSS 文件的加载速度。

属性的书写规范

一、使用缩写

在 CSS 中有很多属性或属性值可以缩写, 在能用缩写的地方尽量使用缩写。

1、属性的缩写。CSS 中有些属性是可以合并的, 如:

margin-top: 10px;
margin-bottom: 0;
margin-left: 5px;
margin-right: 5px;

上面这几组 margin 相关的属性占了四条样式, 我们可以使用一条 margin 属性代替这四个方向的 margin:

margin: 10px 5px 0 5px;

一般带有方向的属性, 缩写的时候各个方向的值都是按着"上 右 下 左"的顺序写的。另外如果四个方向值一样,可以直接用一个值代替四个方向;如果左右方向的值一样,则可以省略最后一个左侧的值。

上面这条缩写也可以写成:

margin: 10px 5px 0;

2、颜色的缩写。在使用十六进制颜色的时候, 如果 rgb 三个颜色位置中, 每两位的颜色值相同, 可以把六位的颜色写成三位。

如:color: #22ffcc;

就可以写成:

color: #2fc;

这两种写法是等效的, 但要注意的是如果需要兼容低版本 IE 浏览器, 还是要用六位的颜色值。

3、数字的缩写。在 CSS 中如果整数部分是 0 的小数, 可以忽略小数点前面的 0; 如果属性值是 0, 则可以忽略属性值的单位。

如: font-size: 0.8rem; padding: 0px;

这两条属性就可以做简写:

font-size: .8rem; padding: 0;

二、属性顺序的规范

理论上, CSS 的属性是一条一条解析执行的。这种情况下, 就要把能确定大小和位置的属性写在前面, 把对布局没什么影响的属性写在后面, 避免返工。

一般说的使用顺序如下:

1. 位置属性 (position, top, right, z-index, display, float等)  

2. 大小 (width, height, padding, margin)  

3. 文字系列 (font, line-height, letter-spacing, color- text-align等)  

4. 背景 (background, border等) 5. 其他 (animation, transition等)

注释规范

一 文件头注释

/*
* @Author: zhangsan
* @Date: 2023-04-18 20:09:21
* @Last Modified by: zhangsan
* @Last Modified time: 2023-05-05 10:21:21
*/



二 普通注释

/* 头部导航 */
.nav-top{
background: #ccc;
}

CSS-Reset

边距(margin)

margin-top:当前盒子距离上层盒子头部的像素;

margin-bottom:当前盒子距离上层盒子底部的像素;

margin-left:当前盒子距离上层盒子左部的像素;

margin-right:当前盒子距离上层盒子右部的像素;

案例

去掉白色部分

<!--head内部的css部分-->

<style type="text/css">

* { /*也可以写body*/

margin: 0px;

}

.box {

width: 300px;

height: 300px;

background-color: red;

margin: 0px;

}

.nav_box {

width: 100px;

height: 100px;

background-color: green;

margin: 0 auto;

}

</style>

<!--html body部分-->

<div class="box">

<div class="nav_box"></div>

</div>

天我教大家怎么零基础编写html框架

首先建立一个index.html文件,index(为首页的意思)

请大家先看看效果图

网站可分为三个部分

head头

<head></head>

body体

<body><body>

foot脚

<footer></footer>

在刚刚建好的index.html里面写上html标准代码

<!--这为文本类型也是html开始代码-->

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

其次给html写上编码让浏览器知道他是什么编码,不然会出现乱码

<!DOCTYPE html>

<html>

<head>

<!--网站编码为utf-8-->

<meta charset="utf-8">

<!--此为网站标题-->

<title></title>

</head>

<body>

</body>

</html>

在给网站起个标题

<!DOCTYPE html>

<html>

<head>

<!--网站编码为utf-8-->

<meta charset="utf-8">

<!--此为网站标题-->

<title>html框架</title>

</head>

<body>

</body>

</html>

现在我们开始写body体

先建立三个div块

我们给这三个块下个名称

在给这三个div块写上css样式,css样式有三种我们先讲内联,下节课再讲外联

再给css样式写上内容

/*width:为宽度;height :为高;background:为网站背景;(也可以用color表示)css样式要以;结尾*/

现在我们来看看效果

div块靠左,不美观怎么办?

没关系我们写上css让它居中更美观

/*margin:上边距 右边距 下边距 左边距;margin:0 auto; 0就是块离浏览器上边框的距离为0个像素点,auto为块自动居中*/

/*也可以用margin-left:左边距;margin-right: 右边距;margin-top: 上边距;margin-bottom: 下边距;*/

再让我们看看效果吧

是不是居中了

只是这样还不像网站怎办别急我们再给它写上幻灯片的框架和做导航和右内容框架

我们在建三个块分别命名为lmage(图片的意思)left(左)right(右)

我们在给这三个块写上css样式

让我们看看效果吧

让我们再给右内容区写的东西吧

我们再写上四个块

我们给这四个块写上css样式

.kuai1{

width: 50%;

height:50%;

background: #bcdbcd;

}

.kuai2{

width: 50%;

height:50%;

float: left;

background: #cdfcdf;

}

.kuai3{

width: 50%;

height:50%;

background: #defdef;

}

.kuai4{

width: 50%;

height:50%;

background: #efbefb;

}

这是我们会发现板块乱了怎么办,别担心现在教给你新知识那就是浮动代码

/*float:为浮动代码;(意为漂浮起来)*/

/*float:left;(向左浮动)float:right;(向右浮动)*/

让我们看看效果如何把

是不是很漂亮呢

好了现在我们就回顾一下这节课的知识点吧

<!--网站编码为utf-8-->

<meta charset="utf-8">

<!--这为网站标题-->

<title>html框架</title>

/*width:为宽度;height :为高;background:为网站背景;(也可以用color表示)css样式要以;结尾*/

/*margin:上边距 右边距 下边距 左边距;margin:0 auto; 0就是块离浏览器上边框的距离为0个像素点,auto为块自动居中*/

/*也可以用margin-left:左边距;margin-right: 右边距;margin-top: 上边距;margin-bottom: 下边距;*/

/*float:为浮动代码;(意为漂浮起来)*/

/*float:left;(向左浮动)float:right;(向右浮动)*/

<!--这为div(块)-->

<div class="header"></div>

<div class="body">

<div class="lmage"></div>

<div class="left"></div>

<div class="right">

<div class="kuai1"></div>

<div class="kuai2"></div>

<div class="kuai3"></div>

<div class="kuai4"></div>

</div>

</div>

<div class="footer"></div>

<!--class为块名称也可以用//id//,//name//为名称-->