Autor Tema: CSS y HTML mayúsculas texto text-transform letter-spacing, word-spacing CU01042D  (Leído 3988 veces)

Boletos

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 57
    • Ver Perfil
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

Código: [Seleccionar]
<!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

Código: [Seleccionar]
/*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.
« Última modificación: 11 de Febrero 2016, 09:10 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2662
    • Ver Perfil
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

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".