Hojas de Estilos en Cascada (CSS) - Apuntes

25
Apuntes sobre Hojas de Estilo en Cascada (CSS) Mg. Fernando Irigaray Seminario de Integración y Producción

description

Introducción a las CSS. Seminario de Integración y Producción Escuela de Comunicación Social Facultad de Ciencia Política y RR.II Universidad Nacional de Rosario

Transcript of Hojas de Estilos en Cascada (CSS) - Apuntes

Page 1: Hojas de Estilos en Cascada (CSS) - Apuntes

Apuntes sobreHojas de Estilo

en Cascada(CSS)

Mg. Fernando Irigaray

Seminario de Integración y Producción

Page 2: Hojas de Estilos en Cascada (CSS) - Apuntes

HTML

CSS

HTML

HTML

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

CSS

Page 3: Hojas de Estilos en Cascada (CSS) - Apuntes

HTML

CSS

HTML

HTML

Características de las CSS

• Separar la visualización del contenido.

• Simplificar el código HTML.

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

Page 4: Hojas de Estilos en Cascada (CSS) - Apuntes

Reglas de estilo

p {color: #ff0033;}

Page 5: Hojas de Estilos en Cascada (CSS) - Apuntes

p {color: #ff0033;}

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

Reglas de estilo

Page 6: Hojas de Estilos en Cascada (CSS) - Apuntes

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

p {color: #ff0033;}

Reglas de estilo

Page 7: Hojas de Estilos en Cascada (CSS) - Apuntes

Declaración de estilo

p {color: #ff0033;}

Reglas de estilo

Page 8: Hojas de Estilos en Cascada (CSS) - Apuntes

Propiedad

p {color: #ff0033;}

Reglas de estilo

Page 9: Hojas de Estilos en Cascada (CSS) - Apuntes

Separador

p {color: #ff0033;}

Reglas de estilo

Page 10: Hojas de Estilos en Cascada (CSS) - Apuntes

Valor

p {color: #ff0033;}

Reglas de estilo

Page 11: Hojas de Estilos en Cascada (CSS) - Apuntes

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

CSS

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

Selectores

Page 12: Hojas de Estilos en Cascada (CSS) - Apuntes

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

CSS

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

HTML

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

Selectores

Page 13: Hojas de Estilos en Cascada (CSS) - Apuntes

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

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

CSS

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

HTML

Selectores

Page 14: Hojas de Estilos en Cascada (CSS) - Apuntes

• CLASS: 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; }

CSS

Selectores

Page 15: Hojas de Estilos en Cascada (CSS) - Apuntes

• CLASS: 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; }

CSS

<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>

HTML

Selectores

Page 16: Hojas de Estilos en Cascada (CSS) - Apuntes

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

CSS

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

Selectores

Page 17: Hojas de Estilos en Cascada (CSS) - Apuntes

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

CSSCSS

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

HTMLHTML

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

SelectoresSelectores

Page 18: Hojas de Estilos en Cascada (CSS) - Apuntes

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

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

CSS

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

HTML

Selectores

Page 19: Hojas de Estilos en Cascada (CSS) - Apuntes

Estructura

Container Nav

Banner

<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>

HTML

1 2 3

Page 20: Hojas de Estilos en Cascada (CSS) - Apuntes

Estructura

Banner

<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>

HTML

Page 21: Hojas de Estilos en Cascada (CSS) - Apuntes

Estructura

Container

<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>

HTML

1 2 3

Page 22: Hojas de Estilos en Cascada (CSS) - Apuntes

Estructura

Container

<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>

HTML

1 2 3

destacado

Page 23: Hojas de Estilos en Cascada (CSS) - Apuntes

Estructura

Nav

<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>

HTML

Page 24: Hojas de Estilos en Cascada (CSS) - Apuntes

HTML

CSS

HTML

HTML

Enlazar archivo CSS

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

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

</head>

HTML