Autor Tema: Tipografía CSS font-family propiedad shortand font tipo fuent Ejercicio CU01045D (Leído 2825 veces)

pedro,, · « **en:** 18 de Septiembre 2015, 17:44 »

Un nuevo ejercicio de CSS

Citar

EJERCICIO
Crea un documento HTML y un archivo con la hoja de estilos CSS que cumpla con estos requisitos:

a) Deben exisitir tres contenedores (div1, div2 y div3) situados uno debajo de otro, cada uno con margin 33px en todas direcciones, con relleno 25 px en todas direcciones, ancho 100% del disponible, y borde sólido de 5 píxeles de anchura con color de borde rojo.
b) El div 1 debe contener un texto suficientemente largo (varios párrafos), tipo de fuente genérica serif, tamaño de fuente 18 píxeles y al menos un párrafo de varias líneas con la fuente establecida como mayúscula condensada (small caps).
c) El div 2 debe contener un texto suficientemente largo (varios párrafos), tipo de fuente genérica sans serif, tamaño de fuente 14 píxeles y color del texto #B22222.
d) El div 3 debe contener un texto suficientemente largo (varios párrafos), y las propiedades de texto establecidas con la propiedad CSS font (shortand). El tipo de fuente será genérica fantasy y el tamaño del texto 2 veces lo normal .

Código HTML:

Código: [Seleccionar]

<html>
	<head>
		<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="Ejercicio_estilosCU01045D.css">
	</head>
	<body>
		<div id="caja1">
			<p>Los úrsidos(Ursidae) son una familia de mamíferos carnívoros conocidos comúnmente como osos. Son animales de gran tamaño, generalmente omnívoros ya que, a pesar de su temible dentadura, comen frutos, raíces e insectos, además de carne.</p>
			<p>Sin embargo, <span id="mayusCondensadas">el oso polar, debido a la escasez de otras fuentes de alimento</span>, se alimenta casi únicamente de carne. Con sus pesados cuerpos y sus poderosas mandíbulas, los osos se cuentan entre los mayores carnívoros que viven en la Tierra.</p>
			<p>Un macho de oso polar pesa en promedio 500 kg y alcanza una talla de hasta 130 cm a la altura de la cruz.</p>
			<p>Se mueven con un caminar pesado, apoyando toda la planta de los pies (son, por lo tanto, animales plantígrados).</p>
		</div>
		<div id="caja2">
			<p>Las serpientes (Serpentes) u ofidios (Ophidia) (Electrocardiográficamente)son un suborden de saurópsidos (reptiles) diápsidos pertenecientes al orden Squamata.</p>
			<p>Psuperorden de los Lepidosaurios, caracterizado por la ausencia de patas (la pitón mantiene diminutas extremidades fruto de su proceso evolutivo)1 y el cuerpo muy alargado.</p>
			<p>Se originaron en el período Cretácico.</p>
			<p>Las serpientes se caracterizan por la ausencia de extremidades y cuerpo alargado. Algunas poseen mordeduras venenosas, como las cobras y las víboras, que utilizan para matar a sus presas antes de ingerirlas. Otras serpientes, como las boas y pitones, matan a sus presas por constricción.</p>
		</div>
		<div id="caja3">
			<p>El leopardo es uno de los grandes felinos más adaptables. Supercalifragilisticoespialidoso.</p>
			<p>Electrocardiográficamente. Excepto en desiertos, habita en todo tipo de hábitats, siempre que tenga un lugar donde esconderse y existan suficientes presas para sobrevivir; se encuentra presente en todo tipo de bosques y selvas, en las sabanas, en los sembrados y en lugares rocosos.</p>
			<p>En algunos hábitats, el leopardo desarrolla formas para evadir a otros depredadores mayores o más numerosos como es el caso del león y las hienas en África y el tigre en Asia.</p>
			<p>Se denomina así a los leopardos melánicos.</p>
			<p>El color negro es producido por una gran cantidad de melanóforos (células pertenecientes a una de las capas de la piel) distribuidos por toda la superficie corporal.</p>
			<p>Realmente, el único factor que limita al leopardo son las personas.</p>
		</div>
	</body>
</html>

Código CSS:

Código: [Seleccionar]

div{	border: solid 5px red;	margin: 33px;	padding: 25px;}
#caja1{	font-family: serif;	font-size: 18px;}
#mayusCondensadas{font-variant: small-caps;}
#caja2{	font-family: sans-serif; font-family: 14px;	color: #B22222;}
#caja3{	font: 2ex fantasy;}

Saludos

César Krall · « **Respuesta #1 en:** 21 de Septiembre 2015, 11:26 »

Hola Pedro!

Todo perfecto

Para tener en cuenta de cara a la lógica de organización del CSS, puede ser preferible .mayusCondensadas{font-variant: small-caps;} en vez de #mayusCondensadas{font-variant: small-caps;}

Los elementos span normalmente se dotan de estilo con clases en lugar de con ids.

¿Por qué? Porque de ese modo puedes utilizar el estilo en varios elementos (en cambio el id es único), esto es con vistas al desarrollo en general, en este ejercicio no tiene importancia

Saludos!

pedro,, · « **Respuesta #2 en:** 21 de Septiembre 2015, 13:04 »

Ok, tiene su lógica como siempre me lo apunto.

Gracias.

Saludos.

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

Noticias: