SlideShare une entreprise Scribd logo
1  sur  7
Télécharger pour lire hors ligne
FACILITADOR: MORENO DUGLAS
Cascading Style Sheets (CSS) Hojas de Estilo
en Cascada

se utiliza para darle estilo a los documentos separando el
contenido de la presentación. Los Estilos definen la
forma de mostrar los elementos HTML.

CSS le permite a los desarrolladores Web controlar el
estilo y el formato de múltiples páginas Web al mismo
tiempo. Cualquier cambio en el estilo marcado para un
elemento en la CSS afectará a todas las páginas
vinculadas a esa CSS en las que aparezca ese
elemento.
Formas para Crear los Estilos
Se crear la hoja de Estilo y se incluye en el
archivo Html de la siguiente forma.

<link rel="stylesheet" type="text/css"
href=" " />
Formas para Crear los Estilos
Se puede Utilizar el elemento <style></style> en el interior
Del documento dentro del HEAD Ejemplo:

<html>
<head><title>hoja de estilo interna</title>
<style type="text/css">

  </style>
</head><body></body></html>
Creando una hoja de estilo dentro de un
        documento, el tag <STYLE>
<HTML> <HEAD>
Diversos datos de la cabeza del documento.....
<STYLE type="text/css">
<!--
Definición de los diversos estilos y sus
   características.
-->
</STYLE>
</HEAD> <BODY>
Contenido del documento...
</BODY> </HTML>
Formas para Crear los Estilos
Se pueden utilizar los estilos “in line” que solo
se utilizara una ve, y se definen los valores de
la propiedad style. Ejemplo:

<p style="color:blue;background:lightblue;">
Aca va un parrafo en azul, resaltado y en
negrita
</p>
Algunas propiedades de las hojas de estilo que
permiten cambiar la forma de presentación de los
documentos de html.

Las hojas de estilos se pueden diseñar de dos formas
que    describen una clase (CLASS) y los que
describen los identificadores (ID).

Contenu connexe

Tendances (19)

Html vs css
Html vs cssHtml vs css
Html vs css
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
Colegio nicolás esguerra
Colegio nicolás esguerraColegio nicolás esguerra
Colegio nicolás esguerra
 
Planilla
PlanillaPlanilla
Planilla
 
Modelo carta urbana
Modelo carta urbanaModelo carta urbana
Modelo carta urbana
 
Octavo
OctavoOctavo
Octavo
 
Css hojasde estilo
Css hojasde estiloCss hojasde estilo
Css hojasde estilo
 
Colegio nacional nicolas
Colegio nacional nicolasColegio nacional nicolas
Colegio nacional nicolas
 
Css básico
Css básicoCss básico
Css básico
 
Herramientas de word
Herramientas de wordHerramientas de word
Herramientas de word
 
CSS EN HTML5
CSS EN HTML5CSS EN HTML5
CSS EN HTML5
 
Css
CssCss
Css
 
Qué es css
Qué es cssQué es css
Qué es css
 
Css
CssCss
Css
 
Computación en la nube skydrive
Computación en la nube skydriveComputación en la nube skydrive
Computación en la nube skydrive
 
Computacion en la nube sky drive
Computacion en la nube   sky driveComputacion en la nube   sky drive
Computacion en la nube sky drive
 
Vista
VistaVista
Vista
 
Hojas de estilo (1)
Hojas de estilo (1)Hojas de estilo (1)
Hojas de estilo (1)
 
Conceptos Básicos CSS
Conceptos Básicos CSSConceptos Básicos CSS
Conceptos Básicos CSS
 

Similaire à Hojas estilo

Similaire à Hojas estilo (20)

Hojas de estilo (css)
Hojas de estilo (css)Hojas de estilo (css)
Hojas de estilo (css)
 
1. Introducción a las Hojas de estilo (CSS)
1. Introducción a las Hojas de estilo (CSS)1. Introducción a las Hojas de estilo (CSS)
1. Introducción a las Hojas de estilo (CSS)
 
C3 lenguaje de presentación.
C3 lenguaje de presentación.C3 lenguaje de presentación.
C3 lenguaje de presentación.
 
Presentación
PresentaciónPresentación
Presentación
 
Css
CssCss
Css
 
Presenpabo
PresenpaboPresenpabo
Presenpabo
 
05 desarrollocss (3)
05 desarrollocss (3)05 desarrollocss (3)
05 desarrollocss (3)
 
Organización de contenido en dreamweaver
Organización de contenido en dreamweaverOrganización de contenido en dreamweaver
Organización de contenido en dreamweaver
 
manualrapido_css.pdf
manualrapido_css.pdfmanualrapido_css.pdf
manualrapido_css.pdf
 
Manual para elaborar páginas HTM5 con CSS
Manual para elaborar páginas HTM5 con CSSManual para elaborar páginas HTM5 con CSS
Manual para elaborar páginas HTM5 con CSS
 
manua.pdf
manua.pdfmanua.pdf
manua.pdf
 
Manualrapido css
Manualrapido cssManualrapido css
Manualrapido css
 
Paginas web css
Paginas web cssPaginas web css
Paginas web css
 
Introducción a css
Introducción a cssIntroducción a css
Introducción a css
 
css
csscss
css
 
DEBER HOJA DE ESTILO (CSS) blog blogger blogspot
DEBER HOJA DE ESTILO (CSS) blog blogger blogspotDEBER HOJA DE ESTILO (CSS) blog blogger blogspot
DEBER HOJA DE ESTILO (CSS) blog blogger blogspot
 
Css.html(1)
Css.html(1)Css.html(1)
Css.html(1)
 
Hojas de estilo_css
Hojas de estilo_cssHojas de estilo_css
Hojas de estilo_css
 
Manual de css......jpg
Manual de css......jpgManual de css......jpg
Manual de css......jpg
 
Trabajo css
Trabajo cssTrabajo css
Trabajo css
 

Plus de Duglas Oswaldo Moreno Mendoza

Moodle como una herramienta de Enseñanza y Aprendizaje en la Educación Virtual
Moodle como una herramienta de Enseñanza y Aprendizaje en la Educación VirtualMoodle como una herramienta de Enseñanza y Aprendizaje en la Educación Virtual
Moodle como una herramienta de Enseñanza y Aprendizaje en la Educación VirtualDuglas Oswaldo Moreno Mendoza
 

Plus de Duglas Oswaldo Moreno Mendoza (20)

Fases dek Diseño Instruccional
Fases dek Diseño InstruccionalFases dek Diseño Instruccional
Fases dek Diseño Instruccional
 
Diseño Instruccional
Diseño InstruccionalDiseño Instruccional
Diseño Instruccional
 
Ponencia Seguridad de Datos
Ponencia Seguridad de DatosPonencia Seguridad de Datos
Ponencia Seguridad de Datos
 
Sematicas cabecera
Sematicas cabeceraSematicas cabecera
Sematicas cabecera
 
Nuevas Etiquetas
Nuevas EtiquetasNuevas Etiquetas
Nuevas Etiquetas
 
Meta etiquetas
Meta etiquetasMeta etiquetas
Meta etiquetas
 
Formularios
FormulariosFormularios
Formularios
 
Elementos de audio
Elementos de audioElementos de audio
Elementos de audio
 
Introducción al HTML
Introducción al HTML Introducción al HTML
Introducción al HTML
 
Infografia de PHP
Infografia de PHPInfografia de PHP
Infografia de PHP
 
Moodle como una herramienta de Enseñanza y Aprendizaje en la Educación Virtual
Moodle como una herramienta de Enseñanza y Aprendizaje en la Educación VirtualMoodle como una herramienta de Enseñanza y Aprendizaje en la Educación Virtual
Moodle como una herramienta de Enseñanza y Aprendizaje en la Educación Virtual
 
Una biografía que es como un cuento
Una biografía que es como un cuentoUna biografía que es como un cuento
Una biografía que es como un cuento
 
INFOGRAFIA DE PHP
INFOGRAFIA DE PHPINFOGRAFIA DE PHP
INFOGRAFIA DE PHP
 
Observador del conocimmiento n°1 vol 2
Observador del conocimmiento n°1 vol 2Observador del conocimmiento n°1 vol 2
Observador del conocimmiento n°1 vol 2
 
Observador del conocimmiento n°1 vol 1
Observador del conocimmiento n°1 vol 1Observador del conocimmiento n°1 vol 1
Observador del conocimmiento n°1 vol 1
 
Manual programacion Android
Manual programacion AndroidManual programacion Android
Manual programacion Android
 
Variables y Bucles
Variables y BuclesVariables y Bucles
Variables y Bucles
 
Historia de PHP
Historia de PHPHistoria de PHP
Historia de PHP
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Clase tres de xhtml
Clase tres de xhtmlClase tres de xhtml
Clase tres de xhtml
 

Dernier

Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30SantiagoAgudelo47
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfslaimenbarakat
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroJuan Carlos Fonseca Mata
 
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfDanielaPrezMartnez3
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGersonManuelRodrigue1
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesespejosflorida
 
Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docPlanificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docAhilynBasabe
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.docilvrosiebp
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALEvaMaraMorenoLago1
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfBrbara57940
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosCristianGmez22034
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialAndreaMlaga1
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYkarendaza9506
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfLeonardoDantasRivas
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxLeo Florez
 
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGODIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGOyordanespinozanina
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoJorge Fernandez
 
cabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanacabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanaMarsielMendoza1
 
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxSESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxJustoAlbertoBaltaSmi
 

Dernier (20)

Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de Querétaro
 
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 
Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docPlanificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.doc
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
 
1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
 
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGODIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimiento
 
cabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanacabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadana
 
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxSESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
 

Hojas estilo

  • 2. Cascading Style Sheets (CSS) Hojas de Estilo en Cascada se utiliza para darle estilo a los documentos separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML. CSS le permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.
  • 3. Formas para Crear los Estilos Se crear la hoja de Estilo y se incluye en el archivo Html de la siguiente forma. <link rel="stylesheet" type="text/css" href=" " />
  • 4. Formas para Crear los Estilos Se puede Utilizar el elemento <style></style> en el interior Del documento dentro del HEAD Ejemplo: <html> <head><title>hoja de estilo interna</title> <style type="text/css"> </style> </head><body></body></html>
  • 5. Creando una hoja de estilo dentro de un documento, el tag <STYLE> <HTML> <HEAD> Diversos datos de la cabeza del documento..... <STYLE type="text/css"> <!-- Definición de los diversos estilos y sus características. --> </STYLE> </HEAD> <BODY> Contenido del documento... </BODY> </HTML>
  • 6. Formas para Crear los Estilos Se pueden utilizar los estilos “in line” que solo se utilizara una ve, y se definen los valores de la propiedad style. Ejemplo: <p style="color:blue;background:lightblue;"> Aca va un parrafo en azul, resaltado y en negrita </p>
  • 7. Algunas propiedades de las hojas de estilo que permiten cambiar la forma de presentación de los documentos de html. Las hojas de estilos se pueden diseñar de dos formas que describen una clase (CLASS) y los que describen los identificadores (ID).