Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Boletos en 09 de Febrero 2016, 03:21
-
Hola! Antes del ejercicio una cuestión: ¿por qué no me funciona esta sentencia "#div1 span:first-letter{font-size:250%;} para dividir los parrafos y cambiar la primera letra??
Ahí va el codigo:
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="ejercicio 1042"/>
<meta name="keyword" content="palabras clave"/>
<title>Ejercicio 1042</title>
<link rel="stylesheet" type="text/css" href="1042.css"/>
</head>
<body>
<div id="div1">
El div 1 debe contener un texto suficientemente largo, con
numerosos párrafos, como para exceder el tamaño del
contenedor. El texto del html debe transformarse
completamente a mayúsculas mediante el uso de propiedades
CSS. La separación entre letras debe ser un 5% superior a
lo normal. La primera letra de cada párrafo debe tener un
tamaño un 250% lo normal.
</div>
<div id="div2">
El div 2 debe contener un texto suficientemente largo como para
exceder el tamaño del contenedor. El texto del html debe
transformarse completamente a minúsculas mediante el uso
de propiedades CSS. La separación entre letras debe ser
un 10% superior a lo normal. Debe contener una palabra
(cadenadetextocualquiera)degranlongitud, de modo
que no quepa en el contenedor, y “romperse” para no
exceder la capacidad del contenedor usando la propiedad
word-wrap.
</div>
<div id="div3">
El div 3 debe contener un texto suficientemente largo como para
exceder el tamaño del contenedor. El texto del html debe
transformarse para que toda palabra comience con una
letra mayúscula mediante el uso de propiedades CSS. La
separación entre palabras debe ser un 10% superior a
lo normal. Debe contener una palabra (cadena de textocualquiera)degranlongituddemodoquenoquepaenel
contenedor, y no romperse.
</div>
</body>
</html>
css
/*Ejercicio 1042*/
div{margin:33px; width:180px; height:300px;
border:solid 6px red; float:left;}
#div1{text-transform:uppercase; letter-spacing:0.05em;}
#div1:first-letter{font-size:250%;}
#div2{text-transform:lowercase; letter-spacing:0.1em;
word-wrap:break-word;}
#div3{text-transform:capitalize; word-spacing:0.1em;}
Un saludo!! Gracias!! Por vuestra ayuda.
-
Buenas Boletos las mejoras a realizar serían:
No has aplicado bien los valores en letter-spacing. Si consideramos la medida normal como 1 em, un 5 % superior a lo normal sería 1.05em. Un 5 % inferior a lo normal sería 0.95em. Al aplicar 0.05 estás aplicando una compresión imposible, con lo que realmente no hay compresión alguna, es como si no estuviera esa regla.
Por otro lado con este fin de separación entre letras te recomiendo usar ex en lugar de em como se explica en https://www.aprenderaprogramar.com/foros/index.php?topic=3202.0
Para aplicar estilos a la primera letra de cada párrafo debes usar la sintaxis p::first-letter como se explica en el mismo hilo anterior
Fíjate que lleva ::
Los dos puntos son dobles
Salu2