style - Restablecimiento de CSS, estilos predeterminados para elementos comunes

style html ejemplos

Question

Después de aplicar un restablecimiento de CSS, quiero volver al comportamiento ''normal'' para elementos html como: p, h1..h6, strong, ul y li.

Ahora cuando digo normal quiero decir, por ejemplo, el elemento p agrega espaciado o un retorno de carro como resultado cuando se usa, o el tamaño de la fuente y la negrita para una etiqueta h1, junto con el espaciado.

Me doy cuenta de que depende totalmente de mí cómo quiero establecer el estilo, pero quiero volver al comportamiento normal de algunos de los elementos más comunes (al menos como punto de partida que puedo modificar más adelante).

Answer 1

"Después de aplicar un restablecimiento de CSS, quiero volver al comportamiento ''normal'' para los elementos html ..."

Si ha aplicado un reinicio, entonces deberá agregar las reglas para lo que cree que es un comportamiento normal . Dado que el comportamiento normal varía de un navegador a otro, esta pregunta es algo que no tiene sentido. Me gusta la respuesta de @ da5id: use uno de los muchos restablecimientos disponibles y ajústelo para adaptarlo a sus necesidades.

Answer 2

Una de las reglas para aplicar estilos CSS es "último en ganar". Esto significa que si los estilos de restablecimiento de CSS establecen elementos en el margin:0; padding:0 margin:0; padding:0 puede anular estas reglas declarando luego los valores deseados para los mismos elementos.

Puede hacer esto en el mismo archivo (YUI ofrece un restablecimiento de una sola línea, creo, así que a veces lo incluyo como la primera línea en mi archivo CSS) o en un archivo separado que aparece después de restablecer la etiqueta CSS <link/> .

Creo que por comportamiento normal te refieres a "los valores predeterminados de mi navegador favorito". Su creación de reglas de CSS para estos elementos es parte del ejercicio de reinicio.

Ahora es posible que desee examinar Blueprint CSS u otros marcos de grillas. Estas estructuras de grillas casi siempre restablecen los estilos a nada, luego construyen la tipografía para elementos comunes, etc. Esto podría ahorrarle algo de tiempo y esfuerzo.

Answer 3

Si desea ver los valores por defecto de css para firefox, busque un archivo llamado ''html.css'' en la distribución (debe haber algunos otros archivos css útiles en el mismo directorio). Puede elegir las reglas que desee y aplicarlas después de un reinicio.

Además, el estándar CSS2 tiene una hoja de estilo de muestra para html 4 .

Answer 4

Echa un vistazo a YUI (convenciones de la interfaz de usuario de código abierto de Yahoo).

Tienen una hoja de estilo base que deshace su propio restablecimiento css. No recomiendan absolutamente que lo use en producción, ya que es contraproducente, pero definitivamente podría valer la pena revisar el archivo para obtener fragmentos relevantes para lo que quiere ''deshacer''.

Te recomiendo que mires la charla de 40 minutos para ponerte al día.

Aquí hay un pequeño fragmento de su archivo base.css:

ol li {
    /*giving OL''s LIs generated numbers*/
    list-style: decimal outside;    
}
ul li {
    /*giving UL''s LIs generated disc markers*/
    list-style: disc outside;
}
dl dd {
    /*giving UL''s LIs generated numbers*/
    margin-left:1em;
}
th,td {
    /*borders and padding to make the table readable*/
    border:1px solid #000;
    padding:.5em;
}
th {
    /*distinguishing table headers from data cells*/
    font-weight:bold;
    text-align:center;
}

Descargue las hojas de estilo completas a continuación o lea la documentación completa.

Yahoo reset css | Yahoo base (deshacer) resetear css

Answer 5

Personalmente soy un gran admirador de BlueprintCSS . Restablece los estilos en todos los navegadores y proporciona algunos valores predeterminados realmente convenientes (que es lo que desea el 90% del tiempo). También proporciona una cuadrícula de diseño, pero no tiene que usar eso si no lo necesita.

Answer 6

En lugar de utilizar un reinicio total de CSS, piense en usar algo como Normalizar , que "conserva los valores predeterminados útiles".

Para descubrir lo que su navegador considera como predeterminado, abra un archivo HTML sin formato con listas y vea las listas con un depurador de CSS como Firebug , y busque en la pestaña Computed .

Answer 7

No estoy restableciendo todos los elementos de forma predeterminada porque los estilos predeterminados de alguna manera dependen del navegador, por lo que varían de un navegador a otro. En lugar de usar algo como ul, ol { list-style: none; } ul, ol { list-style: none; } , Estoy agregando una clase CSS como r o reset y luego especifico que si eso es un ul que tiene una clase r , reinícielo o de lo contrario déjelo intacto.

Por cierto, necesitas agregar class="reset" (por ejemplo) a todos esos elementos, lo cual es trabajo y código extra, ¡sin embargo, tendrás todos tus estilos predeterminados intactos al final a cambio!

Answer 8

Una vez que haya asignado un valor a una propiedad CSS de un elemento, no hay forma de recuperar el valor "normal" para él, suponiendo que "normal" significa "predeterminado del navegador", como parece significar aquí. Por lo tanto, la única forma de tener, por ejemplo, un elemento h1 con el font-size predeterminado del navegador es no configurar la propiedad en su código CSS.

Por lo tanto, para eximir algunas propiedades y elementos del restablecimiento de CSS, debe usar un restablecimiento CSS más limitado. Por ejemplo, no debe usar * { font-size: 100% } pero replace * por una lista de selectores, como input, textarea { font-size: 100% } (la lista puede ser bastante larga, pero por ejemplo, los valores predeterminados del navegador para font-size difiere del 100% solo para algunos elementos).

Por supuesto, es posible establecer propiedades a los valores que espera que sean valores predeterminados del navegador. No hay garantía de que esto tendrá el efecto deseado en todos los navegadores, actuales y futuros. Pero para algunas propiedades y elementos, esto puede ser relativamente seguro, porque los valores predeterminados tienden a ser similares.

En particular, puede usar la sección Rendering en HTML5 CR. Describe la "representación esperada", no es un requisito, aunque los proveedores de navegadores pueden decidir reclamar su conformidad si así lo desean, y en general esto probablemente mantendrá las implementaciones bastante similares a este respecto. Por ejemplo, para h1 las configuraciones esperadas se recopilan aquí en una regla: en HTML5 CR están distribuidas por todos lados:

h1 {
unicode-bidi: isolate;
display: block;
margin-top: 0.67em;
margin-bottom: 0.67em;
font-size: 2.00em;
font-weight: bold;
}

(Existen reglas contextuales adicionales, por ejemplo, se espera que la section dentro de la jerarquía h1 afecte a la configuración).

Answer 9

YUI proporciona un archivo CSS base que proporcionará estilos consistentes en todos los navegadores ''A-grade''. También proporcionan un archivo de restablecimiento de CSS, por lo que también podrías usarlo, pero dices que ya has reiniciado el CSS. Para más detalles, vaya al sitio web de YUI . Esto es lo que he estado usando y funciona muy bien.

Answer 10

Te refieres a:

* {
    padding: 0;
    margin: 0;
}

h1, h2, h3, h4, h5, h6, p, blockquote, form, label, ul, ol, dl, fieldset, address {
    margin-bottom: 1em;
}

?

En realidad, lamento haber leído mal tu pregunta, estás buscando algo más parecido al restablecimiento total de Eric Meyer @ http://meyerweb.com/eric/tools/css/reset/

Answer 11

Comportamiento normal para WebKit h1 :

h1 {
    display: block;
    font-size: 2em;
    margin: .67__qem 0 .67em 0;
    font-weight: bold
}

Comportamiento normal para Gecko h1 :

h1 {
    display: block;
    font-size: 2em;
    font-weight: bold;
    margin: .67em 0;
}

El resto de los elementos debería estar allí si busca los archivos.