PDF de programación - CSS

Programación en Internet 2009-2010

Departamento de Lenguajes y
Sistemas Informáticos

CSSCSS

Programación en Internet

Curso 2009-2010

Programación en Internet – Curso 2009-2010

Contenido

• Introducción
• Sintaxis

– Selectores
– Propiedades
– Contenedores
– Uso de un CSS
U id d
– Unidades
– Colores

• Cajas
• Posicionamiento

DLSI - Universidad de Alicante

1

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Introducción
• CSS: Cascading Style Sheet
• Estándar de W3C
• Los estilos definen cómo mostrar los

elementos HTML

• Los estilos se incluyen en la misma

á i
t
página o en un fichero aparte

fi h

• En cascada: múltiples estilos se

fusionan en uno

Programación en Internet – Curso 2009-2010

Introducción

• Se crearon para resolver una serie de

problemas
problemas

• Las etiquetas de HTML inicialmente

indicaban el contenido de un documento:
– <h1>: Esto es un encabezado
– <p>: Esto es un párrafo
– <table>: Esto es una tabla

• Pero llegaron Netscape y Microsoft y

empezaron a añadir etiquetas de estilo:
<font>, atributo color, etc.

DLSI - Universidad de Alicante

2

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Introducción

• ¿Por qué?:

páginas

– Permite unificar la presentación de múltiples

• Objetivo: separar la presentación (estilo) del

contenido de las páginas web

p g

– Permite controlar con más detalle la presentación
– Permite modificar cada uno por separado

– Permite emplear distintas presentaciones para el
l

Distintas personas
P
mismo contenido Distintos dispositivos
– Permite reducir el peso de los sitios web:

di ti t

t

i

• Definición única
• Evita el uso de tablas para situar el contenido

it

l

Programación en Internet – Curso 2009-2010

Introducción

• Varias versiones:

– CSS1: CSS nivel 1. 1996.

• http://www.w3.org/TR/REC-CSS1

– CSS2: CSS nivel 2. 1998.

• http://www.w3.org/TR/REC-CSS2/

– CSS2 revisión 1. 2003.
– CSS3: CSS nivel 3. En desarrollo.

• Incompatibilidades entre navegadores

DLSI - Universidad de Alicante

3

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Introducción

• Más información:

– W3C: http://www.w3.org/
– W3 Schools: http://www.w3schools.com/

Programación en Internet – Curso 2009-2010

DLSI - Universidad de Alicante

4

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Programación en Internet – Curso 2009-2010

Sintaxis

• Tipos de propiedades:

– Fuentes: tipos letra, tamaño, negrita, cursiva,...
– Color: de texto, de fondo, imagen de fondo,...
– Texto: justificación, espacio entre letras y/o

palabras

– Caja: bordes a los 4 lados
– Formato visual:posición en la página mostrar o
– Formato visual:posición en la página, mostrar o

no...

– Tablas
– Listas, numeración automática

DLSI - Universidad de Alicante

5

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Sintaxis
• Estructura dentro del CSS:

Selector {propiedad1:valor1; …}

• Selectores:

– De tipos: nombre de elemento HTML
– De clases: nombre de la clase precedido por .
– De ID: nombre del identificador precedido por #

( ól
HTML)
(sólo puede haber uno por documento HTML)

d h b

d

– De pseudo-clases: selector : nombre de la

pseudo-clase

Programación en Internet – Curso 2009-2010

Sintaxis

• Propiedad: la propiedad del selector que

d
deseamos modificar
– Para especificar varias propiedades se separan

difi

con un punto y coma

• Valor: el valor deseado, ya sea el nombre de

un tipo de letra, un tamaño, un color, etc
Para especificar varios valores algunas veces se
– Para especificar varios valores, algunas veces se
emplea la coma y otras el espacio en blanco

– Si el valor contiene espacios en blanco, se tiene

que poner entrecomillado

DLSI - Universidad de Alicante

6

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Sintaxis

i

1

• Ejemplo:
body {color: black; font-size: 15px;}
p {background: yellow;}
.rojo {background: red;}
.azulGrande {background: blue; font-size:
#rojo {color: red;}
• Si el valor tiene múltiples palabras:
p {font-family: "Times New Roman", serif}

30px;}

Programación en Internet – Curso 2009-2010

Sintaxis

• Queremos mostrar un texto con el estilo
H1 con fondo rojo, otro con fondo verde
y otro con fondo azul

• ¿Cómo se haría con HTML?

DLSI - Universidad de Alicante

7

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Sintaxis

• Con sólo HTML:
<table border="0" bgcolor="red" width="100%">
<tr><td><h1>Fondo rojo</h1></td></tr>
</table>
<table border="0" bgcolor="green" width="100%">
<tr><td><h1>Fondo verde</h1></td></tr>
</table>
<table border="0" bgcolor="blue" width="100%">
<table border= 0 bgcolor= blue width= 100% >
<tr><td><h1>Fondo azul</h1></td></tr>
</table>

Programación en Internet – Curso 2009-2010

DLSI - Universidad de Alicante

8

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Sintaxis

• Con CSS:
h1 {background: red;}
.titulo {background: green;}
.subtitulo {background: blue;}

Programación en Internet – Curso 2009-2010

Sintaxis

• Uso:
<h1>Fondo rojo</h1>
<h1 class=”titulo”>Fondo verde</h1>
<h1 class=”subtitulo”>Fondo azul</h1>

DLSI - Universidad de Alicante

9

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Programación en Internet – Curso 2009-2010

Sintaxis

• Para aumentar la legibilidad, se puede

escribir en varias líneas:

p {
text-align: center;
color: black;
font-family: arial
font family: arial
}

DLSI - Universidad de Alicante

10

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Sintaxis

• Se pueden agrupar selectores:
h1,h2,h3,h4,h5,h6 { color: green; }
Equivale a:
h1 { color: green; }
h2 { color: green; }
h3 { color: green; }
h4 { color: green; }
h5 { color: green; }
h6 { color: green; }

Programación en Internet – Curso 2009-2010

Sintaxis

• Existe un selector universal (*) que representa a

cualquier elemento de la página:
cualquier elemento de la página:

*{color:red;}
• Existe una jerarquía de herencia: un elemento

hereda las propiedades del elemento que lo contiene
– Las propiedades sobre el fondo (background), el borde
(border), los márgenes (margin), el relleno (padding),
las dimensiones (height, width) y la posición (top,
las dimensiones (height, width) y la posición (top,
left) NO se heredan

– Las propiedades sobre el color del texto (color) o el

formato del texto (font, text-align, text-
decoration) SÍ se heredan

DLSI - Universidad de Alicante

11

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Sintaxis

;

y {

• Hoja de estilo:
body {font-family: Arial; color: blue;}
y
;}
table {background: yellow; font-size: 18px;}
tr {color: red;}
td {text-decoration: underline;}
• HTML:
<p>Esto es un párrafo de texto con unas propiedades.
</p>
<table>
<tr><td>Esto es una fila</td></tr>
<tr><td>Esto es una fila</td></tr>
<tr><td>Esto es otra fila fila</td></tr>
</table>
• ¿Cuál es el resultado?

Programación en Internet – Curso 2009-2010

DLSI - Universidad de Alicante

12

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Sintaxis

• Un selector cuando aparece dentro de

otro selector (descendiente):

h1 a {color:red; font-family: sans-

serif;}

Programación en Internet – Curso 2009-2010

Sintaxis

• Hoja de estilo:
p b {background: red;}
p b {background: red;}
p i {background: green;}
p b i {color: blue;}
• HTML:
<p>En este párrafo ocurren cosas curiosas:
<i>este está en cursiva</i>, y finalmente

<b>este texto está en negrita</b>,
<b><i>este está en negrita y cursiva</i></b> y
y
<i><b>este también en negrita y
cursiva</b></i>.

g

y

</p>
• ¿Cuál es el resultado?

DLSI - Universidad de Alicante

13

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Programación en Internet – Curso 2009-2010

Sintaxis

html

head

title

style

body

p

b

i

b

i

i

b

DLSI - Universidad de Alicante

14

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Sintaxis

• Un selector cuando aparece dentro de

otro selector (hijo):

h1 > a {color:red; font-family:

sans-serif;}

(No funciona en Internet Explorer 6 y 7)

Programación en Internet – Curso 2009-2010

Sintaxis

• Hoja de estilo:
p > b {background: red;}
p > b {background: red;}
p > i {background: green;}
p > b > i {color: blue;}
• HTML:
<p>En este párrafo ocurren cosas curiosas:
<i>este está en cursiva</i>, y finalmente

<b>este texto está en negrita</b>,
<b><i>este está en negrita y cursiva</i></b> y
y
<i><b>este también en negrita y
cursiva</b></i>.

g

y

</p>
• ¿Cuál es el resultado?

DLSI - Universidad de Alicante

15

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Programación en Internet – Curso 2009-2010

DLSI - Universidad de Alicante

16

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Sintaxis

• Comentarios:
/*/*
…
*/
• Ejemplo:
/* Párrafo normal */
p {
text align: center; /* Centrado */
text-align: center; /* Centrado */
color: black; /* Negro */
font-family: arial /* Tipo de letra */
}

Programación en Internet – Curso 2009-2010

Sintaxis

• Clase: Utilizar el mismo formato más de una vez:

Para una sola etiqueta: Cuando deseemos
– Para una sola etiqueta: Cuando deseemos
especificar una propiedad que sólo pueda ser utilizada
por un tipo de etiqueta:
• h1.rojo {color:red;}

<h1 class=”rojo”> Título rojo </h1>
<p class=”rojo”> Párrafo con texto del color por
defecto y no rojo </p>

Genérico: Para utilizarlo con cualquier etiqueta HTML:
– Genérico: Para utilizarlo con cualquier etiqueta HTML:
• .rojo {color:red;}

<h1 class=”rojo”> Título rojo </h1>
<p class=”rojo”> Párrafo con texto rojo </p>

DLSI - Universidad de Alicante

17

Programación en Internet 2009-2010