SlideShare una empresa de Scribd logo
1 de 25
Apuntes sobre Hojas de Estilo en Cascada (CSS) 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

La actualidad más candente (16)

Hojas de estilo CSS (Cascade Style Sheets)
Hojas de estilo CSS (Cascade Style Sheets)Hojas de estilo CSS (Cascade Style Sheets)
Hojas de estilo CSS (Cascade Style Sheets)
 
Hojas de estilo (css)
Hojas de estilo (css)Hojas de estilo (css)
Hojas de estilo (css)
 
Html y css
Html y cssHtml y css
Html y css
 
Introducción al desarrollo web frontend
Introducción al desarrollo web frontendIntroducción al desarrollo web frontend
Introducción al desarrollo web frontend
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
Las hojas de estilo (css)
Las hojas de estilo (css)Las hojas de estilo (css)
Las hojas de estilo (css)
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
Etiquetas para texto
Etiquetas para textoEtiquetas para texto
Etiquetas para texto
 
Css - Tema 1
Css - Tema 1Css - Tema 1
Css - Tema 1
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Css reglas1
Css reglas1Css reglas1
Css reglas1
 
Como crear una pagina web
Como crear una pagina webComo crear una pagina web
Como crear una pagina web
 
Curso HTML 5 & jQuery - Leccion 6
Curso HTML 5 & jQuery - Leccion 6Curso HTML 5 & jQuery - Leccion 6
Curso HTML 5 & jQuery - Leccion 6
 
Etiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlEtiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje html
 
Presentacióncss
PresentacióncssPresentacióncss
Presentacióncss
 
CSS - Hojas de Estilo en Cascada
CSS - Hojas de Estilo en CascadaCSS - Hojas de Estilo en Cascada
CSS - Hojas de Estilo en Cascada
 

Destacado (19)

Bacterias gastrointestinales
Bacterias gastrointestinalesBacterias gastrointestinales
Bacterias gastrointestinales
 
Diagramas para la determinación de faringeo, uro y coprocultivo
Diagramas para la determinación de faringeo, uro y coprocultivoDiagramas para la determinación de faringeo, uro y coprocultivo
Diagramas para la determinación de faringeo, uro y coprocultivo
 
Coprocultivo fragmentado
Coprocultivo fragmentadoCoprocultivo fragmentado
Coprocultivo fragmentado
 
Infecciones intestinales del bebé
Infecciones intestinales del bebéInfecciones intestinales del bebé
Infecciones intestinales del bebé
 
Coprocultivo
CoprocultivoCoprocultivo
Coprocultivo
 
Infecciones intestinales del bebé
Infecciones intestinales del bebéInfecciones intestinales del bebé
Infecciones intestinales del bebé
 
Coprocultivo
CoprocultivoCoprocultivo
Coprocultivo
 
Gastroenteritis aguda.
Gastroenteritis aguda.Gastroenteritis aguda.
Gastroenteritis aguda.
 
Coprocultivo básico
Coprocultivo básicoCoprocultivo básico
Coprocultivo básico
 
Coprocultivo
Coprocultivo Coprocultivo
Coprocultivo
 
Diagnóstico infecciones gastrointestinales
Diagnóstico infecciones gastrointestinalesDiagnóstico infecciones gastrointestinales
Diagnóstico infecciones gastrointestinales
 
Coprocultivo
CoprocultivoCoprocultivo
Coprocultivo
 
Coprocultivo
CoprocultivoCoprocultivo
Coprocultivo
 
Coprocultivo
CoprocultivoCoprocultivo
Coprocultivo
 
Enterobacterias
EnterobacteriasEnterobacterias
Enterobacterias
 
Infecciones gastrointestinales de origen bacteriano
Infecciones gastrointestinales de origen bacterianoInfecciones gastrointestinales de origen bacteriano
Infecciones gastrointestinales de origen bacteriano
 
Laboratorio no. 5 pruebas bioquímicas
Laboratorio no. 5   pruebas bioquímicasLaboratorio no. 5   pruebas bioquímicas
Laboratorio no. 5 pruebas bioquímicas
 
Pruebas bioquímicas
Pruebas bioquímicasPruebas bioquímicas
Pruebas bioquímicas
 
Bacterias gastrointestinales
Bacterias gastrointestinalesBacterias gastrointestinales
Bacterias gastrointestinales
 

Similar a Taller multimedia (20)

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
 
CSS
CSSCSS
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
 
Dhtml
DhtmlDhtml
Dhtml
 
XHTML+Inicio en CSS
XHTML+Inicio en CSSXHTML+Inicio en CSS
XHTML+Inicio en CSS
 
CSS
CSSCSS
CSS
 
Curso De Css
Curso De CssCurso De Css
Curso De 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
 
Clase1
Clase1Clase1
Clase1
 
Identificación del lenguaje ccs
Identificación del lenguaje ccsIdentificación del lenguaje ccs
Identificación del lenguaje ccs
 
Html
HtmlHtml
Html
 
Diapo03
Diapo03Diapo03
Diapo03
 
Clase de CSS Parte 2
Clase de CSS Parte 2Clase de CSS Parte 2
Clase de CSS Parte 2
 
Css: bases y buenas prácticas
Css: bases y buenas prácticasCss: bases y buenas prácticas
Css: bases y buenas prácticas
 
Estilos css
Estilos cssEstilos css
Estilos css
 
T2 1-css
T2 1-cssT2 1-css
T2 1-css
 
Presentación CSS y HTML en Gummurcia
Presentación CSS y HTML en GummurciaPresentación CSS y HTML en Gummurcia
Presentación CSS y HTML en Gummurcia
 

Último

Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxFederico Castellari
 
investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIhmpuellon
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21mariacbr99
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxJorgeParada26
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.FlorenciaCattelani
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxAlan779941
 
Guia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosGuia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosJhonJairoRodriguezCe
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estossgonzalezp1
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...JohnRamos830530
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativanicho110
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanamcerpam
 

Último (11)

Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptx
 
investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXI
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
Guia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosGuia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos Basicos
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 

Taller multimedia

  • 1. Apuntes sobre Hojas de Estilo en Cascada (CSS) 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.