CSS重置样式

jsbintask 发布于2019-08-29 13:02 / 1281人阅读

摘要：没有必要的样式或者是会再次对这个标签写样式的时候，浏览器就会二次渲染，所以也要尽量的减少重置样式。在一批拥有同样的头部脚部的样式中，我会把公共的样式放在重置样式表里。

先来看看各大型网站的重置样式

新浪初始化

html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img {
  margin: 0;
  padding: 0
}
fieldset,img {
   border: 0
}
img {
  display: block
}
address,caption,cite,code,dfn,th,var {
    font-style: normal;
    font-weight: normal
}
ul,ol {
    list-style: none
}
input {
    padding-top: 0;
    padding-bottom: 0;
    font-family: "SimSun","宋体"
}
input::-moz-focus-inner {
    border: 0;
    padding: 0
}
select,input {
    vertical-align: middle
}
select,input,textarea {
    font-size: 12px;
    margin: 0
}
 input[type="text"],input[type="password"],textarea {
    outline-style: none;
    -webkit-appearance: none
}
textarea {
    resize: none
}
table {
    border-collapse: collapse
}

京东的初始化

* {
    margin: 0;
    padding: 0
 }
em,i {
    font-style: normal
}
li {
    list-style: none
}
img {
    border: 0;
    vertical-align: middle
}
button {
    cursor: pointer
}
a {
    color: #666;
    text-decoration: none
}
a:hover {
    color: #c81623
}

我对样式重置的看法 一、什么时候会用重置样式？

1、其实每个网站的重置样式应该都是不同的。
2、没有必要的样式或者是会再次对这个标签写样式的时候，浏览器就会二次渲染，所以也要尽量的减少重置样式。
3、我们应该合理灵活的使用标签，在网页中有些样式是一模一样的，比如所有或者是大部分的文本p标签中字体样式一样而且行高也一样，那么可以统一设置。包括其他标签，在大量使用的过程中可以统一设置margin,padding,width,height,display,text-align等，这样可以减少css样式，代码简洁，可读可改性高。

二、怎么用重置样式？

1、重置css可以整体的调整整个网站的基本样式，比如网页占据的大部分字体样式，字体大小，字体颜色，还有最基本的有序无序列表和a链接的样式。
2、在一批拥有同样的头部脚部的样式中，我会把公共的样式放在重置样式表里。
3、还有针对网站的个别标签的样式特殊处理，比如我所有的a链接都应该是蓝色的等。
4、在需要大幅度使用的样式的时候，会另取一个类名主要针对需要此样式的标签，比如flyLeft{float:left};，flyRight{float:right};向左向右浮动的样式，或者是清除浮动的样式。

我的重置样式表

body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{
    margin: 0;
}   
ol,ul{
    margin: 0; 
    padding: 0;
}
li{
    list-style: none
}
input,button,textarea{
    padding: 0;
}
/*另外：button和input本身有2px的边框，textarea和select本身有1px的边框，根据实际情况调整，或是去掉边框*/
table{
    /*为表格设置合并边框模型*/
    border-collapse: collapse;
    /*设置表格边框之间的空白*/
    border-spacing: 0px;
}
/*去掉a链接的下划线*/
a{ 
    text-decoration: none;
}
a:hover{ 
    text-decoration: none;
}
/*个别浏览器对语义化标签的兼容*/
header, section, footer, aside, nav, main, article, figure {
    display: block; 
}
h1,h2,h3,h4,h5,h6,em,i,b,cite {
    /*字体样式不加粗*/
    font-weight: normal;
    font-style: normal;
}
a,input,button {
      /* 清除点击阴影 */
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
body * {
    /* 选中文字设置 */
    -weibkit-user-select: none;
     /* 禁止文字缩放 */
    -webkit-text-size-adjust: 100%;
}

GPU云服务器云服务器样式重置 css样式页面css样式 css的样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112327.html

CSS基础篇--css reset重置样式有那么重要吗？

摘要：在以前写代码的时候，一般都会在里添加重置样式，其内容如下但是最近在网上看了看网络文章，也感觉有些重置是没有用的。当然重置的优点，缺点都不说了，估计心里都非常有数的，还是要根据实际项目来。后来主管给我推荐了一款替代重置的替代方案，那就是用。在以前写html代码的时候，一般都会在head里添加重置样式reset.css，其内容如下： @charset utf-8; html, body,...

rockswang 2019-08-28 18:16 评论0 收藏0
前端、HTML+CSS+JS编写规范（终极版）

摘要：文档规范和文档必须采用编码格式文档必须使用的标准文档格式编写规范和的标签属性类名都必须使用小写字母和的属性类名命名必须具有语义化代码必须保持文档结构清晰，必须合理的进行代码缩进文件禁止样式表内引用文件编写格式，样式代码保持一行，多个选择器 HTMLCSS文档规范 HTML和CSS文档必须采用UTF-8编码格式； HTML文档必须使用HTML5的标准文档格式； HTMLCSS编写规范...

jsyzchen 2019-08-01 18:15 评论0 收藏0
前端、HTML+CSS+JS编写规范（终极版）

摘要：文档规范和文档必须采用编码格式文档必须使用的标准文档格式编写规范和的标签属性类名都必须使用小写字母和的属性类名命名必须具有语义化代码必须保持文档结构清晰，必须合理的进行代码缩进文件禁止样式表内引用文件编写格式，样式代码保持一行，多个选择器 HTMLCSS文档规范 HTML和CSS文档必须采用UTF-8编码格式； HTML文档必须使用HTML5的标准文档格式； HTMLCSS编写规范...

_Dreams 2019-08-22 11:23 评论0 收藏0
前端、HTML+CSS+JS编写规范（终极版）

摘要：文档规范和文档必须采用编码格式文档必须使用的标准文档格式编写规范和的标签属性类名都必须使用小写字母和的属性类名命名必须具有语义化代码必须保持文档结构清晰，必须合理的进行代码缩进文件禁止样式表内引用文件编写格式，样式代码保持一行，多个选择器 HTMLCSS文档规范 HTML和CSS文档必须采用UTF-8编码格式； HTML文档必须使用HTML5的标准文档格式； HTMLCSS编写规范...

Developer 2019-08-29 14:04 评论0 收藏0
关于CSS Reset 那些事（一）之历史演变与Normalize.css

摘要：下面开始对进行简单的介绍，关于两者的差异区别可以看问答平台使用遇到的问题和有什么本质区别没简单介绍关于对的介绍，这里引用咀嚼之味针对官方介绍翻译的的中文版本。目前已经成为了的替代方案是无可争议的事情了。前言近期在翻阅陈旧的历史资料，整理之前饱受争议的CSS Reset问题，不过好像十多年过去，现在大家统一了口径，纷纷推荐使用Normalize.css，包括Bootstrap都进行...

idealcn 2019-08-28 18:12 评论0 收藏0