Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Apuntes sobre Hojas de Estilo en Cascada (CSS) Mg. Fernando Irigaray Seminario de Integración y Producción
conjunto de instrucciones que indican a un navegador como debe presentar un elemento concreto en una página html. CSS HTML...
Características de las CSS <ul><li>Separar la visualización del contenido. </li></ul><ul><li>Simplificar el código HTML. <...
Reglas de estilo p {color: #ff0033;}
p {color: #ff0033;} <ul><li>Selector :  Indica al navegador que elemento se verá afectado por la regla de estilo. </li></u...
<ul><li>Regla :  Conjunto de propiedades que indican al navegador como se debe mostrar el elemento indicado por el selecto...
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 <ul><li>Simples :...
h1 { color: #ff0033; font-family: Verdana; font-weight: bold; font-size: 16px; text-align: center; } CSS <h1>Título del ar...
<ul><li>Simples :  A, BODY, P, BR, H1, H2, BLOCKQUOTE… </li></ul>h1 { color: #ff0033; font-family: Verdana; font-weight: b...
<ul><li>CLASS :   Precedido por el carácter  .  hace referencia a un elemento  HTML con un valor en el atributo CLASS igua...
<ul><li>CLASS :  Precedido por el carácter  .  hace referencia a un elemento  HTML con un valor en el atributo CLASS igual...
#container { width: 714px; background-color: #f1f1f1; } CSS <ul><li>ID :  Precedido por el carácter  #  hace referencia a ...
#container { width: 714px; background-color: #f1f1f1; } CSS <body> <div ID=“container”> <h1>Título del artículo</h1> <p>Te...
<ul><li>ID :  Precedido por el carácter  #  hace referencia a un elemento  HTML con un valor en el atributo ID igual al no...
Estructura Container Nav Banner <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class=&quot;des...
Estructura Banner <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class=&quot;destacado&quot;> ...
Estructura Container <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class=&quot;destacado&quot...
Estructura Container <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class=&quot;destacado&quot...
Estructura Nav <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class=&quot;destacado&quot;> 1 <...
Enlazar archivo CSS <head > <title>Mi página HTML</title> <link rel=“stylesheet” href=“estilos.css” type=&quot;text/css“> ...
Bibliografía de Consulta <ul><li>Manual de CSS de Web Estilo </li></ul><ul><li>Hojas de estilo en cascada de  Web  Design ...
Upcoming SlideShare
Loading in …5
×

Hojas de Estilos en Cascada (CSS) - Apuntes

4,579 views

Published on

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

Published in: Technology, Education
  • Be the first to comment

Hojas de Estilos en Cascada (CSS) - Apuntes

  1. 1. Apuntes sobre Hojas de Estilo en Cascada (CSS) Mg. Fernando Irigaray Seminario de Integración y Producción
  2. 2. conjunto de instrucciones que indican a un navegador como debe presentar un elemento concreto en una página html. CSS HTML CSS HTML HTML
  3. 3. Características de las CSS <ul><li>Separar la visualización del contenido. </li></ul><ul><li>Simplificar el código HTML. </li></ul><ul><li>Controlar el estilo y diseño de forma global. </li></ul>HTML CSS HTML HTML
  4. 4. Reglas de estilo p {color: #ff0033;}
  5. 5. p {color: #ff0033;} <ul><li>Selector : Indica al navegador que elemento se verá afectado por la regla de estilo. </li></ul>Reglas de estilo
  6. 6. <ul><li>Regla : Conjunto de propiedades que indican al navegador como se debe mostrar el elemento indicado por el selector. </li></ul>p {color: #ff0033;} Reglas de estilo
  7. 7. Declaración de estilo p {color: #ff0033;} Reglas de estilo
  8. 8. Propiedad p {color: #ff0033;} Reglas de estilo
  9. 9. Separador p {color: #ff0033;} Reglas de estilo
  10. 10. Valor p {color: #ff0033;} Reglas de estilo
  11. 11. h1 { color: #ff0033; font-family: Verdana; font-weight: bold; font-size: 16px; text-align: center; } CSS <ul><li>Simples : A, BODY, P, BR, H1, H2, BLOCKQUOTE… </li></ul>Selectores
  12. 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 <ul><li>Simples : A, BODY, P, BR, H1, H2, BLOCKQUOTE… </li></ul>Selectores
  13. 13. <ul><li>Simples : A, BODY, P, BR, H1, H2, BLOCKQUOTE… </li></ul>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. 14. <ul><li>CLASS : Precedido por el carácter . hace referencia a un elemento HTML con un valor en el atributo CLASS igual al nombre del selector. </li></ul>.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. 15. <ul><li>CLASS : Precedido por el carácter . hace referencia a un elemento HTML con un valor en el atributo CLASS igual al nombre del selector. </li></ul>.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=&quot;destacado&quot;> <h3 class=&quot;entry-header&quot;> 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=&quot;http://www.dialogica.com.ar/digicom/ 2007/04/trabajo_practico_presentacion.php&quot;> Leer texto completo: Consigna del Trabajo Práctico</a> </div> HTML Selectores
  16. 16. #container { width: 714px; background-color: #f1f1f1; } CSS <ul><li>ID : Precedido por el carácter # hace referencia a un elemento HTML con un valor en el atributo ID igual al nombre del selector. </li></ul>Selectores
  17. 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 <ul><li>ID : Precedido por el carácter # hace referencia a un elemento HTML con un valor en el atributo ID igual al nombre del selector. </li></ul>Selectores
  18. 18. <ul><li>ID : Precedido por el carácter # hace referencia a un elemento HTML con un valor en el atributo ID igual al nombre del selector. </li></ul>#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. 19. Estructura Container Nav Banner <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class=&quot;destacado&quot;> 1 </div> <div class=&quot;destacado&quot;> 2 </div> <div class=&quot;destacado&quot;> 3 </div> </div> <div id=“Nav”> Xxxxxxxx </div> </body> HTML 1 2 3
  20. 20. Estructura Banner <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class=&quot;destacado&quot;> 1 </div> <div class=&quot;destacado&quot;> 2 </div> <div class=&quot;destacado&quot;> 3 </div> </div> <div id=“Nav”> Xxxxxxxx </div> </body> HTML
  21. 21. Estructura Container <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class=&quot;destacado&quot;> 1 </div> <div class=&quot;destacado&quot;> 2 </div> <div class=&quot;destacado&quot;> 3 </div> </div> <div id=“Nav”> Xxxxxxxx </div> </body> HTML 1 2 3
  22. 22. Estructura Container <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class=&quot;destacado&quot;> 1 </div> <div class=&quot;destacado&quot;> 2 </div> <div class=&quot;destacado&quot;> 3 </div> </div> <div id=“Nav”> Xxxxxxxx </div> </body> HTML 1 2 3 destacado
  23. 23. Estructura Nav <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class=&quot;destacado&quot;> 1 </div> <div class=&quot;destacado&quot;> 2 </div> <div class=&quot;destacado&quot;> 3 </div> </div> <div id=“Nav”> Xxxxxxxx </div> </body> HTML
  24. 24. Enlazar archivo CSS <head > <title>Mi página HTML</title> <link rel=“stylesheet” href=“estilos.css” type=&quot;text/css“> </head> HTML HTML CSS HTML HTML
  25. 25. Bibliografía de Consulta <ul><li>Manual de CSS de Web Estilo </li></ul><ul><li>Hojas de estilo en cascada de Web Design Group </li></ul><ul><li>Proyecto Camaleón </li></ul>HTML CSS HTML HTML

×