Grado Medio

UT. 3 CSS

1. Primeros pasos con CSS


CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas.


Separar la definición de los contenidos y la definición de su aspecto presentanumerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (también llamados "documentos semánticos"). Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes.


¿Cómo incluir CSS en un documento XHML?


a) Incluir CSS en el mismodocumento HTML


Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta de HTML y solamente se pueden incluir en la cabecera del documento (sólo dentro de la sección ).


Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML





Ejemplo de estilos CSS en elpropio documento


p { color: black; font-family: Verdana; }



 
Un párrafo de texto.



b) Definir CSS en un archivo externo

Los estilos CSS se incluyen en un archivo de tipo CSS que las páginas HTML enlazan mediante la etiqueta . Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es .css Se pueden crear todos los archivos CSS que sean necesarios ycada página HTML puede enlazar tantos archivos CSS como necesite

Se crea un archivo de texto y se le añade solamente el siguiente contenido CSS, p.ej:

p { color: black; font-family: Verdana; }
Se guarda el archivo de texto con un nombre, p. ej estilos.css (Se debe poner especial atención a que el archivo tenga extensión .css)



Ejemplo de estilos CSS en un archivo externo• rel: indica el tipo de relación que tiene el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet
• type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css
• href: indica la URL del archivo CSS que contiene los estilos. La URL indicadapuede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web. P. ej si guardamos el archivo en una carpeta de nombre css, quedaría: " href="css/estilos.css"
• media: indica el medio en el que se van a aplicar los estilos del archivo CSS. (screen, print, all, ….)

Sintaxis de un estilo CSS

[pic]
• Regla: cada uno de los estilos que componen una hoja de estilosCSS. Cada regla está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({), otra parte denominada "declaración" y por último, un símbolo de "llave de cierre" (}).
• Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
• Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS.
•Propiedad: característica que se modifica en el elemento seleccionado, como por ejemplo su tamaño de letra, su color de fondo, etc.
• Valor: establece el nuevo valor de la característica modificada en el elemento.

2. Selectores


Selector de tipo o etiqueta


Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector.



EJEMPLOS
|p {|h1 { |h2 { |
|... |color: red; |color: blue; |
|} |} |} |


Si nos encontramos con selectores que comparten estilos comunes se pueden...