« anterior próximo »
Páginas: [1]

Autor Tema: HTML y CSS poner texto en mayúsculas o minúsculas text-, word-spacing CU01042D  (Leído 12880 veces)

EnigmaticNerd

  • Principiante
  • **
  • Mensajes: 65
    • Ver Perfil
HTML y CSS poner texto en mayúsculas o minúsculas text-, word-spacing CU01042D
« en: 16 de Septiembre 2017, 01:09 »
Buenas noches. Este es el enunciado del ejercicio CU01042D del tutorial básico de programación web con CSS:

Citar
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 en horizontal, cada uno con margin 33px en todas direcciones, sin relleno, ancho de 180 píxeles, altura de 300 píxeles y borde sólido de 6 píxeles de anchura con color de borde rojo.

b) 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.

c) 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 (cadena de texto cualquiera) de gran longitud, de modo que no quepa en el contenedor, y “romperse” para no exceder la capacidad del contenedor usando la propiedad word-wrap.

d) 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 texto cualquiera) de gran longitud, de modo que no quepa en el contenedor, y no romperse.


Acá el código:

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            CU01042
        </title>
        <meta name="author" content="EnigmaticNerd"/>
        <meta name="description" content="transformar textos en css - cortar palabras largas con word-wrap - aprenderaprogramar.com"/>
        <meta name="keywords" content="CSS, cursos, diseño, text-transform, word-spacing, cortar, aprenderaprogramar.com"/>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilos/CU01042.css"/>
    </head>
        <body>
           
            <!--INICIO DEL PRIMER CONTENEDOR-->
            <div>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Nobis amet, a quos ducimus blanditiis voluptate natus doloremque temporibus.
                    Sunt, ut, magnam! Laudantium molestias quo ipsa laboriosam odit magnam,
                    delectus non.
                </p>

                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Nobis amet, a quos ducimus blanditiis voluptate natus doloremque temporibus.
                    Sunt, ut, magnam! Laudantium molestias quo ipsa laboriosam odit magnam,
                    delectus non.
                </p>

            </div>
            <!--FIN DEL PRIMER CONTENEDOR-->

            <!--INICIO DEL SEGUNDO CONTENEDOR-->
            <div>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Nobis amet, a quos ducimus blanditiis voluptate natus doloremque temporibus.
                    Sunt, ut, magnam! Laudantium molestias quo ipsa laboriosam odit magnam,
                    delectus non.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Nobis amet, a quos ducimus blanditiis voluptate natus doloremque temporibus.
                    Sunt, ut, magnam! Laudantium molestias quo ipsa laboriosam odit magnam,
                    delectus non.
                </p>
            </div>
            <!--FIN DEL SEGUNDO CONTENEDOR-->

            <!--INICIO DEL TERCER CONTENEDOR-->
            <div>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. aserejé-ja-deje-tejebetudejeberesebiunoubamajabiandebuguiandebuididipí
                    Aserejé, ja deje tejebe tude jebereSebiunouba majabi an de bugui an de buididipí
                    Nobis amet, a quos ducimus blanditiis voluptate natus doloremque temporibus.
                    Sunt, ut, magnam! Laudantium molestias quo ipsa laboriosam odit magnam,
                    delectus non.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Nobis amet, a quos ducimus blanditiis voluptate natus doloremque temporibus.
                    Sunt, ut, magnam! Laudantium molestias quo ipsa laboriosam odit magnam,
                    delectus non.
                </p>
            </div>
            <!--FIN DEL TERCER CONTENEDOR-->
        </body>
</html>


Acá la hoja de estilos css:
Código: [Seleccionar]
/*Estilos para el ejercicio CUO1042D*/

/*Estilo general para los contenedores*/
div{
    float:left;
    margin:33px;
    padding:0;
    width:180px;
    height:300px;
    border: solid 6px red;
}

/*Márgenes eliminados en todos los parrafos*/
p{
    margin:0;
}

/*Margen inferior para el primer parrafo del primer contenedor*/
div:first-child p:first-child{
    margin-bottom:10px;
}

/*Estilos para los parrafos del primer contenedor*/
div:first-child p{
   
    text-transform:uppercase;
    letter-spacing:5px;
   
}

/*Estilos para la primera letra de cada parrafo del primer contenedor*/
div:first-child p::first-letter{
    text-transform:uppercase;
    font-size:250%;
}

/*Estilos para el parrafo del segundo contenedor*/

div:nth-child(2) p{
    text-transform:lowercase;
    letter-spacing:10px;
    word-wrap:break-word;
}

/*Estilos para el parrafo del tercer contenedor*/

div:last-child p{
    text-transform:capitalize;
    word-spacing:10px;
    word-wrap:break-word;
}


Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
« Última modificación: 19 de Octubre 2017, 18:41 por Alex Rodríguez »
En línea

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Re:HTML y CSS poner texto en mayúsculas o minúsculas text-, word-spacing CU01042D
« Respuesta #1 en: 19 de Octubre 2017, 18:42 »
Hola EnigmaticNerd, el ejercicio está bien resuelto. Como ya se ha comentado en otros hilos, para evitar efectos indeseados si se introducen más elementos, en general es preferible identificar los elementos por id en lugar de con first-child y nth-child

Saludos
En línea
Páginas: [1]
« anterior próximo »
 

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".