SlideShare una empresa de Scribd logo
1 de 3
EJERCICIOS EN CSS
EJERCICIO1

Deseo obtener un archivo con Fondo sea amarillo, y que el texto contenido en ella sea de 10 puntos de
altura y de la fuente Arial, con márgenes izquierdo y derecho de media pulgada. Esto afectará a todo lo
que está contenido entre <BODY> y </BODY>, o sea a toda la página.
EJERCICIO2 – COMO LO LOGRAMOS?????

Esto es un párrafo con varias palabras en color azul oscuro. resulta muy fácil.
EJERCICIO3 – QUE OBTENEMOS????

<p>
Esto es un párrafo en varias palabras <SPAN style="color:green">en color verde</SPAN>.
resulta muy fácil.
</p>
EJERCICIO4 – COMO LO LOGRAMOS?????

<p style="color:#990000">
Esto es un párrafo de color rojo.
</p>
<p style="color:#000099">
Esto es un párrafo de color azul.
</p>

EJERCICIO5 – AL INSERTAR EL CÓDIGO QUE SE OBTIENE???????

<html>
<head>
<title> Título de la página </title>
<style type="text/css">
<!--
body {background: black; font-size: 10pt; font-family: Arial,Helvetica,sans-serif; color: yellow; text-
align:justify; margin-left: 0.5in; margin-right: 0.5in}
H1 {background: aqua; font-size: 14pt; font-weight: bold; color: orange}
H2 {font-size: 12pt; font-weight: bold; color: white}
-->
</style>
</head>
<body>
Conjunto de etiquetas del cuerpo de la página
</body>
</html>
EJERCICIO6 – QUE OBTENEMOS AL TRABAJAR EL SIGUIENTE CÓDIGO

<style type='text/css'>
body {
  background-color:#345485;
}

h1 {
  color:orange;
  font-family:'Times New Roman';
  text-align:center;
}

p{
  color:#E9EBAB;
  font-family:Arial,Helvetica,sans-serif;
  font-size:20px;
  text-align:center;
}
</style>
EJERCICIO7 – QUE OBTENEMOS?????

body {
  background: transparent url('COLOCAR UNA IMAGEN.EXT') no-repeat center
        background-attachment: fixed;
}

h1 {
  color:red;
  font-family:'Times New Roman';
  font-size:24px;
  font-weight:bold;
  text-align:center;
}

h2 {
  color:blue;
  font-family:Verdana, Geneva, sans-serif;
  font-size:20px;
  font-weight:bold;
  text-align:center;
}

p{
  color:black;
  font-family:Arial, Helvetica, sans-serif;
  font-size:18px;
  text-align:center;
}
DESEO LOGRAR LO SIGUIENTE, ¿QUÉ DEBEMOS HACER?
P{
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
}

Más contenido relacionado

Similar a Ejercicios en css

Similar a Ejercicios en css (20)

Introducción a CSS en XHTML
Introducción a CSS en XHTMLIntroducción a CSS en XHTML
Introducción a CSS en XHTML
 
Introduccion a css
Introduccion a cssIntroduccion a css
Introduccion a css
 
Laboratorio 03
Laboratorio 03Laboratorio 03
Laboratorio 03
 
Html, css y tablas.compressed
Html, css y tablas.compressedHtml, css y tablas.compressed
Html, css y tablas.compressed
 
MEJORES - Curso-HTML-+-CSS.pdf
MEJORES - Curso-HTML-+-CSS.pdfMEJORES - Curso-HTML-+-CSS.pdf
MEJORES - Curso-HTML-+-CSS.pdf
 
Curso-HTML--CSS.pdf
Curso-HTML--CSS.pdfCurso-HTML--CSS.pdf
Curso-HTML--CSS.pdf
 
Pagina con maquetacion
Pagina con maquetacionPagina con maquetacion
Pagina con maquetacion
 
Get & post
Get & postGet & post
Get & post
 
Comando y ejercicios para HTML
Comando y ejercicios para HTMLComando y ejercicios para HTML
Comando y ejercicios para HTML
 
Presentacion html
Presentacion htmlPresentacion html
Presentacion html
 
Presentacion html
Presentacion htmlPresentacion html
Presentacion html
 
Presentacion html
Presentacion htmlPresentacion html
Presentacion html
 
DIRECTIVAS BASICAS HTML
DIRECTIVAS BASICAS HTMLDIRECTIVAS BASICAS HTML
DIRECTIVAS BASICAS HTML
 
Ejercicio denisse chacaguasay 3_c
Ejercicio denisse chacaguasay 3_cEjercicio denisse chacaguasay 3_c
Ejercicio denisse chacaguasay 3_c
 
Etiquetas básicas en html
Etiquetas básicas en htmlEtiquetas básicas en html
Etiquetas básicas en html
 
html
htmlhtml
html
 
Fundamentos de CSS
Fundamentos de CSSFundamentos de CSS
Fundamentos de CSS
 
Modulo1parte2ver2 140505061829-phpapp02
Modulo1parte2ver2 140505061829-phpapp02Modulo1parte2ver2 140505061829-phpapp02
Modulo1parte2ver2 140505061829-phpapp02
 
Directivas en html
Directivas en htmlDirectivas en html
Directivas en html
 
Hipervinculos
HipervinculosHipervinculos
Hipervinculos
 

Más de Claretiano

Ac fr ogbyraalr9kj-rcmkfpy42a_0d8ffpeyo8jghfriozd978fytck36sjil-v7k1te_vpkq6v...
Ac fr ogbyraalr9kj-rcmkfpy42a_0d8ffpeyo8jghfriozd978fytck36sjil-v7k1te_vpkq6v...Ac fr ogbyraalr9kj-rcmkfpy42a_0d8ffpeyo8jghfriozd978fytck36sjil-v7k1te_vpkq6v...
Ac fr ogbyraalr9kj-rcmkfpy42a_0d8ffpeyo8jghfriozd978fytck36sjil-v7k1te_vpkq6v...Claretiano
 
Practica sesion6
Practica sesion6Practica sesion6
Practica sesion6Claretiano
 
Practica sesion6
Practica sesion6Practica sesion6
Practica sesion6Claretiano
 
Com08 docentes
Com08 docentesCom08 docentes
Com08 docentesClaretiano
 
Recomendaciones1
Recomendaciones1Recomendaciones1
Recomendaciones1Claretiano
 
Manual Crear Blogs
Manual Crear BlogsManual Crear Blogs
Manual Crear BlogsClaretiano
 
Ht ml exposicion_2011
Ht ml exposicion_2011Ht ml exposicion_2011
Ht ml exposicion_2011Claretiano
 
Programacion Estructurada
Programacion EstructuradaProgramacion Estructurada
Programacion EstructuradaClaretiano
 
Introduccion Programacion
Introduccion ProgramacionIntroduccion Programacion
Introduccion ProgramacionClaretiano
 

Más de Claretiano (13)

IMPRIME.docx
IMPRIME.docxIMPRIME.docx
IMPRIME.docx
 
Ac fr ogbyraalr9kj-rcmkfpy42a_0d8ffpeyo8jghfriozd978fytck36sjil-v7k1te_vpkq6v...
Ac fr ogbyraalr9kj-rcmkfpy42a_0d8ffpeyo8jghfriozd978fytck36sjil-v7k1te_vpkq6v...Ac fr ogbyraalr9kj-rcmkfpy42a_0d8ffpeyo8jghfriozd978fytck36sjil-v7k1te_vpkq6v...
Ac fr ogbyraalr9kj-rcmkfpy42a_0d8ffpeyo8jghfriozd978fytck36sjil-v7k1te_vpkq6v...
 
Practica sesion6
Practica sesion6Practica sesion6
Practica sesion6
 
Computo2.0
Computo2.0Computo2.0
Computo2.0
 
Practica sesion6
Practica sesion6Practica sesion6
Practica sesion6
 
Practica1 5 p
Practica1 5 pPractica1 5 p
Practica1 5 p
 
Com08 docentes
Com08 docentesCom08 docentes
Com08 docentes
 
Recomendaciones1
Recomendaciones1Recomendaciones1
Recomendaciones1
 
La Web4.0
La Web4.0La Web4.0
La Web4.0
 
Manual Crear Blogs
Manual Crear BlogsManual Crear Blogs
Manual Crear Blogs
 
Ht ml exposicion_2011
Ht ml exposicion_2011Ht ml exposicion_2011
Ht ml exposicion_2011
 
Programacion Estructurada
Programacion EstructuradaProgramacion Estructurada
Programacion Estructurada
 
Introduccion Programacion
Introduccion ProgramacionIntroduccion Programacion
Introduccion Programacion
 

Último

Identificación de componentes Hardware del PC
Identificación de componentes Hardware del PCIdentificación de componentes Hardware del PC
Identificación de componentes Hardware del PCCesarFernandez937857
 
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.pptDE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.pptELENA GALLARDO PAÚLS
 
CULTURA NAZCA, presentación en aula para compartir
CULTURA NAZCA, presentación en aula para compartirCULTURA NAZCA, presentación en aula para compartir
CULTURA NAZCA, presentación en aula para compartirPaddySydney1
 
programa dia de las madres 10 de mayo para evento
programa dia de las madres 10 de mayo  para eventoprograma dia de las madres 10 de mayo  para evento
programa dia de las madres 10 de mayo para eventoDiegoMtsS
 
FICHA DE MONITOREO Y ACOMPAÑAMIENTO 2024 MINEDU
FICHA DE MONITOREO Y ACOMPAÑAMIENTO  2024 MINEDUFICHA DE MONITOREO Y ACOMPAÑAMIENTO  2024 MINEDU
FICHA DE MONITOREO Y ACOMPAÑAMIENTO 2024 MINEDUgustavorojas179704
 
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
 
Fundamentos y Principios de Psicopedagogía..pdf
Fundamentos y Principios de Psicopedagogía..pdfFundamentos y Principios de Psicopedagogía..pdf
Fundamentos y Principios de Psicopedagogía..pdfsamyarrocha1
 
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
 
Heinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoHeinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoFundación YOD YOD
 
Marketing y servicios 2ºBTP Cocina DGETP
Marketing y servicios 2ºBTP Cocina DGETPMarketing y servicios 2ºBTP Cocina DGETP
Marketing y servicios 2ºBTP Cocina DGETPANEP - DETP
 
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzel CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzprofefilete
 
Factores ecosistemas: interacciones, energia y dinamica
Factores ecosistemas: interacciones, energia y dinamicaFactores ecosistemas: interacciones, energia y dinamica
Factores ecosistemas: interacciones, energia y dinamicaFlor Idalia Espinoza Ortega
 
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...JAVIER SOLIS NOYOLA
 
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
 
Plan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPEPlan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPELaura Chacón
 
Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.José Luis Palma
 

Último (20)

Identificación de componentes Hardware del PC
Identificación de componentes Hardware del PCIdentificación de componentes Hardware del PC
Identificación de componentes Hardware del PC
 
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.pptDE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
 
CULTURA NAZCA, presentación en aula para compartir
CULTURA NAZCA, presentación en aula para compartirCULTURA NAZCA, presentación en aula para compartir
CULTURA NAZCA, presentación en aula para compartir
 
programa dia de las madres 10 de mayo para evento
programa dia de las madres 10 de mayo  para eventoprograma dia de las madres 10 de mayo  para evento
programa dia de las madres 10 de mayo para evento
 
FICHA DE MONITOREO Y ACOMPAÑAMIENTO 2024 MINEDU
FICHA DE MONITOREO Y ACOMPAÑAMIENTO  2024 MINEDUFICHA DE MONITOREO Y ACOMPAÑAMIENTO  2024 MINEDU
FICHA DE MONITOREO Y ACOMPAÑAMIENTO 2024 MINEDU
 
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...
 
Fundamentos y Principios de Psicopedagogía..pdf
Fundamentos y Principios de Psicopedagogía..pdfFundamentos y Principios de Psicopedagogía..pdf
Fundamentos y Principios de Psicopedagogía..pdf
 
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
 
Heinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoHeinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativo
 
Unidad 3 | Teorías de la Comunicación | MCDI
Unidad 3 | Teorías de la Comunicación | MCDIUnidad 3 | Teorías de la Comunicación | MCDI
Unidad 3 | Teorías de la Comunicación | MCDI
 
Marketing y servicios 2ºBTP Cocina DGETP
Marketing y servicios 2ºBTP Cocina DGETPMarketing y servicios 2ºBTP Cocina DGETP
Marketing y servicios 2ºBTP Cocina DGETP
 
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzel CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
 
Factores ecosistemas: interacciones, energia y dinamica
Factores ecosistemas: interacciones, energia y dinamicaFactores ecosistemas: interacciones, energia y dinamica
Factores ecosistemas: interacciones, energia y dinamica
 
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
 
Unidad 4 | Teorías de las Comunicación | MCDI
Unidad 4 | Teorías de las Comunicación | MCDIUnidad 4 | Teorías de las Comunicación | MCDI
Unidad 4 | Teorías de las Comunicación | MCDI
 
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
 
Plan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPEPlan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPE
 
Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.
 
Power Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptxPower Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptx
 
Tema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdf
Tema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdfTema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdf
Tema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdf
 

Ejercicios en css

  • 1. EJERCICIOS EN CSS EJERCICIO1 Deseo obtener un archivo con Fondo sea amarillo, y que el texto contenido en ella sea de 10 puntos de altura y de la fuente Arial, con márgenes izquierdo y derecho de media pulgada. Esto afectará a todo lo que está contenido entre <BODY> y </BODY>, o sea a toda la página. EJERCICIO2 – COMO LO LOGRAMOS????? Esto es un párrafo con varias palabras en color azul oscuro. resulta muy fácil. EJERCICIO3 – QUE OBTENEMOS???? <p> Esto es un párrafo en varias palabras <SPAN style="color:green">en color verde</SPAN>. resulta muy fácil. </p> EJERCICIO4 – COMO LO LOGRAMOS????? <p style="color:#990000"> Esto es un párrafo de color rojo. </p> <p style="color:#000099"> Esto es un párrafo de color azul. </p> EJERCICIO5 – AL INSERTAR EL CÓDIGO QUE SE OBTIENE??????? <html> <head> <title> Título de la página </title> <style type="text/css"> <!-- body {background: black; font-size: 10pt; font-family: Arial,Helvetica,sans-serif; color: yellow; text- align:justify; margin-left: 0.5in; margin-right: 0.5in} H1 {background: aqua; font-size: 14pt; font-weight: bold; color: orange} H2 {font-size: 12pt; font-weight: bold; color: white} --> </style> </head> <body> Conjunto de etiquetas del cuerpo de la página </body> </html>
  • 2. EJERCICIO6 – QUE OBTENEMOS AL TRABAJAR EL SIGUIENTE CÓDIGO <style type='text/css'> body { background-color:#345485; } h1 { color:orange; font-family:'Times New Roman'; text-align:center; } p{ color:#E9EBAB; font-family:Arial,Helvetica,sans-serif; font-size:20px; text-align:center; } </style> EJERCICIO7 – QUE OBTENEMOS????? body { background: transparent url('COLOCAR UNA IMAGEN.EXT') no-repeat center background-attachment: fixed; } h1 { color:red; font-family:'Times New Roman'; font-size:24px; font-weight:bold; text-align:center; } h2 { color:blue; font-family:Verdana, Geneva, sans-serif; font-size:20px; font-weight:bold; text-align:center; } p{ color:black; font-family:Arial, Helvetica, sans-serif; font-size:18px; text-align:center; }
  • 3. DESEO LOGRAR LO SIGUIENTE, ¿QUÉ DEBEMOS HACER? P{ font-size : 12pt; font-family : arial,helvetica; font-weight : normal; } H1 { font-size : 36pt; font-family : verdana,arial; text-decoration : underline; text-align : center; background-color : Teal; } BODY { background-color : #006600; font-family : arial; color : White; }