LM-UT3: CSS

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 –

HOJAS DE ESTILO: CSS.

Contenidos
Descripción
Sintaxis
Modelo de cajas
Tamaños
Colores
Aplicación
Posicionamiento
Medios
Alternativas
Noviembre de 2010 CIFP Juan de Colonia


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 usuario



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/CSS2



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)


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 compartido



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>


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


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
navegador



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


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



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 admitidos



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ón



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;



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%;



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
Contenido



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.



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)



Actividad III: Cajas
Decorad una lista dando colores diferenciados a la
lista de los elementos, poniendo bordes, aumentando
márgenes y rellenos, etc.



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.



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;



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>



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



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



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?



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



Licencia

Este material está disponible bajo una Licencia Creative Commons,
http://creativecommons.org/licenses/by-nc-sa/3.0/es/



¿Dudas o cuestiones?


LM-UT3: CSS

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (14)

Similar a LM-UT3: CSS

Similar a LM-UT3: CSS (20)

Último

Último (20)

LM-UT3: CSS