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.


Temas - Pandemia

Páginas: 1 2 3 4 5 6 [7] 8
121
Buenas noches amigos aquí os dejo el ejercicio a ver qué os parece, he tenido un poco de dificultad pero creo que al final a salido bien al final, bueno ya me diréis.

Gracias por vuestro tiempo.
Saludos.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<title>Efecto css de esquinas redondeadas: border-radius. portal web aprenderaprogramar.com</title>
<meta name="description" content="portal web aprenderaprogramar.com">
<meta name="keywords" content="efecto css de esquinas redondeadas: border-radius">
<meta charset="utf-8">

<style>
*{margin: 10px;}
table{
float: left;
background-color: #e2dcdc;
text-align: center;
margin: 50px 1px 50px 1px;
font-size: 20px;
border-radius: 3%;
font-family: helvetica,arial;
}
.tabla-3{background-color: #dcf9bb;}
.visto{
  color: #7EE57E;
      font-weight:900;
      text-shadow: 1px 1px green, -1px -1px green;
}
.aspa{
color: #FF6F71;
     font-weight: 900;
     text-shadow: 1px 1px red, -1px -1px red;
}
th, td {
padding: 15px 50px 15px 50px;
margin: 20px;
border-bottom: 1px solid #dbd9d9;
}
tfoot th {
border-bottom-style: hidden;
}
</style>

</head>
<body>

<table class="tabla-1">

<thead>
<tr>
<th>Standar</th>

</tr>
</thead>

<tbody>
<tr class="visto">

<td>&#10003;</td>

</tr>
<tr class="visto">

<td>&#10003;</td>

</tr>
<tr class="aspa">

<td>&#10008;</td>

</tr>
<tr class="aspa">

<td>&#10008;</td>

</tr>

</tbody>
<tfoot>

<th>$99</th>

</tfoot>
</table>

<table class="tabla-2">

<thead>
<tr>

<th>Profesional</th>

</tr>
</thead>
<tbody>

<tr class="visto">

<td>&#10003;</td>

</tr>
<tr class="visto">

<td>&#10003;</td>

</tr>
<tr class="visto">

<td>&#10003;</td>

</tr>
<tr class="aspa">

<td>&#10008;</td>

</tr>

</tbody>

<tfoot>

<th>$199</th>

</tfoot>

</table>
<table class="tabla-3">

<thead>
<tr>

<th>Enterprise</th>

</tr>
</thead>
<tbody>

<tr class="visto">

<td>&#10003;</td>

</tr>
<tr class="visto">

<td>&#10003;</td>

</tr>
<tr class="visto">

<td>&#10003;</td>

</tr>
<tr class="visto">

<td>&#10003;</td>

</tr>

</tbody>

<tfoot>

<th>$399</th>

</tfoot>

</table>


</body>

</html>


122
Buenas tardes amigos aquí os dejo un ejercicio más a ver qué os parece, como siempre gracias por vuestro tiempo. Os dejo después del css las respuestas escritas para una mejor lectura.

Saludos.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<title>Columnas CSS. column-count, column-width, columns, column-gap, y column-rule</title>
<meta name="description" content="portal web - aprenderaprogramar.com">
<meta name="keywords" content="columnas css">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos31.css">
</head>
<body>
<h1>Textos Bonitos Para Ti</h1>
<br/>
<div class="cols3">

Hoy fue, absolutamente el peor día de todos
Y no trates de convencerme de que
Hay algo bueno en cada día
Porque cuando miras con más atención,
Este mundo es un lugar muy cruel
Incluso si
Algunas bondades brillan de vez en cuando
La satisfacción y felicidad no perduran
Y no es verdad que
Está todo en la mente y corazón
Porque
La verdadera felicidad se puede obtener
Solo si lo que te rodea es bueno
No es verdad que el bien existe
Estoy seguro de que concuerdas con eso
La realidad
Crea
Mi actitud
Todo está más allá de mi control
Y en millones de años nunca me vas a escuchar decir que
Hoy fue un buen día.
Ahora léelo de arriba a bajo. Las cosas cambian según la perspectiva.




</div>


</body>

</html>


Y ahora el CSS...

Código: [Seleccionar]

/*Ejercicio CU01055D del curso CSS aprenderaprogramar.com, columnas css. */



.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;
 }

[color=maroon]/*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?[/color]

RESPUESTA:


.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 con el prefijo webkit que se aplica a los navegadores chrome, safari, android, e ios, asegurarnos que estos navegadores ya reconoceran la etiqueta que sirve para dar 3 columnas.

-webkit-column-gap: 20px; se escribe para lograr que con el prefijo webkit, que se aplica a los navegadores anteriormente mencionados, asegurarnos que reconoceran la etiqueta que sirve para dar el ancho de las columnas 20px, en nuestro caso.

-webkit-column-rule: 1px solid #000; se escribe para lograr que con el prefijo webkit, que se aplica a los navegadores anteriormente mencionados, asegurarnos que reconoceran la etiqueta para establecer el ancho, estilo, y color de la línea de separación entre columnas, 1px de ancho de linea, estilo solido, color negro.

-moz-column-count: 3; lo mismo que en webkit, pero en este caso moz, para el navegador firefox.

-moz-column-gap: 20px; lo mismo que en webkit, pero en este caso moz, para el navegador firefox.

-moz-column-rule: 1px solid #000; lo mismo que en webkit, pero en este caso moz, para el navegador firefox.

column-count: 3; definimos la cantidad de columnas, en este caso 3.

column-gap: 20px; definimos el ancho de las columnas, en este caso 20px.

column-rule: 1px solid #000; definimos el ancho, estilo y color de la línea que separan las columnas, 1px de ancho de linea, estilo solido, color negro.

las mismas indicaciones para otros navegadores como explorer.


[color=maroon]¿que utilidad tiene la propiedad column-span?[/color]

RESPUESTA:

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

Indica que los elementos h1 dentro de clases .cols3 se extienda a lo largo de las columnas    en navegadores como Chrome

-moz-column-span:all; como en el apartado anterior pero para el navegador firefox.

column-span:all; las mismas indicaciones para otros navegadores como explorer.


*/


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?

   RESPUESTA:


.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 con el prefijo webkit que se aplica a los navegadores chrome, safari, android, e ios, asegurarnos que estos navegadores ya reconoceran la etiqueta que sirve para dar 3 columnas.

-webkit-column-gap: 20px; se escribe para lograr que con el prefijo webkit, que se aplica a los navegadores anteriormente mencionados, asegurarnos que reconoceran la etiqueta que sirve para dar el ancho de las columnas 20px, en nuestro caso.

-webkit-column-rule: 1px solid #000; se escribe para lograr que con el prefijo webkit, que se aplica a los navegadores anteriormente mencionados, asegurarnos que reconoceran la etiqueta para establecer el ancho, estilo, y color de la línea de separación entre columnas, 1px de ancho de linea, estilo solido, color negro.

-moz-column-count: 3; lo mismo que en webkit, pero en este caso moz, para el navegador firefox.

-moz-column-gap: 20px; lo mismo que en webkit, pero en este caso moz, para el navegador firefox.

-moz-column-rule: 1px solid #000; lo mismo que en webkit, pero en este caso moz, para el navegador firefox.

column-count: 3; definimos la cantidad de columnas, en este caso 3.

column-gap: 20px; definimos el ancho de las columnas, en este caso 20px.

column-rule: 1px solid #000; definimos el ancho, estilo y color de la línea que separan las columnas, 1px de ancho de linea, estilo solido, color negro.

las mismas indicaciones para otros navegadores como explorer.

¿que utilidad tiene la propiedad column-span?

   RESPUESTA:

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

Indica que los elementos h1 dentro de clases .cols3 se extienda a lo largo de las columnas    en navegadores como Chrome
         
-moz-column-span:all;   como en el apartado anterior pero para el navegador firefox.
         
column-span:all;   las mismas indicaciones para otros navegadores como explorer.
   

123
Buenas noches amigos aquí os dejo el ejercicio haber que os parece, lo he echo lo mejor posible y creo que esta bastante bien, pero seguro que alguna cosita se me a escapado.

Gracias de antemano por vuestro tiempo.
Saludos.
Ahí van los códigos...

HTML principal.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<title>Cursor CSS. Efectos hover puntero de ratón.</title>
<meta name="description" content="portal web aprenderaprogramar.com">
<meta name="keywords" content="tipos de cursores con efectos hover en css">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos30.css">

</head>
<body>

<div id="box1">

<p>La comunicación es un proceso esencial en nuestras vidas, ya que somos seres sociales que necesitamos tener relación con
nuestro entorno y con la gente que nos rodea. Pensad por un momento lo que sería nuestras vidas sin poder comunicarnos.
¿Cómo viviríamos? <a href="http://aprenderaprogramar.com">¿Cambiaría nuestra forma de comportarnos?</a> Con toda seguridad, sí, todo seria muy distinto. Tened en cuenta
que nos comunicamos continuamente y muchas veces no nos damos ni cuenta de ello. Y una de las formas que tenemos de comunicarnos
(aunque no la única)<a href="http://virtualnauta.com"> es a través de nuestra lengua</a>. Podemos emplear una comunicación no verbal pero la comunicación verbal
(la que emplea la palabra) es fundamental en nuestras vidas: hablamos, intercambiamos informaciones, sentimientos, ideas,
expresamos nuestras dudas y nuestras alegrías... <a href="http://www.virtualbox.org">Y manejamos continuamente textos orales y escritos</a>. El texto constituye
la unidad máxima de comunicación y transmite un mensaje completo. Pero los textos no son todos iguales, ni muchísimo menos.
Los textos pueden ir desde una sola palabra a a una obra completa. Y, claro, cada texto responde a una finalidad diferente
(un texto que pretende instruir será diferente de otro que busca convencer, por ejemplo).</p>


</div>





<div id="box2">

<a href="CU01054DA.html"><img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQtdMBuv-NJ9PTamR75ErhxNhV3S0l9CY2G6Mdzw4IEg57atfBs"></a>


</div>






</body>
</html>


Ahora el HTML DOCUMENTO DOS (CU01054DA.html) en mi caso.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<title>la foto</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos30.css">
</head>
<body>

<img src="http://i.picasion.com/resize81/838eb697b10373752169508a0bfc77d9.jpg">

</body>
</html>


Y ahora el CSS...

Código: [Seleccionar]

/*ejercicio CU01054D cursor css. Efectos hover en el puntero del ratón: move, no-drop, resize, all-scroll, pointer, not-allowed,
crosshair, progress, wait*/

div{
float: left;
margin: 25px;
width: 200px;
height: 300px;
border: 5px solid violeta;
text-align: justify;
}
#box1 a {

cursor:help;

}
#box2 img {
cursor:zoom-in;
}


124
Buenas noches amigos aquí os dejo un ejercicio más para ver que tal está.

Y aunque ya se que este no es el el lugar para preguntar esto, lo preguntaré porqué no sé por donde tirar, ya estoy acabando el curso de css y quería seguir con el de javascript, y mirando el curso pone que tienes que tener nociones de programación, y yo no  he programado nunca, vamos que no tengo ni idea, y mi pregunta es que si es mejor que haga primero el de fundamentos de programación, o me tiro a la piscina y empiezo el de javascript,  bueno espero que me aconsejéis, mientras voy leyendo el de fundamentos; sin más como siempre daros las gracias de antemano.

saludos...

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
<title>Diseños de tablas css. border-spacing, caption-side, empty-cells, colores de filas intercalados</title>
<meta name="description" content="portal web aprenderaprogramar.com">
<meta name="keywords" content="diseños de tablas css">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos29.css">

</head>
<body>

<table>

<caption>PROPIEDADES DE LOS ELEMENTOS HALÓGENOS</caption>

<thead>
<tr>
<th>propiedades</th>
<th>Flúor</th>
<th>Cloro</th>
<th>Bromo</th>
<th>Yodo</th>
<th>Astato</th>
</tr>
</thead>
<tr>
<th>Número atómico</th>
<td>9</td>
<td>17</td>
<td>35</td>
<td>53</td>
<td>85</td>
</tr>
<tr>
<th>Peso atómico</th>
<td>18,9984</td>
<td>35,453</td>
<td>79,904</td>
<td>126,904</td>
<td>(210)</td>
</tr>
<tr>
<th>Color</th>
<td>Amarillo verdoso</td>
<td>Amarillo verdoso</td>
<td>Castaño rojizo</td>
<td>Violeta oscuro</td>
<td> ------------ </td>
</tr>
<tr>
<th>Punto de fusión (ºc)</th>
<td>-219,62</td>
<td>-100,98</td>
<td>-7,25</td>
<td>113,5</td>
<td>~300</td>
</tr>
<tr>
<th>Punto de ebullición</th>
<td>-118,14</td>
<td>-34,05</td>
<td>58,8</td>
<td>184,4</td>
<td>~370</td>
</tr>

<tr>
<th>Números de oxidación</th>
<td>-1</td>
<td>-1,+1,+3,+4,+5,+6,+7</td>
<td>-1,+5,+3,+4,+5,+7</td>
<td>-1,+1,+3,+4,+5,+6,+7</td>
<td>-1,+1,+3,+5,+7</td>
</tr>


</table>





</body>

</html>




Y  ahora el CSS...

Código: [Seleccionar]

/*curso css aprenderaprogramar.com*//*ejercicio CU01052D diseños de tablas css border-spacing, caption-side, empty-cells;
colores de filas intercalados alternos*/

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;
}


/*Ejercicio*/

/*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 …).*/

/*

table => 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 sigan una correlación de tipos de fuentes de familia, primero buscara helvetica, si no la encuentra buscara arial y si no sans-serif. width: 640px; este será el ancho total de la tabla. border-collapse: collapse, con este atributo da lugar a que los espacios entre celdas desaparezcan.

td, th => border: 1px da lugar al grueso de los bordes, con estilo solido y fondo transparente, da lugar a que las celdas tengan 1px de grosor de tipo continuo y transparente. height: 30px, aquí le damos una altura a las celdas de 30 pixeles.

th => background: #D3D3D3; aquí le damos un color de fondo a las celdas de la cabecera de color gris. font-weight: bold, da lugar a que el texto aparezca en negrita en las celdas de la cabecera.

td => background: #FAFAFA realmente no hace nada porque en las siguientes lineas se reescribe el color de fondo de las celdas, así que se podría quitar para simplificar el còdigo , text-align: center, damos lugar a centrar el texto en las celdas de datos.

tr:nth-child(even) td => background: #F1F1F1; da lugar a un color de fondo gris claro, y solo a los elemetos td pares.

tr:nth-child(odd) td => background: #FEFEFE; da lugar a un color de fondo gris mas claro y solo a los elemetos td inpares.

tr td:hover => background: #666; le damos un color de fondo gris oscuro, color #FFF, le damos al texto un color transparente; y con la propiedad :hover, damos lugar a que cuando pasamos el puntero del ratón por encima de cualquier celda (td) esta cambie de color, poniendo fondo gris oscuro y texto transparente.

*/

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

/* Respuesta:

En la linea table le quitariamos el atributo border-collapse: collapse; y pondriamos border: 2px solid; y en la linea td th tendríamos que poner border: 2px solid, quitando border: 1px solid transparent.

*/

/*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.

Respuesta:

Habría que cambiar td th{border: 1px solid transparent} por td th {border: 3px solid orange}

*/



Citar
EJERCICIO

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:

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.


/*Ejercicio*/

/*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 …).*/

/*

table => 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 sigan una correlación de tipos de fuentes de familia, primero buscara helvetica, si no la encuentra buscara arial y si no sans-serif. width: 640px; este será el ancho total de la tabla. border-collapse: collapse, con este atributo da lugar a que los espacios entre celdas desaparezcan.

td, th => border: 1px da lugar al grueso de los bordes, con estilo solido y fondo transparente, da lugar a que las celdas tengan 1px de grosor de tipo continuo y transparente. height: 30px, aquí le damos una altura a las celdas de 30 pixeles.

th => background: #D3D3D3; aquí le damos un color de fondo a las celdas de la cabecera de color gris. font-weight: bold, da lugar a que el texto aparezca en negrita en las celdas de la cabecera.

td => background: #FAFAFA realmente no hace nada porque en las siguientes lineas se reescribe el color de fondo de las celdas, así que se podría quitar para simplificar el còdigo , text-align: center, damos lugar a centrar el texto en las celdas de datos.

tr:nth-child(even) td => background: #F1F1F1; da lugar a un color de fondo gris claro, y solo a los elemetos td pares.

tr:nth-child(odd) td => background: #FEFEFE; da lugar a un color de fondo gris mas claro y solo a los elemetos td inpares.

tr td:hover => background: #666; le damos un color de fondo gris oscuro, color #FFF, le damos al texto un color transparente; y con la propiedad :hover, damos lugar a que cuando pasamos el puntero del ratón por encima de cualquier celda (td) esta cambie de color, poniendo fondo gris oscuro y texto transparente.

*/

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

/*   Respuesta:

    En la linea table   le quitariamos el atributo border-collapse: collapse; y pondriamos border: 2px solid; y en la linea td th tendríamos que poner border: 2px solid, quitando border: 1px solid transparent.
      
*/

/*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.

   Respuesta:
   
   Habría que cambiar td th{border: 1px solid transparent}   por td th {border: 3px solid orange}

*/


125
Buenos días amigos aquí os dejo el ejercicio,  creo que está bastante bien pero ya me diréis como va o si se puede mejorar, que seguro que siempre algo se puede mejorar y así aprender de los fallos, como siempre muchas gracias de antemano por vuestro tiempo.

Saludos.  :)

Ahí van los códigos...

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="portal web aprenderprogramar.com">
<meta name="keywords" content="estilos y herncia en tablas css">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos28.css">

</head>
<body>
<div id="tabla1">
<table>
<caption>Medidas y equivalencias</caption>
<thead>
<tr>
<th>Cantidad de producto</th>
<th>Cuchara</th>
<th>Cucharilla</th>
<th>Taza grande</th>
<th>Taza de café</th>
</tr>
</thead>


<tr>
<td>Agua</td>
<td>17 grs</td>
<td>5 grs</td>
<td>150 grs</td>
<td>90 grs</td>
</tr>
<tr>
<td>Azucar</td>
<td>18 grs</td>
<td>7 grs</td>
<td>120</td>
<td>70 grs</td>
</tr>
<tr>
<td>Vino</td>
<td>17 grs</td>
<td>5 grs</td>
<td>150 grs</td>
<td>90 grs</td>
</tr>
<tr>
<td>sal</td>
<td>18 grs</td>
<td>7 grs</td>
<td>----</td>
<td>----</td>
</tr>
<tr>
<td>Leche</td>
<td>17 grs</td>
<td>5 grs</td>
<td>150 grs</td>
<td>90 grs</td>
</tr>
<tr>
<td>Arroz</td>
<td>17 grs</td>
<td>6 grs</td>
<td>100 grs</td>
<td>65 grs</td>
</tr>
<tr>
<td>Cacao</td>
<td>12 grs</td>
<td>4 grs</td>
<td>----</td>
<td>----</td>
</tr>
</table>

</div>
<br/>
<div id="tabla_2">
<table>

<caption>Temperaturas del horno</caption>

<thead>
<tr>
<th>Marca en el horno</th>
<th>Grados celsius</th>
<th>Grados farenheit</th>
<th>Descripción</th>
<th>Apto para cocinar</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>110º a 140º</td>
<td>225º a 275º</td>
<td>Muy bajo/muy suave/minimo suave</td>
<td>Merengues/guisos/platos co huevo</td>
</tr>
<tr>
<td>2</td>
<td>150º</td>
<td>300º</td>
<td>Suave</td>
<td>Platos de cocción larga/braseados</td>
</tr>
<tr>
<td>3</td>
<td>170º</td>
<td>325º</td>
<td>Moderado/bajo</td>
<td>Bizcochuelos/flanes</td>
</tr>
<tr>
<td>4</td>
<td>180º</td>
<td>350º</td>
<td>Moderado</td>
<td>Galletas/lasagna</td>
</tr>
<tr>
<td>5-6</td>
<td>190º</td>
<td>375º</td>
<td>Moderado alto</td>
<td>Pasteles/tartas/empanadas</td>
</tr>
<tr>
<td>7</td>
<td>200º a 220º</td>
<td>400º a 425º</td>
<td>Alto/fuerte</td>
<td>Hojaldres</td>
</tr>
<tr>
<td>8</td>
<td>230º a 240º</td>
<td>450 a 475º500º</td>
<td>Fuerte</td>
<td>Asados/pan/pizza</td>
</tr>

</table>
</div>


<br/>
<div id="tabla_3">


<table>

<caption>Tallas de caballero</caption>

<thead>
<tr>
<th>Tallas de caballero</th>
</tr>

<tr>
<th>Talla</th>
<th>cm</th>
<th>44</th>
<th>46</th>
<th>48</th>
<th>50</th>
<th>52</th>
<th>54</th>
<th>56</th>
</tr>
</thead>
<tr>
<th>Estatura</th>
<th>cm</th>
<td>168</td>
<td>171</td>
<td>174</td>
<td>177</td>
<td>180</td>
<td>182</td>
<td>184</td>
</tr>
<tr>
<th>Contorno pecho</th>
<th>cm</th>
<td>88</td>
<td>92</td>
<td>96</td>
<td>100</td>
<td>104</td>
<td>108</td>
<td>112</td>
</tr>
<tr>
<th>Contorno cintura</th>
<th>cm</th>
<td>78</td>
<td>82</td>
<td>86</td>
<td>90</td>
<td>94</td>
<td>98</td>
<td>104</td>
</tr>
<tr>
<th>Contorno cadera</th>
<th>cm</th>
<td>90</td>
<td>94</td>
<td>98</td>
<td>102</td>
<td>106</td>
<td>110</td>
<td>115</td>
</tr>
<tr>
<th>Largo espalda</th>
<th>cm</th>
<td>42</td>
<td>43</td>
<td>43,5</td>
<td>44,5</td>
<td>45</td>
<td>45,5</td>
<td>46</td>
</tr>
<tr>
<th>Largo brazo</th>
<th>cm</th>
<td>61</td>
<td>62</td>
<td>63</td>
<td>64</td>
<td>65</td>
<td>66</td>
<td>67</td>
</tr>
<tr>
<th>Contorno cuello</th>
<th>cm</th>
<td>37</td>
<td>38</td>
<td>39</td>
<td>40</td>
<td>41</td>
<td>42</td>
<td>43</td>
</tr>

</table>
</div>

<br/>
</body>
</html>



Y ahora el CSS...

Código: [Seleccionar]

/*Ejercicio CU01051D curso css, estilos y herencia en tablas css. width, height, font-size, y overflow en tablas. Propiedad
border-collapse.*/


body{
font-family: arial,sans-rerif;
margin-top: 2em;
}
#tabla1{width: 600px;}
#tabla1, #tabla1 th, #tabla1 td{
border: 8px solid gray;
border-collapse: collapse;
text-align: center;
}
#tabla1 th, #tabla1 td{
width: 20%;
}

#tabla_2{width: 100%;}

#tabla_2, #tabla_2 th, #tabla_2 td{
border: 2px solid brown;
text-align: center;
}
#tabla_2 th, #tabla_2 td{
width: 20%;
}

#tabla_3{width: 500px;}

#tabla_3, #tabla_3 th, #tabla_3 td{
border-bottom: 6px solid blue;
border-collapse: collapse;
text-align: center;
}
#tabla_3 th, #tabla_3 td{
width:100px;
}
#tabla_3 caption{
border-bottom: 6px solid blue;
}



126
Buenas noches amigos aquí os dejo el ejercicio con la solución al final de este a ver qué os parece la explicaciones que doy, dejo la cita con la pregunta para la referencia y ahí van los códigos; gracias de antemano.

saludos.

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


Y ahora el html....

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<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">Dibulgación</a></li>
<li><a href="http://aprenderaprogramar.com">Humor</a></li>

</ul>

</div>

</body>

</html>

<!--

#nav-menu ul => Aquí lo importante es que eliminamos los simbolos de viñeta mediante la propiedad list-style: none; definimos el tipo de fuente para la lista de la familia sans-serif,
el margen y el relleno , de la misma, lo quitan con valores 0.

#nav-menu li => Para los elementos de la lista los elmentos flotan hacia la dcha con float: left, con margen superior e inferior igual a 0, e izquierda y derecha 0.15em. También se establece
un borde de 5px de grosor, de tipo groove con color #FFAA33.

#nav-menu li a => Para los enlaces de las lista establecen un color de fondo  #FFC0CB, que tengan una altura de 2em y un interlineado, o altura de linea de 2em, gracias a la propiedad line-height,
los elementos flotan hacia la derecha gracias a la propiedad float: left, le dan una anchura de 9em y una altura de 2em, y que se vean como bloques, un borde de 0.1em de grosor de tipo solido y
color#dcdce9, el color de los enlaces #0d2474, le quitamos la linea subrayada que viene por defecto en los enlaces co la propiedad text-decoration: none, y centramos el texto de estos con
text-align: center.

#nav-menu li a:hover => Cuando pasemos el ratón por encima de los enlaces, el fondo estos cabiaran de color  #FF6347.

--> 



#nav-menu ul => Aquí lo importante es que eliminamos los simbolos de viñeta mediante la propiedad list-style: none; definimos el tipo de fuente para la lista de la familia sans-serif, el margen y el relleno , de la misma, lo quitan con valores 0.

#nav-menu li => Para los elementos de la lista los elmentos flotan hacia la dcha con float: left, con margen superior e inferior igual a 0, e izquierda y derecha 0.15em. También se establece un borde de 5px de grosor, de tipo groove con color #FFAA33.

#nav-menu li a => Para los enlaces de las lista establecen un color de fondo  #FFC0CB, que tengan una altura de 2em y un interlineado, o altura de linea de 2em, gracias a la propiedad line-height, los elementos flotan hacia la derecha gracias a la propiedad float: left, le dan una anchra de 9em y una altura de 2em, y que se vean como bloques, un borde de 0.1em de grosor de tipo solido y color#dcdce9, el color de los enlaces #0d2474, le quitamos la linea subrayada que viene por defecto en los enlaces co la propiedad text-decoration: none, y centramos el texto de estos con text-align: center.

#nav-menu li a:hover => Cuando pasemos el ratón por encima de los enlaces, el fondo estos cabiaran de color  #FF6347.

127
Buenos días amigos aquí os dejo el ejercicio CU01048D del curso de programador web CSS desde cero para que la echéis un vistazo a ver que os parece; decir que en el ultimo li en el css list-style-image  también e puesto para que la imagen se viese bien list-style-position inside aunque no lo pedía el ejercicio.
Bueno como siempre dar las gracias por vuestro tiempo porque entre todos hacéis una labor increible, a mi me estáis ayudando mucho y os lo agradezco, porque cada vez me gusta mas lo que estoy haciendo.

saludos...

Hay van los códigos...

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="portal web aprenderaprogramar,com"/>
<meta name="keywords" content="Estilos de listas css list-style-type list-style-position list-style-image"/>
<meta charset="utf-8"/>
<title>Estilos de listas CSS </title>
<link rel="stylesheet" type="text/css" href="estilos23.css"/>
</head>
<body>

<div>

<ul>

<li>Componente 1</li>
<li>Componente 2</li>
<li>Componente 3</li>
<li>Componente 4</li>
<li>Componente 5</li>
<li>Componente 6</li>
<li>Componente 7</li>
<li>Componente 8</li>
<li>Componente 9</li>
<li>Componente 10</li>
<li>Componente 11</li>
<li>Componente 12</li>
<li>Componente 13</li>
<li>Componente 14</li>
<li>Componente 15</li>
<li>Componente 16</li>
<li>Componente 17</li>
<li>Componente 18</li>
<li>Componente 19</li>
<li>Componente 20</li>
<li>Componente 21</li>
<li>Componente 22</li>
<li>Componente 23</li>
<li>Componente 24</li>
<li>Componente 25</li>
<li>Componente 26</li>
<li>Componente 27</li>

</ul>


</div>

</body>

</html>



Y ahora el CSS....

Código: [Seleccionar]

/*Ejercicio CU01048D curso CSS estilos de listas css, list-style-type, list-style-position, list-style-image, propiedades shortand
list-style*/

li:first-child, li:nth-child(2), li:nth-child(3){
list-style-type: disc;
list-style-position: outside;
}
li:nth-child(4), li:nth-child(5), li:nth-child(6){
list-style-type: circle;
list-style-position: inside;
}
li:nth-child(7), li:nth-child:(8), li:nth-child(9){
list-style: square inside;
}
li:nth-child(10), li:nth-child(11), li:nth-child(12){
list-style: none;
}
li:nth-child(13), li:nth-child(14), li:nth-child(15){
list-style: decimal outside;
}
li:nth-child(16), li:nth-child(17), li:nth-child(18){
list-style: decimal-leading-zero outside;
}
li:nth-child(19), li:nth-child(20), li:nth-child(21){
list-style: lower-roman inside;
}
li:nth-child(22), li:nth-child(23), li:nth-child(24){
list-style: upper-alpha inside;
}
li:nth-child(25), li:nth-child(26), li:nth-child(27){
list-style-image: url(https://www.aprenderaprogramar.com/foros/avatars/APR2.COM_Varios/AprApr_1.jpg);
list-style-position: inside;
}

 

128
Aquí os dejo el ejercicio haber que os parece, he tenido problemas con el apartado c) el color en concreto, el texto no me cambiaba de color, a ver cómo lo veis.

saludos y como siempre gracias por vuestro tiempo

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="portal web aprenderaprogramar.com">
<meta name="keywords" content="CSS font-family tipografia (tipos de letra)">
<meta charset="utf-8">
<title>Tipografia (tipos de letra) en CSS font-family, font-variant, propiedad shortand</title>

<link rel="stylesheet" type="text/css" href="estilos19.css">

</head>
<body>


<div id="caja1"><p>Fue en la antigüedad el delfín símbolo de esta metamorfosis creadora que permite volver a nacer en el momento mismo en que se está a punto de morir. La alegría con que el delfín se lanza desde el elemento oscuro y misterioso  del océano hacia el aire diafano; del agua (expresión delo femenino y de la muerte) hacia el aire, masculino y espiritual, le hizo símbolo de renacimiento, de resurrección. Más, a la vez, no hay que olvidar que el delfín, como una aguja, cose con sus brincos los dos elementos, agua y aire, los pone en comunicación. Schwabe piensa que, de éste símbolo del delfín nació, en época arcaica, el de Piscis, signo dual que señala en el Zodíaco ,el momento de máximo declinar del sol, cuando éste simula va a desaparecer y resurge de nuevo, resucitado. (Lo que no ocurre hoy, pero sí sucedió en el Zodíaco correspondiente .a 5.425 años a. de J. C.). Por esta razón es por lo que se presenta como signo doble:  pez de la vida, del juego y de la alegría y también de la muerte, como en el cuento griego del delfín enamorado.</p>
<p><span class="condensada">Entre los órficos, el delfín fue convirtiéndose ,cada vez más en símbolo de la muerte. En cambio Karl Kerenyi hace proceder el nombre del delfín del griego δελρισ (matriz)  y de αδελροσ(uterino, hermano de sangre). Así Delphin, animal-útero del mar, se opondría a Delphas, al cerdo que es sacrificado a los dioses y que sería el animal -útero de la tierra. (C. G. Jung y C. Kerényi: Introduction to a Science of Mythology, pág. 68 y 165). Schwabe, que no está de acuerdo, piensa, no obstante, que el delfín como símbolo del sol, de la resurrección y de la vida se opone al cerdo, animal tifónico, que hoza en la tierra, símbolo de la luna, tragada por los abismos.</span></p>
<p>Cualquiera que sea la interpretación que se adopta, parece que el delfín ha simbolizado para el hombre dos cosas: renacimiento en el momento mismo en el que se arriesga la muerte y comunicación entre elementos heterogéneos, ¿No es esto precisamente lo que perfila el momento actual de-nuestra civilización,  la cual surge con brío jamás visto en el mismo instante que parecía iba a ser irreparablemente destruida?</p>
 
<p>Juan Rof Carballo. 1963. Diálogo con el delfín. Pp 23-33 en Signos en el Horizonte. Editorial Prensa Española. Madrid.  1972.</p>
</div>
<div id="caja2"><p>El estilo del autor es verdaderamente curioso. Se extiende a menudo en largos párrafos para no decir nada y, de repente, introduce un párrafo breve en el que dice un disparate tremendo.</p>

<p>El párrafo septuagésimo cuarto es uno de éstos breves y desconcertantes párrafos de El origen. Para todos los naturalistas el concepto de especie es fundamental en la descripción de la naturaleza. Por muchos ejemplos y casos dudosos en los que un naturalista no sepa si dos individuos pertenecen o no  a la misma especie o son especies diferentes; por muchas y variadas dificultades que el zoólogo, el entomólogo o el botánico puedan encontrar en sus clasificaciones, constantemente recurrirán al concepto de especie porque es fundamental y así lo ha sido durante cientos de años. En la naturaleza no hay, al contrario que expone el autor, una gradación continuada, sino que los individuos pertenecen a especies.</p>

<p>La especie no sólo es, como dice aquí el autor, un grupo de individuos muy semejantes. Existe además el criterio de reproducción. Los individuos de una especie pueden reproducirse entre sí. Es un criterio   que nos indica que entre las células de individuos de la misma especie hay determinado nivel de compatibilidad basado en homología genética y cromosómica. En esto difiere, el concepto de especie del de variedad. Sean cuales fuesen las consideraciones del autor, el concepto de especie se basa en una realidad insoslayable.</p>
</div>
<div id="caja3"><p>COMENTARIO DE EL AVENTURERO</p>

<p>Veamos primero, aunque sea de forma muy simplificada, lo que nos dice la Biología sobre el mensajero:</p>

<p>Cuando una célula necesita que se ”fabrique” algún tipo de proteína, se encuentra con el problema de que las instrucciones necesarias para hacerlo están en el ADN, que está dentro del núcleo de la célula y no puede salir de él, mientras que el “taller” en donde se va a sintetizar la proteína está fuera de dicho núcleo. Por ello es necesario un mensajero, que copie las instrucciones del ADN y las lleve al “taller” (al ribosoma).</p>

<p>Esta función la realiza una molécula, el ARNm (el mensajero), que copia la información del fragmento del ADN que contiene las instrucciones correspondientes, sale del núcleo y se acopla al ribosoma, para iniciar la síntesis de la proteína.</p>

<p>Hasta aquí todo parece claro y explicable, aunque el proceso, analizado con detalle, es mucho más complejo. Pero lo sorprendente del caso es que el mensajero, el ARNm, en el trayecto del ADN al ribosoma, modifica el mensaje, modifica las instrucciones. Desecha los “párrafos” que considera inútiles (los intrones) y empalma los que considera útiles (los exones). Es lo que se llama la maduración del mensajero. El resultado de este proceso de cortar y pegar es que el mensaje que llega al taller (al ribosoma) es distinto del que salió del ADN. Y, “casualmente”, el mensaje que llega al taller es el adecuado para que se sintetice la proteína que se necesitaba.</p>
</div>


</body>
</html>


Y ahora el CSS.....


Código: [Seleccionar]

/*ejercicio CU01045D CSS font-family tipografía (tipos de letra) CSS.font-variant, propiedad short*/

div{
margin: 33px;
padding: 25px;
border-style: solid;
border-width: 5px;
border-color: red;
}
caja1{
font-family: serif;
font-size: 18px;
}
.condensada{font-variant: small-caps;}
caja2{
font-size: 14px;
font-family: sans-serif;
color: #B22222;
}
caja3{
font: 2em fantasy;
}


129
Buenas noches amigos después de quedarme casi ciego entre CHROME y FIREFOX mirando que letra era mas pequeña o  más grande, después de hacer el ejercicio he llegado a la conclusión que son prácticamente iguales, solo parece que chrome es como si se estirase hacia arriba un poquito,  nada poquísimo pero hace el efecto ese, al menos para mí. Y sin mas os dejo el ejercicio para ver que os parece.

Saludos...

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="portal web aprenderaprogramar.com">
<meta name="keywords" content="Mas uso de forzado de texto font-size, font-weight, font-style">
<meta charset="utf-8">
<title>Mas uso de forzado de texto font-size, font-weight, font-style</title>
<link rel="stylesheet" type="text/css" href="estilos18.css">
</head>
<body>

 <!--Control-->
<div><h3 class="inlineBlock">5</h3><span style="font-size:1.125em; font-weight:bold;">5</span></div>
 <!--fin del control-->
<table border="1px" class="inlineBlock" id="Firefox">
<caption>Firefox</caption>


<tr>
<th>Tipo de título</th>
<th>Pixeles</th>
<th>em</th>

</tr>

<tr>
<th><h1>h1</h1></th>
<td>32</td>
<td>2</td>
</tr>
<tr>
<th><h2>h2</h2></th>
<td>24</td>
<td>1.5</td>
</tr>
<tr>
<th><h3>h3</h3></th>
<td>18</td>
<td>1.125</td>
</tr>
<tr>
<th><h4>h4</h4></th>
<td>16</td>
<td>1</td>
</tr>
<tr>
<th><h5>h5</h5></th>
<td>13</td>
<td>0.8</td>
</tr>
<tr>
<th><h6>h6</h6></th>
<td>11</td>
<td>0.7</td>
</tr>
</table>


<table border="1px" class="inlineBlock" id="chrome">
<caption>Chrome</caption>

<tr>
<th>Tipo de título</th>
<th>Pixeles</th>
<th>em</th>
</tr>

<tr>
<th><h1>h1</h1></th>
<td>32</td>
<td>2</td>
</tr>
<tr>
<th><h2>h2</h2></th>
<td>24</td>
<td>1.5</td>
</tr>
<tr>
<th><h3>h3</h3></th>
<td>18</td>
<td>1.125</td>
</tr>
<tr>
<th><h4>h4</h4></th>
<td>16</td>
<td>1</td>
</tr>
<tr>
<th><h5>h5</h5></th>
<td>13</td>
<td>0.5</td>
</tr>
<tr>
<th><h6>h6</h6></th>
<td>11</td>
<td>0.7</td>
</tr>
</table>




</body>
</html>


Y ahora el CSS...

Código: [Seleccionar]

/*Ejercicio CU01044D del curso CSS comparar entre navegadores tamaños de textos*/

.inlineblock{display: inline-block;}
#firefox{text-align: center;}
#Firefox tr:first-child{background-color: grey;}
#firefox tr:nth-child(2) td{font-size: 32px;font-weight: bold;}
#firefox tr:nth-child(3) td{font-size: 24px;font-weight: bold;}
#firefox tr:nth-child(4) td{font-size: 18px;font-weight: bold;}
#firefox tr:nth-child(5) td{font-size: 16px;font-weight: bold;}
#firefox tr:nth-child(6) td{font-size: 13px;font-weight: bold;}
#firefox tr:nth-child(7) td{font-size: 11px;font-weight: bold;}

#chrome{text-align: center;}
#chrome tr:first-child{background-color: grey;}
#chrome tr:nth-child(2) td{font-size: 2em;font-weight: bold;}
#chrome tr:nth-child(3) td{font-size: 1.5em;font-weight: bold;}
#chrome tr:nth-child(4) td{font-size: 1.125em;font-weight: bold;}
#chrome tr:nth-child(5) td{font-size: 1em;font-weight: bold;}
#chrome tr:nth-child(6) td{font-size: 0.8em;font-weight: bold;}
#chrome tr:nth-child(7) td{font-size: 0.7em;font-weight: bold;}



130
Buenas noches amigos aquí os dejo el ejercicio haber que os parece. gracias
saludos

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
<title>portal web aprenderaprogramar.com</title>
<meta charset="utf-8">
<style>
*{font-family: arial;}
div{
width: 360px;
height: 210px;
margin: 10px;
margin: 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 id="vcent"><span>Linea de texto contenedor 1</span></div>
<div id="vcent"><span>Linea de texto contenedor 2</span></div>

</body>

</html>


Y ahora las preguntas....

Ejercicio CU01043D del curso CSS


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

   Respuesta:
   Hay dos cajas contenedoras. Están identificadas por id.
   
b) Visualiza el resultado en al menos dos navegadores distintos. ¿Qué diferencias observas entre ambos? ¿A qué crees que se deben?

   Respuesta:
   Lo he visualizado en tres navegadores y en los tres el resultado es bueno, se ve igual en los tres se bien en firefox, crome
   e internet explorer.
   
c) ¿Por qué el texto <<Línea de texto contenedor 2>> se muestra centrado verticalmente?

   Respuesta:
   porque en ese contenedor tiene el atributo vertical-aling: middle.
   #vcent span { display: table-cell;  vertical-align:middle;}
   
d) Modifica el código para que el texto <<Línea de texto contenedor 1>> se muestre centrado verticalmente.

   Respuesta:
   hay que poner en en html un atributo id en el contenedor vcent del contenedor 1.
   <div id="vcent"><span>Linea de texto contenedor 1</span></div>


131
Aquí os dejo el ejercicio para revisarlo cuando podáis, gracias por vuestro tiempo

saludos


Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="portal web - Aprenderaprogramar.com">
<meta name="keywords" content="CSS con mayusculas o minusculas con tex-transform etc">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos17.css">

</head>
<body>

<div id="box1"><p>"Tuve miedo, un miedo pequeño y bonito porque tener un poco de miedo, a veces, es bonito."
"El Agujero de las Cosas Perdidas" de Joan Armangué i Herrero.</p>

<p>"Una de las trampas de la infancia es que no hace falta comprender algo para sentirlo. Para cuando la razón es capaz de entender lo sucedido, las heridas en el corazón ya son demasiado profundas."</p>

<p>''Alguien dijo una vez que en el momento en que te paras a pensar si quieres a alguien ya has dejado de quererlo para siempre''
"La sombra del viento" de Carlos Ruiz Zafón.</p>

<p>"- ¿Nunca has parado el mundo?
 +¿ Que es parar el mundo?
 -Parar el mundo es decidir conscientemente que vas a salir de él para mejorarte y mejorarlo. Para poder moverte y moverlo mejor. En ese tiempo debes intentar que nadie ni nada te cree problemas. Alimentarte de buena literatura, de buen cine y sobre todo, de la conversacion de una unica persona que te inspire, porque se necesitan dos personas para parar el mundo, uno solo no tiene fuerza suficiente''.
                                        ´´Si tú me dices ven lo dejo todo...pero dime ven`` de Albert Espinosa.</p>

<p>´´Me acuerdo del ruido que hacia tu corazón cuando hablabas de ella. Te odié desde ese mismo instante. El ruido de tu Tic Tac representaba para mí  el instrumento de medida del tiempo que se escapaba sin ella. Un instrumento de tortura colmado con tus propios sueños de amor.``
'´La mecánica del corazón`` de Mathias Malzieu.</p>

</div>

<div id="box2"><p>El deseo mueve montañas de instantes y el amor mueve cordilleras de vida. El deseo es generoso en intensidad y fugaz en el tiempo, el amor es un fuego lento con una fuerza incomparable.</p>

<p>Con el deseo pedimos y con el amor damos; el deseo es condición y el amor..,es una declaración.</p>

<p>Era el mejor de los tiempos, era el peor de los tiempos, era la edad de la sabiduría, era la edad de la insensatez, era la época de la creencia, era la época de la incredulidad, era la estación de la luz, era la estación de la oscuridad, era la primavera de la esperanza, era el invierno de la desesperación.</p>
<p>Historia de dos Ciudades (Charles Dickens)
</p></div>

<div id="box3"><p>Las experiencias, hayan causado sufrimiento o placer, dan forma a nuestra alma. La pintan de matices que dicen en susurros quiénes somos, para que las personas hagan el esfuerzo de prestarnos atención y de escucharnos bajito.</p>

<p>Lo mismo sucede con las personas que han dejado huella en nuestra vida. Hayan sido buenas o malas, su compañía ha modificado nuestro camino definiendo, con esos pequeños e importantes matices, quiénes somos.</p>

<p>Amor y deseo son dos cosas diferentes; que no todo lo que se ama se desea, ni todo lo que se desea se ama.</p>
<p>Don Quijote de la Mancha (Miguel de Cervantes</p></div>


</body>
</html>



Y ahora el CSS...

Código: [Seleccionar]

/*CSS mayusculas o minusculas con tex-transform y first-letter, espaciado con letter-spacing y word-spacing. Cortar texto con
word-spacing*/

div{
margin: 33px;
padding: 0;
width: 180px;
height: 300px;
border: solid;
border-width: 6px;
border-color: red;
float: left;
}
#box1{
text-transform: uppercase;
letter-spacing: 5px;
}
#box1 p::first-letter {
font-size: 250%;tex-transform: uppercase;
}

#box2{
text-transform: lowercase;
letter-spacing: 10px;
word-wrap: break-word;
}
#box3{
text-transform: capitalize;
word-spacing: 10px;
word-wrap: break-word;
}


132
Aquí os dejo el ejercicio que he hecho, creo que está lo que pide pero ya me diréis algo por favor para ver que tal me va saliendo todo, muchas gracias de antemano por vuestro tiempo.

Saludos y gracias.


Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="portal web - aprenderaprogramar.com">
<meta name="keywords"content="Control de texto css: text-shadow y blur,tex-overflow clip,ellipsis y line-height (interlineado)">
<meta charset="utf-8">
<style>


div{
display: inline-block;
vertical-align: top;
width: 240px;
height: 300px;
border: solid;
border-width: 3px;
border-color: blue;
margin:18px;
padding: 8px;
}
#div1 p {overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
line-height: 105%;
 }


#div2{
line-height: 110%;
overflow: hidden;
}
#div3 p {
text-align: justify;
color: #8B4513;
line-height: 120%;
}
span{font-size: 18px;}
#sombra1{text-shadow: 2px 2px red;}
#sombra2{text-shadow: -2px 2px blue;}
#sombra3{text-shadow: 0px 0px 7px green;}



</style>

</head>
<body>



<h3>Colección de Primeros Párrafos de diversas Obras Literarias</h3>

<div id="div1"><p> El Pozo y el Péndulo” Edgar Allan Poe.<br/><br/>

 

<span id="sombra1">Me hallaba agotado,</span> mortalmente agotado por aquella agonía sin fin. Cuando, por último me desataron, y pude sentarme, noté que
perdía el conocimiento. La sentencia, la espantosa sentencia de muerte fue la frase claramente articulada que llegó a mis oídos.
Luego, el sonido de las voces de los inquisidores, me pareció que se apagaba en el zumbido indefinido de un sueño. Su ruido
provocaba en mi ánimo cierta sensación de rotación, quizá debido a que lo identificaba con una rueda de molino. Sin embargo,
aquello duró muy poco tiempo y ya no oí nada más. No obstante, durante cierto tiempo vi -¡y con qué horrible exageración!-
los labios de los jueces vestidos de negro, eran blancos, más blancos que las hojas de papel en que estoy escribiendo estas
palabras, adelgazados hasta lo grotesco, con la dura expresión de su resolución irrevocable y del riguroso desprecio por el
dolor humano. Veía cómo los decretos de lo que para mí representaba el Destino, surgían aún de aquellos labios. Contemplé cómo
se retorcían articulando una frase mortal, cómo pronunciaban las sílabas de mi nombre, y me estremecí al ver que el sonido no
seguía al movimiento. Durante varios momentos de frenético espanto, percibí la blanda y casi imperceptible ondulación de las
negras colgaduras que cubrían las paredes de la sala, y mi vista cayó entonces sobre los siete grandes cirios que había colocado
sobre la mesa. Al principio fueron para mí la representación de la claridad, y los imaginé ángeles blancos y esbeltos que
venían a salvarme. Pero inmediatamente unas náuseas mortales invadieron mi alma, y sentí que cada fibra de mi ser se estremecía
como si se hubiera hallado en contacto con el cable de una batería galvánica. Las formas angélicas se convirtieron en espectros
con cabeza de llama, y comprendí claramente que no debía esperar de ellos auxilio alguno. Entonces, como una especie de brillante
nota musical se insinuó en mi alma la idea del reposo inefable que debe gozarse en la tumba. Legó de una forma suave y furtiva, y
creo que precisé un largo espacio de tiempo para apreciarla por entero. Sin embargo, en el preciso momento en que mi alma empezó a
sentir la idea con claridad, y a acariciarla, las figuras de los jueces se desvanecieron como por arte de magia, los grandes cirios,
cuyas llamas se apagaron por completo, se redujeron a la nada, y sobrevino la negrura de las tinieblas. Todas mis sensaciones
parecieron desaparecer como si el alma se hundiera en una zambullida loca y precipitada en lo más profundo del Hades. Y el
Universo se convirtió en noche, silencio e inmovilidad.</p></div>

<div id="div2"><p> “El Adolescente” Dostoyevski<br/><br/>

 

Sin poder contenerme, me he<span id="sombra2"> sentado a escribir</span> esta historia de mis primeros pasos por la carrera de la vida, siendo así que
muy bien habría podido abstenerme de hacerlo… Sólo una cosa sé de fijo: nunca más me pondré a escribir mi autobiografía, aun
suponiendo que viva cien años. Es menester estar demasiado vilmente enamorado de sí mismo para escribir de sí mismo sin empacho;
únicamente me disculpa el hecho de no escribir para lo que todos escriben: esto es, para pavonearme ante el lector. Si de
pronto se me ha ocurrido ponerme a escribir, palabra por palabra, todo lo que me sucedió el año pasado, ha sido por efecto de
un impulso interior: hasta tal punto me hizo impresión todo lo ocurrido. Describiré únicamente los acontecimientos, apartándome
con empeño de todo lo secundario y, sobre todo, de la belleza literaria; el literato se está escribiendo treinta años, y a lo
último ignora por completo para qué ha estado escribiendo tantos años. Yo… no soy literato, ni quiero ser literato y sacar el
interior de mi alma y la bella descripción de mis sentimientos a sus mercados literarios; lo tendría por indecoroso y ruin.
Con dolor, no obstante, presiento que, según parece, no es posible prescindir en absoluto de la descripción de sentimientos y
de reflexiones (puede que hasta triviales); hasta tal punto obra corruptoramente en el hombre toda ocupación literaria, aunque
se proponga dedicarse a ella para él solo. Las reflexiones pueden  ser incluso trivialísimas, porque aquello que tú estimas
con harta frecuencia no tiene valor alguno para la ajena mirada. Pero todo esto es secundario. Este es también el prólogo; más
de esta índole no habrá. Al asunto, aunque no hay nada más difícil que aplicarse a cualquier asunto.</p></div>

<div id="div3"><p> “El Existencialismo y la Sabiduría Popular” Simone de Beauvoir<br/><br/>

 

Poca gente conoce <span id="sombra3">esa filosofía</span>que se ha bautizado un poco al azar: existencialismo; muchos la atacan. Se le reprocha entre
otras cosas ofrecer al hombre una imagen de sí mismo y de su condición propia para desesperarlo. El existencialismo (justificado
o no, conservaremos ese nombre para mayor simplicidad) desconocería la grandeza del hombre y elegiría pintar solamente su
miseria. Se lo acusa también, según un neologismo reciente de “miserabilismo”; es dicen, una doctrina que niega la amistad,
la fraternidad y todas las formas del amor; encierra al individuo en una sociedad egoísta: lo aísla del mundo real y lo condena
a permanecer retraído en su pura subjetividad, pues rechaza en las empresas humanas, en los valores formulados por el hombre,
en los fines que persigue, toda justificación objetiva. ¿Concuerda con esta imagen el existencialismo? Los críticos no profundizan
esta pregunta, y sus lectores aceptan docilmente su interpretación, esto no nos asombra para nada. Es más asombroso que esa
imagen, verdadera o falsa, provoque tanto escándalo. En todos los tiempos, han existido escuelas y autores que no han sido
suaves para el hombre; se los ha acogido frecuentemente con favor. ¿De dónde vienen las resistencias muy particulares que
encontramos aquí?</p></div>

</body>


</html>

 

133
Aquí os dejo el ejercicio para ver como está. ejercicio CU01040D del curso de CSS text-aling,  color , text-decoration, etc.....

gracias por vuestro tiempo de ante mano
muchas muchas gracias

saludos

os dejo los códigos...

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="portal web - Aprendeaprogamar.com">
<meta name="keywords" content="propiedades para el control de texto CSS">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos16.css">
<title>propiedades para el control de texto CSS</title>

</head>
<body>

<header class="header">Propiedades para el control de texto CSS</header><br/>

<h3 class="h3">text-align,text-indent,
   text-decoration,color,
   white-space,pre,pre-wrap,
   pre-line o normal.</h3>

<h2 style="color: red">Frases de libros de Pablo Coelho </h2>

<div id="div1"><p>--Siempre que me creía dueño <span class="subrayado"> absoluto de la situación</span>, pasaba algo que me derribaba.
Hay cosas que son<span class="subrayado1"> colocadas en nuestras vidas para reconducirnos al verdadero camino</span>. Otras surgen para que
podamos aplicar todo aquello que aprendimos. Y finalmente, algunas llegan para enseñarnos.</p></div>

<div id="div2"><p>--El amor podía ser una<span class="subabajo"> experiencia más temible que estar ante un soldado</span>con una flecha apuntándole al<br/>
corazón. Si la flecha lo alcanzase, estaría muerto,<span class="subabajo1"> y el resto quedaría a cargo de Dios.</span> Pero si el amor lo<br/>
hiriera,<br/> tendría que asumir las consecuencias.</p></div>


<div id="div3"><p>--Por un segundo él<span class="tachado"> sintió que podía compartir</span>su corazón con ella. Pero decidió no arriesgarse.
   --Todo lo que podía suceder, pero no sucedío,<span class="tachado1">termina siendo llevado por el viento</span> y no deja ningun         
     rastro.</p></div>








</body>



</html>


y ahora el CSS:

Código: [Seleccionar]

/*Ejercicio CU01040D propiededes para el control de texto CSS */

*{font-family:arial;}
div{
width: 200px;
height: 400px;
border: solid;
border-width: 4px;
margin: 20px;
padding: 10px;
float: left;
}

.header{
text-align: center;
border: solid;
border-color: red;
}
.h3{
text-align: center;
white-space: pre-line;
border: solid green;
}

#div1{
text-align: center;
color: #FF6347;
text-indent: 10%;
}
.subrayado{
text-decoration: underline;
}
.subrayado1{
text-decoration: underline;
}

#div2{
text-align: right;
color: #008080;
text-indent: 50px;
white-space: pre-line;
}
.subabajo{
text-decoration: overline;
}
.subabajo1{
text-decoration: overline;
}

#div3{
text-align: justify;
color: #8B4513;
text-indent: 20%;
white-space: pre-wrap;

}
.tachado{
text-decoration: line-through;
}
.tachado1{
text-decoration: line-through;
}



134
Buenas noches amigos aquí os dejo el ejercicio para ver que tal esta, como siempre muchas gracias por vuestro tiempo , me estáis ayudando mucho y estoy aprendiando mucho.

muchas gracias por todo

saludos


Ejercicio CU01039D, analiza el código anterio y responde a las siguientes preguntas:


   a) ¿Cuántas cajas contenedoras hay? ¿Están identificadas por id o por class?
   
      Respuesta:
      
      Hay 3 cajas contenedoras y estan identificadas por id.
      
   b) ¿Cuál es el grosor del borde de la caja azul y en qué unidades está expresado?

      Respuesta:
      
      El grosor es de 3 y está expresado en pixeles
      
   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?
      
      Respuesta:
      
      Las cajas se superponen porque el navegador establece el orden normal. Hay superposición porque se establecen margin
      negativos y esto hace que un div se desplace superponiendose uno encima de otro. primero está la caja gris, segunda la caja
      azul y tercera la caja ocre. Se superponen por las propiedades margin hacen que entren una dentro de la otra; así mediante
      el código HTML, está encima la caja ocre, luego la caja azul, y al final la caja gris.
      
   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?   
      
      Respuesta:
      
      Para que la caja gris se situe encima de las demas solo tenemos que colocarla en distinta dimensión, y esto lo conseguimos
      posicionandola añadiendole las propiedades #cajagris{z-index: 10; position: absolute;}. El código HTML quedará de esta manera:
      
   
Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="portal web - Aprenderaprogramar.com">
<meta name="keywords" content="z-index control de superposición de elementos como capas, div, o imágenes">
<meta charset="utf-8">
<title>Ejemplo Aprenderaprogramar.com</title>

<style type="text/css">

*{font-family: sans-serif;}
#cajagris{
width:225px;
height: 225px;
border: solid 1px #ccc;
background: #ddd;
margin-top: 20px;
z-index: 10;
position: absolute;
}
#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;

}


</style>

</head>
<body>

<div id="cajagris">

Caja Gris

</div>


<div id="cajaazul">

Caja Azul

</div>


<div id="cajaocre">

Caja Ocre

</div>
</body>
</html>

       

   e)Código HTML:


Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="portal web - Aprenderaprogramar.com">
<meta name="keywords" content="z-index control de superposición de elementos como capas, div, o imágenes">
<meta charset="utf-8">
<title>Ejemplo Aprenderaprogramar.com</title>

<style type="text/css">

*{font-family: sans-serif;}
#cajagris{
width:225px;
height: 225px;
border: solid 1px #ccc;
background: #ddd;
margin-top: 20px;
z-index: 1;
position: relative;
}
#cajaazul{
width: 225px;
height: 225px;
border: solid 3px #4a7497;
background: #8daac3;
margin-top: -50px;
margin-left: 50px;
position: relative;
}
#cajaocre{
width: 225px;
height: 225px;
border: solid 2px #8b6125;
background: #ba945d;
margin-top: -50px;
margin-left: 100px;
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>


135
Ejercicio CU01038D del curso de css desde cero, aquí os dejo el código.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="Portal web - Aprenderaprogramar.com">
<meta name="keywords" content="overflow css. propiedad visibility.">
<meta charset="utf-8">
<title>Propiedades visibility y overflow en css.</title>
<style>
*{font-family: arial;}
#caja{
width: 200px;
height: 200px;
background-color: yellow;
border-color: blue;
border-width: 2px;
border-style: solid;
font-size: 30px;
overflow: scroll;
}



</style>
</head>
<body>

<div id="caja">
Fuente primaria quot;LA PRESENTE DECLARACIÓN UNIVERSAL DE DERECHOS HUMANOS como ideal común por el que todos los
pueblos y naciones deben esforzarse, a fin de que tanto los individuos como las instituciones, inspirándose constantemente
en ella, promuevan, mediante la enseñanza y la educación, el respeto a estos derechos y libertades, y aseguren, por medidas
progresivas de carácter nacional e internacional, su reconocimiento y aplicación universales y efectivos, tanto entre
los pueblos de los Estados Miembros (...). ARTÍCULO 1.- Todos los seres humanos nacen libres e iguales en dignidad y
derechos y, dotados como están de razón y conciencia, deben comportarse fraternalmente los unos con los otros.
ARTÍCULO 2.- 1. Toda persona tiene todos los derechos y libertades proclamados en esta Declaración, sin distinción
alguna de raza, color, sexo, idioma, religión, opinión política o de cualquier otra índole, origen nacional o social,
posición económica, nacimiento o cualquier otra condición. 2. Además, no se hará distinción alguna fundada en la
condición política, jurídica o internacional del país o territorio (...). ARTÍCULO 3.- Todo individuo tiene derecho a
la vida, a la libertad y a la seguridad de su persona.

</div>


</body>






</html>


136
Buenas noches amigos, os pido ayuda con este ejercicio porque me está costando sangre sudor y lagrimas, he llegado a un punto de no retorno en el que e dicho que no puedo con el quisiera que me echaseis una mano haber donde esta está el fallo, porque he consultado todo lo que he podido y mas yo creo que debe ser algo que se me pasa pero vosotros tenéis más experiencia y lo veréis más rápido; bueno como siempre muchas gracias de antemano por vuestro tiempo y saludos.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="portal web - Aprenprenderaprogramar.com">
<meta name="keywords" content="diseño web CSS con varias columnas con float "><meta charset="utf-8">
<style>
*{font-family: arial;}

body{
width: 900px;
border-style: dotted;
border-width: 1px;
}
div{
border-style: solid;
text-align: center;
border-width: 2px;
margin: 7px;padding: 7px;
}
#cabecera{
background-color: #ADD8E6;
height: 30px;

}
#col_izq{
width: 25%;
background-color: yellow;
float: left;
height: 150px;
}
#caja1{
width: 50%;
background-color: #ADD8E6;
float: left;
}
#caja2{
width: 50%;
background-color: #90EE90;
float: left;

}
#col_der{
width: 25%;
height: 150px;
background-color: yellow;
float: right;
clear: left;
height: 150px;
}
#caja_1{
width: 418px;
height: 50px;
background-color: #DDA0DD;
float: left;
clear: both;
}
#footer{
width: 418px;
height: 50px;
background-color: pink;
float: right;

}
.limpiador{
clear: both;
padding: 0;
border-style: none;
}
</style>
<title>Diseño web con CSS con varias columnas con float.</title>
</head>
<body>

<!--cabecera de la página-->
<div id="cabecera">Bienvenidos a aprenderaprogramar.com</div>

<!--columna izquierda-->
<div id="col_izq">
Menú<br/>
<ul>
<li>Cursos</li>
<li>Humor</li>
<li>Divulgación</li>
</ul>

</div>

<!--1ª caja central (arriba)-->
<div id="caja1">Conoce las últimas novedades del lenguaje Javascript.</div>

<!--2ª caja central (abajo)-->
<div id="caja2">Articulo sobre Gimp, un programa sobre software libre para el diseño gráfico.</div>

<!--columna derecha-->
<div id="col_der">Espacio reservado para publicidad</div>

<!--caja izquierda-->
<div id="caja_1">Contacta con nosotros</div>

<!--caja derecha-->
<div id="footer">Aviso legal</div>
<div class="limpiador"></div>
</body>
</html>


137
Buenas noches amigos aquí os dejo  el ejercicio CU01035D del tutorial CSS desde cero para que le echéis un vistazo. Gracias de antemano por vuestro tiempo. Ah se me olvidaba en la 3º  caja del tercer ejercicio el color solo sale por arriba lo he probado todo y no hay manera, a ver si me podéis ayudar.

Gracias y Saludos

Código: [Seleccionar]

<!DOCTYPE html>
<html lanng="es">

<head>
<meta name="description" content="Portal web - Aprenderaprogramar.com">
<meta name="keywords" content="clear css: left, right, both.">
<meta charset="utf-8">
<title>Clear CSS: left, right, both.</title>

<style>
#a{text-align: center; border-style: dotted;background-color: orange;}
#caja1, #caja2, #caja3, #caja4, #caja5, #caja6, #caja7, #caja7, #caja8{
width:50px;height: 50px;margin-right: 5px;border: solid;
}
#caja1{
background-color: red;
float: left;
}
#caja2{
background-color: blue;
float: left;
}
#caja3{
background-color: yellow;
float: left;
}
#caja4{
background-color: greenyellow;
float: left;
}
#caja5{
background-color: pink;
float: left;
}
#caja6{
background-color: darkmagenta;
float: left;
}
#caja7{
background-color: forestgreen;
float:left;
}
#caja8{
background-color: dodgerblue;
float: left;
}
.limpiador{
clear: both;
border: none;
height: 0;
}
#b{text-align: center;border-style: dotted;background-color: orange;}
#header{
text-align: center;
border-style: double;
background-color:yellow;
}
#texto{
background-color: yellow;
margin-top: 20px;
margin-bottom: 20px;
}

#c{
text-align: center;border-style: dashed;background-color: orange;
}



#caja_1{
text-align: center;
width: 200px;
height: 50px;
margin-right: 5px;
background-color: yellow;
float: right;
}
#caja_2{
text-align: center;
width: 200px;
height: 50px;
margin-right: 5px;
background-color: Purple;
float: right;
}
#caja_3{
text-align: center;
width:200px;
height: 5px;
margin-right: 5px;
background-color: pink;
float: right;
}
#d{text-align: center; border-style: solid;background-color: orange;}

#final{
background-color: #DEB887;
        clear: both;
}


</style>
</head>
<body>
<div id="a">Ejercicio a:</div>  <br/>

<div id="menu">

<div id="caja1">caja1</div>
<div id="caja2">caja2</div>
<div id="caja3">caja3</div>
<div id="caja4">caja4</div>
<div id="caja5">caja5</div>
<div id="caja6">caja6</div>
<div id="caja7">caja7</div>
<div id="caja8">caja8</div>
<div class="limpiador"></div>
</div>
<br/><br/><br/><br/>

<div id="b">Ejercicio b:</div>
<br/><br/>
<div id="header">Textos bonitos</div><br/><br/>
<br/>
<div id="texto">
<br/>
De nuevo, estoy al final de un momento decisivo. Un momento que llevas tanto tiempo esperando... que ahora casi decepciona.
Es el final y el comienzo al miesmo tiempo. Y no estoy segura de si esta sensación del estómago es por miedo, por ilusión.
No sé a qué me voy a tener que enfrentar. Ni a qué mala gente tendré que luchar. No sé si me quedaré sola por el camino,
me dejaré ganar o algo por el estilo.<br/><br/>


Pero es un momento decisivo. En el que por fin puedo decidir completamente cual quiero que sea mi próximo destino,
mi próxima puerta a la que llegar. Esta vez soy sólo yo quien decido los monstruos contra los que pelear.<br/><br/>

El miedo sigue ahí, y la ilusión y la decepción. Pero aun con todos los sentimientos confundidos, voy a ir entrando
fuerte, voy a ir dejando mis huellas en este nuevo camino.<br/><br/>

</div>

<div id="c">Ejercicio c:</div>
<br/><br/>
<div id="menu">

<div id="caja_1">caja_1</div>
<div id="caja_2">caja_2</div>
<div id="caja_3">caja_3</div>

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

<div id="d">Ejercicio d:</div><br/><br/>

<div id="final">Curso CSS aprenderaprogramar.com</div>


</body>
</html>

   

138
Buenas noches amigos aquí os dejo el ejercicio de la entrega CU01034D por si le podéis echar un vistazo

Gracias por vuestro tiempo

Saludos


/*Concepto float CSS. None, left, right. Colocar texto alrededor de una imagen. Ejemplos de posicionamiento*/


Ejercicio.   CU01034D del curso de CSS

Para cada una de las siguientes afirmaciones indica si es verdadera o falsa, y justifica brevemente tu respuesta:

a) La propiedad float puede tomar cuatro valores: top, right, bottom y left.

   Respuesta:
      Falsa. Solo toma none, right y left
      
b) float es una propiedad que nos permite maquetar páginas web (documentos HTML).

   Respuesta:
      Verdadera. Es una forma de colocar los elementos block, haciendo que los elementos posteriores lo traten como inline (parcialmente) rellenando el espacio que deja al definirlo como right o left.
      
c) Usando float: center; podemos centrar el contenido de un elemento respecto de su caja contenedora.

   Respuesta:
      Falsa. No existe un valor center para esta propiedad. Unicamente sirve para "arrastrar" elementos hacia izquierda o derecha
      
d) Un elemento flotante sale del flujo normal de posicionamiento de elementos en una página web.

   Respuesta:
      Verdadera. Los bordes, imagenes de fondo de los elementos envolventes se sitúan debajo de los elementos flotantes a los que envuelven.
      
e) Todos los elementos a continuación de un elemento flotante lo envuelven, a no ser que especifiquemos lo contrario usando la propiedad clear.

   Respuesta:
      Verdadera. En ocasiones no se quiere que la flotación de un elemento afecte el posicionamiento del elemento siguiente en estos casos se puede utilizar la propiedad clear.
      


139
Hola amigos buenas noches aquí os dejo los 3 html del ejercicio CU01032D del tutorial CSS desde cero  para ver qué os parece. Gracias por vuestro tiempo

Saludos


Ejercicio 1º

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="aprenderaprogramar.com">
<meta name="keywords" content="propiedad position de css">
<meta charset="utf-8">
<title>Propiedad position de CSS</title>

<style>
/*Propiedad positión CSS: static, relative, absolute, fixed.*/

#header{
text-align: center;
border-style: dashed;
}
#padre{
width: 900px;height:1300px;
border-style: double;
}

#a{
   width: 300px;height: 300px;margin: 40px;
   padding: 30px;background-color: yellow;
   position: relative;left: 200px;top: 100px;
   }
#b{
   width: 300px;height: 300px;margin: 40px;padding: 30px;
   background-color: blue;
   position: relative;right: 50px;bottom: 50px;
   }
#c{
   width: 300px;height: 300px;margin: 40px;
   padding: 30px;background-color: rgb(188, 64, 64);
   position: relative;
   left: 450px;bottom: 300px;
   }

.footer{
border-style: dotted;
        width: 95px;height: 50px;
}
</style>

</head>

<body>

<div id="header">

<h1>Propiedad positión css: static, relative, absolute, fixed.</h1>

</div>
<br/><br/>
<div id="padre">

<div ="menu">

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

</div>

</div>

<br/><br/>
<div class="footer">

Realizado por PANDEMIA.

</div>


</body>


</html>


Ejercicio 2º

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="Aprenderaprogramar.com">
<meta name="keywords" content="propiedad position css: static, relative, absolute, fixed.">
<meta charset="utf-8">
<title>Propiedad position CSS</title>
<style>
/*Ejercicio 2º de CU01032D del curso de CSS. Propiedad position css.*/


#header{
text-align:center;
border-style: dashed;
border-width: 4px;
}
#caja_1{
width:600px;
height: 600px;
background-color: yellow;
position: absolute;
}
#caja_2{
width: 400px;
height: 400px;
background-color: green;
position: absolute;
}
#caja_3{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
}


</style>


</head>
<body>

<div id="header">
Ejercicio 2º<br/>
Cajas contenedoras con posicionamiento ABSOLUTO.
</div>
<br/><br/>


<div id="menu">

<div id="caja_1"></div>
<div id="caja_2"></div>
<div id="caja_3"></div>
</div>




</body>
</html>


Ejercicio 3º


Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="Aprenderaprogramar.com">
<meta name="keywords" content="propiedad position css. Ejercicio 3º">
<meta charset="utf-8">
<title>Propiedad positión CSS</title>
<style>
#cookies{

height: 100px;
background-color: yellow;
position: fixed;
}
#parrafo{
width:900px;
height: 400px;
border-style: solid;
border-color: red;
border-width: 4px;
}
#parrafo_2{
width:900px;
height: 300px;
border-style: dashed;
border-color: green;
border-width: 4px;
}
#parrafo_3{
width: 1000px;
height: 1100px;
border-style: dotted;
border-color: blue;
border-width: 4px;
}

</style>

</head>
<body>
<div id="cookies">
Esta página web utiliza cookies. Si continúa navegando acepta el uso de las cookies.
</div>
<br/><br/><br/>
<h3>Frases de libros famosos que hay que leer</h3><br/><br/>

<div id="parrafo">
<br/><br/>
1-Nuestras vidas se definen por las oportunidades, incluso las que perdemos.-El curioso caso de Benjamin Button de F. Scott Fitzgerald.<br/>

2-Qué maravilloso es que nadie necesita un solo momento antes de comenzar a mejorar el mundo.-El diario de Ana Frank.<br>

3-El hombre razonable se adapta al mundo: el hombre no razonable persiste en intentar adaptar el mundo a si mismo. Por tanto, todo progreso depende del hombre no razonable.-Hombre y superhombre de George Bernad Shaw.<br/>

4-No hay felicidad o infelicidad en este mundo; solo hay comparación de un estado con otro. Solo un hombre que ha sentido la máxima desesperación es capaz de sentir la máxima felicidad. Es necesario haber deseado morir para saber lo bueno que es vivir.-El conde de Monte Cristo de Alexandre Dumas.<br/>

5-La muerte destroza al hombre: la idea de la muerte le salva.-Howards End de E. M. Forster.<br/>

6-Cuando amamos, siempre nos esforzamos por ser mejores de lo que somos. Cuando nos esforzamos por ser mejor de lo que somos, todo a nuestro alrededor se vuelve mejor.-El Alquimista de Paulo Coelho.<br/>

7-Es mejor mirar al cielo que vivir allí.-Desayuno con diamantes de Truman Capote.<br/>

8-Deja de preocuparte por envejecer y piensa en crecer.-El animal moribundo de Philip Roth.<br/>

9-Querían hablar, pero no pudieron; había lagrimas en sus ojos. Ambos estaban pálidos y delgados; pero aquellos rostros pálidos estaban iluminados con el amanecer de un nuevo futuro. Crimen y castigo de Fiódor Dostoyevski.<br/>

10-No tengo idea de qué me espera, o que ocurrirá cuando todo esto termine. Por el momento se esto: hay gente enferma y necesito curarlas.-La plaga de Albert Camus.
</div>
<br/><br/>

<h3>Párrafos inolvidables</h3><br/><br/>
<div id="parrafo_2">
<br/><br/>
"Amor: una sola palabra, una cosa pequeña, una palabra no mayor ni más larga que el filo de una navaja. Eso es lo que es: una cuchilla. Corta tu vida por el centro, separándolo todo en dos, haciendo que caiga a uno u otro lado. Antes y después.
Antes y después. Pero también durante: un instante no mayor ni más largo que el filo de una navaja."
<br/><br/>
"Amor, la más mortal de las cosas mortales. Te mata tanto cuando la tienes como cuando no la tienes.
Pero no es así exactamente.
Eres el que condena y el condenado. El verdugo, la cuchilla, el indulto de última hora, la respiración jadeante y el cielo tormentoso y el «gracias, gracias, gracias, Dios».
Amor: te mata y te salva a la vez."
<br/><br/>

En ese instante se oyó un fuerte estrépito: Hermione había soltado los colmillos de basilisco que llevaba en los brazos. Corrió hacia Ron, se le echó al cuello y le plantó un beso en la boca. El chico soltó también los colmillos y la escoba y le devolvió el beso con tanto entusiasmo que la levantó del suelo.
- ¿Os parece que es el momento más oportuno? - preguntó Harry con un hilo de voz, y como no le hicieron ni caso, sino que se abrazaron aún más fuerte y se balancearon un poco, gritó -: ¡Eh! ¡Que estamos en guerra!
Ambos se separaron un poco, pero siguieron abrazados.
- Ya lo sé, colega - dijo Ron con cara de atontado, como si acabaran de darle en la cabeza con una bludger - Precisamente por eso. O ahora o nunca, ¿no?'
</div>
<br/><br/>
<h3>Frases de libros</h3>
<br/><br/>
<div id="parrafo_3">
<br/>
-Saber apreciar la belleza, no es lo mismo que sentir debilidad. ( En llamas)<br/>



-Dibujar algo es intentar capturarlo para siempre. ( Cazadores de sombras)<br/>


-Amar es destruir y ser amado es ser destruido (Ciudad de hueso)<br/>


-Pero la música es vida, y mientras suene nada muere para siempre (contra el viento del norte)<br/>


- Para hacerse un enemigo no se necesita nada. Mejor dicho, hasta es fácil... En cambio, el verdadero honor estriba en saber hacerse un amigo. Tienes que querer, ser querido, currártelo, ser leal, ser amado... y eso es mucho más difícil, más trabajoso, pero también más hermoso. (Federico Moccia)<br/>


-Estoy fuera de los recuerdos, del pasado, pero también estoy perdido. Antes o después las cosas que has dejado atrás te alcanzan, y las cosas más estúpidas, cuando estas enamorado, las recuerdas como las más bonitas... Porque su simplicidad no tiene comparación. Y me dan ganas de gritar. En este silencio que hace daño... (Federico Moccia)<br/>



-La única cosa verdaderamente importante, la única cosa que cuenta de verdad, es darle un sentido a la propia vida, aunque esta carezca de sentido, porque la felicidades no es una meta... si no un estilo de vida. (Perdona si te llamo amor)<br/>



-Sintonizar...¿qué querrá decir?. La sintonía es algo que tiene que ver con la música, o peor aún, con los circuitos. El amor, en cambio, es cuando no respiras, cuando es absurdo, cuando echas de menos, cuando es bonito aunque esté desafinado, cuando es locura... Cuando sólo de pensar en verlo con otra cruzarías a nado el océano... (Perdona si te llamo amor)<br/>



-Soñamos con el amor, lo perseguimos, lo encontramos y luego acabamos perdiéndolo. Día tras día, pensando que lo bueno estaba aún por llegar, esperando... y sin darnos cuenta acabamos perdidos en el presente. El amor es cuando no respiras, cuando es absurdo, cuando echas de menos, cuando es bonito aunque esté desafinado, cuando es locura... (Tengo ganas de ti)<br/>



-Hay pocas razones para decir la verdad, pero para mentir el número es infinito. (Carlos Ruiz Zafón)<br/>



-Las casualidades son las cicatrices del destino. No hay casualidades, somos títeres de nuestra inconsciencia. (Carlos Ruiz Zafón)<br/>



-Creía que la vida nos concede a cada uno de nosotros unos escasos momentos de pura felicidad. A veces son sólo días o semanas. A veces, años. Todo depende de nuestra fortuna. El recuerdo de esos momentos nos acompaña para siempre y se transforma en un país de la memoria al que tratamos de regresar durante el resto de nuestra vida sin conseguirlo. (Marina)<br/>



-No había un momento específico. Era como poco a poco despertarte. Pasas de estar dormido, en el espacio entre el sueño la vigilia y la conciencia. Es un proceso lento, pero cuando estás despierto, no te puedes confundir. No había duda de que estás enamorado.(we"ll always have summer)<br/>



" Qué fecha, a qué hora, nace un amor es algo difícil de precisar. ¿Nace la primera vez que vemos a la persona amada? ¿O la primera vez que, al buscarle los ojos, nos encontramos correspondidos con la misma mirada, esa que no pretende ver sino entrar a través de las pupilas? ¿Nace la primera vez que pronunciamos su nombre como si invocáramos todo el universo? ¿Nace cuando se dice, cuando se reconoce <>? ¿Nace y crece tan poco a poco que no se sabe cuándo nació? Nadie registra, cronómetro en mano, la fecha de nacimiento de un amor. Pero todo el mundo necesita un número rodeado con rotulador rojo en el calendario."<br/>



Pomelo y limón de Begoña Oro

-La vida real no está confinada por dimensiones exactas. Se extiende mas allá de los límites. Viene con defectos. Las cosas nunca son fáciles, en especial cuando tú esperas que lo sean. Como cuando las personas te decepcionan porque resultan ser completamente diferentes de quienes pensabas que eran. (So much closer- Susanne Collanti)<br/>





 
-Una pelea es como el fuego. Crees que lo tienes bajo control, crees que puedes detenerlo cuando quieras, pero antes de darte cuenta, está ardierdo, y no hay manera de controlarlo y fuiste tonta por creer que podrías hacerlo.<br/>





-Todo en la vida tiene un momento que lo cambia por completo. El momento no depende de alguien más, pero tu díficlmente sabes cuando éste ha llegado.<br/>



-Son las imperfecciones de una persona lo que la hacen perfecta para alguien más.<br/>



-"Los momentos cuando se pierden, no se pueden encontrar de nuevo. Sólo han pasado."<br/>



-“No importa que hagas o a dónde vayas para distraerte, la realidad te alcanza en algún momento”<br/>



-"Nada graba tan fijamente una cosa en nuestra memoria como el deseo de olvidarla".<br/>



-No es malo tener miedo, lo malo es dejar que el miedo domine tu vida, porque entonces no tendrás vida, solo miedo.<br/>



-A veces nos creemos que las personas son décimos de loteria: que están ahí para hacer realidad nuestras ilusiones absurdas.<br/>



-Los que mueren de verdad son los que no viven. Los que se reprimen porque los asusta el qué dirán. Los que hacen descuentos a la felicidad. Los que se comportan siempre de la misma forma pensando que no se puede hacer nada diferente, los que piensan que amar es como una jaula, los que nunca cometen pequeñas locuras para reírse de sí mismos o de los demás. Mueren los que no saben pedir ni ofrecer ayuda.<br/>



-"Alguien dijo una vez que en el momento en que te paras a pensar si quieres a alguien,ya has dejado de quererle para siempre..."<br/>



-Hay ocasiones en que no ves. No ves las cosas que tienes delante cuando lo único que buscas es la felicidad. Una felicidad que te ofusca, que te distrae, una felicidad que te absorbe como una esponja. No lo ves. Sólo ves lo que quieres ver, lo que necesitas, lo que te sirve.<br/>



-Hay instantes en la vida en que creemos haber caído en un agujero oscuro y profundo del que no lograremos salir jamás, como si una bomba hubiera estallado sobre nosotros y hubiese destrozado nuestras vidas con un toque ligero y limpio. Todo lo que hemos vivido hasta ese momento se derrumba, se destruye, desaparece de la faz de la tierra, y entonces nos preguntamos qué va a ser de nosotros, cómo vamos a hacer para volver a sonreír. Lo peor de todo es que salimos a la calle y vemos que la gente sigue riendo, los niños siguen jugando en el parque, las parejas siguen besándose como si no hubiera mañana. Nada ha cambiado, todo permanece igual, sólo tú eres distinto.<br/>



-Es extraño, pero a menudo ocurre que determinadas personas, importantes en nuestra existencia, al principio no nos gustan nada.<br/>



-Los recuerdos tristes dormitan largo tiempo en una de las innumerables cavernas de la memoria; se mantienen allí durante años, decenios, la vida entera. Después, un buen día vuelven a la superficie, el dolor que los había acompañado vuelve a estar presente, tan intenso y punzante como lo era aquel día de hace tantos años.<br/>



-A lo largo de los cruces de tu camino te encuentras con otras vidas: conocerlas o no conocerlas, vivirlas a fondo o dejarlas correr es asunto que sólo depende de la elección que efectúas en un instante. Aunque no lo sepas, en pasar de largo o desviarte a menudo esta en juego tu existencia, y la de quien está a tu lado.




</div>


</body>
</html>


140
Aquí os dejo el ejercicio que he realizado haber que os parece, en la tercera imagen me sale una linea negra que no logro quitar, haber si alguien me puede echar una mano.

Gracias por vuestro tiempo, estoy aprendiendo mucho gracias a vosotros.

saludos


Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<title>CSS background position attachment; clip origin y size</title>
<meta name="description" content="aprenderaprogramar.com">
<meta name="keywords" content="posicion de imagenes de fondo">
<meta charset="utf-8">
<style>
div div div div {width: 400px;height: 400px;margin: 40px;padding: 40px;border: solid 4px;
}

#imagen1{background-image: url("http://www.ecoosfera.com/wp-content/imagenes/22-de-abril-dia-de-la-tierra.jpg");
background-color: yellow;background-position: center;background-repeat: no repeat;
}

#imagen2{background-image: url("https://i.ytimg.com/vi/0yc-Lal-FA0/maxresdefault.jpg");background-color: blue;
background-position: center;background-repeat: no repeat;
}

#imagen3{background-image: url("http://static.batanga.com/sites/default/files/curiosidades.batanga.com/files/Apuesto-que-no-conocias-estos-15-datos-interesantes-sobre-la-Tierra.jpg");
background-color: green;background-position: center top;background-repeat: no repeat;
}

#imagen4{background-image: url("https://imagenesyfondos.files.wordpress.com/2012/12/planeta_tierra.jpg");background-color: pink;
background-position: center;background-repeat: no repeat;

}

</style>


</head>

<body>

<div id="page">
<div id="header">
<h1>Imagenes de fondo</h1>

</div>
<div id="wrapper">

<div id="menu">

</div>

<div id="body">

<div id="imagen1"></div>
<div id="imagen2"></div>
<div id="imagen3"></div>
<div id="imagen4"></div>

</div>

</div>

<div id="footer">
Realizado por PANDEMIA
</div>
</div>

</body>



</html>


Páginas: 1 2 3 4 5 6 [7] 8

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