CSS: Cascading Style Sheets
-
Upload
kristen-mccullough -
Category
Documents
-
view
11 -
download
0
description
Transcript of CSS: Cascading Style Sheets
![Page 1: CSS: Cascading Style Sheets](https://reader036.fdocuments.ec/reader036/viewer/2022082711/568130ff550346895d972fd3/html5/thumbnails/1.jpg)
CSS: Cascading Style Sheets
Yusef Hassan Monterohttp://www.nosolousabilidad.com/hassan
![Page 2: CSS: Cascading Style Sheets](https://reader036.fdocuments.ec/reader036/viewer/2022082711/568130ff550346895d972fd3/html5/thumbnails/2.jpg)
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
![Page 3: CSS: Cascading Style Sheets](https://reader036.fdocuments.ec/reader036/viewer/2022082711/568130ff550346895d972fd3/html5/thumbnails/3.jpg)
Sintaxis Básica
Selector { propiedad: valor; ...}
Declaración
H1 {color:#CC9900;}Ejemplo:
![Page 4: CSS: Cascading Style Sheets](https://reader036.fdocuments.ec/reader036/viewer/2022082711/568130ff550346895d972fd3/html5/thumbnails/4.jpg)
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">
![Page 5: CSS: Cascading Style Sheets](https://reader036.fdocuments.ec/reader036/viewer/2022082711/568130ff550346895d972fd3/html5/thumbnails/5.jpg)
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;}
![Page 6: CSS: Cascading Style Sheets](https://reader036.fdocuments.ec/reader036/viewer/2022082711/568130ff550346895d972fd3/html5/thumbnails/6.jpg)
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
![Page 7: CSS: Cascading Style Sheets](https://reader036.fdocuments.ec/reader036/viewer/2022082711/568130ff550346895d972fd3/html5/thumbnails/7.jpg)
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