• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Qué Son Las Css
 

Qué Son Las Css

on

  • 2,907 views

Presentación para LC3 e[ad] Agosto de 2007

Presentación para LC3 e[ad] Agosto de 2007

Statistics

Views

Total Views
2,907
Views on SlideShare
2,896
Embed Views
11

Actions

Likes
3
Downloads
74
Comments
0

4 Embeds 11

http://www.maximiliano.cl 5
http://www.slideshare.net 4
http://s189815618.onlinehome.us 1
http://www.s189815618.onlinehome.us 1

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

    Qué Son Las Css Qué Son Las Css Presentation Transcript

    • CSS Diseñando desde el código Por: Maximiliano Martin
    • CSS C ascading S tyle S heets Hojas de Estilo en Cascadas
    • Hojas de Estilo en Cascadas W3C Un mecanismo simple para agregar el estilo a los documentos del Web Wikipedia Lenguaje formal usado para definir la presentación de un documento estructurado, escrito en XHTML
    • Prehistoria :) Mark-up o Marcación Término de imprenta “ conjunto de instrucciones estilísticas detalladas escritas en un manuscrito que debe ser tipografiado” {
    • { GML Lenguaje de marcas Generalizado IBM (Años ’80) Estudio/ Pseudolenguaje/ no diseño/ ‘ 70 ‘ 80 IBM Describir documentos Charles F. Goldfab (Años ’70) IBM GML
    • SGML Lenguaje de Marcación Generalizado Standard ISO 88879 (1986) Dictado/estructurado/Tags/ independencia / complejo y caro/css/ { ‘ 70 ‘ 80 1986 IBM GML SGML
    • Exponencial/ navegadores/sucio CHSS/SSP/CSS { HTML 1.0 Lenguaje de Marcación Hipertextual Tim Berners-Lee (1990) ‘ 70 ‘ 80 1986 1990 IBM GML SGML HTML
    • CSS Nivel 1 Primera recomendación oficial W3C (1994) (finales del 1996) ‘ 70 ‘ 80 1986 Internet/ 2.1/ 1990 { 1996 1998 CSS Nivel 2 Segunda recomendación oficial W3C (Mayo de 1998) IBM GML SGML HTML CSS1 CSS2
    • ¿Qué es CSS? Un lenguaje para controlar la presentación La mejor forma de separar contenido de presentación Obliga a crear documentos HTML/XHTML bien definidos la base de la Web semántica Mejora la Accesibilidad del documento Minimiza el esfuerzo de manutención Permite la visualización en dispositivos diferentes
    • ¿Y cómo es una CSS? Un “simple” documento de texto plano con extensión “.css”
    • Internet/ Glosario básico {
      • Regla CSS
      h1{ color: #F00;}
      • Selector
      • Declaración
          • Propiedad
          • Valor
    • Internet/ Selectores básicos {
      • Universal
      *{ … } p{ … } p span{ … }
      • Tipo o Etiqueta
      • Descendente
      .especial{ … }
      • Clase
      #especial{ … }
      • ID
    • Internet/ Selectores básicos { p a{ color: #F00;}
      • Descendente
      p * a{ color: #F00;}
    • Internet/ Propiedades principales {
      • Font
      • Color/Background
      • Text
      • Table
      • Aural
      • Misellaneus
      • Interface
      • Box Model
      • Font-size
      • Font-Family
      • Font-Style
      • Font-variant
      • Font-weight
      • Font- stretch
      • Margin
      • Padding
      • Dimensions
      • Positioning
      • Display
      • Border
    • Internet/
      • Área visible
      • Width
      • Height
      • Border
      • Padding
      • Margin
      { Modelo de Caja Área Visible Width Height Border Padding Margin
    • Internet/ Valores principales {
      • px
      • em
      • ex
      • %
      • in
      • cm
      • RGB
    • Internet/ Medios {
      • all
      • Screen
      • Print
      • Braile
      • Speech
      • tv
      • otros
    • Diseño Front y CSS? Diseño XHTML CSS
    • Internet/ HTML CSS 2.0 1990 1998 ¿Cómo funciona? <html> <head> <title>Ejemplo de estilos con CSS</title> <link rel=&quot;stylesheet&quot; href=“ estilo.css &quot; type=&quot;text/css&quot; /> </head> <body> <h1>Titular de la página</h1> <p>Un párrafo de texto no muy largo.</p> </body> </html> ejemplo.html h1 { color: #F00; font-family: Arial; font-size: large; } p { color: #000; font-family: Verdana; font-size: medium; } estilo.css
    • Internet/ Ejemplo {
    • Internet/ Recursos {
      • CSS Zen Garden http://www.csszengarden.com/
      • CSSLab
      • http://www.csslab.cl/
      • CSS Play
      • http://www.cssplay.co.uk/
      • W3School
      • http://www.w3schools.com/css/css_mediatypes.asp
      • Ovillo – Lista de distribución en castellano
      • http://www.ovillo.org
    • Internet/ Referencias {
      • W3C – Documentos traducidos
      • http://www.w3.org/2005/11/Translations/Query?titleMatch=css&lang=es&search1=Submit
      • Ilovejackdaniels
      • http://www.ilovejackdaniels.com/css_cheat_sheet.png
      • Sidar
      • http://www.sidar.org/recur/desdi/mcss/index.php
      • LibrosWeb
      • http://www.librosweb.es/css/index.html
      • W3C – Guía de referencia
      • http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/
    • Gracias :) Por: Maximiliano Martin