TIC II Tema 2: Programación Web

TIC II Tema 2: Programación Web

INTRODUCCIÓN Las Hojas de Estilo en Cascada o CSS es un lenguaje creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas.

INTRODUCCIÓN Es muy importante mantener una coherencia de estilos en una Web. Esto implica: Color de fondo. Imagen de fondo (si la hubiera). Tipografía (fuente de texto). Color de texto. Tamaño de texto. Color, tamaño y tipografía de los encabezados. Uso de efectos como subrayados, tachados, etc. Aspectos de los enlaces (activos, visitados, etc.). Efectos de Javascript. Cualquier otro punto que afecte a la coherencia del sitio Web.

INTRODUCCIÓN Separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas: Obliga a crear documentos HTML bien definidos y con significado completo (también llamados "documentos semánticos"). Mejora la accesibilidad del documento. Reduce la complejidad de su mantenimiento. Permite visualizar el mismo documento en infinidad de dispositivos diferentes.

INTRODUCCIÓN El trabajo del diseño Web está limitado al soporte de los navegadores.

SINTAXIS Una definición en CSS consiste en un selector y en un bloque de declaración: El selector es el elemento HTML al que se le quiere aplicar el estilo. El bloque de declaración contiene una o más declaraciones separadas por punto y coma. Cada declaración incluye un atributo y un valor, separados por dos puntos.

PROPIEDADES background-color: determina el color de fondo de aquellos elementos sobre los que se aplica. El color se puede asignar con una constante o con el método rgb(). background-color: blue; background-color: rgb(45,92,202); background-image: determina una imagen de fondo para aquellos elementos sobre los que se aplica. Sintaxis: background-image: url(imagen.gif);

PROPIEDADES background-repeat: determina si una imagen de fondo se repite en mosaico o no. Valores posibles: repeat repeat-x repeat-y no-repeat background-attachment: determina el comportamiento de una imagen de fondo. Valores posibles: (scroll fixed). background-position: determina la posición de una imagen de fondo con respecto al ámbito del elemento al que se aplica. (left center right top center bottom) Por ejemplo: background-position: left bottom;

PROPIEDADES text-align: permite determinar la alineación del texto. Valores: left, right, justify, center. text-transform: permite establecer una transformación sobre el texto (mayúsculas, minúsculas). capitalize: tipo título. uppercase: mayúsculas. lowercase: minúsculas text-indent: permite determinar el sangrado de la primera línea en un párrafo de texto. text-decoration: underline: subrayado. overline: suprarayado. line-through: tachado.

PROPIEDADES line-height: permite determinar la distancia entre líneas de texto adyacentes. P.e. line-height: 10px; letter-spacing: permite determinar el espaciado horizontal entre letras contiguas. P.e. letter-spacing: -3px; word-spacing: permite determinar el espaciado horizontal entre palabras contiguas. P.e. wordspacing: 30px;

PROPIEDADES color: permite establecer el color del texto. font-size: determina el tamaño de la letra en aquellos elementos sobre los que se aplique. font-family: permite determinar la tipografía del texto. font-style: permite determinar si la letra será italic (cursiva) u oblique (algo más inclinada que la cursiva. El último valor posible (por defecto) es normal. font-variant: permite determinar si la letra se verá normal (normal) o small-caps (letras versales). font-weight: determina el "espesor" de la letra. Los posibles valores son normal (letra normal), lighter (letra más finita), bold (letra negrita) o bolder (letra más gruesa que la negrita).

PROPIEDADES border-width: permite establecer el grosor del borde. border-style: permite definir distintos trazados para el borde. Valores: none, dotted, dashed, solid, double, groove, ridge, inset, outset. border-color: determina el color del borde, expresándolo de cualquiera de las maneras habituales. border: te permite especificar el tamaño, color y estilo del borde de un elemento. border: 5px solid #ff0000;

EJEMPLOS BORDER <!DOCTYPE html> <html> <head> <style> p.none {border-style: none;} p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.hidden {border-style: hidden;} </style> </head> <body> <p class="none">sin borde.</p> <p class="dotted">borde punteado.</p> <p class="dashed">borde rayado.</p> <p class="solid">borde sólido.</p> <p class="double">borde doble.</p> <p class="groove">border 3D groove.</p> <p class="ridge">borde 3D ridge.</p> <p class="inset">borde 3D interior.</p> <p class="outset">borde 3D exterior.</p> <p class="hidden">borde oculto.</p></body> </html>

EJEMPLOS BORDER

PROPIEDADES DE ENLACES a:hover: lo que pasa cuando pones el ratón encima del link. a:visited: como aparecen los links cuando ya se han visitado (por defecto son morados) a:link: es lo mismo q poner solo a. Son los links no visitados. a:active: es lo que pasa cuando se hace click.

PROPIEDADES DE TABLA caption-side: nos permite ubicar el título de la tabla por encima o por debajo de la misma. La alineación horizontal del mismo se puede establecer con la propiedad text-align. Valores: top, bottom, inherit. table-layout: se usa para diseñar las filas, columnas o celdas de una tabla. Valores: Fixed: tamaño fijo especificado. Auto: se adecuan al contenido. border-collapse: nos permite seleccionar la apariencia de los bordes de cada celda de la tabla. Valores: collapse (bordes juntos), separate (bordes separados).

PROPIEDADES DE TABLA border-spacing: especifica la separación entre celdas adyacentes. Si especificamos un solo valor, este actúa sobre toda la tabla. Si especificamos 2 valores el primero define la separación horizontal y el segundo la vertical. empty-cells: nos permite controlar la visualización de los bordes y fondos de una celda vacía. Valores: show, hide, inherit.

COMENTARIOS Se usan para explicar el código, y pueden ayudar cuando hay que editarlo más tarde. Comienzan con /* y terminan con */. Pueden abarcar varias líneas.

INCORPORAR ESTILOS Hay diferentes técnicas para incorporar estilos a una página Web: Estilos en línea. Estilos embebidos. Archivos externos.

ESTILOS EN LÍNEA Se asignan dentro de las etiquetas por medio del atributo style. <!DOCTYPE html> <html lang="es"> <head> <title> Éste es el título del documento</title> </head> <body> <p style="font-size: 20px">Mi texto</p> </body> </html>

ESTILOS EN LÍNEA Útil para probar estilos de manera rápida. No es recomendado para aplicar a todo el documento, ya que debemos escribir y repetir cada estilo en cada uno de los elementos que queremos modificar.

ESTILOS EMBEBIDOS Los estilos se insertan en la cabecera del documento. Se usan referencias para los elementos HTML que se quieren modificar. <!DOCTYPE html> <html lang="es"> <head> <title> Éste es el título del documento</title> <style type="text/css"> p {font-size: 20px} </style> </head> <body> <p>mi texto</p> </body> </html>

ESTILOS EMBEBIDOS <!DOCTYPE html> <head> <title>ejemplo de estilos CSS en el propio documento</title> <style type="text/css"> p { color: green; font-family: Verdana; } </style> </head> <body> <p>un párrafo de texto.</p> </body> </html>

ESTILOS EMBEBIDOS Ventajas: ahorra espacio y vuelve al código más consistente y actualizable. Inconvenientes: Nos requiere hacer una copia de cada grupo de estilos en todos los documentos de nuestro sitio Web.

ARCHIVOS EXTERNOS Soluciona los problemas vistos en los casos anteriores. Todos los estilos se encuentran en un archivo externo, enlazado con nuestro sitio Web a través del elemento <link> Archivo externo (misestilos.css): p {font-size: 20px}

ARCHIVOS EXTERNOS Página Web: <!DOCTYPE html> <html lang="es"> <head> <title> Éste es el título del documento</title> <link rel="stylesheet" type="text/css" href="misestilos.css"> </head> <body> </body> </html> <p>mi texto</p>

ARCHIVOS EXTERNOS Normalmente, la etiqueta <link> incluye cuatro atributos cuando enlaza un archivo CSS: rel: indica el tipo de relación que existe entre 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 indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web. media: indica el medio en el que se van a aplicar los estilos del archivo CSS.

Ventajas: ARCHIVOS EXTERNOS Se puede incluir un mismo archivo CSS en multitud de páginas HTML. Garantiza la aplicación homogénea de los mismos estilos a todas las páginas que forman un sitio web. El mantenimiento del sitio web se simplifica al máximo.