lm-ut3: css
Post on 13-Jun-2015
681 Views
Preview:
DESCRIPTION
TRANSCRIPT
Lenguajes de Marcas y SGILenguajes de Marcas y SGI
UT 3: Hojas de estilo.CSS.
CFGS «Administración de SistemasInformáticos en Red»
CIFP Juan de Colonia (Burgos)
David H. Martín Alonso
– Curso 2010/2011 –
Noviembre de 2010 CIFP Juan de Colonia
HOJAS DE ESTILO: CSS.
ContenidosContenidosDescripción
Sintaxis
Modelo de cajas
Tamaños
Colores
Aplicación
Posicionamiento
Medios
Alternativas
Noviembre de 2010 CIFP Juan de Colonia
HOJAS DE ESTILO: CSS.
3/28
Estructura vs. FormatoEstructura vs. Formato■Descripción□Sintaxis□Tamaños□Colores□Aplicación
Lenguaje de la web para describir la apariencia• Separación conceptual entre contenido y formato• Excesivo volumen de opciones de formato
– Un lenguaje único sería demasiado complejo– Limitación al desarrollo de los formatos
• 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 usuario
Noviembre de 2010 CIFP Juan de Colonia
HOJAS DE ESTILO: CSS.
4/28
CSS: IdentificaciónCSS: IdentificaciónCSS: Cascading Style Sheets
• Hojas de estilo en cascada– Heredables por elementos anidados– Integración de definiciones múltiples
• Aplicable a lenguajes XML en general– 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/CSS2
■Descripción□Sintaxis□Tamaños□Colores□Aplicación
Noviembre de 2010 CIFP Juan de Colonia
HOJAS DE ESTILO: CSS.
5/28
CSS: HistoriaCSS: Historia• CSS 1.0
– CSS level 1: primera recomendación oficial en 1996– Soporte amplio de características de formato comunes– Uso obsoleto en favor de CSS 2
• CSS 2.0– Contemporáneo con HTML 4: borradores de 1997– 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 complete levels of implementation of CSS 2.1 (Wikipedia 11/2010, CSS)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)
■Descripción□Sintaxis□Tamaños□Colores□Aplicación
Noviembre de 2010 CIFP Juan de Colonia
HOJAS DE ESTILO: CSS.
6/28
CSS: EstructuraCSS: Estructura• Estándar W3C, no basado en SGML ni XML• Sintaxis inspirada en el lenguaje C
– Delimitación de bloques: llaves { … }– Delimitador de línea: punto y coma … ;– Delimitación de comentarios: /* … */– ¿Código de caracteres? @charset "ISO-8859-1";
• 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 compartido
□Descripción■Sintaxis□Tamaños□Colores□Aplicación
Noviembre de 2010 CIFP Juan de Colonia
HOJAS DE ESTILO: CSS.
7/28
ContextosContextosUbicación, tres opciones
• Archivo separado, enlazado con <link>, en <head>– Uso: estética uniforme del sitio web<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– 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>
□Descripción■Sintaxis□Tamaños□Colores□Aplicación
Noviembre de 2010 CIFP Juan de Colonia
HOJAS DE ESTILO: CSS.
8/28
Selectores (I)Selectores (I)Por tipo de elemento
td {…}Por clases
p.tipo1 {…}→ <p class=”tipo1 tipo2”> … </p>
Por identificadoresdiv#encabezado {…}→ <div id=”encabezado”> … </div>
Por contextop.a1 b {…}→ <p class=”a1”> … <b> … </b> </p>
Son agrupablesp.a1, b {…}
□Descripción■Sintaxis□Tamaños□Colores□Aplicación
HOJAS DE ESTILO: CSS.
Noviembre de 2010 CIFP Juan de Colonia
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
navegador
Actividad I: SelectoresActividad I: Selectores
Noviembre de 2010 CIFP Juan de Colonia
HOJAS DE ESTILO: CSS.
10/28
Selectores (II)Selectores (II)Pseudo-clases
• Los enlaces– Vista inicial, enlace no visitadoa:link {…}
– Enlace previamente visitadoa:visited {…}
– Enlace activo, mientras está pulsadoa:active {…}
– Enlace destacado, al pasar sobre éla:hover {…}
• Primeros elementosp:first-child {…}
Pseudo-elementosp:first-line {} / p:first-letter {}h1:before {} / h1:after {}
□Descripción■Sintaxis□Tamaños□Colores□Aplicación
Noviembre de 2010 CIFP Juan de Colonia
HOJAS DE ESTILO: CSS.
RevisiónRevisió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>?
HOJAS DE ESTILO: CSS.
Noviembre de 2010 CIFP Juan de Colonia
Buscar una guía resumen o guía rápida CSS
(1 página) con las propiedades más habituales y los
valores admitidos
Actividad II: Guía rápidaActividad II: Guía rápida
Noviembre de 2010 CIFP Juan de Colonia
HOJAS DE ESTILO: CSS.
13/28
FormatoFormato• color• fondo• borde• trazo
• margen• relleno• espaciado• sangrado
• dimensiones• posicionamiento• posición• visibilidad• superposición
• tipografía• tamaño• grosor• inclinación• decoración
□Descripción■Sintaxis□Tamaños□Colores□Aplicación
Noviembre de 2010 CIFP Juan de Colonia
HOJAS DE ESTILO: CSS.
14/28
ValoresValores• Distintas propiedades admiten distintos tipos de
valores:– Nombres, constantestext-align: center;
– Cadenas de textofont-family: "Times New Roman",Georgia,Serif;
– Tamañosmargin: 1mm;
– Colorescolor: rgb(100%, 0%, 0%);
– Direcciones URIbackground-image: url("bola.png");
– Nulosdisplay: none;
• Algunas propiedades se pueden agrupar o separarborder-width: thin;border: solid thin blue;
□Descripción■Sintaxis□Tamaños□Colores□Aplicación
Noviembre de 2010 CIFP Juan de Colonia
HOJAS DE ESTILO: CSS.
15/28
DimensionesDimensionesValores + unidadesUnidades relativas:
• Relativo a la pantalla: px (pixels)• Relativas al tamaño de letra:
– en horizontal «emes»: em– en vertical «equis»: exmargin: .5ex 1.5em
Unidades absolutas• cm, mm, in
Porcentuales• Relativas al tamaño del elemento padre
width: 20%;
□Descripción□Sintaxis■Tamaños□Colores□Aplicación
Noviembre de 2010 CIFP Juan de Colonia
HOJAS DE ESTILO: CSS.
16/28
Modelo de Cajas (I)Modelo de Cajas (I)• El espacio exterior se distribuye en dos partes.
– Margen: exterior al borde (margin)– Relleno: interior (padding)
• Aplicable a elementos de bloque o de línea.• Los márgenes adyacentes se pueden fundir.• Se pueden modificar los colores.
– del fondo– del borde
• Hay distintos tipos de trazo para bordes.solid, double, dotted, dashedgroove, ridge, inset, outset
BordeRelleno
Contenido
Margen
□Descripción□Sintaxis■Tamaños□Colores□Aplicación
Noviembre de 2010 CIFP Juan de Colonia
HOJAS DE ESTILO: CSS.
17/28
Modelo de Cajas (I)Modelo de Cajas (I)• Las propiedades se pueden especificar en conjunto o
para cada lado:– 'margin-top', 'margin-bottom', 'margin-right',
'margin-left', 'margin'– 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', 'border-width'
– '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.
□Descripción□Sintaxis■Tamaños□Colores□Aplicación
Noviembre de 2010 CIFP Juan de Colonia
HOJAS DE ESTILO: CSS.
18/28
ColoresColoresModelo RGB para definir colores
– Red – Green – Blue– RGBA en CSS 3: RGB + transparencia
Expresiones alternativas– Porcentual 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)
□Descripción□Sintaxis□Tamaños■Colores□Aplicación
HOJAS DE ESTILO: CSS.
Noviembre de 2010 CIFP Juan de Colonia
Decorad una lista dando colores diferenciados a la
lista de los elementos, poniendo bordes, aumentando
márgenes y rellenos, etc.
Actividad III: CajasActividad III: Cajas
Noviembre de 2010 CIFP Juan de Colonia
HOJAS DE ESTILO: CSS.
20/28
CSS y TablasCSS y Tablas• Compagina propiedades de tabla y de celdas
– borde de la tabla / bordes de las celdas– color de fondo de la tabla / color de fondo de las celdas
• Por defecto las celdas van separadas– Se ve el fondo de la tabla por las rendijas
• border-collapse: collapse;– Para recuperar la vista clásica.– Combina bordes adyacentes.
□Descripción□Sintaxis□Tamaños□Colores■Aplicación
Noviembre de 2010 CIFP Juan de Colonia
HOJAS DE ESTILO: CSS.
21/28
Posicionamiento (I)Posicionamiento (I)□Descripción□Sintaxis□Tamaños□Colores■Aplicación
• Podemos simular capas: <div> + CSS– Truco fundamental en el diseño web 2.0
• Con CSS podemos evitar el posicionamiento automático original de HTML. 3 posibilidades:
– Flotante: a derecha o izquierda del bloquefloat: right;
– Posicionamiento absoluto: relativo al documentoposition: absolute;
– Posicionamiento fijo: relativo a la ventanaposition: fixed;
• Podemos colocar respecto a los cuatro lados– Opción: dos + anchotop, bottom, left, rightwidth
• Debemos especificar el orden de superposiciónz-index: -99;
Noviembre de 2010 CIFP Juan de Colonia
HOJAS DE ESTILO: CSS.
22/28
Posicionamiento (II)Posicionamiento (II)□Descripción□Sintaxis□Tamaños□Colores■Aplicación
#menu { width: 6.7em; top: 3ex; left: 1.2em; position: fixed; z-index: 100; background-color: #ffc;}#marco_menu { width: 8.2em; height: 28ex; top: 1ex; left: 0.5em; position: fixed; z-index: 99; 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
HOJAS DE ESTILO: CSS.
23/28
MediaMedia□Descripción□Sintaxis□Tamaños□Colores■Aplicación
Se pueden indicar hojas o reglas alternativas.• Distintas para distintos medios.• Formato óptimo adaptado a cada uno.
Fines:• 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
HOJAS DE ESTILO: CSS.
24/28
Media: sintaxisMedia: sintaxis□Descripción□Sintaxis□Tamaños□Colores■Aplicación
Se puede restringir el ámbito de aplicación• Se siguen aplicando las reglas en «cascada».
En HTML:• <link rel="stylesheet" media="screen"href="a.css" type="text/css" />
• <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
HOJAS DE ESTILO: CSS.
25/28
CSS intercambiablesCSS intercambiables□Descripción□Sintaxis□Tamaños□Colores■Aplicación
Se enlazan varias hojas alternativas a la vez• <link rel="stylesheet"title="Básico" href="a.css" type="text/css"/>
• <link rel="stylesheet alternate" 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
HOJAS DE ESTILO: CSS.
ReferenciasReferencias
World Wide Web Consortium:http://www.w3.orgW3C Candidate Recommendation (2009, W3C). Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specificationhttp://www.w3.org/TR/CSS2/W3Schools. CSS Tutorialhttp://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-ASIR
Noviembre de 2010 CIFP Juan de Colonia
HOJAS DE ESTILO: CSS.
LicenciaLicencia
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
HOJAS DE ESTILO: CSS.
¿Dudas o cuestiones?¿Dudas o cuestiones?
top related