SlideShare una empresa de Scribd logo
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 { ,[object Object],h1{ color: #F00;} ,[object Object],[object Object],[object Object],[object Object]
Internet/ Selectores básicos { ,[object Object],*{ … } p{ … } p span{ … } ,[object Object],[object Object],.especial{ … } ,[object Object],#especial{ … } ,[object Object]
Internet/ Selectores básicos { p a{ color: #F00;} ,[object Object],p * a{ color: #F00;}
Internet/ Propiedades principales { ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Internet/ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],{ Modelo de Caja Área Visible Width Height Border Padding Margin
Internet/ Valores principales { ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Internet/ Medios { ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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 { ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Internet/ Referencias { ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Gracias :) Por: Maximiliano Martin

Más contenido relacionado

La actualidad más candente

Codigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE MéridaCodigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE Méridaduberlisg
 
XHTML+Inicio en CSS
XHTML+Inicio en CSSXHTML+Inicio en CSS
XHTML+Inicio en CSS
iConstruye
 
Qué es html
Qué es htmlQué es html
Qué es htmledujoso
 
04 Marcas HTML
04 Marcas HTML04 Marcas HTML
04 Marcas HTML
pizarg0
 
Hojas de estilo css
Hojas de estilo cssHojas de estilo css
Hojas de estilo csssarabz
 
Hojas de estilo_css
Hojas de estilo_cssHojas de estilo_css
Hojas de estilo_css
lamargari
 
Páginas web en formato HTML
Páginas web en formato HTMLPáginas web en formato HTML
Páginas web en formato HTML
wladimirclipper
 
Hojas de estilo css
Hojas de estilo cssHojas de estilo css
Hojas de estilo css
ragalangue
 
Html y css
Html y cssHtml y css
Html y cssisandy
 
Introducción HTML
Introducción HTMLIntroducción HTML
Introducción HTML
Carlos A. Iglesias
 
Diseño de páginas Web con HTML
Diseño de páginas Web con HTMLDiseño de páginas Web con HTML
Diseño de páginas Web con HTML
Javier
 
Introducción a CSS Parte - 1
Introducción a CSS Parte - 1Introducción a CSS Parte - 1
Introducción a CSS Parte - 1
Jorge Llanten
 
Documento numero 1
Documento numero 1Documento numero 1
Documento numero 1
Juan Baron
 
Manual de introducción a CSS3
Manual de introducción a CSS3Manual de introducción a CSS3
Manual de introducción a CSS3
Juan Alberto Ortega Contreras
 
Las hojas de estilo (css)
Las hojas de estilo (css)Las hojas de estilo (css)
Las hojas de estilo (css)
Mateo del Carmen Rosique CAncino
 
Hojas de estilo (css)
Hojas de estilo (css)Hojas de estilo (css)
Hojas de estilo (css)Krolina Agui
 

La actualidad más candente (19)

Codigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE MéridaCodigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE Mérida
 
XHTML+Inicio en CSS
XHTML+Inicio en CSSXHTML+Inicio en CSS
XHTML+Inicio en CSS
 
Qué es html
Qué es htmlQué es html
Qué es html
 
04 Marcas HTML
04 Marcas HTML04 Marcas HTML
04 Marcas HTML
 
Hojas de estilo css
Hojas de estilo cssHojas de estilo css
Hojas de estilo css
 
Hojas de estilo_css
Hojas de estilo_cssHojas de estilo_css
Hojas de estilo_css
 
Dhtml
DhtmlDhtml
Dhtml
 
Páginas web en formato HTML
Páginas web en formato HTMLPáginas web en formato HTML
Páginas web en formato HTML
 
Hojas de estilo css
Hojas de estilo cssHojas de estilo css
Hojas de estilo css
 
Html y css
Html y cssHtml y css
Html y css
 
Introducción HTML
Introducción HTMLIntroducción HTML
Introducción HTML
 
Diseño de páginas Web con HTML
Diseño de páginas Web con HTMLDiseño de páginas Web con HTML
Diseño de páginas Web con HTML
 
Introducción a CSS Parte - 1
Introducción a CSS Parte - 1Introducción a CSS Parte - 1
Introducción a CSS Parte - 1
 
Documento numero 1
Documento numero 1Documento numero 1
Documento numero 1
 
Manual de introducción a CSS3
Manual de introducción a CSS3Manual de introducción a CSS3
Manual de introducción a CSS3
 
Las hojas de estilo (css)
Las hojas de estilo (css)Las hojas de estilo (css)
Las hojas de estilo (css)
 
Html Sharon 4101
Html Sharon 4101Html Sharon 4101
Html Sharon 4101
 
Hojas de estilo (css)
Hojas de estilo (css)Hojas de estilo (css)
Hojas de estilo (css)
 
Html Exposicion
Html ExposicionHtml Exposicion
Html Exposicion
 

Destacado

css posicionamiento y visualización
css posicionamiento y visualizacióncss posicionamiento y visualización
css posicionamiento y visualización
From Enyiris Design Thiking Lab for others
 
El posicionamiento explicado en 9 pasos
El posicionamiento explicado en 9 pasosEl posicionamiento explicado en 9 pasos
El posicionamiento explicado en 9 pasos
Yadith Gomez Nolasco
 
Buenas Prácticas de CSS
Buenas Prácticas de CSSBuenas Prácticas de CSS
Buenas Prácticas de CSS
Javier España
 
Buenas prácticas en XHTML, CSS y Accesibilidad
Buenas prácticas en XHTML, CSS y AccesibilidadBuenas prácticas en XHTML, CSS y Accesibilidad
Buenas prácticas en XHTML, CSS y Accesibilidad
FRONTDAYS
 
Maquetación Web
Maquetación WebMaquetación Web
Maquetación Web
Javier Navarro
 
El Gran Libro de Diseño Web
El Gran Libro de Diseño WebEl Gran Libro de Diseño Web
El Gran Libro de Diseño Web
RebelBangarang
 

Destacado (6)

css posicionamiento y visualización
css posicionamiento y visualizacióncss posicionamiento y visualización
css posicionamiento y visualización
 
El posicionamiento explicado en 9 pasos
El posicionamiento explicado en 9 pasosEl posicionamiento explicado en 9 pasos
El posicionamiento explicado en 9 pasos
 
Buenas Prácticas de CSS
Buenas Prácticas de CSSBuenas Prácticas de CSS
Buenas Prácticas de CSS
 
Buenas prácticas en XHTML, CSS y Accesibilidad
Buenas prácticas en XHTML, CSS y AccesibilidadBuenas prácticas en XHTML, CSS y Accesibilidad
Buenas prácticas en XHTML, CSS y Accesibilidad
 
Maquetación Web
Maquetación WebMaquetación Web
Maquetación Web
 
El Gran Libro de Diseño Web
El Gran Libro de Diseño WebEl Gran Libro de Diseño Web
El Gran Libro de Diseño Web
 

Similar a Qué Son Las Css

Html1
Html1Html1
Html1
wilneld
 
DISEÑO WEB 2020-2021 - 1ª PARTE
DISEÑO WEB 2020-2021 - 1ª PARTEDISEÑO WEB 2020-2021 - 1ª PARTE
DISEÑO WEB 2020-2021 - 1ª PARTE
Bartolomé Palazón Cascales
 
El lenguaje de programación en las páginas web
El lenguaje de programación en las páginas webEl lenguaje de programación en las páginas web
El lenguaje de programación en las páginas webAlvaroav
 
Html
HtmlHtml
Html
upt
 
Clase 04 Html
Clase 04   HtmlClase 04   Html
Clase 04 Html
Jaime Valenzuela
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
ssusera9852a
 
Presentación de html, css y javascript.
Presentación  de html, css y javascript.Presentación  de html, css y javascript.
Presentación de html, css y javascript.
CeteliInmaculada
 
Aplicaciones en la red
Aplicaciones en la redAplicaciones en la red
Aplicaciones en la red
Nivia Alberca
 
Introducción a xhtml
Introducción a xhtmlIntroducción a xhtml
Introducción a xhtml
Denisse C
 
Qué es el html
Qué es el htmlQué es el html
Qué es el html
josecabrera987
 
Html, Css y JavaScript
Html, Css y JavaScriptHtml, Css y JavaScript
Html, Css y JavaScript
Liz Nicol Cardenas Jauregui
 

Similar a Qué Son Las Css (20)

Html1
Html1Html1
Html1
 
Html
HtmlHtml
Html
 
CSS
CSSCSS
CSS
 
DISEÑO WEB 2020-2021 - 1ª PARTE
DISEÑO WEB 2020-2021 - 1ª PARTEDISEÑO WEB 2020-2021 - 1ª PARTE
DISEÑO WEB 2020-2021 - 1ª PARTE
 
Css
CssCss
Css
 
El lenguaje de programación en las páginas web
El lenguaje de programación en las páginas webEl lenguaje de programación en las páginas web
El lenguaje de programación en las páginas web
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Clase 04 Html
Clase 04   HtmlClase 04   Html
Clase 04 Html
 
Identificación del lenguaje ccs
Identificación del lenguaje ccsIdentificación del lenguaje ccs
Identificación del lenguaje ccs
 
css
csscss
css
 
Diseño web con css
Diseño web con cssDiseño web con css
Diseño web con css
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 
Presentación de html, css y javascript.
Presentación  de html, css y javascript.Presentación  de html, css y javascript.
Presentación de html, css y javascript.
 
HTML y CSS
HTML y CSSHTML y CSS
HTML y CSS
 
Aplicaciones en la red
Aplicaciones en la redAplicaciones en la red
Aplicaciones en la red
 
Introducción a xhtml
Introducción a xhtmlIntroducción a xhtml
Introducción a xhtml
 
Qué es el html
Qué es el htmlQué es el html
Qué es el html
 
Html
HtmlHtml
Html
 
Html, Css y JavaScript
Html, Css y JavaScriptHtml, Css y JavaScript
Html, Css y JavaScript
 

Más de Maximiliano Martin

MIOR Modelo de Interacción Orientada a Resultados
MIOR Modelo de Interacción Orientada a Resultados MIOR Modelo de Interacción Orientada a Resultados
MIOR Modelo de Interacción Orientada a Resultados
Maximiliano Martin
 
Metodología FOP
Metodología FOPMetodología FOP
Metodología FOP
Maximiliano Martin
 
Metodologia Diseño Centrado en el Usuario @IDAchile
Metodologia Diseño Centrado en el Usuario @IDAchileMetodologia Diseño Centrado en el Usuario @IDAchile
Metodologia Diseño Centrado en el Usuario @IDAchile
Maximiliano Martin
 
Accesibilidad adolescente Estado actual
Accesibilidad adolescente Estado actualAccesibilidad adolescente Estado actual
Accesibilidad adolescente Estado actual
Maximiliano Martin
 
IDA Responsive webprendedor 2012 - Capital.cl
IDA Responsive webprendedor 2012 - Capital.clIDA Responsive webprendedor 2012 - Capital.cl
IDA Responsive webprendedor 2012 - Capital.cl
Maximiliano Martin
 
Evaluación, Diseño Front CSS
Evaluación, Diseño Front CSSEvaluación, Diseño Front CSS
Evaluación, Diseño Front CSSMaximiliano Martin
 
Marcado HTML Resumen y Evaluación
Marcado HTML Resumen y EvaluaciónMarcado HTML Resumen y Evaluación
Marcado HTML Resumen y EvaluaciónMaximiliano Martin
 
Hornos Solares
Hornos SolaresHornos Solares
Hornos Solares
Maximiliano Martin
 
Energía Solar y Robótica
Energía Solar y  RobóticaEnergía Solar y  Robótica
Energía Solar y Robótica
Maximiliano Martin
 
Eficiencia energética: propuestas de sustentabilidad
Eficiencia energética: propuestas de sustentabilidadEficiencia energética: propuestas de sustentabilidad
Eficiencia energética: propuestas de sustentabilidad
Maximiliano Martin
 
Explorando el mundo de la Energía Sola
Explorando el mundo de la Energía SolaExplorando el mundo de la Energía Sola
Explorando el mundo de la Energía Sola
Maximiliano Martin
 
HTML Contenedores y tipos de elementos
HTML Contenedores y tipos de elementosHTML Contenedores y tipos de elementos
HTML Contenedores y tipos de elementos
Maximiliano Martin
 
Estructura principal de HTML
Estructura principal de HTMLEstructura principal de HTML
Estructura principal de HTML
Maximiliano Martin
 
Energías Alternativas
Energías AlternativasEnergías Alternativas
Energías Alternativas
Maximiliano Martin
 
WordPress en servidor local
WordPress en servidor localWordPress en servidor local
WordPress en servidor local
Maximiliano Martin
 
HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?
Maximiliano Martin
 
Qué es Sprites y por qué debería interesarme
Qué es Sprites y por qué debería interesarmeQué es Sprites y por qué debería interesarme
Qué es Sprites y por qué debería interesarme
Maximiliano Martin
 

Más de Maximiliano Martin (20)

MIOR Modelo de Interacción Orientada a Resultados
MIOR Modelo de Interacción Orientada a Resultados MIOR Modelo de Interacción Orientada a Resultados
MIOR Modelo de Interacción Orientada a Resultados
 
Metodología FOP
Metodología FOPMetodología FOP
Metodología FOP
 
Metodologia Diseño Centrado en el Usuario @IDAchile
Metodologia Diseño Centrado en el Usuario @IDAchileMetodologia Diseño Centrado en el Usuario @IDAchile
Metodologia Diseño Centrado en el Usuario @IDAchile
 
Accesibilidad adolescente Estado actual
Accesibilidad adolescente Estado actualAccesibilidad adolescente Estado actual
Accesibilidad adolescente Estado actual
 
IDA Responsive webprendedor 2012 - Capital.cl
IDA Responsive webprendedor 2012 - Capital.clIDA Responsive webprendedor 2012 - Capital.cl
IDA Responsive webprendedor 2012 - Capital.cl
 
Clase 09
Clase 09Clase 09
Clase 09
 
Evaluación, Diseño Front CSS
Evaluación, Diseño Front CSSEvaluación, Diseño Front CSS
Evaluación, Diseño Front CSS
 
Marcado HTML Resumen y Evaluación
Marcado HTML Resumen y EvaluaciónMarcado HTML Resumen y Evaluación
Marcado HTML Resumen y Evaluación
 
Div, Validadores,
Div, Validadores, Div, Validadores,
Div, Validadores,
 
Taller horno solar
Taller horno solarTaller horno solar
Taller horno solar
 
Hornos Solares
Hornos SolaresHornos Solares
Hornos Solares
 
Energía Solar y Robótica
Energía Solar y  RobóticaEnergía Solar y  Robótica
Energía Solar y Robótica
 
Eficiencia energética: propuestas de sustentabilidad
Eficiencia energética: propuestas de sustentabilidadEficiencia energética: propuestas de sustentabilidad
Eficiencia energética: propuestas de sustentabilidad
 
Explorando el mundo de la Energía Sola
Explorando el mundo de la Energía SolaExplorando el mundo de la Energía Sola
Explorando el mundo de la Energía Sola
 
HTML Contenedores y tipos de elementos
HTML Contenedores y tipos de elementosHTML Contenedores y tipos de elementos
HTML Contenedores y tipos de elementos
 
Estructura principal de HTML
Estructura principal de HTMLEstructura principal de HTML
Estructura principal de HTML
 
Energías Alternativas
Energías AlternativasEnergías Alternativas
Energías Alternativas
 
WordPress en servidor local
WordPress en servidor localWordPress en servidor local
WordPress en servidor local
 
HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?
 
Qué es Sprites y por qué debería interesarme
Qué es Sprites y por qué debería interesarmeQué es Sprites y por qué debería interesarme
Qué es Sprites y por qué debería interesarme
 

Último

Conceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. TecnologíaConceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. Tecnología
coloradxmaria
 
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdfTrabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
cj3806354
 
Estructuras básicas_ conceptos de programación (1).docx
Estructuras básicas_ conceptos de programación  (1).docxEstructuras básicas_ conceptos de programación  (1).docx
Estructuras básicas_ conceptos de programación (1).docx
SamuelRamirez83524
 
Alan Turing Vida o biografía resumida como presentación
Alan Turing Vida o biografía resumida como presentaciónAlan Turing Vida o biografía resumida como presentación
Alan Turing Vida o biografía resumida como presentación
JuanPrez962115
 
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdfTRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
thomasdcroz38
 
EduFlex, una educación accesible para quienes no entienden en clases
EduFlex, una educación accesible para quienes no entienden en clasesEduFlex, una educación accesible para quienes no entienden en clases
EduFlex, una educación accesible para quienes no entienden en clases
PABLOCESARGARZONBENI
 
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
vazquezgarciajesusma
 
Robótica educativa para la eduacion primaria .pptx
Robótica educativa para la eduacion primaria .pptxRobótica educativa para la eduacion primaria .pptx
Robótica educativa para la eduacion primaria .pptx
44652726
 
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdfTrabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
jjfch3110
 
Desarrollo de Habilidades de Pensamiento.docx (3).pdf
Desarrollo de Habilidades de Pensamiento.docx (3).pdfDesarrollo de Habilidades de Pensamiento.docx (3).pdf
Desarrollo de Habilidades de Pensamiento.docx (3).pdf
AlejandraCasallas7
 
biogas industrial para guiarse en proyectos
biogas industrial para guiarse en proyectosbiogas industrial para guiarse en proyectos
biogas industrial para guiarse en proyectos
Luis Enrique Zafra Haro
 
trabajo de tecnologia, segundo periodo 9-6f
trabajo de tecnologia, segundo periodo 9-6ftrabajo de tecnologia, segundo periodo 9-6f
trabajo de tecnologia, segundo periodo 9-6f
zoecaicedosalazar
 
Estructuras Básicas_ Conceptos Basicos De Programacion.pdf
Estructuras Básicas_ Conceptos Basicos De Programacion.pdfEstructuras Básicas_ Conceptos Basicos De Programacion.pdf
Estructuras Básicas_ Conceptos Basicos De Programacion.pdf
IsabellaRubio6
 
Estructuras Básicas_Tecnología_Grado10-7.pdf
Estructuras Básicas_Tecnología_Grado10-7.pdfEstructuras Básicas_Tecnología_Grado10-7.pdf
Estructuras Básicas_Tecnología_Grado10-7.pdf
cristianrb0324
 
proyecto invernadero desde el departamento de tecnología para Erasmus
proyecto invernadero desde el departamento de tecnología para Erasmusproyecto invernadero desde el departamento de tecnología para Erasmus
proyecto invernadero desde el departamento de tecnología para Erasmus
raquelariza02
 
leidy fuentes - power point -expocccion -unidad 4 (1).pptx
leidy fuentes - power point -expocccion -unidad 4 (1).pptxleidy fuentes - power point -expocccion -unidad 4 (1).pptx
leidy fuentes - power point -expocccion -unidad 4 (1).pptx
Leidyfuentes19
 
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
DanielErazoMedina
 
Conceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación ProyectoConceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación Proyecto
cofferub
 
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdfDESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
marianabz2403
 
Diagrama de flujo - ingenieria de sistemas 5to semestre
Diagrama de flujo - ingenieria de sistemas 5to semestreDiagrama de flujo - ingenieria de sistemas 5to semestre
Diagrama de flujo - ingenieria de sistemas 5to semestre
DiegoCampos433849
 

Último (20)

Conceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. TecnologíaConceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. Tecnología
 
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdfTrabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
 
Estructuras básicas_ conceptos de programación (1).docx
Estructuras básicas_ conceptos de programación  (1).docxEstructuras básicas_ conceptos de programación  (1).docx
Estructuras básicas_ conceptos de programación (1).docx
 
Alan Turing Vida o biografía resumida como presentación
Alan Turing Vida o biografía resumida como presentaciónAlan Turing Vida o biografía resumida como presentación
Alan Turing Vida o biografía resumida como presentación
 
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdfTRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
 
EduFlex, una educación accesible para quienes no entienden en clases
EduFlex, una educación accesible para quienes no entienden en clasesEduFlex, una educación accesible para quienes no entienden en clases
EduFlex, una educación accesible para quienes no entienden en clases
 
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
 
Robótica educativa para la eduacion primaria .pptx
Robótica educativa para la eduacion primaria .pptxRobótica educativa para la eduacion primaria .pptx
Robótica educativa para la eduacion primaria .pptx
 
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdfTrabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
 
Desarrollo de Habilidades de Pensamiento.docx (3).pdf
Desarrollo de Habilidades de Pensamiento.docx (3).pdfDesarrollo de Habilidades de Pensamiento.docx (3).pdf
Desarrollo de Habilidades de Pensamiento.docx (3).pdf
 
biogas industrial para guiarse en proyectos
biogas industrial para guiarse en proyectosbiogas industrial para guiarse en proyectos
biogas industrial para guiarse en proyectos
 
trabajo de tecnologia, segundo periodo 9-6f
trabajo de tecnologia, segundo periodo 9-6ftrabajo de tecnologia, segundo periodo 9-6f
trabajo de tecnologia, segundo periodo 9-6f
 
Estructuras Básicas_ Conceptos Basicos De Programacion.pdf
Estructuras Básicas_ Conceptos Basicos De Programacion.pdfEstructuras Básicas_ Conceptos Basicos De Programacion.pdf
Estructuras Básicas_ Conceptos Basicos De Programacion.pdf
 
Estructuras Básicas_Tecnología_Grado10-7.pdf
Estructuras Básicas_Tecnología_Grado10-7.pdfEstructuras Básicas_Tecnología_Grado10-7.pdf
Estructuras Básicas_Tecnología_Grado10-7.pdf
 
proyecto invernadero desde el departamento de tecnología para Erasmus
proyecto invernadero desde el departamento de tecnología para Erasmusproyecto invernadero desde el departamento de tecnología para Erasmus
proyecto invernadero desde el departamento de tecnología para Erasmus
 
leidy fuentes - power point -expocccion -unidad 4 (1).pptx
leidy fuentes - power point -expocccion -unidad 4 (1).pptxleidy fuentes - power point -expocccion -unidad 4 (1).pptx
leidy fuentes - power point -expocccion -unidad 4 (1).pptx
 
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
 
Conceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación ProyectoConceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación Proyecto
 
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdfDESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
 
Diagrama de flujo - ingenieria de sistemas 5to semestre
Diagrama de flujo - ingenieria de sistemas 5to semestreDiagrama de flujo - ingenieria de sistemas 5to semestre
Diagrama de flujo - ingenieria de sistemas 5to semestre
 

Qué Son Las Css

  • 1. CSS Diseñando desde el código Por: Maximiliano Martin
  • 2. CSS C ascading S tyle S heets Hojas de Estilo en Cascadas
  • 3. 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
  • 4. Prehistoria :) Mark-up o Marcación Término de imprenta “ conjunto de instrucciones estilísticas detalladas escritas en un manuscrito que debe ser tipografiado” {
  • 5. { 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
  • 6. SGML Lenguaje de Marcación Generalizado Standard ISO 88879 (1986) Dictado/estructurado/Tags/ independencia / complejo y caro/css/ { ‘ 70 ‘ 80 1986 IBM GML SGML
  • 7. 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
  • 8. 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
  • 9. ¿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
  • 10. ¿Y cómo es una CSS? Un “simple” documento de texto plano con extensión “.css”
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18. Diseño Front y CSS? Diseño XHTML CSS
  • 19. 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
  • 21.
  • 22.
  • 23. Gracias :) Por: Maximiliano Martin