`
Heson_Liu
  • 浏览: 16194 次
  • 性别: Icon_minigender_1
  • 来自: 南京
最近访客 更多访客>>
社区版块
存档分类
最新评论

CSS样式表初始化代码

 
阅读更多

CSS为什么要初始化?建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异。当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。

最简单的初始化方法就是: * {padding: 0; margin: 0;} 。有很多人也是这样写的。这确实很简单,但有人就会感到疑问:*号这样一个通用符在编写代码的时候是快,但如果网站很大,CSS样式表文件很大,这样写的话,他会把所有的标签都初始化一遍,这样就大大的加强了网站运行的负载,会使网站加载的时候需要很长一段时间。

写过css的都知道每个网页引进的css首先都需要初始化,而出名的css reset有YUI css reset(QQ、淘宝等都出现他的影子),业内用的最多的还有Erik Meyer’s CSS Reset。

花了点时间,把一些门户及大型网站的样式初始化罗列了下来(仅供参考)

 

腾讯QQ官网(http://www.qq.com)样式初始化

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}

 新浪官网(http://www.sina.com.cn/)样式初始化

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}
 
ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
 
a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

 淘宝官网(http://www.taobao.com/)样式初始化(淘宝的样式是经过压缩的,我自己拷下来格式化过的)

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

 网易官网(http://www.163.com/)样式初始化

html {overflow-y:scroll;}
body {margin:0; padding:29px00; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;}

 下面我贴出一段本站的CSS初始化的代码,当然,这并不是最好的写法,大家可以根据自己的习惯和喜好自行删减或增加!也欢迎大家提出更好的建议。

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin:0; padding:0; }
body { font-size:12px; color:#666; font-family:Verdana, Microsoft YaHei, Simsun; background:#fff; line-height:24px; }
fieldset, img { border:0; }
ol, ul { list-style:none; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
em { font-style:normal; }
input, button, select, textarea { outline:none; }
textarea { resize:none; } //禁用了文本的拖拉,尤其在谷歌下
p{ text-align:justify; text-justify:distribute;} //为了使文本段落左右两边对齐

a { color: #666; text-decoration:none; }
a:hover { color: #f60; text-decoration:none; }

 文章来源:http://blog.sina.com.cn/s/blog_71ed1b870101a52w.html

分享到:
评论

相关推荐

    minicss:在R中构建CSS选择器,样式和样式表

    minicss是用户创建的R6对象的集合,并相互封装以构建CSS样式表 需要建造… R6对象 备用初始化 CSS属性 css_prop CSS选择器 Selector$new() css_sel() 关键帧 Keyframe$new() css_keyframe() Keyframes$new() ...

    css入门笔记

    创建样式表文件(.css) 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <link rel="stylesheet" href="URL../.css"> 3.CSS样式特征 1.继承性 必须是父子(有层叠嵌套的关系)结构 大部分的...

    基于SSM框架的Java CRUD操作示例源码

    - CSS样式表:4个,定义了项目的样式和布局; - Map映射文件:4个,用于MyBatis的SQL映射; - JavaScript脚本:4个,实现了页面的动态交互; - JSP页面:3个,构成了用户界面; - Markdown文件:1个,可能包含项目...

    基于SpringBoot+VueJAVA的社团管理系统的设计与实现(源码+部署说明+演示视频+源码介绍).zip

    源码包含了整个系统的所有源代码,包括后端的Java代码、前端的JavaScript代码、HTML模板和CSS样式表。同时,源码中还包含了数据库的SQL脚本,用于创建数据库表和初始化数据。 部署说明提供了详细的部署步骤,包括...

    xheditor-1.1.14

    特别说明:两种初始化方法只能选择其中一种使用,如果两种方法的代码同时存在页面中,方法2的代码不会有任何效果。 我们更倾向于推荐大家使用方法1,因为更简单易用,不涉及任何的Javascript代码。通过简单的参数...

    基于SSM框架的员工管理系统源码

    - CSS样式表:4个,定义系统的界面风格与布局。 - Source Map文件:4个,用于调试前端代码。 - JSP页面:3个,构建系统的Web界面。 - SQL脚本:1个,包含数据库结构及初始数据。 - Properties文件:1个,存储系统...

    ASP.NET的网页代码模型及生命周期

    创建后文件会自动创建相应的HTML代码以便页面的初始化,示例代码如下所示。 “C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...

    欧拉公式求圆周率的matlab代码-wave-experiment:WebGL中的波浪模拟

    这包括用于基本排版的基本CSS样式表style.css,以及三个Javascript文件,three.js,TrackballControls.js和main.js。 我们使用事实上的标准WebGL Javascript库作为绘制3D图形的基础框架。 这提供了基本的渲染功能。 ...

    JavaScript权威指南(第6版)中文版pdf+源代码

     4.2 对象和数组的初始化表达式61  4.3 函数定义表达式62  4.4 属性访问表达式63  4.5 调用表达式64  4.6 对象创建表达式64  4.7 运算符概述65  4.8 算术表达式69  4.9 关系表达式74  4.10 逻辑表达式79  ...

    HTML开发王

    12.2.7 对象初始化(param元素) 12.2.8 对象的全局命名机制 12.2.9 对象的声明和实例化 12.3 使用object元素链入对象实践 12.3.1 链入java applet 12.3.2 链入flash影片(swf) 12.3.3 链入quicktime影片(mov) 12.3.4 ...

    基于springboot框架的网上商城系统的设计与实现.zip

    静态资源:包括CSS样式表、JavaScript脚本、图片和字体文件等,这些资源用于构建前端用户界面,提供良好的用户体验。文档说明:可能会包含README.md或其他文档文件,对项目的使用方法、功能特性、开发环境要求等进行...

    南阳理工学院PHP编程讲义.rar

    5.3.2 自定义变量的初始化··80 5.3.3 变量的范围··81 5.3.4 活动变量··83 5.3.5 外界PHP 变量···· 84 5.4 运算符····85 iii 5.4.1 算术运算符··85 5.4.2 赋值运算符··86 5.4.3 位运算符·...

    simple-todo-app-frontend:为简单的待办事项应用程式前端练习项目初始化回购

    安装依赖项导入组件代码分割添加样式表后处理CSS 添加CSS预处理器(Sass,Less等) 添加图像,字体和文件使用public文件夹更改HTML 在模块系统之外添加资产何时使用public文件夹使用全局变量添加引导程序使用自定义...

    基于SpringBoot+Vue的电商应用系统的设计与实现.zip

    静态资源:可能包括图片、CSS样式表、JavaScript脚本以及其他用于美化界面和增强用户体验的资源文件。文档说明:通常会提供README文件或者文档文件夹,其中包含了系统部署说明、功能描述、代码结构解读以及如何进行...

    JAVA上百实例源码以及开源项目源代码

    1个目标文件,JNDI的使用例子,有源代码,可以下载参考,JNDI的使用,初始化Context,它是连接JNDI树的起始点,查找你要的对象,打印找到的对象,关闭Context…… ftp文件传输 2个目标文件,FTP的目标是:(1)提高...

    基于fastapi的爬虫可视化调度系统源码+项目部署说明.zip

    ### 生成初始化账号密码 ```shell cd app python initial_data.py ``` ```shell username: admin@163.com password: 123456 ``` 功能 - [x] 登录/注销 - [x] Dashboard - [x] 支持切换主题色 :sparkles: - [x] ...

    JSP动态网页制作基础培训教程源代码.rar

    6 style.css 第10章\news\incoming 样式表文件 7 index.jsp 第10章\news 新闻浏览的主界面文件 8 article.jsp 第10章\news 新闻浏览的最终界面文件 9 login.jsp 第10章\news\admin 管理员登录页面文件 10 ...

    shopify-packer:使用Webpack 5的Shopify的现代开发工具。易于扩展和自定义,零构建配置,与Slate和现有网站兼容

    样式表中的液体代码 Webpack配置易于修改(使用dev.config.js和prod.config.js ) 应用服务器在本地加载脚本和样式表 热点模块重装,可快速开发 模板和布局的多个入口点 列出商店中的主题 从CLI删除主题 通过CLI在...

Global site tag (gtag.js) - Google Analytics