Descargado 248 veces
Subido porFernando Irigaray
Hojas de Estilos en Cascada (CSS) - Apuntes
El documento proporciona un compendio sobre las hojas de estilo en cascada (CSS), explicando su función en la presentación de elementos HTML. Se enfatiza la separación entre contenido y estilo, y se detallan selectores y reglas de estilo, incluyendo el uso de clases e IDs. Además, se incluye información práctica sobre la estructura de un HTML básico y cómo enlazar archivos CSS.
![2 - Aprendiendo a usar CSS en las paginas web [2025].pdf](https://cdn.slidesharecdn.com/ss_thumbnails/2-css2025-251125200039-891cc2b4-thumbnail.jpg?width=640&height=640&fit=bounds)
Hojas de Estilos en Cascada (CSS) - Apuntes
- 1. Apuntes sobre Hojasde Estilo en Cascada (CSS) Mg. Fernando Irigaray Seminario de Integración y Producción
- 2. conjunto de instruccionesque indican a un navegador como debe presentar un elemento concreto en una página html. CSS HTML CSS HTML HTML
- 3. Características de lasCSS Separar la visualización del contenido. Simplificar el código HTML. Controlar el estilo y diseño de forma global. HTML CSS HTML HTML
- 4. Reglas de estilop {color: #ff0033;}
- 5. p {color: #ff0033;}Selector : Indica al navegador que elemento se verá afectado por la regla de estilo. Reglas de estilo
- 6. Regla : Conjunto de propiedades que indican al navegador como se debe mostrar el elemento indicado por el selector. p {color: #ff0033;} Reglas de estilo
- 7. Declaración de estilop {color: #ff0033;} Reglas de estilo
- 8. Propiedad p {color:#ff0033;} Reglas de estilo
- 9. Separador p {color:#ff0033;} Reglas de estilo
- 10. Valor p {color:#ff0033;} Reglas de estilo
- 11. 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
- 12. 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
- 13. 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
- 14. 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
- 15. 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 HTML que incluirá:<br /><br /> <a href="http://www.dialogica.com.ar/digicom/ 2007/04/trabajo_practico_presentacion.php"> Leer texto completo: Consigna del Trabajo Práctico</a> </div> HTML Selectores
- 16. #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
- 17. #container { width:714px; background-color: #f1f1f1; } CSS <body> <div ID=“container”> <h1>Título del artículo</h1> <p>Texto</p> </div> </body> HTML 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
- 18. 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
- 19. Estructura Container NavBanner <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
- 20. 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
- 21. 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
- 22. 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
- 23. 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
- 24. 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
- 25. Bibliografía de ConsultaManual de CSS de Web Estilo Hojas de estilo en cascada de Web Design Group Proyecto Camaleón HTML CSS HTML HTML