Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.


Y ahora tambien aprende a programar en C++ con Aprende Web C++


logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 10

Visitas el mes pasado: 18

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




3. Insertar imágenes (IV)

3.4 Cambiar el fondo.

Definir colores

En pasos anteriores hemos visto cómo definir algunos colores para el lenguaje CSS. concretamente hemos cambiado el color de las letras del título, subtítulo y párrafos de nuestra página. Para ello hemos escrito el nombre del color en inglés. Sin embargo los colores que podemos definir de esa manera son muy limitados (son sólo 17 colores).¿cómo podemos insertar un color que no esté en la lista?

Vamos a aprender un método para buscar e insertar cualquier color en nuestra Web. Aunque no es el más usado, es un método válido, el método RGB decimal.

Buscar colores

Esto que en principio puede sonar bastante raro, es más sencillo de lo que parece. Para empezar abrimos el programa "Paint", (el que hemos usado en pasos anteriores para medir el tamaño de la imagen). Recuerda está en "Inicio / Todos los programas / accesorios/ Paint"."

Una vez abierto el programa Paint, en la barra superior pulsa en "colores" y luego en "modificar colores". Se abre un cuadro; en él pulsa en "definir colores personalizados" El cuadro se amplia.


definir colores

En la parte derecha del cuadro, hay un cuadrado grande, y a su derecha una barra vertical con una pequeña flecha a su derecha. Con el botón izquierdo del ratón pulsado (arrastrar) puedes mover la flecha de la derecha de arriba a abajo, y también puedes moverlo dentro del cuadrado. Mientras lo haces observarás que el cuadrado pequeño que hay debajo, donde pone "color/sólido" cambia de color. Mueve el ratón y la flecha hasta obtener el color deseado.

Una vez que has elegido un color, fíjate en la esquina inferior derecha donde pone "Rojo" , "Verde", "Azul"; Cada uno de ellos tiene un número a su derecha. Anota y guarda esos números, pues son los que nos servirán para definir luego el color que has elegido.

En nuestro caso hemos elegido para color de fondo el siguiente: Rojo=239, Verde=226; Azul=254.

Este es el método RGB decimal, ya que RGB significa "Red, Green, Blue" (Rojo, verde y azul en inglés), y los números obtenidos son en el sistema decimal (Es decir números normales). El valor de los números de cada color va desde 0 hasta 255; y el resultado es la mezcla de estos tres colores en la cantidad indicada para cada uno de ellos.

Si quieres saber más sobre colores y otros métodos de indicar los colores en CSS, ve a la página 1.4 Colores y medidas del manual de CSS.

Insertar color de fondo

Una vez que hemos elegido el color, y tenemos sus valores abrimos el archivo estilo.css con el bloc de notas, y después de la última linea, escribimos la línea siguiente:

body { background-color: rgb(239,226,254); }

La propiedad background-color cambia el color de fondo; en este caso como queremos cambiar el fondo de toda la página, se la aplicamos al selector body. El valor puede escribirse de varias formas. Podemos escribir el nombre del color en inglés, siempre que esté en esta lista de colores; otra forma es la que hemos usado aquí: escribimos "rgb" y luego entre paréntesis los valores decimales de los colores rojo, verde y azul (en este orden), separados por comas.

Una vez escrita la línea, guardamos y cerramos el bloc de notas, y como siempre vamos a ver los resultados.Para ello abrimos el archivo index.html con el navegador.

Nuestra página debe quedar de la siguiente forma: Ver miWeb


Como siempre, si no obtienes el mismo resultado, revisa el código anterior, seguro que tiene algún fallo.


En el paso siguiente volveremos a cambiar el fondo, pero esta vez le pondremos una imagen .

ir al siguiente paso: Imagen de fondo







Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com