¿Sabes qué es el restablecimiento de CSS? Por lo general, también se escribe como Restablecer CSS, que restablece el estilo del navegador. 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.
Si está utilizando CSS, ¿ha utilizado alguna vez Restablecer CSS? Por supuesto, tal vez lo use pero no sepa que lo está usando. Por ejemplo, puede usar:
| * {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. El siguiente es el código de restablecimiento de CSS de Yahoo, que también es el método de restablecimiento de CSS más popular. El método elegido por YUI es:
| cuerpo,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; } |
Bien, creo que ya comprende el propósito del restablecimiento de CSS. Quizás también pueda escribir su propio sistema de restablecimiento de CSS según sus preferencias. Después de todo, las necesidades y hábitos de cada persona son diferentes. Y puedes consultar los siguientes:
Restablecimiento de CSS popular de Ateneu
| 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} |
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; } |
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: "" ""; } |