• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Hojas de Estilos en Cascada (CSS) - Apuntes
 

Hojas de Estilos en Cascada (CSS) - Apuntes

on

  • 6,164 views

Introducción a las CSS.

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

Statistics

Views

Total Views
6,164
Views on SlideShare
6,007
Embed Views
157

Actions

Likes
1
Downloads
206
Comments
0

14 Embeds 157

http://redkisi.neuquen.gov.ar 36
http://informaticacotecnova.blogspot.com 31
http://www.dialogica.com.ar 29
http://internetmultimedia.wikispaces.com 16
http://manteniento.iespana.es 9
http://www.tecnologia.iesjuanlara.es 8
http://tallerpweb.16mb.com 7
http://cablemodem.fibertel.com.ar 6
http://www.informaticacotecnova.blogspot.com 5
http://informaticacotecnova.blogspot.mx 4
http://www.slideshare.net 3
http://www.freewebtown.com 1
http://webcache.googleusercontent.com 1
http://lazos.neuquen.gov.ar 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Hojas de Estilos en Cascada (CSS) - Apuntes Hojas de Estilos en Cascada (CSS) - Apuntes Presentation Transcript

    • 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 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.
      HTML CSS HTML HTML
    • Reglas de estilo p {color: #ff0033;}
    • p {color: #ff0033;}
      • Selector : Indica al navegador que elemento se verá afectado por la regla de estilo.
      Reglas de estilo
      • Regla : Conjunto de propiedades que indican al navegador como se debe mostrar el elemento indicado por el selector.
      p {color: #ff0033;} Reglas de estilo
    • 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
      • Simples : A, BODY, P, BR, H1, H2, BLOCKQUOTE…
      Selectores
    • 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
      • 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
      • 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
      • 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
    • #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
    • #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
      • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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