CSS: Cascading Style Sheets
Introducción CSS nos permite: Separar presentación de contenido Mayor 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
Sintaxis Básica H1 {color:#CC9900;} Selector { propiedad: valor; ...} Declaración Selector { propiedad: valor; ...} Ejemplo: H1 {color:#CC9900;}
Aplicar CSS En la Cabecera (<HEAD>) <STYLE TYPE="text/css"> <!-- P {text-align:right} --> </STYLE> Estilo como atributo <P STYLE="text-align: right">Estilo propio</P> Hoja de estilo externa <LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css">
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;}
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
Cajas Margin Padding Border Vestibulum 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
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:
Modelo de caja
Un caso con un encabezado y algo de texto Un 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): <h1>Artículo 1:</h1> <p>Todos los hombres nacen libres e iguales en dignidad y derechos. Están dotados de razonamiento y consciencia y deberían de comportarse entre sí con espíritu de hermandad.</p>