Tema 3: Introducción a las hojas de estilo en cascada CSS
Qué son las hojas de estilo en cascada o 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 presenta numerosas 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. 2
Ejemplo de una página sin hojas de estilo <html> <head> </head> <body> </body> </html> <title>ejemplo de estilos sin CSS</title> <h1><font color="red" face="arial" size="5">titular de la página</font></h1> <p><font color="gray" face="verdana" size="2">un párrafo de texto no muy largo.</font></p> Ver ejemplo 01 3
Glosario Básico CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos CSS. El siguiente esquema muestra las partes que forman un estilo CSS muy básico: Selector h1 { color: red; Regla Propiedad Valor /*Esto es un comentario*/ 4
1. Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({), otra parte denominada "declaraciones" y por último, un símbolo de "llave de cierre" (). 2. Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS. 3. Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS. 4. Propiedad: permite modificar el aspecto de una característica del elemento. 5. Valor: indica el nuevo valor de la característica modificada en el elemento. 5
Ejemplo de una página con hojas de estilo <html > <head> <title>ejemplo de estilos con CSS</title> <style type="text/css"> h1 { color: red; font family: Arial; font size: 40px; p { color: gray; font family: Verdana; font size: medium; </style> </head> <body> <h1>titular de la página</h1> <p>un párrafo de texto no muy largo.</p> </body> </html> 6
Incluir hoja de estilo desde un fichero diferente En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas HTML enlazan mediante la etiqueta <link>. Se pueden crear todos los archivos CSS que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como necesite. En este ejemplo, el fichero prodria llamarse style.css y su contenido sería: h1 { color: red; font family: Arial; font size: 40px; p { color: gray; font family: Verdana; font size: medium; Y la forma de incluir el archivo css en en el head de la siguiente manera: <head> </head> <title>ejemplo de estilos CSS en un archivo externo</title> <link rel="stylesheet" type="text/css" href="/css/estilos.css > Ver ejemplo 02 7
Normalmente, la etiqueta <link> incluye cuatro atributos cuando se enlaza un archivo CSS: 1.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 2.type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css 3.href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web. Con este método, el mantenimiento del sitio web se simplifica al máximo, ya que un solo cambio en un solo archivo CSS permite variar de forma instantánea los estilos de todas las páginas HTML que enlazan ese archivo. 8
Incluir estilos en los elementos HTML ELECTIVA FE I <html> <head> </head> <body> <title>ejemplo de estilos CSS en el propio documento</title> <p style="color: black; font family: Verdana;">Un párrafo de texto.</p> </body> </html> Ver ejemplo 03 9
Selectores básicos Selector universal: Se utiliza para aplicarle una propiedad a todos los elementos de la página. /*Establece el margen a 0 para todos los elementos de la página*/ * { margin: 0; padding: 0; Selector de tipo o etiqueta: Aplica la propiedad a todos los elementos que concuerden con el valor del selector. h2 { color: blue; p { color: black; 10
Si hay una propiedad que se desea aplicar a un conjunto de elementos y hay otras que se quieren aplicar de manera independiente, se puede hacer de la siguiente manera. h1, h2, h3 { color: #8A8E27; font weight: normal; font family: Arial, Helvetica, sans serif; h1 { font size: 2em; h2 { font size: 1.5em; h3 { font size: 1.2em; Ver ejemplo 04 ELECTIVA FE I 11
Selectores descendentes Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento. <html> <head> <title>ejemplo de estilos con CSS</title> <style type="text/css"> p span { color: red; </style> </head> <body> <p>un párrafo de <span>texto</span> no muy largo.</p> </body> </html> Ver ejemplo 05 12
Selectores de clase Son los que aplican sus propiedades utilizando el atributo class de las etiquetas. /* estilo.css */.aviso { padding: 0.5em; border: 1px solid #98be10; background: #f6feda;.error { color: #930; font weight: bold; Ver ejemplo 06 <! Pagina principal > <html> <head> <title>selectores de clase</title> <link rel="stylesheet" type="text/css" href= estilo.css" /> </head> <body> <span class="error">este es un primer ejercicio</span> <div class="aviso">espero que nos funcione</div> </body> </html> 13
Unidades de medida Las medidas en CSS se emplean, entre otras, para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño de letra del texto. Todas las medidas se indican como un valor numérico entero o decimal seguido de una unidad de medida Unidades relativas La mas utilizada son los pixeles o px, ya que dependen del tamaño de la pantalla del usuario. h1 { font size: 15px; 14
Unidades absolutas 1.in, del inglés "inches", pulgadas (1 pulgada son 2.54 centímetros) 2.cm, centímetros 3.mm, milímetros 4.pt, puntos (1 punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros) 5.pc, picas (1 pica equivale a 12 puntos, es decir, unos 4.23 milímetros) Ejemplo de utilización body { margin: 0.5in; h1 { line height: 2cm; p { word spacing: 4mm; a { font size: 12pt span { font size: 1pc 15
Los porcentajes Generalmente se utilizan para definir la anchura de los elementos.contenido{ width:600px; background: yellow;.principal{ width:80%; background:blue; Ver ejemplo 07 <html> <head> <title>ejemplo de medidas</title> <link rel="stylesheet" type="text/css" href="07_pag36.css" /> </head> <body> <div class="contenido"> Hola como estas <div class="principal"> Este es el otro div. </div> </div> </body> </html> 16
Asignación de Colores Existen palabras reservadas que definen algunos colores: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow. También se puede especificar mediante su valor en hexadecimal.contenido{ background:#9966ff;.fondo{ background:red; 17
Modelo de cajas: Propiedades mas interesantes width: Todos los elementos, salvo los elementos en línea que no sean imágenes, las filas de tabla y los grupos de filas de tabla. height: Todos los elementos, salvo los elementos en línea que no sean imágenes, las columnas de tabla y los grupos de columnas de tabla. margin top, margin right, margin bottom, margin left: Establece los márgenes que tendrá un elemento en relación a su contenedor. 18
margin: Esta propiedad sirve para establecer los cuatro valores de una manera más directa. div img { margin top:.5em; margin bottom:.5em; margin left: 1em; margin right:.5em; Alternativa directa: div img { margin:.5em.5em.5m 1em; Otra alternativa: div img { margin:.5em; ELECTIVA FE I 19
padding top, padding right, padding bottom, padding left: Define cada uno de los relleno que deberá de contener un determinado cuadrado. padding: Al igual que margin, se utiliza para establecer los cuatro valores a la vez. Ver ejemplo 08. 20
Bordes border top width, border right width, border bottom width, border left width: Sirve para indicar el ancho de cada uno de los bordes. div { border top width: 10px; border right width: medium; /*Borde medio*/ border bottom width: thick; /*Borde grueso*/ border left width: thin; /*Borde delgado*/ border width: Se utiliza para definir todos los grosores en una sola sentencia. p { border width: thin /*Se aplica el borde thin a los cuatro lados*/ p { border width: thin thick medium thin 21
Color de Bordes border top color, border right color, border bottom color, border left color: Establece el color de cada uno de los bordes del area. div { border top color: #CC0000; border right color: blue; border bottom color: #00FF00; border left color: #CCC; border color: Se utiliza para definir todos los colores en una sola sentencia. 22
Estilo de Bordes border top style, border right style, border bottom style, border left style: Establece el estilo de cada uno de los bordes del area. Los posibles valores que toma son: none hidden dotted dashed solid double groove ridge inset outset inherit border style: Se utiliza para definir todos los bordes en una sola sentencia. Ver ejemplo 09 23
Fondos background color: Define el color de fondo del elemento. background color: #F5F5F5; background image: Define una imagen como fondo del cuadro. background image: url("imagenes/fondo.png") background repeat: Indica como debe de repetirse una imagen. background repeat: repeat (Repite la imagen en todas las direcciones) background repeat: repeat x (Repite la imagen solo horizontalmente) background repeat: repeat y (Repite la imagen solo verticalmente) background repeat: no repeat (No repite la imagen) background position: permite indicar la distancia que se desplaza la imagen de fondo respecto de su posición original situada en la esquina superior izquierda. Si se indican dos porcentajes o dos medidas, el primero indica el desplazamiento horizontal y el segundo el desplazamiento vertical respecto del origen (situado en la esquina superior izquierda). Ver ejemplo 10 24
Texto color: Permite establecer el color del texto. h1 { color: #369; p { color: black; font family: Permite establecer el tipo de letra. font family: Arial, Helvetica, sans serif; font size: Permite estabecer el tamaño de letra. font size: x small Para definir un tamaño se pueden usar cualquiera de las unidades antes vistas o algunas palabras reservadas: xx small, x small, small, medium, large, x large, xxlarge. font weight: Define la anchura. Esta puede ser: normal bold bolder lighter 100 200 300 400 500 600 700 800 900 inherit 25
font style: Define el estilo de la letra. Esta puede ser: normal italic oblique inherit..especial { font weight: bold; font style: normal; ELECTIVA FE I text align: Define la alineación del texto. Sus posibles valore son: left right center justify. line height: Controla el interlineado que se quiere tener dentro de un texto. Se especifican valores en cualquiera de las unidades de medida antes vistas. text transform: permite mostrar el texto original transformado en un texto completamente en mayúsculas (uppercase), en minúsculas (lowercase) o con la primera letra de cada palabra en mayúscula (capitalize). 26
vertical align: Define la alineación vertical de los elementos dentro de una página. Sus posibles valores son: baseline sub super top text top middle bottom text bottom <porcentaje> <medida> inherit text indent: Permite indicar la tabulación que va a tener un texto. Sus valor se define en cualquiera de las unidades de medida antes vistas. Ver ejemplo 11 27