Autor Tema: HTML y CSS diferencia entre la notación extendida y notación Shorthand CU01027D (Leído 2047 veces)

EnigmaticNerd · « **en:** 22 de Agosto 2017, 21:33 »

Buenas tardes. Este es el enunciado del ejercicio 1 de la entrega CU01027D del curso básico de desarrollo web CSS como si estuviera en primero:

Citar

Crea un documento HTML con 2 divisiones, cada una separada de la anterior por dos elementos <br/>. En cada división introduce un texto (p.ej. div 1, div 2) y aplícale los siguientes estilos de borde escribiendo de forma individual cada una de las siguientes propiedades CSS:

a) Para el div 1: la parte superior con borde de puntos redondeados, grosor 10 píxeles y color verde. La parte derecha con borde de trazos o segmentos rectangulares, grosor 20 píxeles y color azul. La parte inferior con borde de línea doble, grosor 10 píxeles y color #A52A2A. La parte izquierda con borde con efecto groove, grosor 30 píxeles y color #2F4F4F.

b) Para el div 2: la parte superior con borde con efecto inset, grosor 30 píxeles y color #B22222. La parte derecha con borde sólido, grosor 22 píxeles y color #DAA520. La parte inferior con borde de línea doble, grosor 25 píxeles y color #4B0082. La parte izquierda con borde de puntos redondeados, grosor 17 píxeles y color #808000.

Acá el código:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8"/>
    <title>CU01026D</title>
</head>
<style type="text/css">

    body div:first-child{
        border-top-style:dotted;
        border-top-width:10px;
        border-top-color:green;
        border-right-style:dashed;
        border-right-width:20px;
        border-right-color:blue;
        border-bottom-style:double;
        border-bottom-width:10px;
        border-bottom-color:#A52A2A;
        border-left-style:groove;
        border-left-width:30px;
        border-left-color:#2F4F4F;
    }

    body div:last-child{
        border-top-style:inset;
        border-top-width:30px;
        border-top-color:#B22222;
        border-right-style:solid;
        border-right-width:22px;
        border-right-color:#DAA520;
        border-bottom-style:double;
        border-bottom-width:25px;
        border-bottom-color:#4B0082;
        border-left-style:dotted;
        border-left-width:17px;
        border-left-color:#808000;
    }

    </style>
<body>
    <div>
        <p></p>
    </div>
    <br/>
    <div>
        <p></p>
    </div>
</body>
</html>

Este es el enunciado del ejercicio 2:

Citar

Crea un documento HTML con el mismo aspecto y propiedades CSS que las descritas para el ejercicio 1, pero en este caso usando la notación shorthand de bordes CSS y la propiedad border abreviada. Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

Acá el código:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8"/>
    <title>CU01027D</title>
</head>
<style type="text/css">

    body div:first-child{
       border-top:dotted 10px green;
       border-right:dashed 20px blue;
       border-bottom:double 10px #A52A2A;
       border-left:groove 30px #2F4F4F;
    }

    body div:last-child{
        border-top:inset 30px #B22222;
        border-right:solid 22px #DAA520;
        border-bottom:double 25px #4B0082;
        border-left:dotted 17px #808000;
    }

    </style>
<body>
    <div>
        <p></p>
    </div>
    <br/>
    <div>
        <p></p>
    </div>
</body>
</html>

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.

Alex Rodríguez · « **Respuesta #1 en:** 24 de Septiembre 2017, 18:45 »

Hola EnigmaticNerd, ejercicio correcto

Algunos bordes no se ven bien porque el div es muy pequeño. El borde izquierdo no se ve porque el div es demasiado pequeño en altura. Puede solucionarse añadiendo height:200px; o similar

Saludos

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

Noticias: