Autor Tema: CSS. Selector de clases: CSS Class Analizar código HTML etiquetas div CU01012D (Leído 2339 veces)

Jack_F · « **en:** 28 de Diciembre 2016, 21:42 »

Selector de clases CSS: class. Aplicar estilos CSS en distintos lugares de una web. Ejemplos. (CU01012D)

Citar

EJERCICIO

Analiza el siguiente código HTML. En él encontrarás tres etiquetas div. Haz lo siguiente:

a) Establece atributos class para cada una de ellas con valores <<principal>> para la primera, y <<secundario>> para la segunda y la tercera.

b) Usando CSS establece como color de texto el rojo (red) y tamaño de fuente el 150% respecto de lo normal para los elementos cuyo valor class sea <<principal>>.

c) Usando CSS establece como color de texto el verde para los elementos y tamaño de fuente el 110% respecto de lo normal para los elementos cuyo valor class sea <<secundario>>.

d) Usando CSS establece como color de fondo para los párrafos dentro de elementos cuyo atributo class sea <<secundario>> el amarillo (yellow).

Bueno use dos metodos porque son los que voy a usar. interna y externa.
Aqui esta el ejercicio.

Externo:

Código HTML

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta name="description" content="Portal web aprenderaprogramar.com" />
<meta name="keywords" content="aprender, programar, cursos, libros" />
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="datos/css/colores.css" />
</head>
<body>
<div class="principal">
<h1>Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
</div>
<div class="secundario">
<h3>Lanzamos el producto X-FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>
</div>
<div class="secundario">
<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</div>
</body>
</html>

Código CSS

Código: [Seleccionar]

/*Curso de CSS de aprenderprogramar.com*/
.principal {color:red; font-size:150%;}
.secundario {color:green; font-size:110%;}
.secundario {background-color:yellow;}

Código interno:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<meta charset="utf-8">
<style type="text/css">
.principal {color:red; font-size:150%;}
.secundario {color:green; font-size:110%;}
.secundario {background-color:yellow;}
</style>
</head>
<body>
<div class="principal">
<h1>Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
</div>
<div class="secundario">
<h3>Lanzamos el producto X-FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>
</div>
<div class="secundario">
<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</div>
</body>
</html>

pedro,, · « **Respuesta #1 en:** 30 de Diciembre 2016, 13:52 »

Hola Jorgito.

En el apartado d, no especificaste en ningún sitio que solo debe afectar a los párrafos que se encuentren dentro de algún elementos que tenga como clase secundario. Esto quedaría así:

Código: [Seleccionar]

.secundario p {background-color:yellow;}
Por lo demás, todo bien.

Saludos.

Jack_F · « **Respuesta #2 en:** 01 de Enero 2017, 06:45 »

Hola pedro. Primero que nada agradesco tu comentario, y probe como dijiste, sin embargo,
el efecto agarra a las imagenes tambien.

Saludo.

pedro,, · « **Respuesta #3 en:** 03 de Enero 2017, 08:03 »

Las imágenes están dentro de esos párrafos, luego lo normal es que también adquieran el color de fondo a no ser que se especifique algo diferente, así que es la forma de resolver el ejercicio.

Saludos.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: