Your SlideShare is downloading. ×
0
rosario
rosario
rosario
rosario
rosario
rosario
rosario
rosario
rosario
rosario
rosario
rosario
rosario
rosario
rosario
rosario
rosario
rosario
rosario
rosario
rosario
rosario
rosario
rosario
rosario
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

rosario

1,638

Published on

cuna de la bandera

cuna de la bandera

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Apuntes sobre Hojas de Estilo en Cascada (CSS) Seminario de Integración y Producción
  • 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. 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.
    HTML CSS HTML HTML
  • 4. Reglas de estilo p {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 estilo p {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=&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. #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 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. 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. 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. 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. 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. 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. Bibliografía de Consulta
    • Manual de CSS de Web Estilo
    • Hojas de estilo en cascada de Web Design Group
    • Proyecto Camaleón
    HTML CSS HTML HTML

×