taller multimedia

Apuntes sobreHojas de Estilo

en Cascada(CSS)

Seminario de Integración y Producción

13/04/2313/04/23 Hojas de Estilo en Cascada (CSS) – SIyHojas de Estilo en Cascada (CSS) – SIyP - UNR - Fernando IrigarayP - UNR - Fernando Irigaray

22

HTML

CSS

HTML

HTML

conjunto de instrucciones que indican a un navegador como debe presentar un elemento concreto en una página html.

CSS


33

HTML

CSS

HTML

HTML

Características de las CSSCaracterísticas de las CSS

• Separar la visualización del contenido.

• Simplificar el código HTML.

• Controlar el estilo y diseño de forma global.


44

Reglas de estiloReglas de estilo

p {color: #ff0033;}


55

p {color: #ff0033;}

• SelectorSelector:: Indica al navegador que elemento se verá afectado por la regla de estilo.



66

• ReglaRegla:: Conjunto de propiedades que indican al navegador como se debe mostrar el elemento indicado por el selector.

p {color: #ff0033;}



77

Declaración de estiloDeclaración de estilo

p {color: #ff0033;}



88

PropiedadPropiedad

p {color: #ff0033;}



99

SeparadorSeparador

p {color: #ff0033;}



1010

ValorValor

p {color: #ff0033;}



1111

h1 { color: #ff0033; font-family: Verdana; font-weight: bold; font-size: 16px; text-align: center; }

CSSCSS

• SimplesSimples:: A, BODY, P, BR, H1, H2, BLOCKQUOTE…

SelectoresSelectores


1212


CSSCSS

<h1>Título del artículo</h1>

HTMLHTML




1313



CSSCSS

<h1>Título del artículo</h1>

HTMLHTML



1414

• CLASSCLASS: : Precedido por el carácter .. hace referencia a un elemento HTML con un valor en el atributo CLASS igual al nombre del selector.

.destacado { font-family: Tahoma; font-size: 11px; font-weight: normal; text-align: left; line-height: 13px; background-color: #EFEFD1; border-width: 1px; border-style: dashed; border-color: #a06000; padding: 10px 10px 10px 10px; }

CSSCSS



1515

• CLASSCLASS: : Precedido por el carácter .. hace referencia a un elemento HTML con un valor en el atributo CLASS igual al nombre del selector.

.destacado { font-family: Tahoma; font-size: 11px; font-weight: normal; text-align: left; line-height: 13px; background-color: #EFEFD1; border-width: 1px; border-style: dashed; border-color: #a06000; padding: 10px 10px 10px 10px; }

CSSCSS

<div class="destacado">

<h3 class="entry-header">TP Presentación personal en HTML</h3><br /><strong>Consigna:</strong> Producir una presentación personal desarrollada en Código HTMLque incluirá:<br /><br />

<a href="http://www.dialogica.com.ar/digicom/2007/04/trabajo_practico_presentacion.php">Leer texto completo: Consigna del TrabajoPráctico</a>

</div>

HTMLHTML



1616

#container { width: 714px; background-color: #f1f1f1; }

CSSCSS

• IDID: : Precedido por el carácter ## hace referencia a un elemento HTML con un valor en el atributo ID igual al nombre del selector.



1717


CSSCSS

<body><div ID=“container”><h1>Título del artículo</h1><p>Texto</p></div></body>

HTMLHTML




1818



CSSCSS

<body><div ID=“container”><h1>Título del artículo</h1><p>Texto</p></div></body>

HTMLHTML



1919

EstructuraEstructura

ContainerContainer NavNav

BannerBanner

<body><div id=“Banner”>xxxxxxxxxxxxxxxx</div>

<div id=“Container”>

<div class="destacado">1</div><div class="destacado">2</div><div class="destacado">3</div>

</div>

<div id=“Nav”>Xxxxxxxx</div>

</body>

HTMLHTML

11 22 33


2020


BannerBanner




</div>


</body>

HTMLHTML


2121


ContainerContainer




</div>


</body>

HTMLHTML

11 22 33


2222


ContainerContainer




</div>


</body>

HTMLHTML

11 22 33

destacadodestacado


2323


NavNav




</div>


</body>

HTMLHTML


2424

HTML

CSS

HTML

HTML

Enlazar archivo CSSEnlazar archivo CSS

<head><title>Mi página HTML</title>

<link rel=“stylesheet” href=“estilos.css”type="text/css“>

</head>

HTMLHTML


2525

HTML

CSS

HTML

HTML

Bibliografía de ConsultaBibliografía de Consulta

• Manual de CSS de Web Estilo

• Hojas de estilo en cascada de Web Design Group

• Proyecto Camaleón

taller multimedia

Technology