SlideShare ist ein Scribd-Unternehmen logo
1 von 19
Cascading Style Sheets   CSS
Hojas de Estilo en Cascada ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Hojas de Estilo en Cascada ,[object Object],Selector  {  propiedad :  valor ; ...} Declaración H1 {color:#CC9900;} Ejemplo:
Cascading  (En Cascada) ,[object Object],[object Object],[object Object],[object Object]
Cascading  (En Cascada) ,[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],Aplicar CSS
Uniformidad en Varios Documentos  ,[object Object],<html> <head> <title> Documento de CSS </title> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/css/estilo.css&quot;> <style type=&quot;text/css&quot;><!— @import url( http://www.osmosislatina.com/css/estilo.css ) --> </style> </head> <body> ........  ........ </body> </html> (Archivo CSS)
Uniformidad en Varios Documentos  ,[object Object],[object Object],[object Object],[object Object],(Archivo CSS)
composición de una hoja de estilo para ser incorporda a un documento HTML / XHTML :  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
composición de una hoja de estilo para ser incorporda a un documento HTML / XHTML :  /* Definir tipos de letras para tags especiales */ pre, code { font-family: monospace }  /* Definir Sangría para cada salto de párrafo */  p {text-indent: 3em } p.sinsangria {text-indent: 0em}  /* Definir tamaño de letra para Títulos */  h1 { font-size: 18pt }  h2 { font-size: 14pt } h3 { font-size: 14pt } h4 { font-size: 12pt } h5 { font-size: 10pt }  h6 { font-size: 8pt }
Uniformidad en Documento  (Tags <style> y <span> ).  ,[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]
Uniformidad en Documento  (Tags <style> y <span> ).  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Los parámetros definidos dentro de los  tags  <style> indican lo siguiente:
span ,[object Object],[object Object],[object Object]
span ,[object Object],[object Object],[object Object],[object Object],[object Object]
el uso de Clases y declaraciones en linea forma parte de las definiciones más refinadas en CSS.  ,[object Object],[object Object],[object Object],[object Object]
el uso de Clases y declaraciones en linea forma parte de las definiciones más refinadas en CSS.  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Los siguientes parámetros definen tres funcionamientos para títulos con  tags  <h2> , esto otorga la flexibilidad de emplear títulos con diferentes colores.
Para utilizar la funcionalidad los  tags  son llamados con el parámetro class :  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Para utilizar la funcionalidad los  tags  son llamados con el parámetro class :  ,[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],Selectores

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

HTML DINAMICO
HTML DINAMICOHTML DINAMICO
HTML DINAMICO
 
¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?
 
Curso HTML 5 & jQuery - Leccion 5
Curso HTML 5 & jQuery - Leccion 5Curso HTML 5 & jQuery - Leccion 5
Curso HTML 5 & jQuery - Leccion 5
 
Maquetar pagina html con css
Maquetar pagina html con cssMaquetar pagina html con css
Maquetar pagina html con css
 
Curso Html Basico
Curso Html BasicoCurso Html Basico
Curso Html Basico
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
HTML 2011
HTML 2011HTML 2011
HTML 2011
 
HTML
HTMLHTML
HTML
 
TAREA DEL CSS
TAREA DEL CSSTAREA DEL CSS
TAREA DEL CSS
 
Hojas de estilo (css)
Hojas de estilo (css)Hojas de estilo (css)
Hojas de estilo (css)
 
Curso HTML 5 & jQuery - Leccion 4
Curso HTML 5 & jQuery - Leccion 4Curso HTML 5 & jQuery - Leccion 4
Curso HTML 5 & jQuery - Leccion 4
 
Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1 Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1
 
Html-CSS
Html-CSSHtml-CSS
Html-CSS
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Diapositivas Html
Diapositivas HtmlDiapositivas Html
Diapositivas Html
 
Manual de css......jpg
Manual de css......jpgManual de css......jpg
Manual de css......jpg
 
Html
HtmlHtml
Html
 
Maquetacion
MaquetacionMaquetacion
Maquetacion
 
Manual de css hojas de estilo
Manual de css hojas de estiloManual de css hojas de estilo
Manual de css hojas de estilo
 
Html
HtmlHtml
Html
 

Andere mochten auch (20)

Pres Web2.0
Pres Web2.0Pres Web2.0
Pres Web2.0
 
Censura
CensuraCensura
Censura
 
Acuerdo 494 diverso número 181
Acuerdo  494  diverso número 181Acuerdo  494  diverso número 181
Acuerdo 494 diverso número 181
 
Generacions web
Generacions webGeneracions web
Generacions web
 
presentacion
presentacionpresentacion
presentacion
 
Periodismo ciudadano 2
Periodismo ciudadano 2Periodismo ciudadano 2
Periodismo ciudadano 2
 
Grafoas Trabajos
Grafoas TrabajosGrafoas Trabajos
Grafoas Trabajos
 
Tarik sbai 6e a el marroc
Tarik sbai 6e a el marrocTarik sbai 6e a el marroc
Tarik sbai 6e a el marroc
 
Pres Web2.0
Pres Web2.0Pres Web2.0
Pres Web2.0
 
Cuadro
CuadroCuadro
Cuadro
 
Cangas
CangasCangas
Cangas
 
El Reto De Aprender
El Reto De AprenderEl Reto De Aprender
El Reto De Aprender
 
El Formato Flash
El Formato  FlashEl Formato  Flash
El Formato Flash
 
Feliz Navidad 2010
Feliz Navidad 2010Feliz Navidad 2010
Feliz Navidad 2010
 
Agua
AguaAgua
Agua
 
Presentación web2.0
Presentación web2.0Presentación web2.0
Presentación web2.0
 
Acuerdo número 348
Acuerdo número 348Acuerdo número 348
Acuerdo número 348
 
ConexióN
ConexióNConexióN
ConexióN
 
Transporte Y TecnologíA Presentacion
Transporte Y TecnologíA PresentacionTransporte Y TecnologíA Presentacion
Transporte Y TecnologíA Presentacion
 
Min
MinMin
Min
 

Ähnlich wie Diapo03

Ähnlich wie Diapo03 (20)

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
 
Hojas de estilo css
Hojas de estilo cssHojas de estilo css
Hojas de estilo css
 
Manual Css Desarrolloweb.Com
Manual Css Desarrolloweb.ComManual Css Desarrolloweb.Com
Manual Css Desarrolloweb.Com
 
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?
 
Css1
Css1Css1
Css1
 
Css1
Css1Css1
Css1
 
Css
CssCss
Css
 
Presenpabo
PresenpaboPresenpabo
Presenpabo
 
Html y css
Html y cssHtml y css
Html y css
 
css
csscss
css
 
Presentación
PresentaciónPresentación
Presentación
 
CSS - Hojas de Estilo en Cascada
CSS - Hojas de Estilo en CascadaCSS - Hojas de Estilo en Cascada
CSS - Hojas de Estilo en Cascada
 
Presentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTMLPresentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTML
 
Html trabajo!
Html trabajo!Html trabajo!
Html trabajo!
 
C:\Tics\Concepto De Css
C:\Tics\Concepto De CssC:\Tics\Concepto De Css
C:\Tics\Concepto De Css
 
C:\Tics\Concepto De Css
C:\Tics\Concepto De CssC:\Tics\Concepto De Css
C:\Tics\Concepto De Css
 
Presentación
PresentaciónPresentación
Presentación
 

Kürzlich hochgeladen

Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...fcastellanos3
 
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJO
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJOTUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJO
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJOweislaco
 
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADODECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADOJosé Luis Palma
 
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdfLA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdfNataliaMalky1
 
Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024IES Vicent Andres Estelles
 
Estrategia de Enseñanza y Aprendizaje.pdf
Estrategia de Enseñanza y Aprendizaje.pdfEstrategia de Enseñanza y Aprendizaje.pdf
Estrategia de Enseñanza y Aprendizaje.pdfromanmillans
 
Los Nueve Principios del Desempeño de la Sostenibilidad
Los Nueve Principios del Desempeño de la SostenibilidadLos Nueve Principios del Desempeño de la Sostenibilidad
Los Nueve Principios del Desempeño de la SostenibilidadJonathanCovena1
 
TRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIA
TRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIATRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIA
TRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIAAbelardoVelaAlbrecht1
 
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdfTarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdfManuel Molina
 
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxc3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxMartín Ramírez
 
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxLINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxdanalikcruz2000
 
ÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdf
ÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdfÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdf
ÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdfluisantoniocruzcorte1
 
La evolucion de la especie humana-primero de secundaria
La evolucion de la especie humana-primero de secundariaLa evolucion de la especie humana-primero de secundaria
La evolucion de la especie humana-primero de secundariamarco carlos cuyo
 
Uses of simple past and time expressions
Uses of simple past and time expressionsUses of simple past and time expressions
Uses of simple past and time expressionsConsueloSantana3
 
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxSINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxlclcarmen
 
Introducción:Los objetivos de Desarrollo Sostenible
Introducción:Los objetivos de Desarrollo SostenibleIntroducción:Los objetivos de Desarrollo Sostenible
Introducción:Los objetivos de Desarrollo SostenibleJonathanCovena1
 
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).pptPINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).pptAlberto Rubio
 
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdfEstrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdfAlfredoRamirez953210
 

Kürzlich hochgeladen (20)

Earth Day Everyday 2024 54th anniversary
Earth Day Everyday 2024 54th anniversaryEarth Day Everyday 2024 54th anniversary
Earth Day Everyday 2024 54th anniversary
 
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
 
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJO
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJOTUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJO
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJO
 
Sesión La luz brilla en la oscuridad.pdf
Sesión  La luz brilla en la oscuridad.pdfSesión  La luz brilla en la oscuridad.pdf
Sesión La luz brilla en la oscuridad.pdf
 
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADODECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
 
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdfLA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
 
Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024
 
Estrategia de Enseñanza y Aprendizaje.pdf
Estrategia de Enseñanza y Aprendizaje.pdfEstrategia de Enseñanza y Aprendizaje.pdf
Estrategia de Enseñanza y Aprendizaje.pdf
 
Los Nueve Principios del Desempeño de la Sostenibilidad
Los Nueve Principios del Desempeño de la SostenibilidadLos Nueve Principios del Desempeño de la Sostenibilidad
Los Nueve Principios del Desempeño de la Sostenibilidad
 
TRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIA
TRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIATRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIA
TRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIA
 
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdfTarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
 
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxc3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
 
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxLINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
 
ÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdf
ÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdfÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdf
ÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdf
 
La evolucion de la especie humana-primero de secundaria
La evolucion de la especie humana-primero de secundariaLa evolucion de la especie humana-primero de secundaria
La evolucion de la especie humana-primero de secundaria
 
Uses of simple past and time expressions
Uses of simple past and time expressionsUses of simple past and time expressions
Uses of simple past and time expressions
 
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxSINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
 
Introducción:Los objetivos de Desarrollo Sostenible
Introducción:Los objetivos de Desarrollo SostenibleIntroducción:Los objetivos de Desarrollo Sostenible
Introducción:Los objetivos de Desarrollo Sostenible
 
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).pptPINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
 
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdfEstrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
 

Diapo03

  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10. composición de una hoja de estilo para ser incorporda a un documento HTML / XHTML : /* Definir tipos de letras para tags especiales */ pre, code { font-family: monospace } /* Definir Sangría para cada salto de párrafo */ p {text-indent: 3em } p.sinsangria {text-indent: 0em} /* Definir tamaño de letra para Títulos */ h1 { font-size: 18pt } h2 { font-size: 14pt } h3 { font-size: 14pt } h4 { font-size: 12pt } h5 { font-size: 10pt } h6 { font-size: 8pt }
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.