CSS
Upcoming SlideShare
Loading in...5
×
 

CSS

on

  • 2,607 views

es una presentacion linda

es una presentacion linda

Statistics

Views

Total Views
2,607
Views on SlideShare
2,607
Embed Views
0

Actions

Likes
0
Downloads
51
Comments
0

0 Embeds 0

No embeds

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

CSS CSS Presentation Transcript

  • 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 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