Esto es una pagina en la que vamos a explicar como crear estilos css y sus características:
Existen tres tipos de estilos css:
En primer lugar hablaremos de estilos asociado a etiquetas:
Por ejemplo como <p> que afectará a todos los párrafos. Creamos una nuevo estilo css en nuestra hoja de estilos, elegimos la opción etiqueta y en el desplegable "etiqueta" escogemos una tipografía, un tamaño, color... y aceptamos. Inmediatamente observamos como todo nuestro texto cambia a las opciones que hemos escogido.
De esta manera podemos manejar varios estilos de texto para utilizar en nuestra web. Los estilos css no solo sirven para el texto. Si Hacemos un estilo para la etiqueta <Body> y en las opciones de Fondo escogemos un color, automáticamente el color de fondo de nuestra página cambiará.
También podemos hacer un estilo css para las imágenes, en este caso con un margen de 200 px y con un borde negro.
En segundo lugar estan las etiquetas de clase que las podemos aplicar a cualquier elemento puntual. Por ejemplo para este resaltado del texto creo una etiqueta que se llame citas. Para aplicarlo debo seleccionar el texto y desde la paleta de propiedades elegir el estilo "citas".
Los estilos clase nos servirán también para hacer variaciones puntuales en los estilos a etiquetas, por ejemplo en esta imagen hemos variado el margen y el borde. Debemos seleccionar la imagen y aplicarle el estilo que hemos creado desde el panel de propiedades.
En tercer y último lugar podemos crear estilos avanzados, estos tienen varias funciones. Una es crear un estilo para todos los vinculos de nuestra web, como este, de esta manera eliminarmos los subrallados y coloreados tan molestos. Debemos activar la opción avanzadas, y escoger a:link y definir un tipo, color, y activar la casilla sin decoración. Con otro estilo a:hover manejamos el rollover. Podemos hacer un vínculo falso en el texto seleccionándolo y poniendo una # en la casilla vínculo de la paleta de propiedades.
Las etiquetas avanzadas también nos sirven para dar formato a etiquetas DIV. Para esto hacemos un estilo Css avanzado con nombre CUADRO_RESALTADO en "cuadro" elegimos con un margen izquierdo y derecho de 300 px, en "espacio" escogemos 10 px, en "borde" escogemos solido, intermedio, color negro. Insertamos una etiqueta DIV desde la paleta insertar:
Las etiquetas DIV nos van a servir para definir la reticula de nuestra pagina web y distribuir los contenidos de una manera muy flexible. Esto lo vamos a trabajar en el ejercicio siguiente.