博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css样式重置方案 -解决浏览器差异
阅读量:4983 次
发布时间:2019-06-12

本文共 4664 字,大约阅读时间需要 15 分钟。

1.http://meyerweb.com/eric/tools/css/reset/

/* http://meyerweb.com/eric/tools/css/reset/    v2.0 | 20110126   License: none (public domain)*/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: 0;	padding: 0;	border: 0;	font-size: 100%;	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: 1;}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: 0;}

2.http://yuilibrary.com/yui/docs/cssreset/

/*YUI 3.18.1 (build f7e7bcb)Copyright 2014 Yahoo! Inc. All rights reserved.Licensed under the BSD License.http://yuilibrary.com/license/*/html{color:#000;background:#FFF}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:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}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:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

Getting Started

Include Dependencies

To use CSS Reset, include the following source file in your web page:

Global vs. Contextual

YUI's CSS resources apply rules to HTML elements directly (using ). An alternate version of the resource is available that target elements by context only. This contextual -context.css version selects HTML elements only when they descend from the .yui3-cssreset classname.

Here is how to include the contextual version of CSS Reset:

Using CSS Reset

Using CSS Reset Globally

CSS Reset is easy to use. When CSS Reset is loaded it removes the inconsistent styling of HTML elements provided by browsers. Now, just begin writing the CSS rules your project needs without being burdened by what the browser thinks you need.

Here is an  once CSS Reset has been included in the page globally.

Using CSS Reset Contextually

If you're using the contextual version, CSS Reset's rules are only applied to nodes that descend from a node with a class value of .yui3-cssreset. In this example, CSS Reset applies to the h1 in the left column, but does not impact the h1 in the right column:

Lorem Ipsum

Lorem Ipsum

Here is an  because it is being used contextually.

 3.

/* undohtml.css *//* (CC) 2004 Tantek Celik. Some Rights Reserved.             *//*   http://creativecommons.org/licenses/by/2.0                   *//* This style sheet is licensed under a Creative Commons License. *//* Purpose: undo some of the default styling of common (X)HTML browsers *//* link underlines tend to make hypertext less readable,    because underlines obscure the shapes of the lower halves of words */:link,:visited { text-decoration:none }/* no list-markers by default, since lists are used more often for semantics */ul,ol { list-style:none }/* avoid browser default inconsistent heading font-sizes *//* and pre/code too */h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }/* remove the inconsistent (among browsers) default ul,ol padding or margin  *//* the default spacing on headings does not match nor align with    normal interline spacing at all, so let's get rid of it. *//* zero out the spacing around pre, form, body, html, p, blockquote as well *//* form elements are oddly inconsistent, and not quite CSS emulatable. *//*  nonetheless strip their margin and padding as well */ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{ margin:0; padding:0 }/* whoever thought blue linked image borders were a good idea? */a img,:link img,:visited img { border:none }/* de-italicize address */address { font-style:normal }/* more varnish stripping as necessary... */

  

  

  

 

转载于:https://www.cnblogs.com/sybboy/p/5508298.html

你可能感兴趣的文章
各种抗锯齿模式略解:SSAA MSAA CSAA CFAA
查看>>
Oracle 11g中修改默认密码过期天数和锁定次数
查看>>
分布式开源调度框架TBSchedule原理与应用
查看>>
css3-无缝滚动左右滚动,且可以暂停
查看>>
161101、在Java中如何高效判断数组中是否包含某个元素
查看>>
170518、FastDFS_配置文件详解
查看>>
Scala: Case classes
查看>>
160530、memcached集群(spring集成的配置)
查看>>
2016summer 训练第一场
查看>>
1.1最基本的使用--maven的下载与安装
查看>>
关于Web与JS
查看>>
软件说明
查看>>
ebook-nodej
查看>>
Qt学习(14)
查看>>
015_NGINX作为WebSocket Proxy的设置
查看>>
NOIP2011T2 统计单词数
查看>>
springboot情操陶冶-@Conditional和@AutoConfigureAfter注解解析
查看>>
每日5min分享-接口测试框架
查看>>
超好用超短的小程序请求封装
查看>>
PHP 解析Url 面向对象
查看>>