DIV+CSS网页模板开发初始化CSS的好处

2016-03-02    编辑:edit02_lz     点击(
记得笔者初学css的时候,对很多标签调起来比较吃力,原来他们都有默认的margin和padding,而且在各浏览器默认的值不同,后来一同学告诉我要对css进行初始化,直到现在我每次制作css网页时都会对网页的CSS或Html中标签进行必要的初始化。

为什么要初始化CSS呢,有什么作用?

每次新开发网站或新网页时候我们通过初始化CSS样式的属性,为我们将用到的CSS或html标签更加方便准确。假如我们不初始化CSS样式属性,将会增大CSS代码量,为我们节约网页代码,节约网页下载时间;还会使得我们开发网页内容时更加方便简洁,不用考虑很多。如果不初始化CSS我们在开发比较复杂的网页时候就不会知道自己是否已经设置了此处的CSS属性,是否和前面的CSS属性相同,是否统一整个网页的风格和样式。

需要初始化地方有哪些:

大致一般需要初始化有h1到h4标签、table、文字大小、文字没有链接颜色、超链接样式、DIV、居中、ol、 ul、li、img等等的样式,这里我们总结了初始化后CSS文件或叫CSS模板供大家参考使用,可根据自己实际增减。

CSS模板与HTML模板实用于每次新开发页面使用

首先给大家分享我的及CSS网页使用的开头CSS模板;HTML+CSS模板divcss5初始化XHTML(DIV+CSS初始化模板)

此处提供DIVCSS5每次开发项目时候使用的DIV+CSS模板初始化最基本的模板模块。

暂时展示UTF-8版模板代码

每次新开发页面的共同可用的CSS代码模板如下:

@charset "utf-8";
body, div,iframe, ul, ol, dl, dt, dd, li, dl,
h1, h2, h3, h4, table,th, td, input, button, select,
 textarea {margin:0; padding:0;
font-style: normal;font:12px/22px "5B8B4F53",Arial, Helvetica, sans-serif;}
/* 5B8B4F53 宋体 更多中文字体 */
ol, ul ,li{list-style: none;}
img {border: 0; vertical-align:middle;}
body{color:#000000;background:#FFF; text-align:center;}
.clear{clear:both;height:1px;width:100%;
 overflow:hidden; margin-top:-1px;}
a{color:#000000;text-decoration:none; } 
a:hover{color:#F00;}
 
.red ,.red a{ color:#F00;}
.blue ,.blue a{ color:#1E51A2;}
 
.lf{float:left;}
.rt{float:right;}
 
.pt5{padding-top:5px;}
.pb5{padding-bottom:5px;}
 
#header ,#main ,#footer{ margin:0 auto;
 width:980px; overflow:hidden}
 
#main_left{ float:left;}
#main_right{ float:right;}

 

说明下这个首先是对全站的CSS进行一次初始化,并重新赋予新属于,这样来统一整站样式。

每次新开发页面的HTML代码模板如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML模板 UTF-8 </title>
<meta name="keywords" content="关键词" />
<meta name="description" content="关键词描述" />
<link rel="stylesheet" href="images/style.css" />
<script src="JS文件路径地址" type="text/javascript"></script>
</head>
<body>
<a href="http://www.baidu.com/">111cn.com </a>
欢迎您使用初始化的HTML+CSS模板!<br />
学习网址: www.111cn.com
<div class="clear"></div>
<span style="display:none">DIVCSS5提示这里可以放置网站统计代码</span>
</body>
</html>