SlideShare una empresa de Scribd logo
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

Más contenido relacionado

La actualidad más candente

PROYECTO final de curso - Listas dobles
PROYECTO final de curso - Listas doblesPROYECTO final de curso - Listas dobles
PROYECTO final de curso - Listas dobles
Maiky Kobatakane
 
Origen del Modelo OSI y su impacto en als estructuras de redes
Origen del Modelo OSI y su impacto en als estructuras de redesOrigen del Modelo OSI y su impacto en als estructuras de redes
Origen del Modelo OSI y su impacto en als estructuras de redes
Kim Sorel Rush
 
Fundamentos de BD - Unidad 1 Sistemas Gestores de BD
Fundamentos de BD - Unidad 1 Sistemas Gestores de BDFundamentos de BD - Unidad 1 Sistemas Gestores de BD
Fundamentos de BD - Unidad 1 Sistemas Gestores de BD
José Antonio Sandoval Acosta
 
Arreglos - Assembler
Arreglos - AssemblerArreglos - Assembler
Arreglos - Assembler
Jorge Paredes Toledo
 
Mapa conceptual sobre
Mapa conceptual sobre Mapa conceptual sobre
Mapa conceptual sobre Juan Anaya
 
Búsqueda no informada - Búsqueda bidireccional
Búsqueda no informada - Búsqueda  bidireccionalBúsqueda no informada - Búsqueda  bidireccional
Búsqueda no informada - Búsqueda bidireccional
Laura Del Pino Díaz
 
Informe técnico Unidad 4 Estructuras no lineales (Rubí Verónica)
Informe técnico Unidad 4 Estructuras no lineales (Rubí Verónica)Informe técnico Unidad 4 Estructuras no lineales (Rubí Verónica)
Informe técnico Unidad 4 Estructuras no lineales (Rubí Verónica)
Rubi Veronica Chimal Cuxin
 
13 Curso de POO en java - métodos propios de clase
13 Curso de POO en java - métodos propios de clase13 Curso de POO en java - métodos propios de clase
13 Curso de POO en java - métodos propios de clase
Clara Patricia Avella Ibañez
 
Estructura de Datos - Unidad 5 metodos de ordenamiento
Estructura de Datos - Unidad 5 metodos de ordenamientoEstructura de Datos - Unidad 5 metodos de ordenamiento
Estructura de Datos - Unidad 5 metodos de ordenamiento
José Antonio Sandoval Acosta
 
PROCESAMIENTO EN PANTALLA Y TECLADO BASICO
PROCESAMIENTO EN PANTALLA Y TECLADO BASICOPROCESAMIENTO EN PANTALLA Y TECLADO BASICO
PROCESAMIENTO EN PANTALLA Y TECLADO BASICO
Yurley Xiomara Rojas Sanchez
 
Métodos de ordenación externa
Métodos de ordenación externaMétodos de ordenación externa
Métodos de ordenación externa
Edwin Narváez
 
Estructura de Datos - Unidad 6 Metodos de busqueda
Estructura de Datos - Unidad 6 Metodos de busquedaEstructura de Datos - Unidad 6 Metodos de busqueda
Estructura de Datos - Unidad 6 Metodos de busqueda
José Antonio Sandoval Acosta
 
Java colecciones
Java coleccionesJava colecciones
Java colecciones
Renny Batista
 
Prolog ejercicios resueltos
Prolog ejercicios resueltosProlog ejercicios resueltos
Prolog ejercicios resueltosJansel M
 
Estructura de Datos : Ordenamiento Externo
Estructura de Datos : Ordenamiento Externo Estructura de Datos : Ordenamiento Externo
Estructura de Datos : Ordenamiento Externo
Carlos Criollo
 
Mecanismos de exclusion mutua y algoritmos
Mecanismos de exclusion mutua y algoritmosMecanismos de exclusion mutua y algoritmos
Mecanismos de exclusion mutua y algoritmosAbimael hernandez
 
Colecciones en Python
Colecciones en PythonColecciones en Python
Colecciones en Python
Daniel Gomez Jaramillo
 

La actualidad más candente (20)

PROYECTO final de curso - Listas dobles
PROYECTO final de curso - Listas doblesPROYECTO final de curso - Listas dobles
PROYECTO final de curso - Listas dobles
 
Origen del Modelo OSI y su impacto en als estructuras de redes
Origen del Modelo OSI y su impacto en als estructuras de redesOrigen del Modelo OSI y su impacto en als estructuras de redes
Origen del Modelo OSI y su impacto en als estructuras de redes
 
Fundamentos de BD - Unidad 1 Sistemas Gestores de BD
Fundamentos de BD - Unidad 1 Sistemas Gestores de BDFundamentos de BD - Unidad 1 Sistemas Gestores de BD
Fundamentos de BD - Unidad 1 Sistemas Gestores de BD
 
Arreglos - Assembler
Arreglos - AssemblerArreglos - Assembler
Arreglos - Assembler
 
Mapa conceptual sobre
Mapa conceptual sobre Mapa conceptual sobre
Mapa conceptual sobre
 
Búsqueda no informada - Búsqueda bidireccional
Búsqueda no informada - Búsqueda  bidireccionalBúsqueda no informada - Búsqueda  bidireccional
Búsqueda no informada - Búsqueda bidireccional
 
Informe técnico Unidad 4 Estructuras no lineales (Rubí Verónica)
Informe técnico Unidad 4 Estructuras no lineales (Rubí Verónica)Informe técnico Unidad 4 Estructuras no lineales (Rubí Verónica)
Informe técnico Unidad 4 Estructuras no lineales (Rubí Verónica)
 
Reporte de codigo productos medios
Reporte de codigo productos mediosReporte de codigo productos medios
Reporte de codigo productos medios
 
13 Curso de POO en java - métodos propios de clase
13 Curso de POO en java - métodos propios de clase13 Curso de POO en java - métodos propios de clase
13 Curso de POO en java - métodos propios de clase
 
Estructura de Datos - Unidad 5 metodos de ordenamiento
Estructura de Datos - Unidad 5 metodos de ordenamientoEstructura de Datos - Unidad 5 metodos de ordenamiento
Estructura de Datos - Unidad 5 metodos de ordenamiento
 
Automatas de pila
Automatas de pilaAutomatas de pila
Automatas de pila
 
AnáLisis De Algoritmos1
AnáLisis De Algoritmos1AnáLisis De Algoritmos1
AnáLisis De Algoritmos1
 
PROCESAMIENTO EN PANTALLA Y TECLADO BASICO
PROCESAMIENTO EN PANTALLA Y TECLADO BASICOPROCESAMIENTO EN PANTALLA Y TECLADO BASICO
PROCESAMIENTO EN PANTALLA Y TECLADO BASICO
 
Métodos de ordenación externa
Métodos de ordenación externaMétodos de ordenación externa
Métodos de ordenación externa
 
Estructura de Datos - Unidad 6 Metodos de busqueda
Estructura de Datos - Unidad 6 Metodos de busquedaEstructura de Datos - Unidad 6 Metodos de busqueda
Estructura de Datos - Unidad 6 Metodos de busqueda
 
Java colecciones
Java coleccionesJava colecciones
Java colecciones
 
Prolog ejercicios resueltos
Prolog ejercicios resueltosProlog ejercicios resueltos
Prolog ejercicios resueltos
 
Estructura de Datos : Ordenamiento Externo
Estructura de Datos : Ordenamiento Externo Estructura de Datos : Ordenamiento Externo
Estructura de Datos : Ordenamiento Externo
 
Mecanismos de exclusion mutua y algoritmos
Mecanismos de exclusion mutua y algoritmosMecanismos de exclusion mutua y algoritmos
Mecanismos de exclusion mutua y algoritmos
 
Colecciones en Python
Colecciones en PythonColecciones en Python
Colecciones en Python
 

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

CSS
CSSCSS
rosario
rosariorosario
rosario
lalexs
 
Taller multimedia
Taller multimediaTaller multimedia
Taller multimedia
Guille
 
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 csssarabz
 
Hojas de estilo_css
Hojas de estilo_cssHojas de estilo_css
Hojas de estilo_css
lamargari
 
Hojas de estilo css
Hojas de estilo cssHojas de estilo css
Hojas de estilo csssarabz
 
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
 
CSS
CSSCSS
Hojas de estilo css
Hojas de estilo cssHojas de estilo css
Hojas de estilo css
ragalangue
 
XHTML+Inicio en CSS
XHTML+Inicio en CSSXHTML+Inicio en CSS
XHTML+Inicio en CSS
iConstruye
 
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?
Harold Maduro
 
Html y css
Html y cssHtml y css
Html y cssisandy
 
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
Diseñática disenatica.com
 
Html
HtmlHtml
Html
upt
 

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

CSS
CSSCSS
CSS
 
rosario
rosariorosario
rosario
 
ccs
ccsccs
ccs
 
Taller multimedia
Taller multimediaTaller multimedia
Taller multimedia
 
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
 

Más 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 interactivos
Fernando Irigaray
 
2. Periodismo Transmedia
2. Periodismo Transmedia2. Periodismo Transmedia
2. Periodismo Transmedia
Fernando 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 interactiva
Fernando Irigaray
 
Jornalismo Transmídia desde a periferia
Jornalismo Transmídia desde a periferiaJornalismo Transmídia desde a periferia
Jornalismo Transmídia desde a periferia
Fernando 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
 
Imagen Digital
Imagen DigitalImagen Digital
Imagen Digital
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.1
Fernando Irigaray
 
Diseño Multimedial
Diseño MultimedialDiseño Multimedial
Diseño Multimedial
Fernando Irigaray
 
2. Imagen Digital
2. Imagen Digital2. Imagen Digital
2. Imagen Digital
Fernando 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.1
Fernando 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 productor
Fernando 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 productor
Fernando Irigaray
 
Convergencia de medios
Convergencia de mediosConvergencia de medios
Convergencia de medios
Fernando 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 ciberperiodismo
Fernando 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ón
Fernando Irigaray
 

Más 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

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
 
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
 
Conceptos Básicos de Programación L.D 10-5
Conceptos Básicos de Programación L.D 10-5Conceptos Básicos de Programación L.D 10-5
Conceptos Básicos de Programación L.D 10-5
JulyMuoz18
 
Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.
AlejandraCasallas7
 
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
 
Diagrama de flujo basada en la reparacion de automoviles.pdf
Diagrama de flujo basada en la reparacion de automoviles.pdfDiagrama de flujo basada en la reparacion de automoviles.pdf
Diagrama de flujo basada en la reparacion de automoviles.pdf
ManuelCampos464987
 
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
 
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
 
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
 
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
 
Inteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdfInteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdf
Emilio Casbas
 
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
 
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
 
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTALINFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
CrystalRomero18
 
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
 
Diagrama de flujo soporte técnico 5to semestre
Diagrama de flujo soporte técnico 5to semestreDiagrama de flujo soporte técnico 5to semestre
Diagrama de flujo soporte técnico 5to semestre
rafaelsalazar0615
 
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
 
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdfDESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
marianabz2403
 

Último (20)

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
 
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
 
Conceptos Básicos de Programación L.D 10-5
Conceptos Básicos de Programación L.D 10-5Conceptos Básicos de Programación L.D 10-5
Conceptos Básicos de Programación L.D 10-5
 
Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.
 
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...
 
Diagrama de flujo basada en la reparacion de automoviles.pdf
Diagrama de flujo basada en la reparacion de automoviles.pdfDiagrama de flujo basada en la reparacion de automoviles.pdf
Diagrama de flujo basada en la reparacion de automoviles.pdf
 
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
 
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
 
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
 
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
 
Inteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdfInteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdf
 
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
 
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
 
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTALINFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
 
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
 
Diagrama de flujo soporte técnico 5to semestre
Diagrama de flujo soporte técnico 5to semestreDiagrama de flujo soporte técnico 5to semestre
Diagrama de flujo soporte técnico 5to semestre
 
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
 
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdfDESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
 

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.