Post on 19-May-2015
description
Apuntes sobreHojas de Estilo
en Cascada(CSS)
Mg. Fernando Irigaray
Seminario de Integración y Producción
HTML
CSS
HTML
HTML
conjunto de instrucciones que indican a un navegador como debe presentar un elemento concreto en una página html.
CSS
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.
Reglas de estilo
p {color: #ff0033;}
p {color: #ff0033;}
• Selector: Indica al navegador que elemento se verá afectado por la regla de estilo.
Reglas de estilo
• Regla: Conjunto de propiedades que indican al navegador como se debe mostrar el elemento indicado por el selector.
p {color: #ff0033;}
Reglas de estilo
Declaración de estilo
p {color: #ff0033;}
Reglas de estilo
Propiedad
p {color: #ff0033;}
Reglas de estilo
Separador
p {color: #ff0033;}
Reglas de estilo
Valor
p {color: #ff0033;}
Reglas de estilo
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
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
• 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
• 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
• 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
#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
#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
• 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
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
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
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
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
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
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
HTML
CSS
HTML
HTML
Bibliografía de Consulta
• Manual de CSS de Web Estilo
• Hojas de estilo en cascada de Web Design Group
• Proyecto Camaleón