Post on 13-Jun-2015
description
CSSDiseñando desde el código
www.maximiliano.cl
CSSDiseñando desde el código
Por: Maximiliano Martin
CSSDiseñando desde el código
www.maximiliano.cl
CSSCascading Style Sheets
Hojas de Estilo en Cascadas
CSSDiseñando desde el código
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
CSSDiseñando desde el código
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”
{
CSSDiseñando desde el código
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
CSSDiseñando desde el código
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
CSSDiseñando desde el código
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
CSSDiseñando desde el código
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
CSSDiseñando desde el código
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
CSSDiseñando desde el código
www.maximiliano.cl
¿Y cómo es una CSS?Un “simple” documento de texto plano con extensión “.css”
CSSDiseñando desde el código
www.maximiliano.clInternet/
Glosario básico
{• Regla CSS h1{ color: #F00;}•Selector
• Declaración• Propiedad• Valor
CSSDiseñando desde el código
www.maximiliano.clInternet/
Selectores básicos
{• Universal *{ … }
p{ … }
p span{ … }
• Tipo o Etiqueta
• Descendente
.especial{ … }• Clase
#especial{ … }• ID
CSSDiseñando desde el código
www.maximiliano.clInternet/
Selectores básicos
{ p a{ color: #F00;}
• Descendente
p * a{ color: #F00;}
CSSDiseñando desde el código
www.maximiliano.clInternet/
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
CSSDiseñando desde el código
www.maximiliano.clInternet/
• Área visible• Width• Height• Border• Padding• Margin {Modelo de Caja Área Visible Width
Height Border Padding Margin
CSSDiseñando desde el código
www.maximiliano.clInternet/
Valores principales
{• px • em• ex• %• in• cm• RGB
CSSDiseñando desde el código
www.maximiliano.clInternet/
Medios
{• all• Screen • Print• Braile• Speech• tv• otros
CSSDiseñando desde el código
www.maximiliano.cl
Diseño Front y CSS?Diseño XHTML CSS
CSSDiseñando desde el código
www.maximiliano.clInternet/
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
CSSDiseñando desde el código
www.maximiliano.clInternet/
Ejemplo
{
CSSDiseñando desde el código
www.maximiliano.clInternet/
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
CSSDiseñando desde el código
www.maximiliano.clInternet/
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/
CSSDiseñando desde el código
www.maximiliano.cl
Gracias :)
Por: Maximiliano Martin