CSS: Cascading Style Sheets

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

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

Aplicar CSS • En la Cabecera (<HEAD>) <STYLE TYPE="text/css">  </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 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

CSS: Cascading Style Sheets