0
Apuntes sobre Hojas de Estilo en Cascada (CSS) 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 igual...
<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
×

Taller multimedia

1,678

Published on

Prueba para subir datos a la página. Clase del taller multimedia del postítulo de periodismo

Published in: Technology, Education
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
1,678
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
76
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Taller multimedia"

  1. 1. Apuntes sobre Hojas de Estilo en Cascada (CSS) 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×