CSS: Cascading Style Sheets
7
CSS: Cascading Style Sheets Yusef Hassan Montero http://www.nosolousabilidad.com/ hassan [email protected]
-
Upload
kristen-mccullough -
Category
Documents
-
view
9 -
download
0
description
CSS: Cascading Style Sheets. Yusef Hassan Montero http://www.nosolousabilidad.com/hassan [email protected]. Introducción. CSS nos permite: Separar presentación de contenido Mayor flexibilidad, escalabilidad, y posibilidades en la presentación de contenidos web - PowerPoint PPT Presentation
Transcript of CSS: Cascading Style Sheets
CSS: Cascading Style Sheets
Yusef Hassan Monterohttp://www.nosolousabilidad.com/hassan
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
Selector { propiedad: valor; ...}
Declaración
H1 {color:#CC9900;}Ejemplo:
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
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
