Mostrar Mensajes

Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.


Mensajes - EnigmaticNerd

Páginas: [1] 2 3 4
1
Lo siento. Recuerdo que ese día el internet estaba muy lento y no podía subir las imágenes a la página.

Acá la hoja de estilos CSS coreggida:
Código: [Seleccionar]
/*Estilos CU01031*/
*{
    margin: auto 20%;
}
div{
    width:400px;
    height:400px;
    margin:40px;
    padding:40px;
    border:1px solid blue;
    background-position: center;
}

body div:first-child{
    background-image:url(https://i.imgur.com/qCDOsCR.jpg);
   
    background-color:yellow;
}

body div:nth-child(2){
    background-image:url(https://i.imgur.com/jEd47El.jpg);
    background-color: salmon;
}

body div:nth-child(3){
    background-image:url(https://i.imgur.com/EarnVsy.jpg);
    background-color: aqua;
}

body div:last-child{
    background-image:url(https://i.imgur.com/h4JE4rA.jpg);
    background-color: brown;
}

Gracias por la corrección.

2
Corrección del ejercicio 1:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
    <head>
        <title>
            CU01030D
        </title>
        <meta charset="utf-8"/>
        <style type="text/css">
        div{
              width: 250px;
              height:250px;
              margin:30px;
              padding:30px;
}

        body div:first-child{background-color:brown;
            background-image:url(http://i.imgur.com/uxNC4tQ.jpg);
        }
        body div:nth-child(2){background-color:yellowgreen;
            background-image:url(http://i.imgur.com/79SbdgA.jpg);
        }
        body div:nth-child(3){background-color:blueviolet;
            background-image:url(http://i.imgur.com/fOwq8WK.jpg);
        }
        body div:last-child{background-color:darkcyan;
            background-image:url(http://i.imgur.com/4Ee8XKJ.jpg)
        }
       
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

Gracias por la corrección.

3
Esperaba que alguien me corrigiese este ejercicio. No terminé de comprender lo de las sumas, por ejemplo. ¿Por qué no se toma en cuenta los rellenos inferior y superior, además del bordes superior e inferior a la hora de hacer la suma?.

4
¡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.

5
Ha sido de los ejercicios más fastidiosos pero, tienes razón; el del ejemplo que sugieres se ve muy bien. Gracias por la revisión.

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

Citar
Explica paso a paso a qué da lugar cada instrucción o fragmento de código (ejemplo: .cols3 indica que se aplicarán los estilos definidos a todos los elementos html cuyo atributo class sea igual a cols3, -webkit-column-count: 3; se escribe para lograr que …). ¿Qué utilidad tiene la propiedad column-span?

Acá el código del primer documento html:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            CU01057D
        </title>
        <meta name="author" content="EnigmaticNerd"/>
        <meta name="description" content="Columnas css - aprenderaprogramar.com"/>
        <meta name="keywords" content="css, cursos, columnas, diseño, column-count, column-gap, aprenderaprogramar.com"/>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilos/CU01057.css"/>
    </head>
    <body>
        <div class="cols3">
            <h1>Ejemplo del uso de las propiedades de columnas</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati laudantium,
                explicabo a, iure hic quia, quae ducimus est ab eligendi perferendis ipsa possimus!
                Eos, ut, quisquam! Modi delectus, natus repellendus?
            </p>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati laudantium,
                explicabo a, iure hic quia, quae ducimus est ab eligendi perferendis ipsa possimus!
                Eos, ut, quisquam! Modi delectus, natus repellendus?
            </p>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati laudantium,
                explicabo a, iure hic quia, quae ducimus est ab eligendi perferendis ipsa possimus!
                Eos, ut, quisquam! Modi delectus, natus repellendus?
            </p>
           
        </div>
    </body>
</html>
</html>

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

 .cols3 {


  -webkit-column-count: 3;  -webkit-column-gap: 20px;   -webkit-column-rule: 1px solid #000;

  -moz-column-count: 3;   -moz-column-gap: 20px;  -moz-column-rule: 1px solid #000;

  column-count: 3;  column-gap: 20px;  column-rule: 1px solid #000;

 }

 .cols3 h1 {   -webkit-column-span:all;   -moz-column-span:all;   column-span:all;
 }

Descripción:

I.)-webkit-column-count:3 establece una división en tres columnas del contenido dentro del elemento con clase .cols3 para los navegadores Chrome, Safari, Android y iOs.

II.)-webkit-column-gap:20px establece una separación entre las columnas de 20 pixeles para los navegadores Chrome, Safari, Android, iOs.

III.)-webkit-column-rule:1px solid #000 hace uso de la notación shorthand column-rule en los navegadores Chrome, Safari, Android, iOs para definir el grosor, estilo y color de la línea que separa las columnas. En este caso, una línea sólida, con 1px de grosor y de color negro.

IV.)-moz-column-count:3 establece una división en tres columnas del contenido dentro del elemento con clase .cols3 para el navegador Firefox.

V.)-moz-column-gap:20px establece una separación entre las columnas de 20 pixeles para el navegador Firefox.

VI.)-moz-column-rule: 1px solid #000 hace uso de la notación shorthand column-rule en el navegador Firefox para definir el grosor, estilo y color de la línea que separa las columnas. En este caso, una línea sólida, con 1px de grosor y de color negro.

VII.)column-count: 3 establece una división en tres columnas del contenido dentro del elemento con clase .cols3.

VIII.)column-gap:20px establece una separación entre las columnas de 20 pixeles.

IX.)column-rule:1px solid #000 hace uso de la notación shorthand column-rule para definir el grosor, estilo y color de la línea que separa las columnas. En este caso, una línea sólida, con 1px de grosor y de color negro.

X.)-webkit-column-span:all establece que el elemento h1 dentro de la clase .cols3 ocupará todo las columnas en los navegadores Chrome, Safari, Android y iOs.

XI.)-moz-column-span:all establece que el elemento h1 dentro de la clase .cols3 se extenderá a lo largo de todas las columnas en el navegador Firefox.

XII.)column-span:all establece que el elemento h1 dentro de la clase .cols3 ocupará todo las columnas.

Nota: En el navegador Firefox la propiedad column-span no funciona, ni siquiera utilizando el prefijo -moz-. Según el extracto de un foro, se debe a que es una etiqueta experimental. Para conseguir el efecto deseado con column-span en el navegador Firefox, hay que hacer uso de otras técnicas css o con javascript.

Para corroborar la información, se puede visitar el siguiente link: https://teamtreehouse.com/community/column-span-not-working-for-me-on-firefox.

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

7
Buenas tardes. Este es el enunciado del ejercicio CU01054D del curso pdf de desarrollo web con CSS desde cero:

Citar
Crea un documento HTML y un archivo con la hoja de estilos CSS que cumpla con estos requisitos:

a) Deben exisitir dos contenedores (div1, div2) situados en horizontal, cada uno con margin 25px en todas direcciones, sin relleno, ancho de 200 píxeles, altura de 300 píxeles y borde sólido de 5 píxeles de anchura con color de borde violeta.

b) El div 1 debe contener un texto con varios links (etiqueta <a> de html). Al pasar el cursor sobre cualquiera de los links dentro del div1 el cursor deberá ponerse en modo help (es decir, se verá un pequeño interrogante junto al cursor).

c) El div 2 debe contener una imagen con anchura 200 píxeles y altura igual o superior a 300 píxeles. La imagen debe a su vez ser un link a otro documento HTML al que denominamos documento 2 y que debe abrirse en una nueva pestaña cuando se pulse sobre la imagen. Al pasar el cursor sobre la imagen el cursor deberá ponerse en modo zoom-in, es decir, mostrar una lupa con un pequeño + en su interior.  En el documento 2 debemos tener la misma imagen pero con mayor tamaño, por ejemplo 600 píxeles de anchura. Antes de crear el código tendrás que preparar las imágenes: partir de una imagen con un tamaño más amplio, y con la ayuda de cualquier programa de edición de imágenes crear su gemela con menores dimensiones.

Acá el código del primer documento html:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            CU01054D
        </title>
        <meta name="author" content="EnigmaticNerd"/>
        <meta name="description" content="Efectos hover con el cursor - aprenderaprogramar.com"/>
        <meta name="keywords" content="css, diseño, curso, hover, cursor, move, progress, aprenderaprogramar.com"/>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilos/CU01054.css"/>
    </head>
    <body>
       
        <div>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a> 
        </div>
       
        <div>
            <a href="CU01054B.html" title="zoom" target="_blank"><img src="https://i.imgur.com/OVvRWed.jpg" alt="goomba"/></a>
        </div>

    </body>
</html>

Acá el código del segundo documento html:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            CU01054DB
        </title>
        <meta name="author" content="EnigmaticNerd"/>
        <meta name="description" content="Efectos hover con el cursor - aprenderaprogramar.com"/>
        <meta name="keywords" content="css, diseño, curso, hover, cursor, move, progress, aprenderaprogramar.com"/>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilos/CU01054.css"/>
    </head>
    <body>
       
        <div id="img">
           <img src="https://i.imgur.com/9af0DCH.jpg" alt="goomba"/>
        </div>

    </body>
</html>

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

*{
    padding:0;
    margin:0;
}
div{
    float:left;
    margin:25px;
    width:200px;
    height:300px;
    border:5px solid purple;
    text-align:center;
}

div:first-child a{
    display:block;
    font-size:0.9em;
    margin-top:1px;
    margin-bottom:-8.5px;
    margin-left:20px;
    padding:5px;
    letter-spacing:20px;
    text-transform:capitalize;
    text-decoration:none;
}

div:first-child a:hover{
    cursor:help;
}

div:last-child img:hover{
    cursor:zoom-in;
}

#img{
    min-width:600px;
    min-height:600px;
}

#img img{
    cursor:auto;
}
[code]


Nota: En el navegador firefox el valor "zoom-in" de la propiedad cursor no se visualiza. En Chromium si.

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

8
Buenas tardes. Este es el enunciado del ejercicio CU01052D del tutorial pdf de programación web con CSS:

Citar
Crea el código HTML de una tabla con un título de tabla, cinco columnas y 7 filas (la primera ella, fila de encabezados que no son datos propiamente dichos). Aplícale los siguientes estilos, comprueba la visualización obtenida y responde a las siguientes cuestiones:

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            CU01052D
        </title>
        <meta name="author" content="EnigmaticNerd"/>
        <meta name="desription" content="Diseño de tablas css - aprendeaprogramar.com"/>
        <meta name="keywords" content="css, diseño, tablas, border-spacing, caption-side, aprenderaprogramar.com"/>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilos/CU01052.css"/>
    </head>
    <body>
        <table>
            <tr>
                <td>Aprender</td>
                <td>Trabajar</td>
                <td>Educar</td>
                <td>Laborar</td>
                <td>Emprender</td>
            </tr>
            <tr>
                <td>Motivar</td>
                <td>Incentivar</td>
                <td>Invertir</td>
                <td>Creer</td>
                <td>Estudiar</td>
            </tr>
            <tr>
                <td>Compartir</td>
                <td>Promover</td>
                <td>Concebir</td>
                <td>Atender</td>
                <td>Enseñar</td>
            </tr>
            <tr>
                <td>Afianzar</td>
                <td>Triunfar</td>
                <td>Alcanzar</td>
                <td>Descansar</td>
                <td>Añadir</td>
            </tr>
            <tr>
                <td>Resolver</td>
                <td>Concentrar</td>
                <td>Organizar</td>
                <td>Estructurar</td>
                <td>Diseñar</td>
            </tr>
            <tr>
                <td>Plantear</td>
                <td>Posicionar</td>
                <td>Comprender</td>
                <td>Abrir</td>
                <td>Cerrar</td>
            </tr>
            <tr>
                <td>Liderar</td>
                <td>Sublegar</td>
                <td>Resaltar</td>
                <td>Añorar</td>
                <td>Humanizar</td>
            </tr>
        </table>
    </body>
</html>

Código: [Seleccionar]
/*Estilos para el ejercicio CU01052*/

table {  color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border-collapse: collapse;}

td, th { border: 1px solid transparent; height: 30px; }

th { background: #D3D3D3; font-weight: bold; }

td { background: #FAFAFA; text-align: center; }

tr:nth-child(even) td { background: #F1F1F1; } 

tr:nth-child(odd) td { background: #FEFEFE; }

tr td:hover { background: #666; color: #FFF; }

Citar
a) Describe cuál es el efecto que genera cada una de las especificaciones que hemos incluido en el código CSS (Ejemplo: color: #333 da lugar a que se muestren todos los textos dentro del elemento table con color #333333, que es un color gris oscuro. Font-family: Helvetica, Arial, sans-serif; da lugar a que …).

b) Indica qué modificación habría que hacer en el código para que se muestren bordes dobles con grosor 2 píxeles.

c) Indica qué modificación habría que hacer en el código para que se muestren bordes simples de color naranja de grosor 3 píxeles.



Respuestas:

a.)color:#333 establece que todos los textos dentro del elemento table se muestren de un color grist oscuro; font-family:Helvetica, Arial, sans-serif indica que la fuente a utilizar dentro del elemento table será Helvetica, en caso de no encontrarse esa fuente se utilizará Arial o en su defecto sans-serif; width:640px, define una ancho de 640 pixeles para el elemento table; border-collapse:collapse indica que el borde de la tabla será único.

a.1)border:1px solid transparent establece que el border de los elementos td y th será transparante y con un grosor de 1px; height:30px define que los elementos td y th tendrán una altura de 30 pixeles.

a.2)background:#D3D3D3 indica que los elementos th tendrán un color de fondo plateado; font-weight:bold establece el texto de los elemento th como negrita.

a.3)background:#FAFAFA define los elementos td con un color de fondo gris claro; text-align:center indica que el texto de los elementos td se mostrará centrado.

a.4)background:#F1F1F1 establece un color de fondo gris claro para los elementos td que estén dentro de los elementos tr que sean pares.

a.5)background:#FEFEFE indica un color de fondo gris bastante claro para los elementos td que estén dentro de los elementos tr que sean impares.

a.6)background: #666 dota con un color de fondo gris semi oscuro a los elementos td sobre los que se pase el puntero por encima (hover), que a su vez estén dentro de un elemento tr; color: #FFF establece el color de texto blanco para los elementos td sobre los que se pase el puntero (hover), que a su vez estén dentro de un elemento tr.

b.)
Código: [Seleccionar]
table {  color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px;}

td, th { border: 2px solid; height: 30px; }


c.)
Código: [Seleccionar]
table {  color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border-collapse: collapse;}

td, th { border: 3px solid #F70; height: 30px; }

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

9
Buenas tardes. Este es el enunciado del ejercicio CU01051D del curso básico de desarrollo web con CSS:

Citar
Crea un documento HTML con tres tablas, todas ellas iguales, con un título de tabla, cinco columnas y 7 filas (la primera ella, fila de encabezados que no son datos propiamente dichos). Aplícale los siguientes estilos y comprueba la visualización obtenida:

a) La tabla 1 tendrá una anchura de 600 píxeles y cada columna tendrá un 20% de la anchura total de la tabla. Existirán bordes únicos de color gris y tendrán un grosor de 8 píxeles.

b) La tabla 2 tendrá una anchura igual al 100 % disponible en la ventana y cada columna tendrá un 20 % de la anchura total de la tabla. Existirán bordes dobles de color marrón y tendrán un grosor de 2 píxeles.

c) La tabla 3 tendrá una anchura de 500 píxeles y cada columna tendrá 100 píxeles de anchura. Sólo existirán bordes en la parte inferior de las filas (es decir, no habrá bordes laterales ni superiores), tipo borde único, con un grosor de 6 píxeles y color azul.

Acá el código:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            CU01051D
        </title>
        <meta name="author" content="EnigmaticNerd"/>
        <meta name="description" content="Estilos y herencia CSS en tablas - aprenderaprogramar.com"/>
        <meta name="keywords" content="css, cursos, diseño, tablas, font-size, border-collapse, aprenderaprogramar.com"/>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilos/CU01051.css"/>
    </head>
    <body>
        <table>
            <caption>Tabla 1</caption>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
        </table>

        <hr/>

        <table>
            <caption>Tabla 2</caption>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
               <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
        </table>

        <hr/>

        <table>
            <caption>Tabla 3</caption>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
        </table>
    </body>
</html>


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

hr{
    color:blue;
    height:3px;
    background-color:green;
}
table:first-child{
    width:600px;
    margin:0 auto;
}
table:first-child td{
border-collapse:collapse;
width:20%;
border:#CCC solid 8px;
text-align:center;
}

table:nth-child(3){
    margin:20px 0 30px 0px;

    width:100%;
}

table:nth-child(3) td{
    border-collapse:separate;
    width:20%;
    border:brown solid 2px;
    text-align:center;
}

table:last-child{
   
    width:500px;
    margin:20px auto;
}

table:last-child td{
    width:100px;
    border-collapse:collapse;
    border-bottom:#00F solid 6px;
    text-align:center;
}


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

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

Citar
Analiza el código HTML y CSS que mostramos a continuación y realiza una interpretación descriptiva del código, explicando el significado de cada una de sus partes (Nota: como referencia, puedes ver cómo se ha hecho la interpretación descriptiva del código de ejemplo que hemos visto anteriormente).

Código: [Seleccionar]
<html><head><title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">

<style type="text/css">

/*Curso CSS aprenderaprogramar.com*/

#nav-menu ul {font-family: sans-serif; list-style: none; padding: 0;margin: 0; }

#nav-menu li {float: left;margin: 0 0.15em; border: 5px groove #FFAA33 ;}

#nav-menu li a { background-color: #FFC0CB; height: 2em; line-height: 2em; float: left;

width: 9em; display: block; border: 0.1em solid #dcdce9; color: #0d2474; text-decoration: none; text-align: center;}

#nav-menu li a:hover {background-color: #FF6347; }

</style></head>

<body><div id="nav-menu">

<ul id="navlist">
<li id="active"><a href="http://aprenderaprogramar.com" id="current">Inicio</a></li>

<li><a href="http://aprenderaprogramar.com">Cursos</a></li>

<li><a href="http://aprenderaprogramar.com">Libros</a></li>

<li><a href="http://aprenderaprogramar.com">Divulgación</a></li>

<li><a href="http://aprenderaprogramar.com">Humor</a></li>
</ul></div></body></html>



En el código HTML:

<div id="nav-menu">: Define al contenedor que alojará al menú de navegación, como id "nav-menu".

<ul id="navlist">: Define la lista no ordenada que va a constituir el menú con el id "navlist".

<li id="active"><a href="" id="current">...</a></li>: Define un elemento li con id "active" conteniendo un elemento a con id "current".

<li>…</li>: Se crean varios elementos de li dentro de ul y dentro de nav-menu.

</ul> </div>: Se cierran los elementos.

En el código CSS:

#nav-menu ul {font-family: sans-serif; list-style: none; padding: 0;margin: 0; }: Establece el tipo de fuente en toda la lista con la familia genérica san-serif; elimina las viñetas; establece los margenes y los rellenos a 0.

#nav-menu li {float: left;margin: 0 0.15em; border: 5px groove #FFAA33 ;}: Posiciona los elementos li de forma flotante hacia la izquierda, les añade margen y les crea un borde.

#nav-menu li a { background-color: #FFC0CB; height: 2em; line-height: 2em; float: left; width: 9em; display: block; border: 0.1em solid #dcdce9; color: #0d2474; text-decoration: none; text-align: center;}: Establece un color de fondo para los elementos a que están dentro de los li; define una altura y anchura específicas para tales elementos, además de un interlineado; les define un borde solido; los dota de color, se les elimina el subrayado y se alinean, de forma que se muestren centrados dentro del elemento li.

#nav-menu li a:hover {background-color: #FF6347;}: Dota de un color de fondo a todos los elementos a dentro de elementos li, cuando se pase el mouse por encima de ellos (se haga hover).


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

11
Buenas tardes. Este es el enunciado del ejercicio CU01048D del tutorial pdf de programación web con CSS:

Citar
Crea una lista ul con 27 elementos li (puedes partir del menú que tenemos en el código HTML de base que venimos empleando a lo largo del curso si lo deseas). Sobre dicha lista aplica los siguientes estilos a los elementos de la lista: los tres primeros elementos tipo disc y outside sin usar la propiedad shorthand, los tres siguientes tipo circle e inside sin usar la propiedad shorthand, los tres siguientes tipo square e inside, los tres siguientes none, los tres siguientes decimal y outside, los tres siguientes decimal-leading-zero y outside, los tres siguientes lower-roman e inside, los tres siguientes upper-alpha e inside, y los tres últimos con una imagen mediante list-style-image.

Acá el código:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            CU01048D
        </title>
        <meta name="author" content="EnigmaticNerd"/>
        <meta name="description" content="Listas CSS - aprenderaprogramar.com"/>
        <meta name="keywords" content="Css, cursos, diseño, listas, list-style-type, list-style-position, aprenderaprogramar.com"/>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilos/CU01048.css"/>
    </head>
    <body>

        <ul>
            <div>
                <li>Ácido</li>
                <li>Ácido</li>
                <li>Ácido</li>
            </div>

            <div>
                <li>Ácido</li>
                <li>Ácido</li>
                <li>Ácido</li>
            </div>

            <div>
                <li>Ácido</li>
                <li>Ácido</li>
                <li>Ácido</li>
            </div>

            <div> 
                <li>Ácido</li>
                <li>Ácido</li>
                <li>Ácido</li>
            </div>

            <div>
                <li>Ácido</li>
                <li>Ácido</li>
                <li>Ácido</li>
            </div>
   
            <div>
                <li>Ácido</li>
                <li>Ácido</li>
                <li>Ácido</li>
            </div>

            <div>
                <li>Ácido</li>
                <li>Ácido</li>
                <li>Ácido</li>
            </div>

            <div>
                <li>Ácido</li>
                <li>Ácido</li>
                <li>Ácido</li>
            </div>

            <div>
                <li>
                    <p>Ácido</p>
                </li>

                <li>
                    <p>Ácido</p>
                </li>

                <li>
                    <p>Ácido</p>
                </li>
            </div>
        </ul>
    </body>
</html>


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

ul{
    margin:0;
}

p{
    position:relative;
    bottom:12px;
    padding-bottom:7px;
}

div:first-child :nth-child(-n+3){
    list-style-type:disc;
    list-style-position:outside;
}

div:nth-child(2) :nth-child(-n+3){
    list-style-type:circle;
    list-style-position:inside;
}

div:nth-child(3) :nth-child(-n+3){
    list-style: square inside;
}

div:nth-child(4) :nth-child(-n+3){
    list-style-type:none;
}

div:nth-child(5) :nth-child(-n+3){
    list-style-type:decimal;
    list-style-position:outside;
}

div:nth-child(6) :nth-child(-n+3){
    list-style-type:decimal-leading-zero;
    list-style-position:outside;
}

div:nth-child(7) :nth-child(-n+3){
    list-style-type:lower-roman;
    list-style-position:inside;
}

div:nth-child(8) :nth-child(-n+3){
    list-style-type:upper-alpha;
    list-style-position:inside;
}

div:last-child :nth-child(-n+3){
    margin-top:25px;
    list-style-type:katakana;
    list-style-image:url(https://i.imgur.com/fyAjgIo.png);   
}


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

12
Buenas noches. Resolución personal del ejercicio planteado CU01047D del tutorial pdf de programación web con CSS desde cero.

Acá el código:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
    <head>
        <title>CU01047</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilos/CU01047.css"/>
    </head>

    <body>

       <div name="cabecera">
           <h1>Portal web aprenderaprogramar.com</h1>

           <h2 class="a">Didáctica y divulgación de la programación</h2>

       </div>

       <div name="cuerpo">
           <br/>

<!-- menu -->
<div>
<p>Menú</p>

<li><a href="#">Inicio</a></li>
<li><a href="libros.html" >Libros de programación</a> </li>
<li><a href="cursos.html" >Cursos de programación</a> </li>
<li><a href="humor.html" >Humor informático</a> </li>
</ul>
</div>
<!-- fin menu -->

               <br/>

               <p>
                   Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan.
               </p>

             
               <p>
                   Hay que tener claro que <a href="http://aprenderaprogramar.com" target="_blank" title="Ir a aprenderaprogramar.com">aprender programación</a> no es tarea de un día ni de una semana:
                aprender programación requiere al menos varios meses y, si hablamos de programación a nivel profesional, varios años. No queremos con esto
                desanimar a nadie: en un plazo de unos pocos días podemos estar haciendo nuestros primeros programas.
              </p>

               
                <p>
                    Puedes seguir uno de <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86" target="_blank" title="Ir a cursos de programación">nuestros cursos</a> entre los varios disponibles.
                    Cuando haya que utilizar un editor de textos recomendamos el uso de uno potente y sencillo como Notepad++, aunque son válidas otras
                    alternativos como Crimson Editor.
                </p>

                    <a  href="http://www.crimsoneditor.com/english/download.html" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/0/0f/Notepad%2B%2B_Logo.png" title="Notepad" alt="Notepad++"/></a>
                   
                    <a  href="http://www.crimsoneditor.com/english/download.html" target="_blank"><img style="height: 120px;" href="https://notepad-plus-plus.org/download/v7.4.2.html" target="_blank" src="http://imag.malavida.com/mvimgbig/download-s/crimson-editor-115-0.jpg" title="Crimson" alt="Crimson editor"/></a>
                    <br/>
                    <br/>

                    <p>Si quieres contactar con nosotros envíanos este formulario relleno: </p>
                   
                    <br/>

                    <form action="#" method="get">

                        <label for="nombre">Nombre:</label>
                        <input type="text" name="nombre" id="nombre"/>

                        <br/>

                        <label for="apellidos">Apellidos:</label>
                        <input type="text" name="apellidos" id="apellidos"/>

                        <br/>

                        <label for="direccion" name="direccion">Direccion:</label>
                        <input type="text" name="direccion" id="direccion"/>

                        <br/>

                        <label for="email">Correo electrónico:</label>
                        <input type="text" name="email" id="email"/>

                        <br/>

                        <label for="mensaje">Mensaje:</label>
                        <textarea name="mensaje" id="mensaje" rows="4" cols="50"></textarea>

                        <br/>
                        <br/>

                        <input type="submit" value="Enviar"/>
                        <input type="reset" value="Cancelar"/>

                    </form>
       </div>

       <div name="pie">

            <br/>
            <br/>
            <br/>

           <img src="http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png" title="aprender" alt="aprenderaprogramar.com"/>
           Copyright 2006-2038 aprenderaprogramar.com

       </div>
           
    </body>

</html>


Acá la hoja de estilos CSS:

Código: [Seleccionar]
/*Estilos para el ejercicio CU01047*/
*{
    font-family: serif;
}

li{
    list-style-type:none;
   
}

li a:link{
    color:#B22222;
    font-weight:bold;
    text-decoration:none;
    background-image:url("https://i.imgur.com/fyAjgIo.png");
    background-repeat:no-repeat;
    display:inline-block;
    padding-left:40px;
    line-height:2.5;
   
   
}


li a:hover{
     background-image:url("https://i.imgur.com/v8CPNRw.png");
     outline:2px dotted #94F;
}

p a:link{
    color:blue;
    font-weight:bold;
    text-decoration:none;
    background-image:url("https://i.imgur.com/v8CPNRw.png");
    background-position:right;
    padding-right:40px;
    background-repeat:no-repeat;
    display:inline-block;
    line-height:2.2;
}

p a:visited{
    color:#6D006D;
}

p a:hover{
    color:#D71;
    background-image:url("https://i.imgur.com/fyAjgIo.png");
}

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

13
Buenas noches. Este es el enunciado del ejercicio CU01045D del curso de fundamentos de programación web con CSS y editor Notepad++:

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 uno debajo de otro, cada uno con margin 33px en todas direcciones, con relleno 25 px en todas direcciones, ancho 100% del disponible, y borde sólido de 5 píxeles de anchura con color de borde rojo.

b) El div 1 debe contener un texto suficientemente largo (varios párrafos), tipo de fuente genérica serif, tamaño de fuente 18 píxeles y al menos un párrafo de varias líneas con la fuente establecida como mayúscula condensada (small caps).

c) El div 2 debe contener un texto suficientemente largo (varios párrafos), tipo de fuente genérica sans serif, tamaño de fuente 14 píxeles y color del texto #B22222.

d) El div 3 debe contener un texto suficientemente largo (varios párrafos), y las propiedades de texto establecidas con la propiedad CSS font (shorthand). El tipo de fuente será genérica fantasy y el tamaño del texto 2 veces lo normal .

Acá el código:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            CU01045D
        </title>
        <meta name="author" content="EnigmaticNerd"/>
        <meta name="description" content="Css font-family, tipos de letra - aprenderaprogramar.com"/>
        <meta name="keywords" content="CSS, cursos, diseño, tipografía, font-family, font-variant, aprenderaprogramar.com"/>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilos/CU01045.css"/>
    </head>
    <body>

        <div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Quasi, quas quaerat consectetur error laboriosam vero voluptatem
                sint accusantium ipsam repellendus suscipit placeat velit recusandae
                nesciunt accusamus sequi dolorem provident sed!
            </p>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Quasi, quas quaerat consectetur error laboriosam vero voluptatem
                sint accusantium ipsam repellendus suscipit placeat velit recusandae
                nesciunt accusamus sequi dolorem provident sed!
            </p>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Quasi, quas quaerat consectetur error laboriosam vero voluptatem
                sint accusantium ipsam repellendus suscipit placeat velit recusandae
                nesciunt accusamus sequi dolorem provident sed!
            </p>
        </div>
        <div>
             <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Quasi, quas quaerat consectetur error laboriosam vero voluptatem
                sint accusantium ipsam repellendus suscipit placeat velit recusandae
                nesciunt accusamus sequi dolorem provident sed!
            </p>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Quasi, quas quaerat consectetur error laboriosam vero voluptatem
                sint accusantium ipsam repellendus suscipit placeat velit recusandae
                nesciunt accusamus sequi dolorem provident sed!
            </p>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Quasi, quas quaerat consectetur error laboriosam vero voluptatem
                sint accusantium ipsam repellendus suscipit placeat velit recusandae
                nesciunt accusamus sequi dolorem provident sed!
            </p>
        </div>
        <div>
             <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Quasi, quas quaerat consectetur error laboriosam vero voluptatem
                sint accusantium ipsam repellendus suscipit placeat velit recusandae
                nesciunt accusamus sequi dolorem provident sed!
            </p>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Quasi, quas quaerat consectetur error laboriosam vero voluptatem
                sint accusantium ipsam repellendus suscipit placeat velit recusandae
                nesciunt accusamus sequi dolorem provident sed!
            </p>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Quasi, quas quaerat consectetur error laboriosam vero voluptatem
                sint accusantium ipsam repellendus suscipit placeat velit recusandae
                nesciunt accusamus sequi dolorem provident sed!
            </p>
        </div>

    </body>
</html>


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

/*Estilos de los contenedores en general*/
div{
    margin:33px;
    padding:25px;
    width:100%;
    border:solid 5px red;
}

/*Tipografía y tamaño de letra del texto en el primer contenedor*/
div:first-child{
    font-family:serif;
    font-size:18px;
}

/*Mayúsculas condensadas en el primer parrafo del primer contenedor*/
div:first-child p:first-child{
    font-variant:small-caps;
}

/*Tipografía, tamaño y color de letra del texto en el segundo contenedor*/

div:nth-child(2){
    font-family:sans-serif;
    font-size:14px;
    color:#B22222;
}

/*Notación shorthand font para el tercer contenedor*/

div:last-child{
    font:2em "Comic Sans Ms", fantasy;
}


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

14
Buenas noches. Este es el enunciado del ejercicio CU01043D del tutorial de programación web desde cero con CSS:

Citar
Analiza el siguiente código, visualiza su resultado y responde a las preguntas:

Código: [Seleccionar]
<html>

<head>

<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">

<style type="text/css">

*{font-family: arial; }

div { width: 360px; height: 210px; margin: 10px; padding:5px 20px;

border-style: solid; border-color: red; border-width: thin;

background-color: yellow; text-align: center; float: left;}

#vcent { display: table;  }

#vcent span { display: table-cell; vertical-align:middle;}

</style>

</head>

<body>

<div><span>Línea de texto contenedor 1</span></div>

<div id="vcent"><span>Línea de texto contenedor 2</span></div>

</body>
</html>

Citar
a) ¿Cuántas cajas contenedoras hay? ¿Están identificadas por id o por class o por ninguno de ellos?

b) Visualiza el resultado en al menos dos navegadores distintos. ¿Qué diferencias observas entre ambos? ¿A qué crees que se deben?

c) ¿Por qué el texto <<Línea de texto contenedor 2>> se muestra centrado verticalmente?

d) Modifica el código para que el texto <<Línea de texto contenedor 1>> se muestre centrado verticalmente.



Acá las respuestas:

R.a) Hay dos cajas contenedoras y la segunda está identificada por id.

R.b) Las pruebas se realizaron en chromium y firefox; no presentó diferencias.

R.c) Utilizando la propiedad vertical-align con el valor middle, el elemento se centra como si de la celda de una tabla se tratara. El atributo span se visualiza como si fuese la celda de una tabla, gracias a los valores table y table-cell de la propiedad display.

R.d)

Código: [Seleccionar]
<html>

<head>

<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">

<style type="text/css">

*{font-family: arial; }

div { width: 360px; height: 210px; margin: 10px; padding:5px 20px;

border-style: solid; border-color: red; border-width: thin;

background-color: yellow; text-align: center; float: left;}

#vcent { display: table;  }

#vcent span { display: table-cell; vertical-align:middle;}

div:first-child{
    display:table;
}

div:first-child span{
    display:table-cell; vertical-align:middle;
}
</style>

</head>

<body>

<div><span>Línea de texto contenedor 1</span></div>

<div id="vcent"><span>Línea de texto contenedor 2</span></div>

</body>
</html>

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

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

16
Buenas noches. Este es el enunciado del ejercicio CU01041D del tutorial de fundamentos 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 18px en todas direcciones, relleno de 8 píxeles en todas direcciones, ancho de 240 píxeles, altura de 300 píxeles y borde sólido de 3 píxeles de anchura con color de borde azul.

b) El div 1 debe contener un texto suficientemente largo como para exceder el tamaño del contenedor, y el excedente de texto no debe mostrarse apareciendo en el punto final unos puntos … . La altura de línea debe ser un 5 % superior a lo normal. Un fragmento del texto (delimitarlo con span) debe tener tamaño de fuente 18 píxeles y una sombra sólida de color rojo con desplazamiento hacia la derecha y abajo.

c) El div 2 debe contener un texto suficientemente largo como para exceder el tamaño del contenedor, y el excedente de texto no debe mostrarse aunque rebase al contenedor, y no deben aparecer puntos en el lugar donde se corte el texto. La altura de línea debe ser un 10 % superior a lo normal. Un fragmento del texto (delimitarlo con span) debe tener tamaño de fuente 18 píxeles y una sombra sólida de color azul con desplazamiento hacia la izquierda y abajo.

d) El div 3 debe tener alineación del texto justificada y color de texto #8B4513. Debe contener un texto suficientemente largo como para exceder el tamaño del contenedor. La altura de línea debe ser un 20 % superior a lo normal. Un fragmento del texto (delimitarlo con span) debe tener tamaño de fuente 18 píxeles y una sombra con efecto de difuminado de color verde de modo que parezca que existe vapor verde detrás del texto.


Acá el código:

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            CU01041
        </title>
        <meta name="author" content="EnigmaticNerd"/>
        <meta name="description" content="Efecto sombra en css con text-shadow y blur - aprenderaprogramar.com"/>
        <meta name="keywords" content="css, text-overflow, text-shadow, line-height, cursos, aprenderaprogramar.com"/>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilos/CU01041.css"/>
    </head>
    <body>

        <div>
            <p>
                <span>Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit.
                Sapiente consequuntur aliquam rem enim, culpa debitis.
                Reiciendis culpa fugiat accusamus ipsa necessitatibus voluptas
                impedit aut odit non eius vero tempore, provident.
            </p>

            <p>
                <span>Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit.
                Sapiente consequuntur aliquam rem enim, culpa debitis.
                Reiciendis culpa fugiat accusamus ipsa necessitatibus voluptas
                impedit aut odit non eius vero tempore, provident.
            </p>
           
       
        </div>

        <div>
             <p>
               <span>Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit.
                Sapiente consequuntur aliquam rem enim, culpa debitis.
                Reiciendis culpa fugiat accusamus ipsa necessitatibus voluptas
                impedit aut odit non eius vero tempore, provident.
            </p>
           
       
        </div>

        <div>
             <p>
               <span>Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit.
                Sapiente consequuntur aliquam rem enim, culpa debitis.
                Reiciendis culpa fugiat accusamus ipsa necessitatibus voluptas
                impedit aut odit non eius vero tempore, provident.
            </p>
 
    </body>
</html>


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

div{
    float:left;
    margin:18px;
    padding:8px;
    width:240px;
    height:300px;
    border: solid 3px #00F;
}

div:first-child p{
    margin:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    line-height:5;
}

span{
    font-size:18px;
}

div:first-child span{

    text-shadow: 3px 2px #F00;
}

div:nth-child(2)  p{
    margin:0;
    overflow:hidden;
    white-space:nowrap;
    line-height:10;
}

div:nth-child(2) span{
    text-shadow: -7px 2px #00F;
}

div:last-child p{
    text-align:justify;
    color:#8B4513;
    line-height:2;
}

div:last-child span{
    text-shadow: 2px 2px 7px #0F0;
}

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

17
Buenas noches. Este es el enunciado del ejercicio CU01040D del tutorial de programación web con CSS desde cero:

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 20px en todas direcciones, relleno de 10 píxeles en todas direcciones, ancho de 200 píxeles, altura de 400 píxeles y borde sólido de 4 píxeles de anchura.

b) El div 1 debe tener alineación del texto centrada, color de texto #FF6347. Debe contener un texto suficientemente largo, con algunas palabras subrayadas y el primer párrafo indentado un 10%.

c) El div 2 debe tener alineación del texto a la derecha, color de texto #008080. Debe contener un texto suficientemente largo, con algunas palabras subrayadas por encima y el primer párrafo indentado en 50 píxeles. Este div estará definido en el HTML como un texto con saltos de línea definidos en ciertos puntos. Al mostrarse por pantalla, deben usarse propiedades CSS para se mantengan los saltos de línea definidos en el documento HTML, se colapsen secuencias de espacios en blanco y se usen espacios en blanco para generar nuevas líneas si es necesario

d) El div 3 debe tener alineación del texto justificada, color de texto #8B4513. Debe contener un texto suficientemente largo, con algunas palabras tachadas, y el primer párrafo indentado en un 20%. Además el texto contendrá una frase donde existan 15 espacios en blanco seguidos, y dichos espacios deben mostrarse cuando se visualice el texto (si coincide con un borde del contenedor deberán continuar en una nueva línea).


Acá el código:

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>CU01040D</title>
        <meta name="author" content="EnigmaticNerd"/>
        <meta name="description" content="propiedades para control de texto css - aprenderaprogramar.com"/>
        <meta name="keywords" content="propiedades, text-ident, white-space, text-align, curso, css, diseño, aprenderaprogramar.com"/>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilos/CU01040B.css"/>
    </head>
    <body>
        <div>
            <p>
                Lorem ipsum dolor sit amet, <span>consectetur</span> adipisicing elit.
                Quibusdam veniam officiis alias unde <span>blanditiis</span> assumenda eius facere,
                voluptatem, non <span>perspiciatis</span> provident at nesciunt porro eaque reprehenderit
                magni error nobis ipsam.
            </p>
        </div>

        <div>
            <p>
                Lorem ipsum dolor sit amet, <span>consectetur</span> adipisicing elit.
                Quibusdam veniam officiis alias unde <span>blanditiis</span> assumenda eius facere,
                voluptatem, non <span>perspiciatis</span> provident at nesciunt porro eaque reprehenderit
                magni error nobis ipsam.
            </p>
        </div>
       
        <div>
            <p>
                Lorem ipsum dolor sit amet, <span>consectetur</span> adipisicing elit.
                Quibusdam veniam officiis alias unde <span>blanditiis</span> assumenda eius facere,
                voluptatem,               non <span>perspiciatis</span> provident at nesciunt porro eaque reprehenderit
                magni error nobis ipsam.
            </p>
        </div>
    </body>
</html>


Acá la hoja de estilos css:
Código: [Seleccionar]
/*Estilos del ejercicio CU01040D*/

/*Estilos para todos los div*/
div{
    margin:20px;
    padding:10px;
    width:200px;
    height:400px;
    border: solid 4px;
}

/*Propiedades del primer div*/
div:first-child p{
    text-align:center;
    color:#FF6347;
    text-indent:10%;
}

div:first-child span{
    text-decoration:underline;
}

/*Propiedades del segundo div*/
div:nth-child(2) p{
    text-align:right;
    color:#008080;
    text-indent:50px;
    white-space:pre-line;
}

div:nth-child(2) span{
    text-decoration:overline;
}

/*Propiedades del tercer div*/
div:last-child p{
    text-align:justify;
    color:#8B4513;
    text-indent:20%;
    white-space:pre-wrap;
}

div:last-child span{
    text-decoration:line-through;
}


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

18
Buenas noches. Este es el enunciado del ejercicio CU01039D del tutorial básico de desarrollo web con CSS desde cero:

Citar
Analiza el siguiente código, visualiza su resultado y responde a las preguntas:


Acá el código:

Código: [Seleccionar]
<html>

<head>

<title>Ejemplo aprenderaprogramar.com</title>

<meta charset="utf-8">

<style type="text/css">

*{font-family: sans-serif;}

#cajaGris { width: 225px; height: 225px; border: solid 1px #ccc; background: #ddd; margin-top:20px;}

#cajaAzul {width: 225px; height: 225px; border: solid 3px #4a7497;

background: #8daac3; margin-top: -50px; margin-left: 50px;}

#cajaOcre { width: 225px; height: 225px; border: solid 2px #8b6125;

background: #ba945d; margin-top: -50px; margin-left: 100px; margin-bottom: 20px;}

</head>

</style>

<body>

<div id ="cajaGris">Caja gris</div><div id ="cajaAzul">Caja azul</div><div id ="cajaOcre">Caja ocre</div>

</body>
</html>

Citar
a) ¿Cuántas cajas contenedoras hay? ¿Están identificadas por id o por class?

b) ¿Cuál es el grosor del borde de la caja azul y en qué unidades está expresado?

c) ¿Por qué se superponen unas cajas encima de otras? ¿En qué orden aparecen las cajas superpuestas (es decir, cuál está arriba, cuál está en posición intermedia y cuál está en el fondo)? ¿Por qué aparecen con ese orden y no otro?

d) Queremos que la caja gris se sitúe por encima del resto de cajas. ¿Qué modificaciones en el código hemos de hacer para lograr este objetivo?

e) Modifica el código para que la caja ocre quede en el fondo, la caja azul en posición intermedia y la caja gris encima.



R.a) Hay 3 cajas contenedoras identificadas mediante id.

R.b) El grosor de la caja es de tres pixeles.

R.c)Se superponen debido a los márgenes verticales negativos que tienen establecidos las cajas azul y ocre. Dado que tales márgenes no son aditivos, se produce el solapamiento; La caja que está arriba es la ocre, la intermedia, azul y la de fondo, gris. Se muestran en ese orden porque es el establecido en el código html, por ejemplo: si se cambiara de posición algunos de los div dentro de la etiqueta body, los estilos de esos contenedores se comportarían de manera impredecible.

R.d)Se establece la propiedad position con el valor relative a la caja gris, la cual, posiciona al elemento respecto a lo que sería su posición normal y debido a que el uso del valor relative no modifica la posición de las cajas adyacentes, se produce el solapamiento. El resultado final es la visualización de la caja por encima de sus sucesoras.

En el caso de que se establezca la posición relative a las cajas intermedia azul u ocre, estas se colocarían por encima, cancelando el efecto de la posición relativa en la caja gris. Esto se evita, haciendo uso de la propiedad z-index en la regla css de la caja gris. Logrando que la caja gris quede establecida por encima de las demás cajas de una vez por todas.

e.)
Código: [Seleccionar]
<!DOCTYPE html>
<html>

<head>

<title>CU01039D</title>

<meta charset="utf-8">

<style type="text/css">

*{font-family: sans-serif;}

div{width:225px; height:225px;}

#cajaGris {position:relative; z-index:2; border: solid 1px #ccc; background: #ddd; margin-top:20px;
left:101px; top:359px; }

#cajaAzul {position:relative; border: solid 3px #4a7497;background: #8daac3; margin-top: -50px; margin-left: 50px;}

#cajaOcre {border: solid 2px #8b6125;
    background: #ba945d;  margin-top: -408px; margin-left: -2px;  margin-bottom: 20px;
}


</style>
</head>

<body>

<div id ="cajaGris">Caja gris</div>

<div id ="cajaAzul">Caja azul</div>

<div id ="cajaOcre">Caja ocre</div>

</body>
</html>



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

19
Buenas noches. Este es el enunciado del ejercicio CU01038D del curso básico de desarrollo web con CSS:

Citar
Crea un contenedor div con las siguientes características definidas a través de CSS: ancho y alto 200 píxeles, color de fondo amarilo, borde color azul de 2 píxeles de ancho tipo sólido, un texto de tamaño 30 píxeles y con un largo suficiente para exceder la capacidad del div contenedor, y mediante la propiedad overflow haz que aparezcan scrolls horizontal y vertical que permitan visualizar todo el texto.

Acá el código:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>CU01038D</title>
        <meta name="author" content="EnigmaticNerd"/>
        <meta name="description" content="propiedad overflow css - aprenderaprogramar.com"/>
        <meta name="keywords" content="overflow, overflow-x, overflow-y, cursos, aprenderaprogramar.com, CU01038D"/>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilos/CU01038B.css"/>
    </head>
    <body>
        <div id="contenedor">
            <div>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                     Quae pariatur, vero laboriosam eaque. Tempore necessitatibus maxime, ab,
                     cupiditate cumque nulla tenetur adipisci ipsa beatae totam in fugiat reprehenderit harum animi.   
                </p>

            </div>
        </div>


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

#contenedor{
    width:170px;
    margin:auto;
   
}
#contenedor div{
    width:200px;
    height:200px;
    background-color:#FF0;
    border: solid 2px #00F;
    overflow:scroll;
}

p{
    margin:5px;
    font-size:30px;
}



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

20
Buenas noches. A continuación, la corrección del código:

Acá el código html:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="author" content="EnigmaticNerd"/>
        <meta name="description" content="Diseños web css - aprenderaprogramar.com"/>
        <meta name="keywords" content="diseño, css, columnas, float, cursos, aprenderaprogramar.com, CU01035D"/>
        <link rel="stylesheet" type="text/css" href="estilos/CU01036B.css"/>
    </head>
    <body>

<div id="contenedor">
<header>
<p>Bienvenidos a aprenderaprogramar.com</p>
</header>
<div id="cuerpo">
<div id="menu">
<p>Menú</p>
<ul>
<li>Cursos</li>
<li>Humor</li>
<li>Divulgación</li>
</ul>
</div>

<div id="c1">
<p>Conoce las últimas novedades del lenguaje JavaScript.</p>
</div>
<div id="c2">
<p>Artículo sobre Gimp, un programa de software libre para el diseño gráfico.</p>
</div>

<div id="publi">
<p>Espacio reservado para publicidad</p>
</div>
</div>
<footer>
<div id="contacto">
<p>Contacta con nosotros</p>
</div>
<div id="aviso">
<p>Aviso legal</p>
</div>
</footer>
</div>
    </body>
</html>

Acá la hoja de estilos CSS:
Código: [Seleccionar]
/*Estilos para el ejercicio CU01036D*/
*{
    margin:0;
    padding:0;
}

header{
    margin:10px 10px 1px;
    padding:25px;
    text-align:center;
    border:solid thin black;
    background-color:#DEB887;
}

#menu{
    float:left;
    text-align:center;
    margin:-1px 9.5px;
    border:solid thin black;
    width:30%;
    height:159px;
    line-height:1.5;
}

#menu p{
    margin-top:20px;
}

#c1{
    float:left;
    text-align:center;
    width:39.9%;
    margin:-1px -10px;
    border:solid thin black;
    padding:25px;
    background-color:#ADD8E6;
}

#c2{
    float:left;
    width:40.1%;
    padding:24px;
    margin-top:2px;
    margin:1px -10px;
    border:solid thin black;
    background-color:#90EE30;
}

#publi{
    float:left;
    border:solid thin black;
    width:22.3%;
    padding:15px;
    height:127.4px;
    margin:-70px 10px;
}

#publi p{
    width:210px;
    text-align:center;
 
    margin:20px 50px;
}

#contacto{
    float:left;
    border:solid thin black;
    padding:10px;
    margin:-2px 0px 0 10px;
    width:50%;
    text-align:center;
    background-color:#DDA0DD;
}

#aviso{
    float:left;
    border:solid 1px black;
    padding:10px;
    margin:-1.8px 0px 0 -1px;
    width:45.4%;
    text-align:center;
}

Gracias por la corrección.

Páginas: [1] 2 3 4

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