Qué Son Las Css

CSSDiseñando desde el código

www.maximiliano.cl


Por: Maximiliano Martin


www.maximiliano.cl

CSSCascading Style Sheets

Hojas de Estilo en Cascadas


www.maximiliano.cl

Hojas de Estilo en Cascadas

W3C Un mecanismo simple para agregar el estilo a los documentos del Web

WikipediaLenguaje formal usado para definir la presentación de un documento estructurado, escrito en XHTML


www.maximiliano.cl

Prehistoria :)Mark-up o MarcaciónTérmino de imprenta “conjunto de instrucciones estilísticas detalladas escritas en un manuscrito que debe ser tipografiado”

{


www.maximiliano.cl

{GMLLenguaje de marcas Generalizado IBM (Años ’80)

Estudio/Pseudolenguaje/

no diseño/

‘70 ‘80

IBMDescribir documentosCharles F. Goldfab(Años ’70)

IBM GML


www.maximiliano.cl

SGMLLenguaje de Marcación Generalizado StandardISO 88879(1986)

Dictado/estructurado/Tags/independencia /

complejo y caro/css/

{‘70 ‘80 198

6

IBM GML SGML


www.maximiliano.clExponencial/

navegadores/sucioCHSS/SSP/CSS

{HTML 1.0Lenguaje de Marcación HipertextualTim Berners-Lee (1990)

‘70 ‘80 1986

1990

IBM GML SGML HTML


www.maximiliano.cl

CSS Nivel 1Primera recomendación oficialW3C (1994) (finales del 1996)

‘70 ‘80 1986

Internet/2.1/

1990

{199

6199

8

CSS Nivel 2Segunda recomendación oficialW3C(Mayo de 1998)

IBM GML SGML HTML CSS1 CSS2


www.maximiliano.cl

¿Qué es CSS?Un lenguaje para controlar la presentaciónLa mejor forma de separar contenido de presentaciónObliga a crear documentos HTML/XHTML bien definidos la base de la Web semánticaMejora la Accesibilidad del documento

Minimiza el esfuerzo de manutención

Permite la visualización en dispositivos diferentes


www.maximiliano.cl

¿Y cómo es una CSS?Un “simple” documento de texto plano con extensión “.css”


www.maximiliano.clInternet/

Glosario básico

{• Regla CSS h1{ color: #F00;}•Selector

• Declaración• Propiedad• Valor



Selectores básicos

{• Universal *{ … }

p{ … }

p span{ … }

• Tipo o Etiqueta

• Descendente

.especial{ … }• Clase

#especial{ … }• ID



Selectores básicos

{ p a{ color: #F00;}

• Descendente

p * a{ color: #F00;}



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



• Área visible• Width• Height• Border• Padding• Margin {Modelo de Caja Área Visible Width

Height Border Padding Margin



Valores principales

{• px • em• ex• %• in• cm• RGB



Medios

{• all• Screen • Print• Braile• Speech• tv• otros


www.maximiliano.cl

Diseño Front y CSS?Diseño XHTML CSS



HTML CSS 2.0

1990

1998

¿Cómo funciona?

<html><head>

<title>Ejemplo de estilos con CSS</title><link rel="stylesheet" href=“estilo.css" type="text/css" />

</head><body>

<h1>Titular de la página</h1><p>Un párrafo de texto no muy largo.</p>

</body></html>

ejemplo.htmlh1 {

color: #F00;font-family: Arial; font-size: large;

}p {

color: #000;font-family: Verdana; font-size: medium;

}

estilo.css



Ejemplo

{



Recursos

{• CSS Zen Gardenhttp://www.csszengarden.com/

• CSSLabhttp://www.csslab.cl/

• CSS Playhttp://www.cssplay.co.uk/

• W3Schoolhttp://www.w3schools.com/css/css_mediatypes.asp

• Ovillo – Lista de distribución en castellanohttp://www.ovillo.org



Referencias

{• W3C – Documentos traducidoshttp://www.w3.org/2005/11/Translations/Query?titleMatch=css&lang=es&search1=Submit

• Ilovejackdanielshttp://www.ilovejackdaniels.com/css_cheat_sheet.png

• Sidarhttp://www.sidar.org/recur/desdi/mcss/index.php

• LibrosWebhttp://www.librosweb.es/css/index.html

• W3C – Guía de referenciahttp://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/


www.maximiliano.cl

Gracias :)

Por: Maximiliano Martin

Qué Son Las Css

Technology

Transcript of Qué Son Las Css