CSS: Cascading Style Sheets Yusef Hassan Montero

Presentación del tema: "CSS: Cascading Style Sheets Yusef Hassan Montero"— Transcripción de la presentación:

1 CSS: Cascading Style Sheets Yusef Hassan Montero http://www.nosolousabilidad.com/hassan yusef_hassan@yahoo.es

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 Selector { propiedad: valor;...} Declaración H1 {color:#CC9900;} Ejemplo:

4 Aplicar CSS En la Cabecera ( ) <!-- P {text-align:right} --> Estilo como atributo Estilo propio Hoja de estilo externa

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 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. Margin Padding Border