当前位置:首页 > 日记 > 正文

目前比较完整的CSS重置复位方法概述

目前比较完整的CSS重置复位方法概述
在今天的网页设计/开发实践中,使用CSS将样式样式添加到X HTML标记中是很重要的。然而,现实中发生的事情总是相反的。许多CSS样式在不同的浏览器中有不同的解释和表示。
在今天的Web设计/开发实践中,使用CSS将样式风格添加到语义(x)HTML标记中是很重要的。在设计师的梦想中,存在这样一个完美的世界:所有浏览器都能理解和应用许多CSS规则,并呈现出同样的视觉效果(没有兼容性问题)。然而,我们并没有生活在这个完美的世界中。现实中发生的盗窃总是相反的。许多CSS样式在不同的浏览器中有不同的解释和表示。

流行的浏览器(如Firefox、歌剧、互联网、浏览器、Chrome、Safari等),有些是在以自己的方式理解CSS规范,这将导致冲突的一些解释和CSS的CSS的浏览器定义原创设计师,网页看起来像正确按照设计师的想法在某些浏览器的显示,但是有些浏览器不显示根据设计者想看,这导致了浏览器的兼容性问题。更糟糕的是,一些浏览器完全忽略了某些语句的属性和CSS。

因为以上的冲突和问题在这个不完美的世界中仍然存在,所以一些设计师已经考虑了一种避免浏览器兼容性问题的方法,那就是CSS重置,CSS重置是什么我们可以把它叫做CSS重置,有的人叫CSS重置,默认的CSS,CSS重置,etc.css复位是由于各种浏览器解释CSS样式的初始值是不同的,在一个设计师的CSS属性定义的情况下,根据自己的风格分配默认值不同的浏览器是没有定义的,所以我们必须首先定义了一些CSS样式,根据解释CSS相同的规则使所有的浏览器,这样你就可以避免这个问题。

1。最简单的CSS重置(重设):

CSS代码将内容复制到剪贴板。
{ *
填充:0;
保证金:0;
}

这是最常见和最简单的CSS重置,所有元素的填充和边距值被设置为0,这可以避免一些浏览器在理解这两个属性的默认值时,并将其拆分。

CSS代码将内容复制到剪贴板。
{ *
填充:0;
保证金:0;
边界:0;
}

这是在先前重置的基础上添加到边界属性的重置。0的初始值确实避免了一些问题。

CSS代码将内容复制到剪贴板。
{ *
大纲:0;
填充:0;
保证金:0;
边界:0;
}

在前两个基础上添加大纲属性的重置,以防止某些冲突。
两。密集实用CSS重置(复位):

CSS代码将内容复制到剪贴板。
{ *
垂直对齐:baselinebaseline;
字体重量:继承;
字体家族:继承;
字体风格:继承;
字体大小:100%;
大纲:0;
填充:0;
保证金:0;
边界:0;
}

这种CSS复位方法来自易腐烂的压力机,这是他常用的方法。

三、可怜的CSS重置:

CSS代码将内容复制到剪贴板。
HTML,体{
填充:0;
保证金:0;
}
{ HTML
字体大小:1em;
}
{体
字体大小:100%;
}
IMG,IMG:链接,访问img {
边境:0px;
}

此重置方法将HTML和正文的填充和边距元素设置为0,并分别设置HTML标记和主体标记的所有元素的初始字体大小。最重要的是删除链接图片的默认边框。

四siolonrsquo;全局复位。

CSS代码将内容复制到剪贴板。
{ *
垂直对齐:baselinebaseline;
字体家族:继承;
法罗群岛

NT样式:继承;
字体大小:100%;
边界:无;
填充:0;
保证金:0;
}
{体
填料:5px;
}
H1、H2、H3、H4、H5、H6、P、预、blockquote,形式,UL,OL,{ {
保证金:20px 0;
}
李,DD,加{
左:40px保证金;
}
表{
边界塌陷:塌陷;
边框间距:0;
}

五。Shaun Inmanrsquo的全局复位;

CSS代码将内容复制到剪贴板。
主体,div,dl,dt,DD,UL,OL,李,H1,H2,H3,H4。
填充:0;
保证金:0;
}
表{
边界塌陷:塌陷;
边框间距:0;
}
字段集,IMG,简称{
边界:0;
}
地址、标题、引用、代码,DFN,EM,
H1、H2、H3、H4、H5、H6、强、Th、VAR {
字体重量:正常;
字体样式:正常;
}
{ UL
列表样式:无;
}
标题,{
文本对齐:左对齐;
}
H1,H2,H3,H4,H5,H6 {
字体大小:1.0em;
}
问:之前,Q:{
内容;;
}
a,INS {
文字装饰:无;
}

六雅虎(YUI CSS重置):

CSS代码将内容复制到剪贴板。
主体,div,dl,dt,DD,UL,OL,李,H1,H2,H3,H4。
表格中输入文本,,,,,台湾、TH、TD {
填充:0;
保证金:0;
}
表{
边界塌陷:塌陷;
边框间距:0;
}
字段集,img {
边界:0;
}
地址、标题、引用、代码、DFN、EM、强、Th、VAR {
字体重量:正常;
字体样式:正常;
}
输入输出
列表样式:无;
}
标题,{
文本对齐:左对齐;
}
H1,H2,H3,H4,H5,H6 {
字体重量:正常;
字体大小:100%;
}
问:之前,Q:{
内容;;
}
Abbr,简称{
边界:0;
}

七。Eric Meyerrsquo的CSS重置;

CSS代码将内容复制到剪贴板。
HTML、体、div、跨度、小程序、对象、iframe、表、字幕,
thead,tfoot和tbody,TR、TH、TD、Del、DFN、EM、字体、IMG、INS,
大骨节病,Q,S,桑普,小,罢工,强,子,燮,TT,瓦尔河,
H1、H2、H3、H4、H5、H6、P、blockquote,预,,简称,
缩写,地址,大,引用,代码,DL,dt,DD,OL,UL,李,
Fieldset、形式、标签、传奇{
垂直对齐:baselinebaseline;
字体家族:继承;
字体重量:继承;
字体风格:继承;
字体大小:100%;
大纲:0;
填充:0;
保证金:0;
边界:0;
}
焦点{
大纲:0;
}
{体
背景:白色;
线高度:1;
颜色:黑色;
}
输入输出
列表样式:无;
}
表{
边界塌陷:分离;
边框间距:0;
}
字幕,第九章
字体重量:正常;
文本对齐:左对齐;
}
引用:引用:前,后,前,后问:问:{
内容;;
}
blockquote,问{
行情:;;;;
}

八、冷凝迈耶重置:

CSS代码将内容复制到剪贴板。
主体,div,dl,dt,DD,UL,OL,李,H1,H2,H3,H4。
前、中、形式、输入、文本、P、blockquote,TH、TD {
填充:0;
保证金:0;
}
字段集,img {
边界:0;
}
表{
边界塌陷:塌陷;
边框间距:0;
}
输入输出
列表样式:无;
}
地址、标题、引用、代码、DFN、EM、强、Th、VAR {
字体重量:正常;
字体样式:正常;
}
标题,{
文本对齐:左对齐;
}
H1,H2,H3,H4,H5,H6 {
字体重量:正常;
字体大小:100%;
}
问:之前,Q:{
内容;;
}
Abbr,简称{
边界:0;
}

九ateneu流行的CSS重置。

CSS代码将内容复制到剪贴板。
HTML、体、div、跨度、小程序、对象、H1、H2、H3 iframe,
H4、H5、H6、P、blockquote,预,,简称、缩写,
地址,大,引用代码,德尔,DFN、EM、字体、IMG、INS,
大骨节病,Q,S,桑普,小,罢工,强,子,燮,TT,
瓦尔河、DL、DT、DD、OL、UL、李、中、形式、标签、传说,
表格,标题,tbody tfoot,thead,TR、TH、TD {
保证金:0;
填充:0;
边界:0;
大纲:0;
字体重量:继承;
字体样式:继承;
字体大小:100%;
字体家族:继承;
垂直对齐:baselinebaseline;
}
焦点{
大纲:0;
}
A,A:链接,A:访问,A:悬停,A:活动{
文字装饰:无
}
表{
边界塌陷:分离;
边框间距:0;
}
钍,{ {
文本对齐:左对齐;
字体重量:正常;
}
IMG,iframe {
边界:无;
文字装饰:无;
}
输入输出
列表样式:无;
}
输入文本,选择按钮{
字体大小:100%;
字体家族:继承;
}
选择{
保证金:继承;
}
{人力资源
保证金:0;
填充:0;
边界:0;
颜色:# 000;
背景颜色:# 000;
身高:1px
}

十。Chris Poteetrsquo的重置CSS;

CSS代码将内容复制到剪贴板。
{ *
垂直对齐:baselinebaseline;
字体家族:继承;
字体样式:继承;
字体大小:100%;
边界:无;
填充:0;
保证金:0;
}
{体
填料:5px;
}
H1、H2、H3、H4、H5、H6、P、预、blockquote,形式,UL,OL,{ {
保证金:20px 0;
}
李,DD,加{
左:40px保证金;
}
表{
边界塌陷:塌陷;
边框间距:0;
}

十一。坦塔克·塞里克重置CSS

CSS代码将内容复制到剪贴板。
链接::访问{文本装饰:无}
UL,{清单样式:无}
H1,H2,H3,H4,H5,H6,预编码的字体大小:1em {;}
UL,OL,李,H1,H2,H3,H4,H5,H6,前体形式。
{边距:0;填充:0 }
IMG,IMG:链接,访问img { }:没有边界
地址{字体样式:正常}

十二基督教蒙托亚重置CSS

CSS代码将内容复制到剪贴板。
HTML,身体形态,fieldset {
保证金:0;
填充:0;
字体:100% / 120% Verdana,Arial,Helvetica,sans-serif;
}
H1、H2、H3、H4、H5、H6、P、预,
blockquote,UL,OL,DL,地址{
1em保证金:0;
填充:0;
}
李,DD,加{
左:1em保证金;
}
表单标签{
光标:指针;
}
fieldset {
边界:无;
}
输入、选择、文本{
字体大小:100%;
字体家族:继承;
}

十三rudeworks重置CSS。

CSS代码将内容复制到剪贴板。
{ *
保证金:0;
填充:0;
边界:无;
}
{ HTML
62.5%字体:Lucida GrandeLucida、Verdana、无衬线字体;
文字阴影:# 000 0px 0px 0px;
}
{ UL
列表样式:无;
列表样式类型:无;
}
H1、H2、H3、H4、H5、H6、P、预,
blockquote,UL,OL,DL,地址{
字体重量:正常;
保证金:00 1em 0;
}
引用,EM,DFN {
字体样式:斜体;
}
{燮
职位:相对;
bottombottom:0.3em;
垂直对齐:baselinebaseline;
}
{子
职位:相对;
bottombottom:-0.2em;
垂直对齐:baselinebaseline;
}
李,DD,加{
左:1em保证金;
}
代码,大骨节病、桑普、预、TT、瓦尔河、输入{类型中},{文本
字体大小:100%;
字体家庭:摩纳哥,龙力console快递单空间;
}
{德尔
文字装饰:线条贯穿;
}
INS,DFN {
底部边框:1px solid # CCC;
}
小,支持,{ {
字体大小:85%;
}
Abbr,简称{
文本转换:大写;
字体大小:85%;
字母间距:。1em;
边框底部样式:虚线;
底部边框宽度:1px;
}
一个缩写,缩写{
边界:无;
}
{燮
垂直对齐:超级;
}
{子
垂直对齐:子;
}
{ H1
字体大小:2em;
}
{ H2
字体大小:1.8em;
}
{ H3
字体大小:1.6em;
}
{ H4
字体大小:1.4em;
}
{ H5
字体大小:1.2em;
}
{ H6
字体大小:1em;
}
A,A:链接,A:访问,A:悬停,A:活动{
大纲:0;
文字装饰:无;
}
一个img {
边界:无;
文字装饰:无;
}
{ IMG
边界:无;
文字装饰:无;
}
标签,按钮{
光标:指针;
}
输入:焦点,焦点,焦点选择:文本:{
背景颜色:# FFF;
}
fieldset {
边界:无;
}
{清晰。
清楚:两者;
}
{向左浮动
浮点数:左;
}
{浮放。
浮:错误;
}
{体
文本对齐:中心;
}
{ #包装
保证金:0汽车;
文本对齐:左对齐;
}

十四。anieto2k重置CSS

CSS代码将内容复制到剪贴板。
HTML、体、div、跨度、小程序、对象、iframe,
H1,H2,H3,H4,H5,H6,P,
blockquote,预,,简称,缩写,地址,大,
引用代码,德尔,DFN、EM、字体、图片,
插件,大骨节病,Q,S,桑普,小,罢工,
强,亚,燮,TT,瓦尔河,dl,dt,DD,OL,UL,李,
Fieldset、形式、标签、传说,
表格,标题,tbody tfoot,thead,TR、TH、TD,
中心,u,b,i {
保证金:0;
填充:0;
边界:0;
大纲:0;
字体重量:正常;
字体样式:正常;
字体大小:100%;
字体家族:继承;
垂直对齐:baselinebaseline
}
{体
线高度:1
}
焦点{
概述:0
}
输入输出
列表样式:无
}
表{
边界塌陷:塌陷;
边框间距:0
}
引用:引用:前,后,前,后问:问:{
内容;
}
blockquote,问{
行情:;;
}
输入文本{
保证金:0;
填充物:0
}
{人力资源
保证金:0;
填充:0;
边界:0;
颜色:# 000;
背景颜色:# 000;
身高:1px
}

fifteen.csslab CSS重置

CSS代码将内容复制到剪贴板。
HTML、体、div、跨度、小程序、对象、H1、H2、H3 iframe,
H4、H5、H6、P、blockquote,预,,简称,缩写,地址,
大,引用代码,德尔,DFN、EM、字体、IMG、INS、大骨节病、Q、S
小,罢工,强,亚,燮,TT,瓦尔河,dl,dt,DD,OL,UL。
Fieldset、形式、标签、传说、表、字幕、tbody tfoot,
thead、TR、TH、TD {
保证金:0;
填充:0;
边界:0;
大纲:0;
字体重量:继承;
字体风格:继承;
字体大小:100%;
字体家族:继承;
垂直对齐:baselinebaseline;
}
焦点{
大纲:0;
}
表{
边界塌陷:分离;
边框间距:0;
}
字幕,第九章
文本对齐:左对齐;
字体重量:正常;
}
一个img,iframe {
边界:无;
}
输入输出
列表样式:无;
}
输入文本,选择按钮{
字体大小:100%;
字体家族:继承;
}
选择{
保证金:继承;
}
*在IE6或7×olrsquo数字固定位置不正确;
OL { margin-left: 2em;}
= = = = * / / * clearfix
{ clearfix:后。
内容:;
显示块;
身高:0;
清楚:两者;
可见性:隐藏;
}
。clearfix {显示:内联块;}
* HTML。clearfix {高度:1%;}
。clearfix {显示:块;}

那么,CSS重置首先在这里总结。这15种重置方法都是通用的。也许有些实现方法是不同的,但大多数都是为了相同的目的,所以更多的浏览器可以显示相同的效果。你也可以为自己定制一套CSS重置。

相关文章

网页背景的绘制

网页背景的绘制

绘制,网页背景,电脑软件,使用js插入图片并控制图片的宽度和高度,然后使用CSS缩放背景图片。下面是具体的实现过程,喜欢的朋友可以学习一下。 复制代码代码如下所示: 1。用js插入图片并控制图片宽度。 复制代码代码如下所示: $(函数(){()) $(); $(# mainb…

它是免费下载和使用QQ空间软件(wp7

它是免费下载和使用QQ空间软件(wp7

下载,空间,它是,电脑软件,QQ,它是免费下载和使用QQ空间软件(wp7版)的手机吗 手机QQ软件(wp7版)版本是完全免费下载和使用手机,下载和使用手机QQ空间软件需要连接到互联网,会产生GPRS流量费,由当地运营商收取流量费,请致电当地运营商咨询(移动联通电…

一张可爱的蓝色卡通钢笔

一张可爱的蓝色卡通钢笔

卡通,蓝色,可爱,电脑软件,本教程是介绍给朋友的,用CDR来画一支蓝色可爱的卡通笔。本教程所画的钢笔非常可爱,方法也很简单。我向你推荐,希望能对你有所帮助。 本教程是介绍朋友用CDR绘制的一支蓝色可爱卡通笔,该教程是关于画笔的画图过程,本文介…

div设置浮点后使下一个div另一行

div设置浮点后使下一个div另一行

浮点,设置,电脑软件,div,加入浮动后:左,按钮的标签将跟随区这意味着增加一个类来明确他们之间的div。下面的例子可以看到。 今天正在做一个网页项目,例如: 复制代码代码如下所示: 请不要直接打开此页。 返回 这是当出口增加浮动:左在CSS,它会使…

C#默认运行程序实现代码管理员

C#默认运行程序实现代码管理员

默认,管理员,运行,代码,程序,最后一篇博客写了如何通过网络时间来更新系统时间,以及如何在那个时候进行测试,但没有成功。然后我想到了是否我的操作系统上开发的Win8。当时我猜想的权威不足以修改系统时间,所以我把它作为一个管理员,结果是成功…

PS设计和制作的特殊效果,从墙上剥落

PS设计和制作的特殊效果,从墙上剥落

墙上,特殊效果,电脑软件,PS,本文主要介绍PS设计与制作在墙上的特效,教程很棒,和你喜欢的朋友可以一起学习。 影响: 原始图: 为了节省空间,我尝试制作一个短篇故事。首先添加一个渐变填充层。 输入几个字母~ 双击字母层打开图层样式,添加渐变~ 内…

ai字体实时颜色示例教程

ai字体实时颜色示例教程

字体,教程,实时,示例,颜色,本教程是朋友介绍ai字体实时颜色的例子,教程比较简单,适合初学者学习,希望通过本教程你能对ai实时颜色有更深的理解和应用。 在AI,有一个快速、准确、方便、直观的矢量图形的着色方法,即实时颜色。如果你需要彩色图形…

教你用烟花画现实菲尔普斯飞利浦

教你用烟花画现实菲尔普斯飞利浦

菲尔,烟花,普斯,教你用,现实,本教程介绍Fireworks绘制菲尔普斯手机使用,绘制效果非常逼真,因为绘画更多的步骤的过程中,作者没有做一个详细的介绍,简单的文字,但教程是很实用的,它又是值得学习,与大家一起分享学习 本教程介绍Fireworks绘制菲尔普…

新手:PS设计容易忽略的五个问题

新手:PS设计容易忽略的五个问题

新手,电脑软件,PS,本教程是一个很容易被忽视的五个问题,当朋友介绍ps来设计图片时。这是新手必看的新课程。有些错误是经验中的错误,有些是容易找到的。其他人可能不知道你为什么这么做。 当你知道一个菜鸟对PS图象处理软件有一个神奇的工具,…

使用jQuery管理选择结果

使用jQuery管理选择结果

选择,电脑软件,jQuery,jQuery选择的元素非常类似于数组。它们可以由jQuery提供的一系列方法处理,包括长度、查找元素和截取段落。 1。获取元素的个数。 在jQuery中,选择器中的元素数量可以通过大小()方法获得,这与数组中的长度属性类似,并返回…

PHP批量删除cookie的一种简单实现

PHP批量删除cookie的一种简单实现

简单实现,方法,批量删除,电脑软件,PHP,本文介绍了php批量删除cookie的简单实现,供大家参考,具体实现方法如下: 复制代码代码如下: Cookie:删除单个密钥集为空,时间设置时间已过期。 setcookie(名 删除多个cookie,遍历数组 foreach(_cookie美元…

PHP堆排序原理及应用方法

PHP堆排序原理及应用方法

方法,堆排序,原理,电脑软件,PHP,本文介绍了PHP堆排序的原理和应用,供大家参考,具体分析如下: 下面是用PHP作为描述语言的堆排序原则的更详细的解释。由于程序的可读性,没有进行优化,PHP程序中关于堆的一些概念如下: 假设n是当前数组的关键,母的N…