1 CSS: Cascading Style Sheets

2 Introducción CSS nos permite: Separar presentación de contenidoMayor flexibilidad, escalabilidad, y posibilidades en la presentación de contenidos web Dinamismo (junto a JScript y DOM) Correctamente utilizado reduce el peso de las páginas

3 Sintaxis Básica H1 {color:#CC9900;} Selector { propiedad: valor; ...}Declaración Selector { propiedad: valor; ...} Ejemplo: H1 {color:#CC9900;}

4 Aplicar CSS En la Cabecera () Estilo como atributo

Estilo propio

5 Selectores Elementos H1 {font-family: Arial, Helvetica, sans-serif; font size: 10pt; font-style: italic;} Elementos agrupados H1, P, B {font-color: blue;} Clases para elementos P.enfatizada {font-weight: bold;} Clases generales .enfatizada {font-weight: bold;} Selectores ID #enfatizada {font-weight: bold;}

6 Selectores Pseudo-Elementos:first-line Se aplica a la primera línea del elemento :first-letter Se aplica a la primera letra del elemento Pseudo-Clases :first-child Se aplica al primer hijo del elemento :link Enlace (ej. A:link {...}) :visited Enlace visitado :hover Enlace sobrevolado

7 Cajas Margin Padding BorderVestibulum convallis dignissim diam. Sed et ligula. Proin ullamcorper odio eu mi. Aliquam erat volutpat. Nunc ac leo sed erat commodo ornare. Duis urna. Nunc ac justo a risus dictum scelerisque. Curabitur felis augue, rutrum eu, sollicitudin ac, auctor non, dolor. Border

8 El modelo de caja El modelo de caja en CSS describe las cajas que se generan a partir de los elementos HTML. El modelo de caja también contiene opciones detalladas en lo referente al ajuste de márgenes, bordes, relleno (padding) y contenido de cada elemento:

9 Modelo de caja

10 Un caso con un encabezado y algo de textoUn caso con un encabezado y algo de texto. El código HTML de nuestro ejemplo es el siguiente (extraído de la Declaración Universal de los Derechos Humanos):

Artículo 1:

11

12