trucos

TRUCOS AVANZADOS CON CSS

 
Las hojas de estilos son un tema largo del que se han escrito libros enteros. Nosotros nos centramos en los temas prácticos y por ello vamos a acabar ya con estecapítulo, en unos cuantos puntos
Definir estilos utilizando clases
Las clases nos sirven para crear definiciones de estilos que se pueden utilizar repetidas veces.
Una clase se puede definir entre lasetiquetas (en la cabecera del documento), o en un archivo externo a la página. Para definirlas utilizamos la siguiente sintaxis, un punto seguido del nombre de la clase y entre llaves los atributos deestilos deseados. De esta manera:
.nombredelaclase {atributo: valor; atributo2:valor2;...}
Una vez tenemos una clase, podemos utilizarla en cualquier etiqueta HTML. Para ello utilizaremos elatributo clases, poniéndole como valor el nombre de la clase, de esta forma:

Ejemplo de la utilización de clases


Ejemplo de la utilización de class

.fondonegroletrasblancas{background-color:black;color:white;font-size:12;font-family:arial}
.letrasverdes {color:#009900}



Titulo 1
Titulo 2

Esto es un pá rrafo con estilo de letras verdes

Esto es un párrafo conestilo de fondo negro y las letras blancas. Es todo!


Ejecutar este Ejemplo

Estilo en los enlaces
Una técnica muy habitual, que se puede realizar utilizando las hojas de estilo en cascada y nose podía en HTML, es la definición de estilos en los enlaces, quitándoles el subrayado o hacer enlaces en la misma página con distintos colores.
Para aplicar estilo a los enlaces debemos definirlospara los distintos tipos de enlaces que existen (visitados, activos...). Utilizaremos la siguiente sintaxis, en la declaración de estilos global de la página () o del sitio (Definición en un archivoexterno): 

Enlaces normales 
A:link {atributos}
Enlaces visitados 
A:visited {atributos}
Enlaces activos (Los enlaces están activos en el preciso momento en que se pincha sobre ellos) ...