SlideShare uma empresa Scribd logo
1 de 25
Apuntes sobre Hojas de Estilo en Cascada (CSS) Mg. Fernando Irigaray Seminario de Integración y Producción
conjunto de instrucciones que indican a un navegador como debe presentar un elemento concreto en una página html. CSS HTML CSS HTML HTML
Características de las CSS ,[object Object],[object Object],[object Object],HTML CSS HTML HTML
Reglas de estilo p {color: #ff0033;}
p {color: #ff0033;} ,[object Object],Reglas de estilo
[object Object],p {color: #ff0033;} Reglas de estilo
Declaración de estilo p {color: #ff0033;} Reglas de estilo
Propiedad p {color: #ff0033;} Reglas de estilo
Separador p {color: #ff0033;} Reglas de estilo
Valor p {color: #ff0033;} Reglas de estilo
h1 { color: #ff0033; font-family: Verdana; font-weight: bold; font-size: 16px; text-align: center; } CSS ,[object Object],Selectores
h1 { color: #ff0033; font-family: Verdana; font-weight: bold; font-size: 16px; text-align: center; } CSS <h1>Título del artículo</h1> HTML ,[object Object],Selectores
[object Object],h1 { color: #ff0033; font-family: Verdana; font-weight: bold; font-size: 16px; text-align: center; } CSS <h1>Título del artículo</h1> HTML Selectores
[object Object],.destacado { font-family: Tahoma; font-size: 11px; font-weight: normal; text-align: left; line-height: 13px; background-color: #EFEFD1; border-width: 1px; border-style: dashed; border-color: #a06000; padding: 10px 10px 10px 10px; } CSS Selectores
[object Object],.destacado { font-family: Tahoma; font-size: 11px; font-weight: normal; text-align: left; line-height: 13px; background-color: #EFEFD1; border-width: 1px; border-style: dashed; border-color: #a06000; padding: 10px 10px 10px 10px; } CSS <div class=&quot;destacado&quot;> <h3 class=&quot;entry-header&quot;> TP Presentación personal en HTML</h3> <br /> <strong>Consigna:</strong> Producir una  presentación personal desarrollada en Código HTML que incluirá:<br /><br /> <a href=&quot;http://www.dialogica.com.ar/digicom/ 2007/04/trabajo_practico_presentacion.php&quot;> Leer texto completo: Consigna del Trabajo Práctico</a> </div> HTML Selectores
#container { width: 714px; background-color: #f1f1f1; } CSS ,[object Object],Selectores
#container { width: 714px; background-color: #f1f1f1; } CSS <body> <div ID=“container”> <h1>Título del artículo</h1> <p>Texto</p> </div> </body> HTML ,[object Object],Selectores
[object Object],#container { width: 714px; background-color: #f1f1f1; } CSS <body> <div ID=“container”> <h1>Título del artículo</h1> <p>Texto</p> </div> </body> HTML Selectores
Estructura Container Nav Banner <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class=&quot;destacado&quot;> 1 </div> <div class=&quot;destacado&quot;> 2 </div> <div class=&quot;destacado&quot;> 3 </div> </div> <div id=“Nav”> Xxxxxxxx </div> </body> HTML 1 2 3
Estructura Banner <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class=&quot;destacado&quot;> 1 </div> <div class=&quot;destacado&quot;> 2 </div> <div class=&quot;destacado&quot;> 3 </div> </div> <div id=“Nav”> Xxxxxxxx </div> </body> HTML
Estructura Container <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class=&quot;destacado&quot;> 1 </div> <div class=&quot;destacado&quot;> 2 </div> <div class=&quot;destacado&quot;> 3 </div> </div> <div id=“Nav”> Xxxxxxxx </div> </body> HTML 1 2 3
Estructura Container <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class=&quot;destacado&quot;> 1 </div> <div class=&quot;destacado&quot;> 2 </div> <div class=&quot;destacado&quot;> 3 </div> </div> <div id=“Nav”> Xxxxxxxx </div> </body> HTML 1 2 3 destacado
Estructura Nav <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class=&quot;destacado&quot;> 1 </div> <div class=&quot;destacado&quot;> 2 </div> <div class=&quot;destacado&quot;> 3 </div> </div> <div id=“Nav”> Xxxxxxxx </div> </body> HTML
Enlazar archivo CSS <head > <title>Mi página HTML</title> <link rel=“stylesheet” href=“estilos.css” type=&quot;text/css“> </head> HTML HTML CSS HTML HTML
Bibliografía de Consulta ,[object Object],[object Object],[object Object],HTML CSS HTML HTML

Mais conteúdo relacionado

Mais procurados

Técnicas e instrumentos para la recopilación de información
Técnicas e instrumentos para la recopilación de informaciónTécnicas e instrumentos para la recopilación de información
Técnicas e instrumentos para la recopilación de informaciónWilfredo Mogollón
 
Normalizacion de bases de datos
Normalizacion de bases de datosNormalizacion de bases de datos
Normalizacion de bases de datosCaro_Noirgean
 
Clase 1: Diseño de Bases de Datos Relacionales
Clase 1: Diseño de Bases de Datos RelacionalesClase 1: Diseño de Bases de Datos Relacionales
Clase 1: Diseño de Bases de Datos RelacionalesLester López Carrió
 
Fase 2 modelado del análisis de i web
Fase 2 modelado del análisis de i webFase 2 modelado del análisis de i web
Fase 2 modelado del análisis de i webROSA IMELDA GARCIA CHI
 
Unidad 1. Fundamentos de Base de Datos
Unidad 1. Fundamentos de Base de DatosUnidad 1. Fundamentos de Base de Datos
Unidad 1. Fundamentos de Base de Datoshugodanielgd
 
diagrama de casos de uso del negocio y del sistema
diagrama de casos de uso del negocio y del sistemadiagrama de casos de uso del negocio y del sistema
diagrama de casos de uso del negocio y del sistemaUniversidad Tecnológica
 
Diseño de Archivos y Base de Datos
Diseño de Archivos y Base de DatosDiseño de Archivos y Base de Datos
Diseño de Archivos y Base de DatosGuadalupeOsorio9
 
Modelo del dominio
Modelo del dominioModelo del dominio
Modelo del dominioSCMU AQP
 
Tipos de Modelos de Datos : Ventajas y Desventajas
Tipos de Modelos de Datos : Ventajas y DesventajasTipos de Modelos de Datos : Ventajas y Desventajas
Tipos de Modelos de Datos : Ventajas y DesventajasJuanMiguelCustodioMo
 
Organizacion y administracion del soporte tecnico
Organizacion y administracion del soporte tecnicoOrganizacion y administracion del soporte tecnico
Organizacion y administracion del soporte tecnicogalactico_87
 
Convertir Diagrama Entidad-Relacion a Modelo Relacional.
Convertir Diagrama Entidad-Relacion a Modelo Relacional.Convertir Diagrama Entidad-Relacion a Modelo Relacional.
Convertir Diagrama Entidad-Relacion a Modelo Relacional.Erivan Martinez Ovando
 
casos de uso
casos de usocasos de uso
casos de usostill01
 
2 2 estilos arquitectonicos
2 2 estilos arquitectonicos2 2 estilos arquitectonicos
2 2 estilos arquitectonicoslandeta_p
 
Automatas y compiladores clase1
Automatas y compiladores clase1Automatas y compiladores clase1
Automatas y compiladores clase1Germania Rodriguez
 
Diagramas Analisis
Diagramas AnalisisDiagramas Analisis
Diagramas Analisisinnovalabcun
 
2. Casos de uso y diagramas de casos de uso
2. Casos de uso y diagramas de casos de uso2. Casos de uso y diagramas de casos de uso
2. Casos de uso y diagramas de casos de usoSaul Mamani
 

Mais procurados (20)

Modelo Entidad Relacion
Modelo Entidad RelacionModelo Entidad Relacion
Modelo Entidad Relacion
 
diagrama de despliegue
diagrama de desplieguediagrama de despliegue
diagrama de despliegue
 
Técnicas e instrumentos para la recopilación de información
Técnicas e instrumentos para la recopilación de informaciónTécnicas e instrumentos para la recopilación de información
Técnicas e instrumentos para la recopilación de información
 
Normalizacion de bases de datos
Normalizacion de bases de datosNormalizacion de bases de datos
Normalizacion de bases de datos
 
Clase 1: Diseño de Bases de Datos Relacionales
Clase 1: Diseño de Bases de Datos RelacionalesClase 1: Diseño de Bases de Datos Relacionales
Clase 1: Diseño de Bases de Datos Relacionales
 
Fase 2 modelado del análisis de i web
Fase 2 modelado del análisis de i webFase 2 modelado del análisis de i web
Fase 2 modelado del análisis de i web
 
Unidad 1. Fundamentos de Base de Datos
Unidad 1. Fundamentos de Base de DatosUnidad 1. Fundamentos de Base de Datos
Unidad 1. Fundamentos de Base de Datos
 
diagrama de casos de uso del negocio y del sistema
diagrama de casos de uso del negocio y del sistemadiagrama de casos de uso del negocio y del sistema
diagrama de casos de uso del negocio y del sistema
 
Diseño de Archivos y Base de Datos
Diseño de Archivos y Base de DatosDiseño de Archivos y Base de Datos
Diseño de Archivos y Base de Datos
 
Bases de datos jerarquicas
Bases de datos jerarquicasBases de datos jerarquicas
Bases de datos jerarquicas
 
Modelo del dominio
Modelo del dominioModelo del dominio
Modelo del dominio
 
Java Threads (Hilos en Java)
Java Threads (Hilos en Java)Java Threads (Hilos en Java)
Java Threads (Hilos en Java)
 
Tipos de Modelos de Datos : Ventajas y Desventajas
Tipos de Modelos de Datos : Ventajas y DesventajasTipos de Modelos de Datos : Ventajas y Desventajas
Tipos de Modelos de Datos : Ventajas y Desventajas
 
Organizacion y administracion del soporte tecnico
Organizacion y administracion del soporte tecnicoOrganizacion y administracion del soporte tecnico
Organizacion y administracion del soporte tecnico
 
Convertir Diagrama Entidad-Relacion a Modelo Relacional.
Convertir Diagrama Entidad-Relacion a Modelo Relacional.Convertir Diagrama Entidad-Relacion a Modelo Relacional.
Convertir Diagrama Entidad-Relacion a Modelo Relacional.
 
casos de uso
casos de usocasos de uso
casos de uso
 
2 2 estilos arquitectonicos
2 2 estilos arquitectonicos2 2 estilos arquitectonicos
2 2 estilos arquitectonicos
 
Automatas y compiladores clase1
Automatas y compiladores clase1Automatas y compiladores clase1
Automatas y compiladores clase1
 
Diagramas Analisis
Diagramas AnalisisDiagramas Analisis
Diagramas Analisis
 
2. Casos de uso y diagramas de casos de uso
2. Casos de uso y diagramas de casos de uso2. Casos de uso y diagramas de casos de uso
2. Casos de uso y diagramas de casos de uso
 

Semelhante a Hojas de Estilos en Cascada (CSS) - Apuntes

Semelhante a Hojas de Estilos en Cascada (CSS) - Apuntes (20)

rosario
rosariorosario
rosario
 
Taller multimedia
Taller multimediaTaller multimedia
Taller multimedia
 
ccs
ccsccs
ccs
 
CSS
CSSCSS
CSS
 
Diseño web con css
Diseño web con cssDiseño web con css
Diseño web con css
 
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
 
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
 
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
 
CSS
CSSCSS
CSS
 
Hojas de estilo css
Hojas de estilo cssHojas de estilo css
Hojas de estilo css
 
Dhtml
DhtmlDhtml
Dhtml
 
XHTML+Inicio en CSS
XHTML+Inicio en CSSXHTML+Inicio en CSS
XHTML+Inicio en CSS
 
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
 
CSS
CSSCSS
CSS
 
Html y css
Html y cssHtml y css
Html y css
 
Curso FPE Diseño Web. Módulo 2. El HTML
Curso FPE Diseño Web. Módulo 2. El HTMLCurso FPE Diseño Web. Módulo 2. El HTML
Curso FPE Diseño Web. Módulo 2. El HTML
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 

Mais de Fernando Irigaray

3. Aplicaciones: webdocs y videos interactivos
3. Aplicaciones: webdocs y videos interactivos3. Aplicaciones: webdocs y videos interactivos
3. Aplicaciones: webdocs y videos interactivosFernando Irigaray
 
1. Principios y dimensiones de una producción digital interactiva
1. Principios y dimensiones de una producción digital interactiva1. Principios y dimensiones de una producción digital interactiva
1. Principios y dimensiones de una producción digital interactivaFernando Irigaray
 
Jornalismo Transmídia desde a periferia
Jornalismo Transmídia desde a periferiaJornalismo Transmídia desde a periferia
Jornalismo Transmídia desde a periferiaFernando Irigaray
 
Del documental multimedia al documental Transmedia: Mujeres en venta
Del documental multimedia al documental Transmedia: Mujeres en venta Del documental multimedia al documental Transmedia: Mujeres en venta
Del documental multimedia al documental Transmedia: Mujeres en venta Fernando Irigaray
 
Navegación Territorial: Entramado Narrativo Urbana. Tras los pasos de El Homb...
Navegación Territorial: Entramado Narrativo Urbana. Tras los pasos de El Homb...Navegación Territorial: Entramado Narrativo Urbana. Tras los pasos de El Homb...
Navegación Territorial: Entramado Narrativo Urbana. Tras los pasos de El Homb...Fernando Irigaray
 
Twitter: aplicaciones y usos III
Twitter: aplicaciones y usos IIITwitter: aplicaciones y usos III
Twitter: aplicaciones y usos IIIFernando Irigaray
 
Twitter: aplicaciones y usos II
Twitter: aplicaciones y usos IITwitter: aplicaciones y usos II
Twitter: aplicaciones y usos IIFernando Irigaray
 
Twitter: aplicaciones y usos I
Twitter: aplicaciones y usos ITwitter: aplicaciones y usos I
Twitter: aplicaciones y usos IFernando Irigaray
 
1. De la web 2.0 a la web 2.1
1. De la web 2.0 a la web 2.11. De la web 2.0 a la web 2.1
1. De la web 2.0 a la web 2.1Fernando Irigaray
 
1. De la web 2.0 a la web 2.1
1. De la web 2.0 a la web 2.11. De la web 2.0 a la web 2.1
1. De la web 2.0 a la web 2.1Fernando Irigaray
 
2 . Web 2.0: Del usuario consumidor al usuario productor
2 . Web 2.0:Del usuario consumidor al usuario productor2 . Web 2.0:Del usuario consumidor al usuario productor
2 . Web 2.0: Del usuario consumidor al usuario productorFernando Irigaray
 
2 . Web 2.0: Del usuario consumidor al usuario productor
2 . Web 2.0:Del usuario consumidor al usuario productor2 . Web 2.0:Del usuario consumidor al usuario productor
2 . Web 2.0: Del usuario consumidor al usuario productorFernando Irigaray
 
1. Cambios en la formación del ciberperiodismo
1. Cambios en la formación del ciberperiodismo1. Cambios en la formación del ciberperiodismo
1. Cambios en la formación del ciberperiodismoFernando Irigaray
 
1 - Modelos de Comunicación y Modelos de Educación
1 - Modelos de Comunicación y Modelos de Educación1 - Modelos de Comunicación y Modelos de Educación
1 - Modelos de Comunicación y Modelos de EducaciónFernando Irigaray
 

Mais de Fernando Irigaray (20)

3. Aplicaciones: webdocs y videos interactivos
3. Aplicaciones: webdocs y videos interactivos3. Aplicaciones: webdocs y videos interactivos
3. Aplicaciones: webdocs y videos interactivos
 
2. Periodismo Transmedia
2. Periodismo Transmedia2. Periodismo Transmedia
2. Periodismo Transmedia
 
1. Principios y dimensiones de una producción digital interactiva
1. Principios y dimensiones de una producción digital interactiva1. Principios y dimensiones de una producción digital interactiva
1. Principios y dimensiones de una producción digital interactiva
 
Jornalismo Transmídia desde a periferia
Jornalismo Transmídia desde a periferiaJornalismo Transmídia desde a periferia
Jornalismo Transmídia desde a periferia
 
Del documental multimedia al documental Transmedia: Mujeres en venta
Del documental multimedia al documental Transmedia: Mujeres en venta Del documental multimedia al documental Transmedia: Mujeres en venta
Del documental multimedia al documental Transmedia: Mujeres en venta
 
Navegación Territorial: Entramado Narrativo Urbana. Tras los pasos de El Homb...
Navegación Territorial: Entramado Narrativo Urbana. Tras los pasos de El Homb...Navegación Territorial: Entramado Narrativo Urbana. Tras los pasos de El Homb...
Navegación Territorial: Entramado Narrativo Urbana. Tras los pasos de El Homb...
 
Imagen Digital
Imagen DigitalImagen Digital
Imagen Digital
 
Community manager
Community managerCommunity manager
Community manager
 
Twitter: aplicaciones y usos III
Twitter: aplicaciones y usos IIITwitter: aplicaciones y usos III
Twitter: aplicaciones y usos III
 
Twitter: aplicaciones y usos II
Twitter: aplicaciones y usos IITwitter: aplicaciones y usos II
Twitter: aplicaciones y usos II
 
Twitter: aplicaciones y usos I
Twitter: aplicaciones y usos ITwitter: aplicaciones y usos I
Twitter: aplicaciones y usos I
 
1. De la web 2.0 a la web 2.1
1. De la web 2.0 a la web 2.11. De la web 2.0 a la web 2.1
1. De la web 2.0 a la web 2.1
 
Diseño Multimedial
Diseño MultimedialDiseño Multimedial
Diseño Multimedial
 
2. Imagen Digital
2. Imagen Digital2. Imagen Digital
2. Imagen Digital
 
1. De la web 2.0 a la web 2.1
1. De la web 2.0 a la web 2.11. De la web 2.0 a la web 2.1
1. De la web 2.0 a la web 2.1
 
2 . Web 2.0: Del usuario consumidor al usuario productor
2 . Web 2.0:Del usuario consumidor al usuario productor2 . Web 2.0:Del usuario consumidor al usuario productor
2 . Web 2.0: Del usuario consumidor al usuario productor
 
2 . Web 2.0: Del usuario consumidor al usuario productor
2 . Web 2.0:Del usuario consumidor al usuario productor2 . Web 2.0:Del usuario consumidor al usuario productor
2 . Web 2.0: Del usuario consumidor al usuario productor
 
Convergencia de medios
Convergencia de mediosConvergencia de medios
Convergencia de medios
 
1. Cambios en la formación del ciberperiodismo
1. Cambios en la formación del ciberperiodismo1. Cambios en la formación del ciberperiodismo
1. Cambios en la formación del ciberperiodismo
 
1 - Modelos de Comunicación y Modelos de Educación
1 - Modelos de Comunicación y Modelos de Educación1 - Modelos de Comunicación y Modelos de Educación
1 - Modelos de Comunicación y Modelos de Educación
 

Último

Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricKeyla Dolores Méndez
 
9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudianteAndreaHuertas24
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafiosFundación YOD YOD
 
Hernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxHernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxJOSEMANUELHERNANDEZH11
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveFagnerLisboa3
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)GDGSucre
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx241521559
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíassuserf18419
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan JosephBRAYANJOSEPHPEREZGOM
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...silviayucra2
 
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024GiovanniJavierHidalg
 
Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxPlan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxpabonheidy28
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfsoporteupcology
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdfIsabellaMontaomurill
 
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE  DE TECNOLOGIA E INFORMATICA PRIMARIACLASE  DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIAWilbisVega
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesFundación YOD YOD
 

Último (16)

Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
 
9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafios
 
Hernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxHernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptx
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
 
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024
 
Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxPlan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docx
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdf
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdf
 
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE  DE TECNOLOGIA E INFORMATICA PRIMARIACLASE  DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento Protégeles
 

Hojas de Estilos en Cascada (CSS) - Apuntes

  • 1. Apuntes sobre Hojas de Estilo en Cascada (CSS) Mg. Fernando Irigaray Seminario de Integración y Producción
  • 2. conjunto de instrucciones que indican a un navegador como debe presentar un elemento concreto en una página html. CSS HTML CSS HTML HTML
  • 3.
  • 4. Reglas de estilo p {color: #ff0033;}
  • 5.
  • 6.
  • 7. Declaración de estilo p {color: #ff0033;} Reglas de estilo
  • 8. Propiedad p {color: #ff0033;} Reglas de estilo
  • 9. Separador p {color: #ff0033;} Reglas de estilo
  • 10. Valor p {color: #ff0033;} Reglas de estilo
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19. Estructura Container Nav Banner <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class=&quot;destacado&quot;> 1 </div> <div class=&quot;destacado&quot;> 2 </div> <div class=&quot;destacado&quot;> 3 </div> </div> <div id=“Nav”> Xxxxxxxx </div> </body> HTML 1 2 3
  • 20. Estructura Banner <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class=&quot;destacado&quot;> 1 </div> <div class=&quot;destacado&quot;> 2 </div> <div class=&quot;destacado&quot;> 3 </div> </div> <div id=“Nav”> Xxxxxxxx </div> </body> HTML
  • 21. Estructura Container <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class=&quot;destacado&quot;> 1 </div> <div class=&quot;destacado&quot;> 2 </div> <div class=&quot;destacado&quot;> 3 </div> </div> <div id=“Nav”> Xxxxxxxx </div> </body> HTML 1 2 3
  • 22. Estructura Container <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class=&quot;destacado&quot;> 1 </div> <div class=&quot;destacado&quot;> 2 </div> <div class=&quot;destacado&quot;> 3 </div> </div> <div id=“Nav”> Xxxxxxxx </div> </body> HTML 1 2 3 destacado
  • 23. Estructura Nav <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class=&quot;destacado&quot;> 1 </div> <div class=&quot;destacado&quot;> 2 </div> <div class=&quot;destacado&quot;> 3 </div> </div> <div id=“Nav”> Xxxxxxxx </div> </body> HTML
  • 24. Enlazar archivo CSS <head > <title>Mi página HTML</title> <link rel=“stylesheet” href=“estilos.css” type=&quot;text/css“> </head> HTML HTML CSS HTML HTML
  • 25.