SlideShare una empresa de Scribd logo
CSS y Josue Mancilla @jujomago jujomago@augbolivia.org
Agenda Introducción a CSS Como funciona Como se aplica (4x3) Tipos de Selectores, Propiedades Modelo de Cajas Herencia, Cascada y Especificidad Media Types (Media Queries)
Intro a CSS
Como funciona El ingrediente más importante de cualquier Sitio Web Contenido Estructura Sin estructura simplemente no entenderíamos la web Diseño El diseño vende, lo dicen en todos lados por que es cierto.
Como se aplica  4  x  3 Tipos de Selectores Formas de aplicarlo
Sintaxis de selectores 4 tipos, están las Etiquetas, Clases, IDs, y compuestos.
Propiedades Con las propiedades modificamos el aspecto y forma de los elementos HTML
Modelo de Cajas A partir de una caja podemos entender como armar el layout en CSS.
Sitio web Modelo de Cajas HTML
Herencia, Cascada y Especificidad Suena complicado, pero en realidad no lo es, y es lo mejor de css.
Media Types Diferentes tipos de medios, diferente visualización.
Existen 10 media type definidos en CSS2.1
Media typehandheld PDAs Palms Pocket PC Mobiles de Gama Media y Baja
Media Queries Son extensiones de CSS3 para los “media types” que nos brindan mas control para mostrar en diferentes dispositivos. Mobiles de Gama Alta
Un “media query” consiste en una expresión lógica que puede ser Verdadera o Falsa. Las reglas CSS asociadas con el “media query” solo se aplican si la expresión es Verdadera
CSS y ¿Preguntas? @jujomago

Más contenido relacionado

Destacado

Maquetado con HTML y CSS
Maquetado con HTML y CSSMaquetado con HTML y CSS
Maquetado con HTML y CSS
Manuel Razzari
 
Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3
Paradigma Digital
 
Introducción HTML5 y CSS3
Introducción HTML5 y CSS3Introducción HTML5 y CSS3
Introducción HTML5 y CSS3
Néstor Ramírez Salas
 
Manual user diseño web con html y css
Manual user   diseño web con html y cssManual user   diseño web con html y css
Manual user diseño web con html y css
Jose Luis Fernandez
 

Destacado (6)

Maquetado con HTML y CSS
Maquetado con HTML y CSSMaquetado con HTML y CSS
Maquetado con HTML y CSS
 
Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3
 
CSS ppt
CSS pptCSS ppt
CSS ppt
 
Introducción HTML5 y CSS3
Introducción HTML5 y CSS3Introducción HTML5 y CSS3
Introducción HTML5 y CSS3
 
Manual user diseño web con html y css
Manual user   diseño web con html y cssManual user   diseño web con html y css
Manual user diseño web con html y css
 
html5.ppt
html5.ppthtml5.ppt
html5.ppt
 

Similar a CSS (Hojas de estilo en Cascada) y Dreamweaver CS5.5

Diseño de Paginas Web modelo de caja y contenedores caja
Diseño de Paginas Web modelo de caja y contenedores cajaDiseño de Paginas Web modelo de caja y contenedores caja
Diseño de Paginas Web modelo de caja y contenedores caja
WilherQuintero
 
S2-DAW-2022S1.pptx
S2-DAW-2022S1.pptxS2-DAW-2022S1.pptx
S2-DAW-2022S1.pptx
Luis Fernando Aguas Bucheli
 
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
 
CSS
CSSCSS
Que es CSS? Presentacion Basica para CSS
Que es CSS? Presentacion Basica para CSSQue es CSS? Presentacion Basica para CSS
Que es CSS? Presentacion Basica para CSS
josuew2013
 
Css posicionamiento de pag web presentacion de la semana
Css posicionamiento de pag web      presentacion de la semanaCss posicionamiento de pag web      presentacion de la semana
Css posicionamiento de pag web presentacion de la semana
Anel García Pumarino
 
Curso FPE Diseño Web. Módulo 4. CSS
Curso FPE Diseño Web. Módulo 4. CSSCurso FPE Diseño Web. Módulo 4. CSS
Curso FPE Diseño Web. Módulo 4. CSS
Diseñática disenatica.com
 
Html, Css y JavaScript
Html, Css y JavaScriptHtml, Css y JavaScript
Html, Css y JavaScript
Liz Nicol Cardenas Jauregui
 
Manual css3 nov2014
Manual css3 nov2014Manual css3 nov2014
Manual css3 nov2014
Yadith Gomez Nolasco
 
Microformatos
MicroformatosMicroformatos
Qué es CSS y con qué se come?
Qué es CSS y con qué se come?Qué es CSS y con qué se come?
Qué es CSS y con qué se come?
Juan Pernia (juanrules)
 
Manual css-hojas-estilo
Manual css-hojas-estiloManual css-hojas-estilo
Manual css-hojas-estilo
Gabriel Mondragón
 
Tipo
TipoTipo
CSS - Drupal Camp Costa Rica 2016
CSS - Drupal Camp Costa Rica 2016CSS - Drupal Camp Costa Rica 2016
CSS - Drupal Camp Costa Rica 2016
Jose Leiva
 
Editor profesional web
Editor profesional webEditor profesional web
Editor profesional web
Fernando Mongelo
 
Diseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptx
Diseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptxDiseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptx
Diseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptx
MarceloBedn1
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Paula Serman R.
 

Similar a CSS (Hojas de estilo en Cascada) y Dreamweaver CS5.5 (20)

Diseño de Paginas Web modelo de caja y contenedores caja
Diseño de Paginas Web modelo de caja y contenedores cajaDiseño de Paginas Web modelo de caja y contenedores caja
Diseño de Paginas Web modelo de caja y contenedores caja
 
S2-DAW-2022S1.pptx
S2-DAW-2022S1.pptxS2-DAW-2022S1.pptx
S2-DAW-2022S1.pptx
 
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.
 
CSS
CSSCSS
CSS
 
Html5+css3 02
Html5+css3 02Html5+css3 02
Html5+css3 02
 
Que es CSS? Presentacion Basica para CSS
Que es CSS? Presentacion Basica para CSSQue es CSS? Presentacion Basica para CSS
Que es CSS? Presentacion Basica para CSS
 
Css posicionamiento de pag web presentacion de la semana
Css posicionamiento de pag web      presentacion de la semanaCss posicionamiento de pag web      presentacion de la semana
Css posicionamiento de pag web presentacion de la semana
 
Curso FPE Diseño Web. Módulo 4. CSS
Curso FPE Diseño Web. Módulo 4. CSSCurso FPE Diseño Web. Módulo 4. CSS
Curso FPE Diseño Web. Módulo 4. CSS
 
Html, Css y JavaScript
Html, Css y JavaScriptHtml, Css y JavaScript
Html, Css y JavaScript
 
Manual css3 nov2014
Manual css3 nov2014Manual css3 nov2014
Manual css3 nov2014
 
Microformatos
MicroformatosMicroformatos
Microformatos
 
Microformatos
MicroformatosMicroformatos
Microformatos
 
Qué es CSS y con qué se come?
Qué es CSS y con qué se come?Qué es CSS y con qué se come?
Qué es CSS y con qué se come?
 
Manual css-hojas-estilo
Manual css-hojas-estiloManual css-hojas-estilo
Manual css-hojas-estilo
 
Tipo
TipoTipo
Tipo
 
CSS - Drupal Camp Costa Rica 2016
CSS - Drupal Camp Costa Rica 2016CSS - Drupal Camp Costa Rica 2016
CSS - Drupal Camp Costa Rica 2016
 
Editor profesional web
Editor profesional webEditor profesional web
Editor profesional web
 
Diseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptx
Diseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptxDiseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptx
Diseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptx
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 

Último

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
 
Desarrollo de habilidades de pensamiento (2).pdf
Desarrollo de habilidades de pensamiento (2).pdfDesarrollo de habilidades de pensamiento (2).pdf
Desarrollo de habilidades de pensamiento (2).pdf
samuelvideos
 
Inteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdfInteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdf
Emilio Casbas
 
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
 
MANUAL DEL DECODIFICADOR DVB S2. PARA VSAT
MANUAL DEL DECODIFICADOR DVB  S2. PARA VSATMANUAL DEL DECODIFICADOR DVB  S2. PARA VSAT
MANUAL DEL DECODIFICADOR DVB S2. PARA VSAT
Ing. Julio Iván Mera Casas
 
Conceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdfConceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdf
ValeriaAyala48
 
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
CesarPazosQuispe
 
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdfDESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
sarasofiamontezuma
 
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
 
maestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdfmaestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdf
JimmyTejadaSalizar
 
3Redu: Responsabilidad, Resiliencia y Respeto
3Redu: Responsabilidad, Resiliencia y Respeto3Redu: Responsabilidad, Resiliencia y Respeto
3Redu: Responsabilidad, Resiliencia y Respeto
cdraco
 
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
Telefónica
 
Posnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativaPosnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativa
Fernando Villares
 
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
 
(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
 
Las lámparas de alta intensidad de descarga o lámparas de descarga de alta in...
Las lámparas de alta intensidad de descarga o lámparas de descarga de alta in...Las lámparas de alta intensidad de descarga o lámparas de descarga de alta in...
Las lámparas de alta intensidad de descarga o lámparas de descarga de alta in...
espinozaernesto427
 
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
 
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
 
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
 
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
 

Último (20)

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
 
Desarrollo de habilidades de pensamiento (2).pdf
Desarrollo de habilidades de pensamiento (2).pdfDesarrollo de habilidades de pensamiento (2).pdf
Desarrollo de habilidades de pensamiento (2).pdf
 
Inteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdfInteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdf
 
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
 
MANUAL DEL DECODIFICADOR DVB S2. PARA VSAT
MANUAL DEL DECODIFICADOR DVB  S2. PARA VSATMANUAL DEL DECODIFICADOR DVB  S2. PARA VSAT
MANUAL DEL DECODIFICADOR DVB S2. PARA VSAT
 
Conceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdfConceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdf
 
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
 
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdfDESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
 
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
 
maestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdfmaestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdf
 
3Redu: Responsabilidad, Resiliencia y Respeto
3Redu: Responsabilidad, Resiliencia y Respeto3Redu: Responsabilidad, Resiliencia y Respeto
3Redu: Responsabilidad, Resiliencia y Respeto
 
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
 
Posnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativaPosnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativa
 
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
 
(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
 
Las lámparas de alta intensidad de descarga o lámparas de descarga de alta in...
Las lámparas de alta intensidad de descarga o lámparas de descarga de alta in...Las lámparas de alta intensidad de descarga o lámparas de descarga de alta in...
Las lámparas de alta intensidad de descarga o lámparas de descarga de alta in...
 
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
 
biogas industrial para guiarse en proyectos
biogas industrial para guiarse en proyectosbiogas industrial para guiarse en proyectos
biogas industrial para guiarse en proyectos
 
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
 
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
 

CSS (Hojas de estilo en Cascada) y Dreamweaver CS5.5

  • 1. CSS y Josue Mancilla @jujomago jujomago@augbolivia.org
  • 2. Agenda Introducción a CSS Como funciona Como se aplica (4x3) Tipos de Selectores, Propiedades Modelo de Cajas Herencia, Cascada y Especificidad Media Types (Media Queries)
  • 4. Como funciona El ingrediente más importante de cualquier Sitio Web Contenido Estructura Sin estructura simplemente no entenderíamos la web Diseño El diseño vende, lo dicen en todos lados por que es cierto.
  • 5. Como se aplica 4 x 3 Tipos de Selectores Formas de aplicarlo
  • 6. Sintaxis de selectores 4 tipos, están las Etiquetas, Clases, IDs, y compuestos.
  • 7. Propiedades Con las propiedades modificamos el aspecto y forma de los elementos HTML
  • 8. Modelo de Cajas A partir de una caja podemos entender como armar el layout en CSS.
  • 9. Sitio web Modelo de Cajas HTML
  • 10. Herencia, Cascada y Especificidad Suena complicado, pero en realidad no lo es, y es lo mejor de css.
  • 11. Media Types Diferentes tipos de medios, diferente visualización.
  • 12. Existen 10 media type definidos en CSS2.1
  • 13. Media typehandheld PDAs Palms Pocket PC Mobiles de Gama Media y Baja
  • 14. Media Queries Son extensiones de CSS3 para los “media types” que nos brindan mas control para mostrar en diferentes dispositivos. Mobiles de Gama Alta
  • 15. Un “media query” consiste en una expresión lógica que puede ser Verdadera o Falsa. Las reglas CSS asociadas con el “media query” solo se aplican si la expresión es Verdadera
  • 16. CSS y ¿Preguntas? @jujomago