Restablecer CSS se refiere a restablecer el estilo del navegador. En artículos anteriores de 52CSS.com, se introdujeron conocimientos similares, pero no fueron lo suficientemente profundos. Hoy veremos diez ejemplos del método CSS Reset y aprenderemos la aplicación de este método.
En varios navegadores, se utilizan algunos valores predeterminados para los selectores de CSS. Por ejemplo, cuando h1 no está configurado en un valor, se muestra un tamaño determinado. Pero no todos los navegadores utilizan los mismos valores, por lo que se utiliza CSS Reset para que el estilo de la página web se comporte de forma coherente en cada navegador.
1. Restablecer CSS genérico
* {
relleno: 0;
margen: 0;
borde: 0;
}
Este también es un método de reinicio de CSS, que establece el relleno, el margen y el borde de todos los selectores en 0. Este es un método poderoso, el más simple y seguro, sin embargo, también es el que consume más recursos. Para sitios web pequeños, usar esto no causará un gran desperdicio de recursos, pero si se trata de un sitio web con una estructura muy grande como Yahoo, solo necesita restablecer CSS selectivamente para reducir el desperdicio de recursos.
2. Ateneu Popular CSS Restablecer
html, cuerpo, div, span, subprograma, objeto, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acrónimo,
citar, del, dfn, em, grande, img, código, dirección, ins,
kbd, q, s, samp, pequeño, huelga, fuerte, sub, sup, tt,
var, dl, dt, dd, ol, ul, li, conjunto de campos, formulario, etiqueta, leyenda,
mesa, título, tbody, tfoot, thead, tr, th, td {
margen: 0;
relleno: 0;
borde: 0;
contorno: 0;
peso de fuente: heredar;
estilo de fuente: heredar;
tamaño de fuente: 100%;
familia de fuentes: heredar;
alineación vertical: línea de base;
}
:enfoque {esquema: 0;}
a, a:enlace, a:visitado, a:hover, a:active{text-decoration:none}
tabla { colapso de borde: separado; espaciado de borde: 0;}
th, td {text-align: left; font-weight: normal;}
img, iframe {borde: ninguno; decoración de texto: ninguno;}
ol, ul {estilo de lista: ninguno;}
entrada, área de texto, seleccionar, botón {tamaño de fuente: 100%; familia de fuentes: heredar;}
seleccione {margen: heredar;}
hr {margen: 0;relleno: 0;borde: 0;color: #000;color de fondo: #000;alto: 1px}
3. Restablecer CSS de Chris Poteet
* {
alineación vertical: línea de base;
familia de fuentes: heredar;
estilo de fuente: heredar;
tamaño de fuente: 100%;
borde: ninguno;
relleno: 0;
margen: 0;
}
cuerpo {
relleno: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, cita en bloque, formulario, ul, ol, dl {
margen: 20px 0;
}
li, dd, cita en bloque {
margen izquierdo: 40px;
}
mesa {
colapso fronterizo: colapso;
espaciado de bordes: 0;
}
4. Cuerpo de reinicio de CSS de Yahoo
,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
formulario,fieldset,entrada,textarea,p,blockquote,th,td {
relleno: 0;
margen: 0;
}
mesa {
colapso fronterizo: colapso;
espaciado de bordes: 0;
}
conjunto de campos, img {
borde: 0;
}
dirección,título,citar,código,dfn,em,strong,th,var {
peso de fuente: normal;
estilo de fuente: normal;
}
ol, ul {
estilo de lista: ninguno;
}
título, th {
alineación de texto: izquierda;
}
h1,h2,h3,h4,h5,h6 {
peso de fuente: normal;
tamaño de fuente: 100%;
}
q:antes,q:después {
contenido:";
}
abbr,acrónimo { borde: 0;
}
5. Eric Meyer Restablecer CSS
html, cuerpo, div, span, subprograma, objeto, iframe, tabla, título,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, pequeño, huelga, fuerte, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acrónimo, dirección, grande, citar, código, dl, dt, dd, ol, ul, li,
conjunto de campos, formulario, etiqueta, leyenda {
alineación vertical: línea de base;
familia de fuentes: heredar;
peso de fuente: heredar;
estilo de fuente: heredar;
tamaño de fuente: 100%;
contorno: 0;
relleno: 0;
margen: 0;
borde: 0;
}
:enfocar {
contorno: 0;
}
cuerpo {
fondo: blanco;
altura de línea: 1;
color: negro;
}
ol, ul {
estilo de lista: ninguno;
}
mesa {
colapso de fronteras: separado;
espaciado de bordes: 0;
}
título, th, td {
peso de fuente: normal;
alineación de texto: izquierda;
}
blockquote:antes, blockquote:después, q:antes, q:después {
contenido: "";
}
cita en bloque, q {
citas: "" "";
}
6. Tantek Celik Restablecer CSS
:link,:visited { text-decoration:none }
ul,ol {estilo de lista:ninguno}
h1,h2,h3,h4,h5,h6,pre,código {tamaño de fuente:1em}
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,formulario,cuerpo,html,p,blockquote,fieldset,entrada
{ margen:0; relleno:0 }
a img,:enlace img,:visitado img { borde:ninguno }
dirección { font-style:normal }
7. Christian Montoya Restablecer CSS
html, cuerpo, formulario, conjunto de campos {
margen: 0;
relleno: 0;
fuente: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, dirección {
margen: 1em 0;
relleno: 0;
}
li, dd, cita en bloque {
margen izquierdo: 1em;
}
etiqueta de formulario {
cursor: puntero;
}
conjunto de campos {
borde: ninguno;
}
entrada, seleccionar, área de texto {
tamaño de fuente: 100%;
familia de fuentes: heredar;
}
8. Rudeworks Restablecer CSS
* {
margen: 0;
relleno: 0;
borde: ninguno;
}
html {
fuente: 62,5% "Lucida Grande", Lucida, Verdana, sans-serif;
sombra de texto: #000 0px 0px 0px;
}
ul {
estilo de lista: ninguno;
tipo de estilo de lista: ninguno;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, dirección {
peso de fuente: normal;
margen: 0 0 1em 0;
}
citar, em, dfn {
estilo de fuente: cursiva;
}
sorber {
posición: relativa;
abajo: 0,3em;
alineación vertical: línea de base;
}
sub {
posición: relativa;
abajo: -0,2em;
alineación vertical: línea de base;
}
li, dd, cita en bloque {
margen izquierdo: 1em;
}
código, kbd, samp, pre, tt, var, entrada[tipo='texto'], área de texto {
tamaño de fuente: 100%;
familia de fuentes: monaco, “Lucida Console”, courier, monoespacio;
}
del {
decoración de texto: línea recta;
}
ins, dfn {
borde inferior: 1px sólido #ccc;
}
pequeño, sup, sub {
tamaño de fuente: 85%;
}
abbr, acrónimo {
transformación de texto: mayúsculas;
tamaño de fuente: 85%;
espacio entre letras: .1em;
estilo de borde inferior: punteado;
ancho del borde inferior: 1 px;
}
una abreviatura, un acrónimo {
borde: ninguno;
}
sorber {
alineación vertical: súper;
}
sub {
alineación vertical: sub;
}
h1 {
tamaño de fuente: 2em;
}
h2 {
tamaño de fuente: 1,8 em;
}
h3 {
tamaño de fuente: 1,6 em;
}
h4 {
tamaño de fuente: 1,4 em;
}
h5 {
tamaño de fuente: 1,2 em;
}
h6 {
tamaño de fuente: 1em;
}
a, a:enlace, a:visitado, a:hover, a:activo {
esquema: 0;
decoración de texto: ninguna;
}
una imagen {
borde: ninguno;
decoración de texto: ninguna;
}
imagen {
borde: ninguno;
decoración de texto: ninguna;
}
etiqueta, botón {
cursor: puntero;
}
entrada:enfoque, seleccione:enfoque, textarea:enfoque {
color de fondo: #FFF;
}
conjunto de campos {
borde: ninguno;
}
.claro {
claro: ambos;
}
.float-izquierda {
flotador: izquierda;
}
.float-derecha {
flotar: derecha;
}
cuerpo {
alineación de texto: centro;
}
#envoltorio {
margen: 0 automático;
alineación de texto: izquierda;
}
9. Anieto2K Restablecer CSS
html, cuerpo, div, span, subprograma, objeto, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acrónimo, dirección, grande,
citar, del, dfn, em, img, código, fuente
ins, kbd, q, s, samp, pequeño, huelga,
fuerte, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
conjunto de campos, formulario, etiqueta, leyenda,
mesa, leyenda, tbody, tfoot, thead, tr, th, td,
centro, u, b, i {
margen: 0;
relleno: 0;
borde: 0;
contorno: 0;
peso de fuente: normal;
estilo de fuente: normal;
tamaño de fuente: 100%;
familia de fuentes: heredar;
alineación vertical: línea base
}
cuerpo {
altura de línea: 1
}
:enfocar {
esquema: 0
}
ol, ul {
estilo de lista: ninguno
}
mesa {
colapso fronterizo: colapso;
espaciado de bordes: 0
}
blockquote:antes, blockquote:después, q:antes, q:después {
contenido: ""
}
cita en bloque, q {
citas: "" ""
}
entrada, área de texto {
margen: 0;
relleno: 0
}
hora {
margen: 0;
relleno: 0;
borde: 0;
color: #000;
color de fondo: #000;
altura: 1px
}
10. CSSLab CSS Restablecer
html, cuerpo, div, span, subprograma, objeto, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acrónimo, dirección,
grande, citar, código, del, dfn, em, fuente, img, ins, kbd, q, s, samp,
pequeño, huelga, fuerte, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
conjunto de campos, formulario, etiqueta, leyenda, tabla, título, tbody, tfoot,
cabeza, tr, th, td {
margen: 0;
relleno: 0;
borde: 0;
contorno: 0;
peso de fuente: heredar;
estilo de fuente: heredar;
tamaño de fuente: 100%;
familia de fuentes: heredar;
alineación vertical: línea de base;
}
:enfocar {
contorno: 0;
}
mesa {
colapso de fronteras: separado;
espaciado de bordes: 0;
}
título, th, td {
alineación de texto: izquierda;
peso de fuente: normal;
}
una imagen, iframe {
borde: ninguno;
}
ol, ul {
estilo de lista: ninguno;
}
entrada, área de texto, seleccionar, botón {
tamaño de fuente: 100%;
familia de fuentes: heredar;
}
seleccionar {
margen: heredar;
}
/* Corrige la colocación incorrecta de números en ol's en IE6/7 */
ol { margen izquierdo: 2em }
/* == clearfix == */
.clearfix:después {
contenido: ".";
mostrar: bloquear;
altura: 0;
claro: ambos;
visibilidad: oculta;
}
.clearfix {pantalla: bloque en línea;}
* html .clearfix {altura: 1%;}
.clearfix {display: block;}
Todos estos son similares, con diferentes necesidades y diferentes métodos.