Hojas de Estilos en Cascada (CSS) - Apuntes
-
Upload
fernando-irigaray -
Category
Technology
-
view
4.094 -
download
2
description
Transcript of Hojas de Estilos en Cascada (CSS) - Apuntes
![Page 1: Hojas de Estilos en Cascada (CSS) - Apuntes](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/1.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/2.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/3.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/4.jpg)
Reglas de estilo
p {color: #ff0033;}
![Page 5: Hojas de Estilos en Cascada (CSS) - Apuntes](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/5.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/6.jpg)
• 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](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/7.jpg)
Declaración de estilo
p {color: #ff0033;}
Reglas de estilo
![Page 8: Hojas de Estilos en Cascada (CSS) - Apuntes](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/8.jpg)
Propiedad
p {color: #ff0033;}
Reglas de estilo
![Page 9: Hojas de Estilos en Cascada (CSS) - Apuntes](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/9.jpg)
Separador
p {color: #ff0033;}
Reglas de estilo
![Page 10: Hojas de Estilos en Cascada (CSS) - Apuntes](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/10.jpg)
Valor
p {color: #ff0033;}
Reglas de estilo
![Page 11: Hojas de Estilos en Cascada (CSS) - Apuntes](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/11.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/12.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/13.jpg)
• 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](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/14.jpg)
• 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](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/15.jpg)
• 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](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/16.jpg)
#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](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/17.jpg)
#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](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/18.jpg)
• 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](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/19.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/20.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/21.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/22.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/23.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/24.jpg)
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
![Page 25: Hojas de Estilos en Cascada (CSS) - Apuntes](https://reader034.fdocument.pub/reader034/viewer/2022042607/555a6ccad8b42a972b8b4c90/html5/thumbnails/25.jpg)
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