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 - Dimitar Stefanov

Páginas: 1 ... 8 9 10 11 12 [13] 14
241
Código del ejercicio CU01043D del curso CSS desde cero (respuestas están dentro del código como comentarios).

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Portal web</title>
<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, #caja1 {
display: table;
}
#vcent span, #caja1 span {
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="caja1"><span>Línea de texto contenedor 1</span></div>
<div id="vcent"><span>Línea de texto contenedor 2</span></div>
</body>
</html>

<!-- Hay 2 cajas contenedoras identificada sólo una de ella por id. -->
<!-- En mi caso, no se observa ninguna diferencia en los dos navegadores que he visualizado el código. Si se diera el caso de que se hubieran visto diferente, se debería a los propiedades por defecto de los navegadores que no hemos especificado nosotros en el código. -->
<!--  -->
<!-- La línea <<Línea de texto contenedor>> se muestra centrada porque es un elemento dentro de una tabla y le afecta la propiedad vertical-align. -->
<!-- Para que se mostrara igual la Línea de texto contenedor 1 como la Línea de texto contenedor 2 tan sólo tenemos que hacer los siguientes cámbios:
<div> (del primer contenedor) le tendremos que identificar por un id, en mi caso lo identifico como: id="caja1" y luego añadirlo en el script de arriba (tal y como está en el código más arriba). -->

242
Códigos del ejercicio CU01042D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="Portal web"/>
<meta name="keywords" content="programar,cursos"/>
<link rel="stylesheet" type="text/css" href="estilos74.css"/>
<title>Portal web</title>
</head>
<body>
<div id="caja1"><p class="p">El div 1 debe contener un texto suficientemente largo, con numerosos párrafos, como para exceder el tamaño del contenedor</p><p class="p"> El texto del html debe transformarse completamente a mayúsculas mediante el uso de propiedades CSS.</p><p class="p"> 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. </p></div>
<div id="caja2"><p>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 (cadenadetextocualquiera) 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.</p></div>
<div id="caja3"><p>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 (cadenadetextocualquieracadenadetextocualquiera) de gran longitud, de modo que no quepa en el contenedor, y no romperse.</p></div>
</body>
</html>

Código CSS: "estilos74.css"

Código: [Seleccionar]
div {
display: inline-block;
width: 180px;
height: 300px;
margin: 33px;
border-style: solid;
border-width: 6px;
border-color: red;
}
#caja1 {
text-transform: uppercase;
letter-spacing: 5px;
overflow: scroll;
}
.p::first-letter {
font-size: 250%;
}
#caja2 {
overflow-y: scroll;
text-transform: lowercase;
letter-spacing: 10px;
word-wrap: break-word;
}
#caja3 {
overflow-y: scroll;
text-transform: capitalize;
word-spacing: 10px;
}

PD: Como podemos observar, en la última caja, al haber una letra más larga que el ancho de la misma, aunque especificando en la propiedad overflow-y: scroll, el navegador realmente lo lee como: overflow: scroll, es decir, hay tanto un scroll vertical como horizontal, a pesar de que sólo hemos especificado la propiedad de overflow-y. No sé por qué pasa esto.

243
Códigos del ejercicios CU01041D del curso CSS desde cero.

Código HTML

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="Portal web"/>
<meta name="keywords" content="programar,cursos"/>
<link rel="stylesheet" type="text/css" href="estilos73.css"/>
<title>Portal web</title>
</head>
<body>
<div id="caja1"><p> 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 <span id="a">tamaño de fuente 18 píxeles y una sombra sólida de color rojo</span> con desplazamiento hacia la derecha y abajo.</p><p>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.</p></div>
<div id="caja2"><p>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 <span id="b">fuente 18 píxeles y una sombra sólida de color azul</span> con desplazamiento hacia la izquierda y abajo.</p><p>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 <span>tamaño de fuente 18 píxeles y una sombra sólida</span> de color azul con desplazamiento hacia la izquierda y abajo.</p></div>
<div id="caja3"><p>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 <span id="c">tamaño de fuente 18 píxeles y una sombra con efecto de difuminado de color verde</span> de modo que parezca que existe vapor verde detrás del texto.</p><p>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.</p></div>
</body>
</html>

Código CSS: "estilos73.css"

Código: [Seleccionar]
div {
display: inline-block;
width: 240px;
height: 300px;
margin: 18px;
padding: 8px;
border-style: solid;
border-width: 3px;
border-color: blue;
}
#caja1 {
overflow: scroll;
line-height: 105%;
}
#a {
font-size: 18px;
text-shadow: 5px 3px red;
}
#caja2 {
overflow: hidden;
line-height: 110%;
}
#b {
font-size: 18px;
text-shadow: -5px 3px blue;
}
#caja3 {
text-align: justify;
color: #8B4513;
overflow: scroll;
line-height: 120%;
}
#c {
font-size: 18px;
text-shadow: 0px 0px 5px green;
}

244
Código del ejercicio CU01040D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE htlm>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="Portal web"/>
<meta name="keywords" content="programar,cursos"/>
<link rel="stylesheet" type="text/css" href="estilos72.css"/>
<title>Ejemplo text-align</title>
</head>
<body>
<div id="caja1"><p id="a">El div 1 debe tener alineación del texto centrada, color de texto #FF6347. Debe contener un texto suficientemente largo, con algunas <span>palabras subrayadas</span> y el primer párrafo indentado un 10%.</p><p>El div 1 debe tener alineación del texto centrada, color de texto #FF6347. Debe contener un texto suficientemente largo, con algunas <span>palabras subrayadas</span> y el primer párrafo indentado un 10%.</p></div>
<div id="caja2"><p id="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 <span id="b">palabras subrayadas por encima</span>
y el primer párrafo indentado en 50 píxeles.</p>
<p>El div 2 debe tener alineación del texto a la derecha,
color de texto #008080.
Debe contener un texto suficientemente largo, con algunas <span id="b">palabras subrayadas por encima</span> y el primer párrafo indentado en 50 píxeles.</p></div>
<div id="caja3"><p id="e">El div 3 debe tener alineación del texto justificada, color de texto #8B4513. Debe contener un texto suficientemente largo, con algunas <span id="d">palabras tachadas</span>, y el primer párrafo indentado en un 20%.</p><p>El div 3 debe tener alineación del texto justificada, color de texto #8B4513.                Debe contener un texto suficientemente largo, con algunas <span id="d">palabras tachadas</span>, y el primer párrafo indentado en un 20%.</p></div>
</body>
</html>

Código CSS: "estilos72.css"

Código: [Seleccionar]
div {
display: inline-block;
width: 200px;
height: 400px;
padding: 10px;
border-style: solid;
border-width: 4px;
font-size: 14px;
}
#caja1 {
text-align: center;
color: #FF6347;
}
#a {
text-indent: 10%;
}
span {
text-decoration: underline;
}
#caja2 {
text-align: right;
color: #008080;
white-space: pre-line;
}
#b {
text-decoration: overline;
}
#c {
text-indent: 50%;
}
#caja3 {
text-align: justify;
color: #8B4513;
white-space: pre-wrap;
}
#d {
text-decoration: line-through;
}
#e {
text-indent: 20%;
}

No entiendo por qué las cajas div no están alineadas.

245
Respuestas para el ejercicio CU01039D del curso CSS desde cero.

A)
Hay 3 cajas contenedoras que todas ellas están identificadas por id.

B)
El grosor de la caja azul es de 3px y está establecido en unidades: píxeles.

C)
Las cajas se superponen, porque el navegador lee el código por su orden normal. Primero está entrada la caja gris, después la caja azul y al final la caja ocre. Se superponen, porque la caja azul, mediante las propiedades de margin entra en el espacio de la caja predecesora y a su vez la caja ocre entra en el espacio de la caja azul por la misma razón. Así que, mediante el código HTML del ejercicio, está encima la caja ocre, luego la caja azul y al final la caja gris.

D)
Para que la caja gris se sitúe por encima de las demás cajas, tan sólo tenemos que posicionarla en distinta dimensión. Esto lo conseguimos con posicionarla añadiendo a sus propiedades la siguiente propieda: #cajaGris {position: relative;}. El código HTML quedará de la siguiente manera:

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;
position: relative;
}
#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]
<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;
position: relative;
z-index: 1;
}
#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>

246
Códigos del ejercicio CU01038D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<html>
<head>
<meta charset="utf-8"/>
<title>Portal web - aprenderaprogramar.com</title>
<link rel="stylesheet" type="text/css" href="estilos67.css">
</head>
<body>
<div id="caja1">Caja 1 aprenderaprogramar.com web de didáctica y divulgación de la programación cursos humor y más
El tutorial css desde cero permite aprender sin tener conocimientos previos</div>
</body>
</html>

Código CSS: "estilos67.css"

Código: [Seleccionar]
div {
font-size: 30px;
width: 200px;
height: 200px;
background-color: yellow;
border: solid 2px blue;
overflow: scroll;
}

247
Aquí os dejo los códigos del ejercicio CU01036D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="Portal web"/>
<meta name="keywords" content="programar,cursos"/>
<link rel="stylesheet" type="text/css" href="estilos64.css"/>
<title>Ejemplo float</title>
</head>
<body>
<div id="caja1"><br/>Bienvenidos a aprenderaprogramar.com</div>
<div id="caja2"><br/>Menú<br/><br/>-Cursos<br/><br/>-Humor<br/><br/>-Divulgación<br/><br/></div>
<div id="caja3"><br/><br/>Conoce las últimas novedades del lenguaje<br/>JavaScript.</div>
<div id="caja4"><br/><br/><br/><br/>Espacion reservado para publicidad</div>
<div id="caja5"><br/><br/>Artículo sobre Gimp, un programa de software<br/>libre para el diseño gráfico.</div>
<div id="caja6"><br/>Contacta con nosotros</div>
<div id="caja7"><br/>Aviso legal</div>
</body>
</html>

Código CSS: "estilos64.css"

Código: [Seleccionar]
* {
font-family: arial;
font-size: 14px;
text-align: center;
}
body {
width: 604px;
}
div {
border: solid 1px;
}
#caja1 {
width: 602px;
height: 60px;
background-color: #DEB887;
border-bottom: none;
}
#caja2 {
width: 151px;
height: 181px;
float: left;
border-right: none;
}
#caja3 {
width: 300px;
height: 90px;
float: left;
background-color: #ADD8E6;
}
#caja4 {
width: 150px;
height: 181px;
float: right;
border-left: none;
}
#caja5 {
width: 300px;
height: 90px;
float: left;
background-color: #90EE90;
border-top: none;
}

#caja6 {
width: 301px;
height: 60px;
float:left;
background-color: #DDA0DD;
border-top: none;
}
#caja7 {
width: 301px;
height: 60px;
float: left;
border-left: none;
border-top: none;
}

248
Subo aquí los códigos del ejercicio CUO1035D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos60.css"/>
<title>Ejemplo de float</title>
</head>
<body>
<div>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
<div id="div6">div6</div>
<div id="div7">div7</div>
<div id="div8">div8</div>
<div class="limpiador"></div>
</div>
<div id="div9">Texto</div>
<div>
<div id="div10"></div>
<div id="div11"></div>
<div id="div12"></div>
</div>
<div id="div13">&lt;&lt;Curso CSS aprenderaprogramar.com&gt;&gt;</div>
</body>
</html>

Código CSS: "estilos60.css"

Código: [Seleccionar]
* {
font-family: arial;
}

div div {
width: 50px;
height: 50px;
margin-right: 5px;
border: solid;
}

#div1 {
background-color: red;
float: left;
}
#div2 {
background-color: blue;
float: left;
}

#div3 {
background-color: purple;
float: left;
}
#div4 {
background-color: grey;
float: left;
}
#div5 {
background-color: orange;
float: left;
}
#div6 {
background-color: pink;
float: left;
}
#div7 {
background-color: brown;
float: left;
}
#div8 {
background-color: green;
float: left;
}
.limpiador {
clear: both;
border: none;
height: 0;
}
#div9 {
background-color: yellow;
margin: 20px 0;
width: 100%;
}
#div10, #div11, #div12 {
width: 200px;
height: 50px;
margin-right: 5px;
float: right;
}
#div10 {
background-color: red;
}
#div11 {
background-color: blue;
}
#div12 {
background-color: yellow;
}
#div13 {
background-color: #DEB887;
clear: both;
width: 100%;
}

Como podemos observar, tanto en el #div9 como en el #div13 he establecido un valor de 100% en la propiedad "width". Esta propiedad sobra, porque por norma general el div es un elemento de tipo block y tiende a ocupar todo el ancho del elemento padre.

249
Muy buenas,

aquí dejo los códigos del ejercicio CU01032D del curso CSS desde cero.

Ejercicio 1:

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="Portal web"/>
<meta name="keywords" content="programar,cursos"/>
<link rel="stylesheet" text="text/css" href="estilos48.css"/>
</head>
<body>
<div id="padre">
<div id="a">
</div>
<div id="b">
</div>
<div id="c">
</div>
</div>
</body>
</html>

A)

Código CSS: "estilos48.css"

Código: [Seleccionar]
div {
border-style: solid;
}
div div {
width: 300px;
height: 300px;
border-style: dashed;
border-color: green;
margin: 40px;
padding: 30px;
}
#a {
background-color: skyblue;
position: relative;
left: 200px;
top: 100px;
}
#b {
background-color: pink;
}
#c {
background-color: yellow;
}

B)

Código CSS: "estilos49.css"

Código: [Seleccionar]
div {
border-style: solid;
}
div div {
width: 300px;
height: 300px;
border-style: dashed;
border-color: green;
margin: 40px;
padding: 30px;
}
#a {
background-color: skyblue;
}
#b {
background-color: pink;
position: relative;
right: 50px;
bottom: 50px;
}
#c {
background-color: yellow;
}

C)

Código CSS: "estilos50.css"

Código: [Seleccionar]
div {
border-style: solid;
}
div div {
width: 300px;
height: 300px;
border-style: dashed;
border-color: green;
margin: 40px;
padding: 30px;
}
#a {
background-color: skyblue;
}
#b {
background-color: pink;
}
#c {
background-color: yellow;
position: relative;
left: 450px;
bottom: 300px;
}

Ejercicio 2:

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="Portal web"/>
<meta name="keywords" content="programar,cursos"/>
<link rel="stylesheet" type="text/css" href="estilos51.css"/>
<title>Ejemplo de position</title>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</body>
</html>

Código CSS: "estilos51.css"

Código: [Seleccionar]
#div1 {
width: 600px;
height: 600px;
background-color: yellow;
position: absolute;
}
#div2 {
width: 400px;
height: 400px;
background-color: green;
position: absolute;
}
#div3 {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
}

Ejercicio 3:

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="Portal web"/>
<meta name="keywords" content="programar,cursos"/>
<link rel="stylesheet" type="text/css" href="estilos52.css"/>
<title>Ejemplo de position</title>
</head>
<body>
<div id="div1">
<p>&lt;&lt;Esta página web utiliza cookies. Si continuas navegando aceptas el uso de cookies.&gt;&gt;</p>
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</body>
</html>

Código CSS: "estilos52.css"

Código: [Seleccionar]
#div1 {
height: 100px;
background-color: yellow;
position: fixed;
top: 0;
}
#div2 {
height: 1000px;
background-color: blue;
}
#div3 {
height: 1000px;
background-color: pink;
}

PD: ¿Por qué cuando defino las divisiones "div"s con id="1" o id="2" (es decir, cuando les pongo número como id), después cuando me refiero a los mismos en la hora de estilo no me los reconoce?

250
Solución del ejercicio CU01031D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Portal web">
<meta name="keywords" content="programar,cursos">
<link rel="stylesheet" type="text/css" href="estilos43.css">
<title>Ejemplo de background-attachment</title>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

Código CSS: "estilos43.css"

Código: [Seleccionar]
div div div div {
width: 400px;
height: 400px;
margin: 40px;
padding: 40px;
border: solid 2px;
}
#a {
background-image: url(1.jpg);
background-repeat: no-repeat;
background-position: center;
background-color: red;
}
#b {
background-image: url(2.jpg);
background-repeat: no-repeat;
background-position: center;
background-color: blue;
}
#c {
background-image: url(1.png);
background-repeat: no-repeat;
background-position: center;
background-color: yellow;
}
#d {
background-image: url(1.jpg);
background-repeat: no-repeat;
background-position: center;
background-color: green;
}

251
Mis códigos del ejercicio CU01030D del curso CSS desde cero.

Primer ejercicio:

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Portal web">
<meta name="keywords" content="programar,cursos">
<link rel="stylesheet" type="text/css" href="estilos39.css">
<title>Ejemplo background-image</title>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

Código CSS: "estilos39.css"

Código: [Seleccionar]
div div div div {
width: 250px;
height: 250px;
margin: 30px;
padding: 30px;
}
#a {
background-color: blue;
background-image: url(1.png);
}
#b {
background-color: yellow;
background-image: url(1.png);
}
#c {
background-color: red;
background-image: url(1.png);
}
#d {
background-color: pink;
background-image: url(1.png);
}



PD: Adjunto el archivo de imagen.

252
Mi códigos.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Portal web">
<meta name="keywords" content="programar,curso">
<link rel="stylesheet" type="text/css" href="estilos37.css">
<title>Ejemplo margin y padding</title>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
<span id="a">div1</span>
<span id="b">div2</span>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

Código CSS: "estilos37.css"

Código: [Seleccionar]
body {
padding: 400px;
}
#a, #b {
width: 250px;
margin: 20px;
background-color: #FFB6C1;
border-top: dotted 15px #DC143C;
border-right: dashed 10px green;
border-bottom: double 10px #FF00FF;
border-left: ridge 40px #2F4F4F;
padding: 30px 45px 0 60px;
}
/* Ancho de cada div=div+border(10px+40px)+padding(45px+60px) */
/* Alto de cada div=div+border(15px+10px)+padding(30px+0px) */

253
Mis códigos del ejercicio CU01027D del curso CSS desde cero:

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Portal web">
<meta name="keywords" content="programar,cursos">
<link rel="stylesheet" type="text/css" href="estilos32.css">
<title>Ejemplo de border - aprenderaprogramar.com</title>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
<div id="a">div1</div>
<br/><br/>
<div id="b">div2</div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

1er Código CSS: "estilos32.css"

Código: [Seleccionar]
#a {
border-top-style: dotted;
border-top-width: 10px;
border-top-color: green;
border-right-style: dashed;
border-right-width: 20px;
border-right-color: blue;
border-bottom-style: double;
border-bottom-width: 10px;
border-bottom-color: #A52A2A;
border-left-style: groove;
border-left-width: 30px;
border-left-color: #2F4F4F;
height: 40px;
}
#b {
border-top-style: inset;
border-top-width: 30px;
border-top-color: #B22222;
border-right-style: solid;
border-right-width: 22px;
border-right-color: #DAA520;
border-bottom-style: double;
border-bottom-width: 25px;
border-bottom-color: #4B0082;
border-left-style: dotted;
border-left-width: 17px;
border-left-color: #808000;
height: 40px;
}

PD: Como pueden ver, he utilizado la propiedad "height" tanto para la primera división como para la segunda para que se puedan ver mejor los resultados.

2o Código CSS:

Código: [Seleccionar]
#a {
border-top: dotted 10px green;
border-right: dashed 20px blue;
border-bottom: double 10px #A52A2A;
border-left: groove 30px #2F4F4F;
height: 40px;
}
#b {
border-top: inset 30px #B22222;
border-right: solid 22px #DAA520;
border-bottom: double 25px #4B0082;
border-left: dotted 17px #808000;
height: 40px;
}

PD: Aquí también he introducido la propiedad "height" con la misma finalidad como en el 1er código CSS.

254
Mis códigos del ejercicio cu01021D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="programacion, cursos">
<meta name="description" content="Portal web aprenderaprogramar.com">
<link rel="stylesheet" type="text/css" href="estilos25.css">
<title>Ejemplo colores</title>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="wrappew">
<div id="menu">
</div>
<div id="body">
<span id="a">Notación RGB</span><br/>
<span id="b">Notación RGBA</span><br/>
<span id="c">Notación hexadecimal.</span><br/>
<span id="d">Notación HSL</span><br/>
<span id="e">Notación HSLA</span><br/>
<span id="f">Notación nombre</span>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

Código CSS: "estilos25.css"

Código: [Seleccionar]
#a {
background-color: rgb(218,165,32);
}
#b {
background-color: rgba(218,165,32,0.5);
}
#c {
background-color: #FF0000;
}
#d {
background-color: hsl(50,100%,50%);
}
#e {
background-color: hsla(50,100%,50%,0.5);
}
#f {
background-color: green;
}

Utilizo los selectores:"#" porque el método de:"nth-child(númerodeelementoreferido)" no me funcionó.

255
Mis códigos del ejercicio CU01026D del curso de desarrollo web con CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="programar,cursos">
<meta name="description" content="Portal web">
<link rel="stylesheet" type="text/css" href="estilos30.css">
<title>Ejemplos CSS</title>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
<div id="a">div1</div><br/><br/>
<div id="b">div2</div><br/><br/>
<div id="c">div3</div><br/><br/>
<div id="d">div4</div><br/><br/>
<div id="e">div5</div><br/><br/>
<div id="f">div6</div><br/><br/>
<div id="g">div7</div><br/><br/>
<div id="h">div8</div><br/><br/>
<div id="i">div9</div><br/><br/>
<div id="j">div10</div><br/><br/>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

Código CSS: "estilos30.css"

Código: [Seleccionar]
#a {
border-top-style: solid;
border-right-style: dotted;
border-bottom-style: dashed;
border-left-style: double;
border-color: red;
}
#body div {
border-width: 10px;
}
#b {
border-top-style: groove;
border-right-style: ridge;
border-bottom-style: inset;
border-left-style: outset;
border-color: green;
}
#c {
border-top-style: dotted;
border-right-style: dashed;
border-bottom-style: hidden;
border-left-style: double;
border-color: blue;
}
#d {
border-top-style: dotted;
border-right-style: groove;
border-bottom-style: ridge;
border-left-style: hidden;
border-color: pink;
}
#e {
border-top-style: outset;
border-right-style: inset;
border-bottom-style: ridge;
border-left-style: hidden;
border-color: yellow;
}
#f {
border-top-style: dotted;
border-right-style: none;
border-bottom-style: dashed;
border-left-style: double;
border-color: blue;
}
#g {
border-top-style: inset;
border-right-style: ridge;
border-bottom-style: dashed;
border-left-style: dotted;
border-color: red;
}
#h {
border-top-style: solid;
border-right-style: double;
border-bottom-style: dotted;
border-left-style: outset;
border-color: green;
}
#i {
border-top-style: groove;
border-right-style: solid;
border-bottom-style: double;
border-left-style: hidden;
border-color: black;
}
#j {
border-top-style: dashed;
border-right-style: inset;
border-bottom-style: ridge;
border-left-style: solid;
border-color: brown;
}

No me funcionaron los selectores: "nth-child(númerodeelemento)" por lo tanto me vi obligado a utilizar los selectores:"#"

256
Aquí os dejo mis códigos también. No sé si he hecho bien el ejercicios. Agredecería que alguien lo revisara y me comente los errores.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="programar,cursos">
<meta name="description" content="Portal web">
<link rel="stylesheet" type="text/css" href="estilos27.css">
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
<table>
<tr>
<th>Título</th>
<th>Tamaño px</th>
<th>Tamaño em</th>
<th>Tamaño pt</th>
<th>Tamaño %</th>
</tr>
<tr id="a">
<td><h1>H1</h1></td>
<td>32.5</td>
<td>2</td>
<td>25</td>
<td>200</td>
</tr>
<tr id="b">
<td><h2>H2</h2></td>
<td>25</td>
<td>1.5</td>
<td>18</td>
<td>150</td>
</tr>
<tr id="c">
<td><h3>H3</h3></td>
<td>20</td>
<td>1.25</td>
<td>15</td>
<td>125</td>
</tr>
<tr id="d">
<td><h4>H4</h4></td>
<td>15</td>
<td>1</td>
<td>12.5</td>
<td>100</td>
</tr>
<tr id="e">
<td><h5>H5</h5></td>
<td>13.5</td>
<td>0.9</td>
<td>10</td>
<td>90</td>
</tr>
<tr id="f">
<td><h6>H6</h6></td>
<td>10.5</td>
<td>0.725</td>
<td>8.5</td>
<td>75</td>
</tr>
</table>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

Código CSS: "estilos27.css"

Código: [Seleccionar]
table, td, th {
border: 2px solid;
}
th {
background-color: gray;
}
#a td:nth-child(2) {
font-size: 32.5px;
font-weight: bold;
}
#a td:nth-child(3) {
font-size: 2em;
font-weight: bold;
}
#a td:nth-child(4) {
font-size: 25pt;
font-weight: bold;
}
#a td:last-child {
font-size: 200%;
font-weight: bold;
}
#b td:nth-child(2) {
font-size: 25px;
font-weight: bold;
}
#b td:nth-child(3) {
font-size: 1.5em;
font-weight: bold;
}
#b td:nth-child(4) {
font-size: 18pt;
font-weight: bold;
}
#b td:last-child {
font-size: 150%;
font-weight: bold;
}
#c td:nth-child(2) {
font-size: 20px;
font-weight: bold;
}
#c td:nth-child(3) {
font-size: 1.25em;
font-weight: bold;
}
#c td:nth-child(4) {
font-size: 15pt;
font-weight: bold;
}
#c td:last-child {
font-size: 125%;
font-weight: bold;
}
#d td:nth-child(2) {
font-size: 15px;
font-weight: bold;
}
#d td:nth-child(3) {
font-size: 1em;
font-weight: bold;
}
#d td:nth-child(4) {
font-size: 12.5pt;
font-weight: bold;
}
#d td:last-child {
font-size: 100%;
font-weight: bold;
}
#e td:nth-child(2) {
font-size: 13.5px;
font-weight: bold;
}
#e td:nth-child(3) {
font-size: 0.9em;
font-weight: bold;
}
#e td:nth-child(4) {
font-size: 10pt;
font-weight: bold;
}
#e td:last-child {
font-size: 90%;
font-weight: bold;
}
#f td:nth-child(2) {
font-size: 10.5px;
font-weight: bold;
}
#f td:nth-child(3) {
font-size: 0.725em;
font-weight: bold;
}
#f td:nth-child(4) {
font-size: 8.5pt;
font-weight: bold;
}
#f td:last-child {
font-size: 75%;
font-weight: bold;
}

He ido probando las medidas, pero no sé si coinciden exactamente.

257
Mi solución al ejercicio CU01023D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="programar,cursos">
<meta name="description" content="Portarl web aprenderaprogramar.com">
<link rel="stylesheet" type="text/css" href="estilos26.css">
<title>Ejemplos para W3C</title>
</head>
<body>
<div id="page">
<div id="header">
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="¡CSS Válido!" />
</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="¡CSS Válido!" />
</a>
</p>
<h1>Aprendizaje de la programación</h1>
</div>
<div id="wrapper">
<div id="menu">
<h2>Menu</h2>
<ul>
<li>Programación básica</li>
<li>Programación intermedia</li>
<li>Programación avanzada</li>
</ul>
</div>
<div id="body">
</div>
</div>
<div id="footer">
Curso aprenderaprogramar.com
</div>
</div>
</body>
</html>

Código CSS: "estilos26.css"

Código: [Seleccionar]
h1 {
background-color: #FE2E2E;
font-size: 130%;
}
h2 {
background-color: #40FF00;
font-size: 150%;
}
ul, ul li {
background-color: #0000FF;
font-size: 120%;
}
#footer {
background-color: #00FFFF;
font-size: 90%;
}

258
De la siguiente manera me han quedado los 2 códigos del ejercicio CUO1020D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="programar,aprender">
<meta name="description" content="Portal web aprenderaprogramar.com">
<link rel="stylesheet" type="text/css" href="estilos23.css">
<title>Ejemplo colores</title>
</head>
<body>
<div id="page">
<div>
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
<span id="a"><<</>RGB 178,34,34 con transparencia 0.1>></span><br/>
<span id="b"><<</>RGB 178,34,34 con transparencia 0.2>></span><br/>
<span id="c"><<</>RGB 178,34,34 con transparencia 0.3>></span><br/>
<span id="d"><<</>RGB 178,34,34 con transparencia 0.4>></span><br/>
<span id="e"><<</>RGB 178,34,34 con transparencia 0.5>></span><br/>
<span id="f"><<</>RGB 178,34,34 con transparencia 0.6>></span><br/>
<span id="g"><<</>RGB 178,34,34 con transparencia 0.7>></span><br/>
<span id="h"><<</>RGB 178,34,34 con transparencia 0.8>></span><br/>
<span id="i"><<</>RGB 178,34,34 con transparencia 0.9>></span><br/>
<span id="j"><<</>RGB 178,34,34 con transparencia 1.0>></span><br/>
<span id="k"><<</>RGB 218,165,32 con transparencia 1.0>></span><br/>
<span id="l"><<</>RGB 218,165,32 con transparencia 0.9>></span><br/>
<span id="m"><<</>RGB 218,165,32 con transparencia 0.8>></span><br/>
<span id="n"><<</>RGB 218,165,32 con transparencia 0.7>></span><br/>
<span id="o"><<</>RGB 218,165,32 con transparencia 0.6>></span><br/>
<span id="p"><<</>RGB 218,165,32 con transparencia 0.5>></span><br/>
<span id="q"><<</>RGB 218,165,32 con transparencia 0.4>></span><br/>
<span id="r"><<</>RGB 218,165,32 con transparencia 0.3>></span><br/>
<span id="s"><<</>RGB 218,165,32 con transparencia 0.2>></span><br/>
<span id="t"><<</>RGB 218,165,32 con transparencia 0.1>></span><br/>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

Código CSS: "estilos23.css"

Código: [Seleccionar]
#a {
background-color: rgba(178,34,34,0.1);
}
#b{
background-color: rgba(178,34,34,0.2);
}
#c{
background-color: rgba(178,34,34,0.3);
}
#d{
background-color: rgba(178,34,34,0.4);
}
#e{
background-color: rgba(178,34,34,0.5);
}
#f{
background-color: rgba(178,34,34,0.6);
}
#g {
background-color: rgba(178,34,34,0.7);
}
#h {
background-color: rgba(178,34,34,0.8);
}
#i {
background-color: rgba(178,34,34,0.9);
}
#j {
background-color: rgba(178,34,34,1.0);
}
#k {
background-color: rgba(218,165,32,1.0);
}
#l {
background-color: rgba(218,165,32,0.9);
}
#m {
background-color: rgba(218,165,32,0.8);
}
#n {
background-color: rgba(218,165,32,0.7);
}
#o {
background-color: rgba(218,165,32,0.6);
}
#p {
background-color: rgba(218,165,32,0.5);
}
#q {
background-color: rgba(218,165,32,0.4);
}
#r {
background-color: rgba(218,165,32,0.3);
}
#s {
background-color: rgba(218,165,32,0.2);
}
#t {
background-color: rgba(218,165,32,0.1);
}

Como pueden observar, me refiero a los elementos mediante los selectores "#" porque no pude conseguir que funcionaran los selecontes: "nth-child(númerodehijo)", no sé porque.

259
El ejercicio CU01019D me ha quedado como sigue:

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="Portal web aprenderaprogramar.com">
<meta name="description" content="aprender,programar,cursos">
<link rel="stylesheet" type="text/css" href="estilos21.css">
<title>Ejemplo colores</title>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
<table>
<tr>
<th>Nombre</th>
<th>Hexadecimal</th>
<th>RGB</th>
</tr>
<tr>
<td>DimGray</td>
<td>696969</td>
<td>105,105,105</td>
</tr>
<tr>
<td>IndianRed</td>
<td>CD5C5C</td>
<td>205,92,92</td>
</tr>
<tr>
<td>FireBrick</td>
<td>B22222</td>
<td>178,34,34</td>
</tr>
<tr>
<td>DodgerBlue</td>
<td>1E90FF</td>
<td>30,144,255</td>
</tr>
<tr>
<td>Indigo</td>
<td>4B0082</td>
<td>75,0,130</td>
</tr>
</table>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

Código CSS: "estilos21.css"

Código: [Seleccionar]
table, td, th  {
border: 2px solid;
}
tr:nth-child(2) {
background-color: rgb(178, 34, 34);
}
tr:nth-child(3) {
background-color: rgb(205, 92, 92);
}
tr:nth-child(4) {
background-color: rgb(30, 144, 255);
}
tr:nth-child(5) {
background-color: rgb(75, 0, 130);
}
tr:last-child {
background-color: rgb(105, 105, 105);
}

260
Mi solución al ejercicio CU01013D:

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Portal web</title>
<meta name="description" content="Portal web">
<meta name="keywords" content="aprender,programar,cursos,libros">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos12.css">
<body>
<div class="principal">
<h1 class="principal">Novedades</h1>
<p>Aquí presentamos las novedades del estilo.</p>
</div>
<div class="secundario">
<h3>Lanzamos el producto <span>X-FASHION</span></h3>
<p>Este producto permite estirar la pies hasta dejarla como la de un bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion"></p>
</div>
<div class="tercera">
<h3>Mejoramos el producto T-MATION</h3>
<p>Hemos lanzado una nueva versión del producto T-MATION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del producto tmotion" alt="imagen producto tmotion"></p>
</div>
</body>
</html>

Código CSS:

Código: [Seleccionar]
.principal h1 {
color: red;
font-size: 130%;
}
.secundario h3 {
color: green;
font-size: 110%;
}
.secundario h3 span {
background-color: yellow;
}
html {
font-family: Arial;
}

Páginas: 1 ... 8 9 10 11 12 [13] 14

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