Restauración de CSS, estilos predeterminados para elementos comunes

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 retorno de carro como resultado cuando se usa, o el tamaño de la fuente y audacia para una etiqueta h1, junto con el espaciado.

Me doy cuenta de que es totalmente mi decisión de 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

¿Quieres decir como:

* { 
    padding: 0; 
    margin: 0; 
} 

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

?

En realidad, lo siento, mis-leer su pregunta, lo que busca es algo más parecido a reset total de Eric Meyer @http://meyerweb.com/eric/tools/css/reset/

Answer 2

YUI proporciona un archivo CSS de base que dará 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 YUI website. Esto es lo que he estado usando y funciona muy bien.

Answer 3

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

Puede hacer esto en el mismo archivo (YUI ofrece un reinicio de una línea creo que a veces lo incluyo como primera línea en mi archivo CSS) o en un archivo separado que aparece después de la etiqueta restablecer 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 en Blueprint CSS u otros marcos de cuadrícula. 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 4

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 un sample stylesheet for html 4.

Answer 5

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

Si ha aplicado un restablecimiento, a continuación, tendría que agregar las reglas para lo usted cree que es comportamiento normal. Dado que comportamiento normal varía de un navegador a otro, esta pregunta es algo así como un error. Me gusta la respuesta de @ da5id: use uno de los muchos restablecimientos disponibles y ajústelo para adaptarlo a sus necesidades.

Answer 6

Eche 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 de lo que quiere 'deshacer'.

Le recomiendo que vea los 40 minutos talk para ponerse al día.

Heres un breve 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; 
} 

descargar las hojas de estilo completo por debajo o read full documentation.

Yahoo reset css | Yahoo base (undo) reset css

Answer 7

Personalmente soy un gran fan 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 8

Normal behaviour for WebKit h1:

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

Normal behaviour for Gecko h1:

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

El resto de los elementos debe estar allí si usted busca los archivos.

Answer 9

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

para averiguar lo que su navegador piensa como predeterminado, abra un archivo HTML llanura con las listas y ver las listas con un depurador CSS como Firebug, y busque en la pestaña Computed.

Answer 10

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; }, agrego una clase CSS como r o reset y luego especifico que si es 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 que es trabajo y código extra, ¡sin embargo, tendrás todos tus estilos predeterminados intactos al final a cambio!

Answer 11

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 tener el navegador predeterminado font-size es no establecer la propiedad para nada 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% }, sino reemplazar * por una lista de selectores, como input, textarea { font-size: 100% } (la lista puede ser bastante larga, pero p.los valores predeterminados del navegador para font-size difieren del 100% solo para algunos elementos).

Por supuesto, es posible establecer propiedades a los valores que esperan 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 los ajustes esperados son (recogen aquí en una sola regla - en HTML5 CR que se dispersan alrededor):

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

(Hay reglas contextuales adicionales, por ejemplo, se espera que la anidación h1 dentro section para afectar a la configuración.)