LM-UT3: CSS

839 views

Published on

Lenguajes de Marcas y SGI (CFGS Administrador de Sistemas Informáticos en Red)

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
839
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
42
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

LM-UT3: CSS

  1. 1. Lenguajes de Marcas y SGI UT 3: Hojas de estilo. CSS. CFGS «Administración de Sistemas Informáticos en Red» CIFP Juan de Colonia (Burgos) David H. Martín Alonso – Curso 2010/2011 –
  2. 2. HOJAS DE ESTILO: CSS. Contenidos Descripción Sintaxis Modelo de cajas Tamaños Colores Aplicación Posicionamiento Medios AlternativasNoviembre de 2010 CIFP Juan de Colonia
  3. 3. HOJAS DE ESTILO: CSS. Estructura vs. Formato■ Descripción Lenguaje de la web para describir la apariencia□ Sintaxis□ Tamaños • Separación conceptual entre contenido y formato□ Colores • Excesivo volumen de opciones de formato□ Aplicación – Un lenguaje único sería demasiado complejo – Limitación al desarrollo de los formatos 3/28 • Reutilización del estándar – Modelo aplicable a lenguajes de marcas distintos • Reutilización de los diseños – Formato común dentro del mismo sitio web • Multiplicidad de diseños disponibles – Intercambiables según el medio: pantalla, papel... – Intercambiables a voluntad del usuarioNoviembre de 2010 CIFP Juan de Colonia
  4. 4. HOJAS DE ESTILO: CSS. CSS: Identificación■ Descripción CSS: Cascading Style Sheets□ Sintaxis□ Tamaños • Hojas de estilo en cascada□ Colores – Heredables por elementos anidados□ Aplicación – Integración de definiciones múltiples • Aplicable a lenguajes XML en general 4/28 – Originalmente CHSS, se retiró la H de HTML • Estándar W3C, no basado en SGML ni XML – Descripciones del tipo {propiedad:valor;} • Soporte para programar efectos dinámicos – Manipulación en el navegador en tiempo real – Programable con Javascript – Aporte de agilidad y riqueza estética a la Web 2.0 Referencia: • http://www.w3.org/TR/CSS2Noviembre de 2010 CIFP Juan de Colonia
  5. 5. HOJAS DE ESTILO: CSS. CSS: Historia■ Descripción • CSS 1.0□ Sintaxis – CSS level 1: primera recomendación oficial en 1996□ Tamaños – Soporte amplio de características de formato comunes□ Colores – Uso obsoleto en favor de CSS 2□ Aplicación • CSS 2.0 – Contemporáneo con HTML 4: borradores de 1997 5/28 – Incorpora posicionamiento y dependencia de medios – Elevado a Recomendación en mayo de 1998 • CSS 2.1 – Revisión adaptada a la realidad de las implementaciones – Última revisión de 9/2009: Recomendación candidata • CSS 3 – Iniciado en 1998 – En 2005 se aplican criterios más rigurosos. CSS 2.1 y CSS 3 estaban publicados y se degradan a Borrador. As of August 2009, Internet Explorer 8, Firefox 2 and 3 have reasonably As of August 2009, Internet Explorer 8, Firefox 2 and 3 have reasonably complete levels of implementation of CSS 2.1 (Wikipedia 11/2010, CSS) complete levels of implementation of CSS 2.1 (Wikipedia 11/2010, CSS)Noviembre de 2010 CIFP Juan de Colonia
  6. 6. HOJAS DE ESTILO: CSS. CSS: Estructura□ Descripción • Estándar W3C, no basado en SGML ni XML■ Sintaxis□ Tamaños • Sintaxis inspirada en el lenguaje C□ Colores – Delimitación de bloques: llaves { … }□ Aplicación – Delimitador de línea: punto y coma … ; – Delimitación de comentarios: /* … */ – ¿Código de caracteres? @charset "ISO-8859-1"; 6/28 • Descripciones del tipo {propiedad:valor;} – Selector antepuesto para identificar ámbito de aplicación – Regla CSS = selector + declaracion h3 {color:red;} • Tres opciones de ubicación – En elemento, atributo style – En documento, sección <style> dentro de <head> – Externo, enlace compartidoNoviembre de 2010 CIFP Juan de Colonia
  7. 7. HOJAS DE ESTILO: CSS. Contextos□ Descripción Ubicación, tres opciones■ Sintaxis□ Tamaños • Archivo separado, enlazado con <link>, en <head>□ Colores – Uso: estética uniforme del sitio web□ Aplicación <link rel="stylesheet" href="mona.css" type="text/css"/> – Requiere identificar el código de caracteres en el archivo @charset "ISO-8859-1"; • En el propio archivo de HTML 7/28 – Uso: características singulares en un archivo – Sección <style> dentro de <head> <style type="text/css"> h3, p.rojo, div#33 {color:red;} </style> • En cada marca – Uso: retoques puntuales no reutilizables. ¿Evitables? <p>En un <span style=”color:red;”>lugar</span> de...</p> Delimitadores genéricos – De bloque: <div>...</div> – De línea: <span>...</span>Noviembre de 2010 CIFP Juan de Colonia
  8. 8. HOJAS DE ESTILO: CSS. Selectores (I)□ Descripción Por tipo de elemento■ Sintaxis□ Tamaños td {…}□ Colores□ Aplicación Por clases p.tipo1 {…} → <p class=”tipo1 tipo2”> … </p> 8/28 Por identificadores div#encabezado {…} → <div id=”encabezado”> … </div> Por contexto p.a1 b {…} → <p class=”a1”> … <b> … </b> </p> Son agrupables p.a1, b {…}Noviembre de 2010 CIFP Juan de Colonia
  9. 9. HOJAS DE ESTILO: CSS. Actividad I: Selectores Crear un ejemplo para probar los dos últimos selectores: «p.a1 b» y «p.a1, b» Colocad las definiciones en un bloque <style> dentro del propio HTML y aplicarle la propiedad de fondo verde: «background-color:green» Quitar y poner la coma y observar el efecto en un navegadorNoviembre de 2010 CIFP Juan de Colonia
  10. 10. HOJAS DE ESTILO: CSS. Selectores (II)□ Descripción Pseudo-clases■ Sintaxis□ Tamaños • Los enlaces□ Colores – Vista inicial, enlace no visitado□ Aplicación a:link {…} – Enlace previamente visitado 10/28 a:visited {…} – Enlace activo, mientras está pulsado a:active {…} – Enlace destacado, al pasar sobre él a:hover {…} • Primeros elementos p:first-child {…} Pseudo-elementos p:first-line {} / p:first-letter {} h1:before {} / h1:after {}Noviembre de 2010 CIFP Juan de Colonia
  11. 11. HOJAS DE ESTILO: CSS. Revisión ● ¿Que ubicación es la más adecuada para escribir las reglas CSS en cada caso? ● ¿Cuál es la diferencia entre los selectores «h1 span» y «h1, span»? ● ¿Por qué me están fallando las definiciones para elementos <a>?Noviembre de 2010 CIFP Juan de Colonia
  12. 12. HOJAS DE ESTILO: CSS. Actividad II: Guía rápida Buscar una guía resumen o guía rápida CSS (1 página) con las propiedades más habituales y los valores admitidosNoviembre de 2010 CIFP Juan de Colonia
  13. 13. HOJAS DE ESTILO: CSS. Formato□ Descripción • color • margen■ Sintaxis□ Tamaños • fondo • relleno□ Colores • borde • espaciado□ Aplicación • trazo • sangrado 13/28 • tipografía • dimensiones • tamaño • posicionamiento • grosor • posición • inclinación • visibilidad • decoración • superposiciónNoviembre de 2010 CIFP Juan de Colonia
  14. 14. HOJAS DE ESTILO: CSS. Valores□ Descripción • Distintas propiedades admiten distintos tipos de■ Sintaxis valores:□ Tamaños□ Colores – Nombres, constantes□ Aplicación text-align: center; – Cadenas de texto font-family: "Times New Roman",Georgia,Serif; 14/28 – Tamaños margin: 1mm; – Colores color: rgb(100%, 0%, 0%); – Direcciones URI background-image: url("bola.png"); – Nulos display: none; • Algunas propiedades se pueden agrupar o separar border-width: thin; border: solid thin blue;Noviembre de 2010 CIFP Juan de Colonia
  15. 15. HOJAS DE ESTILO: CSS. Dimensiones□ Descripción Valores + unidades□ Sintaxis■ Tamaños Unidades relativas:□ Colores□ Aplicación • Relativo a la pantalla: px (pixels) • Relativas al tamaño de letra: – en horizontal «emes»: em 15/28 – en vertical «equis»: ex margin: .5ex 1.5em Unidades absolutas • cm, mm, in Porcentuales • Relativas al tamaño del elemento padre width: 20%;Noviembre de 2010 CIFP Juan de Colonia
  16. 16. HOJAS DE ESTILO: CSS. Modelo de Cajas (I)□ Descripción • El espacio exterior se distribuye en dos partes.□ Sintaxis – Margen: exterior al borde (margin)■ Tamaños – Relleno: interior (padding)□ Colores□ Aplicación • Aplicable a elementos de bloque o de línea. • Los márgenes adyacentes se pueden fundir. 16/28 • Se pueden modificar los colores. – del fondo – del borde • Hay distintos tipos de trazo para bordes. solid, double, dotted, dashed groove, ridge, inset, outset Margen Borde Relleno ContenidoNoviembre de 2010 CIFP Juan de Colonia
  17. 17. HOJAS DE ESTILO: CSS. Modelo de Cajas (I)□ Descripción • Las propiedades se pueden especificar en conjunto o□ Sintaxis para cada lado:■ Tamaños□ Colores – margin-top, margin-bottom, margin-right,□ Aplicación margin-left, margin – border-top-width, border-right-width, border- bottom-width, border-left-width, border-width 17/28 – padding-top, padding-bottom, padding-right, padding-left, padding • Ej.: padding: 10px; – Relleno uniforme de 10 pixels de pantalla. • Ej.: padding: 2px 4px 8px 10px; – Diferente relleno en cada uno de los cuatro laterales. • Ej.: width: 40em; margin: .5cm auto; – Márgenes verticales de medio centímetro. – Ancho fijo y márgenes horizontales automáticos, centrado.Noviembre de 2010 CIFP Juan de Colonia
  18. 18. HOJAS DE ESTILO: CSS. Colores□ Descripción Modelo RGB para definir colores□ Sintaxis□ Tamaños – Red – Green – Blue – RGBA en CSS 3: RGB + transparencia■ Colores□ Aplicación Expresiones alternativas – Porcentual 18/28 rgb(100%, 0%, 0%) – Decimal rgb(255,255,0) – Hexadecimal #00F203 /* #rrggbb */ – Hexadecimal reducido #eee /* #rgb = #rrggbb */ – Nombres olive • ¡Atención!: Opacidad CSS3 en [0, 1] rgba (100%,100%,100%,1)Noviembre de 2010 CIFP Juan de Colonia
  19. 19. HOJAS DE ESTILO: CSS. Actividad III: Cajas Decorad una lista dando colores diferenciados a la lista de los elementos, poniendo bordes, aumentando márgenes y rellenos, etc.Noviembre de 2010 CIFP Juan de Colonia
  20. 20. HOJAS DE ESTILO: CSS. CSS y Tablas□ Descripción • Compagina propiedades de tabla y de celdas□ Sintaxis – borde de la tabla / bordes de las celdas□ Tamaños – color de fondo de la tabla / color de fondo de las celdas□ Colores■ Aplicación • Por defecto las celdas van separadas – Se ve el fondo de la tabla por las rendijas • border-collapse: collapse; 20/28 – Para recuperar la vista clásica. – Combina bordes adyacentes.Noviembre de 2010 CIFP Juan de Colonia
  21. 21. HOJAS DE ESTILO: CSS. Posicionamiento (I)□ Descripción • Podemos simular capas: <div> + CSS□ Sintaxis – Truco fundamental en el diseño web 2.0□ Tamaños□ Colores • Con CSS podemos evitar el posicionamiento■ Aplicación automático original de HTML. 3 posibilidades: – Flotante: a derecha o izquierda del bloque float: right; 21/28 – Posicionamiento absoluto: relativo al documento position: absolute; – Posicionamiento fijo: relativo a la ventana position: fixed; • Podemos colocar respecto a los cuatro lados – Opción: dos + ancho top, bottom, left, right width • Debemos especificar el orden de superposición z-index: -99;Noviembre de 2010 CIFP Juan de Colonia
  22. 22. HOJAS DE ESTILO: CSS. Posicionamiento (II)□ Descripción #menu {□ Sintaxis width: 6.7em; top: 3ex; left: 1.2em;□ Tamaños position: fixed; z-index: 100;□ Colores background-color: #ffc;■ Aplicación } #marco_menu { width: 8.2em; height: 28ex; top: 1ex; left: 0.5em; position: fixed; z-index: 99; 22/28 background-color: #99f; } #marco_menu p { position: absolute; bottom: -1.4ex; right: 0.3em; } <div style="margin: 40ex 5%; height: 50ex; background-color: #7f7;">Contenidos...</div> <div id="marco_menu"><p>Mi menu</p></div> <div id="menu"><p>Menu 1</p><p>Menu 2</p><p>Menu 3</p></div>Noviembre de 2010 CIFP Juan de Colonia
  23. 23. HOJAS DE ESTILO: CSS. Media□ Descripción Se pueden indicar hojas o reglas alternativas.□ Sintaxis□ Tamaños • Distintas para distintos medios.□ Colores • Formato óptimo adaptado a cada uno.■ Aplicación Fines: 23/28 • Reducción de elementos visuales • Gama de colores • Saltos de página • ... Nombres de medios: • screen, projection, print, handheld, tv, tty • speech, braille, embossed • Grupos: all, visual, continuous, paged, interactive, static...Noviembre de 2010 CIFP Juan de Colonia
  24. 24. HOJAS DE ESTILO: CSS. Media: sintaxis□ Descripción Se puede restringir el ámbito de aplicación□ Sintaxis□ Tamaños • Se siguen aplicando las reglas en «cascada».□ Colores■ Aplicación En HTML: • <link rel="stylesheet" media="screen" href="a.css" type="text/css" /> 24/28 • <style type="text/css" media="print"> … En CSS: • @media tty {…} – Entre llaves todas las reglas para el medio • @import url("global.css") all; – Inserta reglas de un archivo externo – Se puede usar de forma general sin indicar medio • @import "simple.css" projection, tv; – Alternativa: no es necesario url(…)Noviembre de 2010 CIFP Juan de Colonia
  25. 25. HOJAS DE ESTILO: CSS. CSS intercambiables□ Descripción Se enlazan varias hojas alternativas a la vez□ Sintaxis□ Tamaños • <link rel="stylesheet"□ Colores title="Básico" href="a.css"■ Aplicación type="text/css"/> • <link rel="stylesheet alternate" 25/28 title="Mejorado" href="b.css" type="text/css"/> • <link rel="stylesheet alternate" title="Simple" href="c.css" type="text/css"/> El navegador debe ofrecer la opción de cambio – ¿Todos?Noviembre de 2010 CIFP Juan de Colonia
  26. 26. HOJAS DE ESTILO: CSS. Referencias World Wide Web Consortium: http://www.w3.org W3C Candidate Recommendation (2009, W3C). Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification http://www.w3.org/TR/CSS2/ W3Schools. CSS Tutorial http://www.w3schools.com/css/ Albeza, Belén (2006). XHTML + CSS ¡de una maldita vez! http://es.tldp.org/Tutoriales/doc-tutorial-xhtml-css/xhtml_tuto_beta.pdf Bibliografía actualizada en delicious: http://www.delicious.com/dhmartin/LM-ASIRNoviembre de 2010 CIFP Juan de Colonia
  27. 27. HOJAS DE ESTILO: CSS. Licencia Este material está disponible bajo una Licencia Creative Commons, http://creativecommons.org/licenses/by-nc-sa/3.0/es/Noviembre de 2010 CIFP Juan de Colonia
  28. 28. HOJAS DE ESTILO: CSS. ¿Dudas o cuestiones?Noviembre de 2010 CIFP Juan de Colonia

×