Download - Qué Son Las Css
![Page 1: Qué Son Las Css](https://reader036.vdocumento.com/reader036/viewer/2022062307/557b454bd8b42a0d388b495e/html5/thumbnails/1.jpg)
CSSDiseñando desde el código
www.maximiliano.cl
CSSDiseñando desde el código
Por: Maximiliano Martin
![Page 2: Qué Son Las Css](https://reader036.vdocumento.com/reader036/viewer/2022062307/557b454bd8b42a0d388b495e/html5/thumbnails/2.jpg)
CSSDiseñando desde el código
www.maximiliano.cl
CSSCascading Style Sheets
Hojas de Estilo en Cascadas
![Page 3: Qué Son Las Css](https://reader036.vdocumento.com/reader036/viewer/2022062307/557b454bd8b42a0d388b495e/html5/thumbnails/3.jpg)
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
![Page 4: Qué Son Las Css](https://reader036.vdocumento.com/reader036/viewer/2022062307/557b454bd8b42a0d388b495e/html5/thumbnails/4.jpg)
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”
{
![Page 5: Qué Son Las Css](https://reader036.vdocumento.com/reader036/viewer/2022062307/557b454bd8b42a0d388b495e/html5/thumbnails/5.jpg)
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
![Page 6: Qué Son Las Css](https://reader036.vdocumento.com/reader036/viewer/2022062307/557b454bd8b42a0d388b495e/html5/thumbnails/6.jpg)
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
![Page 7: Qué Son Las Css](https://reader036.vdocumento.com/reader036/viewer/2022062307/557b454bd8b42a0d388b495e/html5/thumbnails/7.jpg)
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
![Page 8: Qué Son Las Css](https://reader036.vdocumento.com/reader036/viewer/2022062307/557b454bd8b42a0d388b495e/html5/thumbnails/8.jpg)
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
![Page 9: Qué Son Las Css](https://reader036.vdocumento.com/reader036/viewer/2022062307/557b454bd8b42a0d388b495e/html5/thumbnails/9.jpg)
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
![Page 10: Qué Son Las Css](https://reader036.vdocumento.com/reader036/viewer/2022062307/557b454bd8b42a0d388b495e/html5/thumbnails/10.jpg)
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”
![Page 11: Qué Son Las Css](https://reader036.vdocumento.com/reader036/viewer/2022062307/557b454bd8b42a0d388b495e/html5/thumbnails/11.jpg)
CSSDiseñando desde el código
www.maximiliano.clInternet/
Glosario básico
{• Regla CSS h1{ color: #F00;}•Selector
• Declaración• Propiedad• Valor
![Page 12: Qué Son Las Css](https://reader036.vdocumento.com/reader036/viewer/2022062307/557b454bd8b42a0d388b495e/html5/thumbnails/12.jpg)
CSSDiseñando desde el código
www.maximiliano.clInternet/
Selectores básicos
{• Universal *{ … }
p{ … }
p span{ … }
• Tipo o Etiqueta
• Descendente
.especial{ … }• Clase
#especial{ … }• ID
![Page 13: Qué Son Las Css](https://reader036.vdocumento.com/reader036/viewer/2022062307/557b454bd8b42a0d388b495e/html5/thumbnails/13.jpg)
CSSDiseñando desde el código
www.maximiliano.clInternet/
Selectores básicos
{ p a{ color: #F00;}
• Descendente
p * a{ color: #F00;}
![Page 14: Qué Son Las Css](https://reader036.vdocumento.com/reader036/viewer/2022062307/557b454bd8b42a0d388b495e/html5/thumbnails/14.jpg)
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
![Page 15: Qué Son Las Css](https://reader036.vdocumento.com/reader036/viewer/2022062307/557b454bd8b42a0d388b495e/html5/thumbnails/15.jpg)
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
![Page 16: Qué Son Las Css](https://reader036.vdocumento.com/reader036/viewer/2022062307/557b454bd8b42a0d388b495e/html5/thumbnails/16.jpg)
CSSDiseñando desde el código
www.maximiliano.clInternet/
Valores principales
{• px • em• ex• %• in• cm• RGB
![Page 17: Qué Son Las Css](https://reader036.vdocumento.com/reader036/viewer/2022062307/557b454bd8b42a0d388b495e/html5/thumbnails/17.jpg)
CSSDiseñando desde el código
www.maximiliano.clInternet/
Medios
{• all• Screen • Print• Braile• Speech• tv• otros
![Page 18: Qué Son Las Css](https://reader036.vdocumento.com/reader036/viewer/2022062307/557b454bd8b42a0d388b495e/html5/thumbnails/18.jpg)
CSSDiseñando desde el código
www.maximiliano.cl
Diseño Front y CSS?Diseño XHTML CSS
![Page 19: Qué Son Las Css](https://reader036.vdocumento.com/reader036/viewer/2022062307/557b454bd8b42a0d388b495e/html5/thumbnails/19.jpg)
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
![Page 20: Qué Son Las Css](https://reader036.vdocumento.com/reader036/viewer/2022062307/557b454bd8b42a0d388b495e/html5/thumbnails/20.jpg)
CSSDiseñando desde el código
www.maximiliano.clInternet/
Ejemplo
{
![Page 21: Qué Son Las Css](https://reader036.vdocumento.com/reader036/viewer/2022062307/557b454bd8b42a0d388b495e/html5/thumbnails/21.jpg)
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
![Page 22: Qué Son Las Css](https://reader036.vdocumento.com/reader036/viewer/2022062307/557b454bd8b42a0d388b495e/html5/thumbnails/22.jpg)
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/
![Page 23: Qué Son Las Css](https://reader036.vdocumento.com/reader036/viewer/2022062307/557b454bd8b42a0d388b495e/html5/thumbnails/23.jpg)
CSSDiseñando desde el código
www.maximiliano.cl
Gracias :)
Por: Maximiliano Martin