LM-UT3: CSS

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



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



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

http://www.w3.org/TR/CSS2



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



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



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>




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 {…}




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



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 {}




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>?



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



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




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;




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



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




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.




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



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



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



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;



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>



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...



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(…)



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?



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

http://www.w3.org/

http://www.w3.org/TR/CSS2/

http://www.w3schools.com/css/

http://es.tldp.org/Tutoriales/doc-tutorial-xhtml-css/xhtml_tuto_beta.pdf

http://www.delicious.com/dhmartin/LM-ASIR



LicenciaLicencia

Este material está disponible bajo una Licencia Creative Commons,

http://creativecommons.org/licenses/by-nc-sa/3.0/es/

http://creativecommons.org/licenses/by-nc-sa/3.0/es/



¿Dudas o cuestiones?¿Dudas o cuestiones?

LM-UT3: CSS

Education

Transcript of LM-UT3: CSS