css重设样式_清除浏览器的默认样式
由于不同的浏览器默认的样式也不同,所以在网页开发前设置一个公用样式,来清除各个浏览器的默认样式,已达到做的网页在各个浏览器中达到统一。
收集的默认样式的链接地址:
1.eric-meyer-reset-css
http://cssreset.com/scripts/eric-meyer-reset-css/
2.html-5-reset-stylesheet
http://html5doctor.com/html-5-reset-stylesheet/
3.yahoo-css-reset-yui-3
http://cssreset.com/scripts/yahoo-css-reset-yui-3/
4/universal-selector-css-reset
http://cssreset.com/scripts/universal-selector-css-reset/
5normalize-css
http://cssreset.com/scripts/normalize-css/
下面介绍几个主流的CSS Reset代码:
1、Eric Meyer:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: ;
padding: ;
border: ;
font-size: %;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: ;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: ;
}
2、YUI
/*
YUI 3.4.1 (build 4118)
Copyright 2011 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
/*
TODO will need to remove settings on HTML since we can't namespace it.
TODO with the prefix,should I group by selector or property for weight savings?
*/
html {
color:#;
background:#FFF;
}
/*
TODO remove settings on BODY since we can't namespace it.
*/
/*
TODO test putting a class on HEAD.
- Fails on FF.
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {
margin:;
padding:;
}
table {
border-collapse:collapse;
border-spacing:;
}
fieldset,img {
border:;
}
/*
TODO think about hanlding inheritence differently,maybe letting IE6 fail a bit...
*/
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym {
border:;
font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup {
vertical-align:text-top;
}
sub {
vertical-align:text-bottom;
}
input,textarea,select {
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}
/*to enable resizing for IE*/
input,textarea,select {
*font-size:%;
}
/*because legend doesn't inherit in IE */
legend {
color:#;
}
资源网站搜索大全https://55wd.com
3、csslab
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, header, footer, hgroup, menu, nav, section, time, mark, audio, video {
margin: ;
padding: ;
border: ;
outline: ;
font-weight: inherit;
font-style: inherit;
font-size: %;
}
article, aside, nav, section, dialog, figure, header, footer, hgroup {
display:block;
}
legend {
display:none;
}
:focus {
outline: ;
}
table {
border-collapse: collapse;
border-spacing: ;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
a img, iframe {
border: none;
}
ul {
list-style: none;
}
input, textarea, select, button {
font-size: %;
font-family: inherit;
}
input, select {
vertical-align:middle;
}
select {
margin: inherit;
}
button {
border: ;
padding: ;
background: transparent;
cursor: pointer;
}
/* Fixes incorrect placement of numbers in ol's in IE6/7 */
ol { margin-left:2em; }
/* ========================================= clearfix == */
.clearfix:after {
content: ".";
display: block;
height: ;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: %;}
.clearfix {display: block;}
需要说明的是CSS Reset并不是一成不变的,具体还需要根据项目的不同需求做适当的修改,以达到浏览器的兼容和操作上的便利性。
css重设样式_清除浏览器的默认样式的更多相关文章
- 【转】}目前比较全的CSS重设(reset)方法总结
在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视 ...
- 目前比较全的CSS重设(reset)方法总结
在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是 重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的 ...
- CSS重设(reset)
在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视 ...
- (转)目前比较全的CSS重设(reset)方法总结
在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视 ...
- 目前比较全的CSS重设(reset)方法总结(转)
原文地址 在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈 ...
- 重置浏览器的默认样式(css reset)
(1)定义:首先css reset指的是重置浏览器的默认样式 (2)作用:因为现在的浏览器很多,并且每个浏览器都有自己的默认样式,这样就会导致一个页面在多个浏览器下展示产生差异,所以我们需要做一些处理 ...
- 比较全的css重设
一.最简化的CSS Reset(重设) : * { padding:; margin:; } 这是最普遍最简单的CSS重设,将所有元素的padding和margin值都设为0,可以避免一些浏览器在理解 ...
- CSS 重设文章
CSS 重设 http://blog.bingo929.com/css-reset-collection.html
- 整理base.css,重设浏览器样式
有的时候,可以把自己经常写的代码整理一下,分文别类,用的时候,拿过来直接用就可以了,可以节约很多时间,提高工作效率.所以,每个人都要有自己的代码库.点击下载 /* * @Author: liubeim ...
随机推荐
- Javascript实现万年历(日历表)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- java实现第五届蓝桥杯奇怪的分式
奇怪的分式 题目描述 上小学的时候,小明经常自己发明新算法.一次,老师出的题目是: 1/4 乘以 8/5 小明居然把分子拼接在一起,分母拼接在一起,答案是:18/45 (参见图1.png) 老师刚想批 ...
- Cordova+ionic+angular 项目从 UIWebView 更换为 WKWebView ,通过IOS审核
当前 cordova-ios 最新版本 5.1.1 新版本 cordova-ios 将删除 UIWebView 代码中的所有引用.WKWebView 将是 Cordova 的默认 Web 视图. ...
- 用云开发Cloudbase,实现小程序多图片内容安全监测
前言 相比于文本的安全检测,图片的安全检测要稍微略复杂一些,当您读完本篇,将get到 图片安全检测的应用场景 解决图片的安全校验的方式 使用云调用方式对图片进行检测 如何对上传图片大小进行限制 如何解 ...
- 举一个有趣的例子,让你轻松搞懂JVM内存管理
目录 前言 例子 源码 输出 图解 深入分析 学以致用 写在最后 前言 在JAVA虚拟机内存管理中,堆.栈.方法区.常量池等概念经常被提到,对理论知识的理解也常常停留在字面意思上,比如说堆内存中存放对 ...
- 01.vue-router的基本使用
Vue前端路由 1. npm install vue-router --save 2.脚手架安装 一.目录结构 二.index.js // 0.导入vue和路由插件 import Vue from ' ...
- CSS中的百分比(%)如何使用???
除了height以外垂直方向上的margin-top(bottom)或者padding-top(bottom)的百分比取值都是相对于父元素的宽度 在默认的content-box盒模型下元素的width ...
- <Win10开发>一些小知识。
这篇文章分享一下UWP开发的一些零散的小知识. 1.设置应用的最小尺寸 主要用在PC上,UWA在PC可以被鼠标随意摆弄,可大可小,界面的响应式设计是一大特点.不过有些时候还是要考虑,我们的App界面元 ...
- 分享一个我自己做的 Excel 万年历
下载链接在此. 纯 Excel 公式实现,带农历,可自定义节日.配色. 带有紧凑日历和记事日历两种日历,均可直接 Ctrl+P 打印,且打印时不带有顶部的控制栏.
- 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(六)
系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...