( cascade style sheets ) permite aplicar un diseño en general al documento HTML sin tener que modificar página tras página.
Su aplicación es en cascada porqué se aplica a todo mientras no se indique lo contrario.
El HTML únicamente sirve para indicar la estructura de una página: cabecera, menú principal, contenido, pie de página..
Las hojas de estilo definen como serán cada uno de los apartados del documento.
Por ejemplo: Para el encabezado "h1" le definimos la tipografía, el cuerpo de la letra, si tendrá fondo, etc. De forma que todo lo que tenga la etiqueta "h1" tendrá la misma apariencia.
En CSS las propiedades se indican de manera específica:
En nuestros estilos elegimos fuentes seguras, son aquellas que funcionan en todos los ordenadores de forma que nos asegura que se verán correctamente en cualquier sitio.
El CSS no es solo aplicable a elementos como etiquetas sino también a cajas, Divs, tablas, etc.
Cada etiqueta tiene su formato y su ID. Podemos hacer un estilo para los dos a la vez.
-Estilo ID: se llama igual que la ID que le damos con # delante para identificarla.
-Si las etiquetas se contradicen la ID tiene más valor que el resto de selectores.
ejemplo: tenemos la etiqueta "body" con tipografía arial y una ID para el segundo párrafo con tipografía Helvética, pues tiene más importancia la ID de forma que ese párrafo sería en Helvética.
Desde el mismo documento HTML:
Los estilos pueden ser internos, es decir, estar escritos en el código HTML.
Estando en DreamWeaver abajo a la izquierda nos aparece la siguiente barra:
Elegimos nueva regla CSS y le damos a editar regla. Nos aparecerá un panel donde debemos elegir el tipo de estilo que le vamos a aplicar:
Como podemos ver nos aparecen cuatro tipos de selectores para CSS:
1- Clase: su etiqueta siempre va precedida por un punto " .verd " (por ejemplo) y se puede aplicar múltiples veces: " .verd {color: ### ;} " pero solo a los elementos que le indicamos. Este selector está por encima de los otros. Ejemplo:
.h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #930;
text-decoration: underline;
}
Anotación: DreamWeaver está traducido a Español, pero los códigos no porqué html está en inglés, y hace referencia al apartado con ese nombre, si lo traducimos no funciona.
2- ID, identidad: sólo son aplicables a un único elemento de la página ( menú, encabezado, etc.). Va precedido por una almohadilla.
Ejemplo:
#p {
font-family: Tahoma, Geneva, sans-serif;
font-size: 36px;
font-weight: bold;
}
3- Etiqueta: se aplica a las etiquetas únicamente, no a los elementos.
4- Compuesto: podemos crear una combinación de selector entre los tres anteriores.
En el panel de estilo nos muestra los que tenemos creados. "Estilo CSS / Todo "
Desde un documento CSS.
Los pasos son los mismos, solo que en lugar de estar en el documento HTML tenemos que crear un documento nuevo CSS desde DreamWeaver.
Este archivo tendrá el formato .css, por ejemplo: style.css.
Para vincular el archivo .css vamos al apartado HTML y en el head ponemos:
No hay comentarios:
Publicar un comentario