Autor Tema: CSS diferentes tipos de bordes con border-style dashed groove double CU01026D (Leído 2547 veces)

EnigmaticNerd · « **en:** 22 de Agosto 2017, 20:17 »

Buenas tardes. Este es el enunciado del ejercicio CU01026D del tutorial de programación web con CSS desde cero:

Citar

Crea un documento HTML con 10 divisiones, cada una separada de la anterior por dos elementos <br/>. En cada división introduce un texto (p.ej. div 1, div 2, div 3…) y aplícale un estilo de borde diferente utilizando la propiedad border-style.

Acá el código:

Código: [Seleccionar]

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

        body{text-align:center;}

        body div:first-child{border: solid;border-top-style:dashed; }

        body div:nth-child(3){border:groove dodgerblue 5px;}

        body div:nth-child(5){
             border-top-color:red;
             border-bottom-style:double;
             border-bottom-color:deeppink;
             border-right-style:inset;
             border-top-style:dashed;
             border-left-style:inset;
            }
    
        body div:nth-child(7){border: inset purple 4px;}

        body div:nth-child(9){border:double red 3px;}

        body div:nth-child(11){border:dotted crimson 4px;}

        body div:nth-child(13){
            border:solid;
            border-left-width: 0.5px; 
            border-right-width:0.5px;
            border-color:darkgoldenrod;}
        
        body div:nth-child(15){
            border:groove;
            border-top-width:20px;
            border-bottom-width:20px;
            border-right-width:20px;
            border-left-width:20px;
            border-top-color:springgreen;
            border-left-color:blue;
            border-right-color:pink;
            border-bottom-color:brown;
            }

        body div:nth-child(17){
            border:inset 20px salmon;
        }

        body div:nth-child(19){
            border: 20px;
            border-top-style:dotted;
            border-left-style:dotted;
            border-right-style:dotted;
            border-bottom-style:dotted;
            border-top-color:blue;
            border-left-color:yellow;
            border-right-color:red;
            border-bottom-color:green;
        }
        </style>

</head>
<body>
    <div>
        <p>Aprender</p>
    </div>
    <br/>
    <div>
        <p>A</p>
    </div>
    <br/>
    <div>
        <p>Diseñar</p>
    </div>
    <br/>
    <div>
        <p>Es</p>
    </div>
    <br/>
    <div>
        <p>Emocionante</p>
    </div>
    <br/>
    <div>
        <p>Y</p>
    </div>
    <br/>
    <div>
        <p>Deseo</p>
    </div>
    <br/>
    <div>
        <p>Poder</p>
    </div>
    <br/>
    <div>
        <p>Seguir</p>
    </div>
    <br/>
    <div>
        <p>Haciéndolo</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:38 »

Hola EnigmaticNerd, ejercicio correcto

En general no será conveniente usar demasiado nth-child para identificar elementos porque basta con que haya un cambio en la página para que se te desconfigure. Por ello puede ser preferible usar identificadores id como en https://www.aprenderaprogramar.com/foros/index.php?topic=3708.0

Intenta poner los títulos a los temas incluyendo las palabras clave del tema. Por ejemplo en lugar de "Ejercicio CU01026D de Aprender a programar:CSS desde cero. Tipos de bordes"

sería "CSS diferentes tipos de bordes con border-style dashed groove double CU01026D"

Saludos

EnigmaticNerd · « **Respuesta #2 en:** 24 de Septiembre 2017, 22:51 »

¡Gracias! Se me hacía raro que nadie me dijese nada por el uso constante de nth-child, me encariñé mucho con la pseudoclase por lo fácil que es manipular los elementos. No había hecho cuenta en esa desventaja, procuraré tomarlo en cuenta para el futuro.

Gracias por la corrección.

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

Noticias: