Descargar la presentación
La descarga está en progreso. Por favor, espere
1
CSS: Cascading Style Sheets
2
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
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 (<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">
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 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
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 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>
Presentaciones similares
