7 de noviembre de 2017

:: CSS. Reseteo de estilos

Es habitual que para resetear los estilos CSS cuando vamos a desarrollar un tema, utilizar el selector global: "*". Por ejemplo:
*{
margin:0;
padding:0;
}


Aunque es correcto, quizás podría utilizarse una opción no tan drástica:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

El objetivo de las hojas de estilo "reset" es reducir las inconsistencias del navegador correspondientes a la altura de las líneas, márgenes y tamaños de fuentes de los encabezados, y muchas otras cosas.

Los estilos anteriores son muy genéricos; por ejemplo no hay ningún color establecido para el body. Este CSS da únicamente unas pautas a seguir, pero deberíamos adaptarlo a cada caso particular, por ejemplo definiendo, colores de la página, enlaces,...

Más información: https://meyerweb.com/eric/tools/css/reset/

No hay comentarios:

Publicar un comentario

Déjanos tu comentario

:: Liferay. Script para ir al inicio de la página

En diversos temas de apariencia es necesario contar un enlace que permita al usuario realizar un scroll al inicio de la página. Este comport...