Entrar al aula
×

Estilos CSS genéricos

A la hora de definir los estilos para una página Web puede ocurrir que no se vea de igual manera en todos los navegadores utilizados, puesto que cada uno tiene por defecto aplicados unos estilos predeterminados que afectan a elementos concretos. Esto implica que según el navegador utilizado los estilos se muestren de distinta manera aplicados sobre los elementos y no siempre se muestre la página Web como a nosotros nos gustaría.

Por tanto, es aconsejable definir una hoja de estilo en la que se declaren las reglas necesarias para resetear los estilos adoptados por el navegador y que de este modo se restablezcan los valores que tienen por defecto algunos de los elementos.

Un ejemplo de código CSS utilizado para ello puede ser el siguiente:

 body, fieldset, input, textarea, p, blockquote, th, td,
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form {
    padding: 0;
    margin: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset, img {
    border: 0;
}
code, dfn, em, strong, th, var, address, caption, cite {
    font-weight: normal;
    font-style: normal;
}
ol, ul {
    list-style: none;
}
caption, th {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-size: 100%;
}
q:before, q:after {
    content:'';
}
abbr, acronym {
    border: 0;
}

Además, en vez de utilizar una hoja de estilo en la que se defina una gran cantidad de elementos con unos valores por defecto asignados, también se pueden definir estilos genéricos universales, mediante el selector universalEs un selector CSS mediante el cual podemos aplicar los estilos declarados en su interior a todos y cada uno de los elementos que se definan en el cuerpo de la página Web, y para el que utilizaremos el símbolo asterisco (*).. Las declaraciones sobre este selector se aplicarán sobre todos los elementos que se encuentren definidos dentro de la página Web, como por ejemplo los utilizados en el siguiente código:

* {
    padding: 0;
    border: 0;
    margin: 0;
}

Por último, no solo podemos definir los valores por defecto para cada uno de los elementos de la página Web. También podemos definir clases genéricas, de manera que desde una única declaración se puedan aplicar estilos sobre cualquier elemento que cumpla una serie de condiciones, como por ejemplo que esté situado en una posición concreta, la alineación de su contenido, etc. A continuación, podemos ver un ejemplo:

 .alineadoizquierda {
    text-align: left;
}
.alineadocentrado {
    text-align: center;
}
.alineadoderecha {
    text-align: right;
}
.floatizquierda {
    float: left;
}
.floatderecha {
    float: right;
}

En Internet podemos encontrar muchos ejemplos de ficheros CSS pensados para hacer el reset del navegador ya comentado. Indicamos A continuación, algunos muy conocidos: