Vamos a darle estilo a nuestro DIV colocandole un fondo de color o una imagen con la propiedad [ background ] de CSS3.
<html> <head> </head> <body> <div> </div> </body> <html>
Después de haberlo creado le asignamos una clase con su respectivo nombre, en este ejemplo usaremos el nombre de [ estilo_div ], hay que tener mucho cuidado al escribir los nombre que se le asignen puesto que en CSS3 distingue entre mayúsculas y minúsculas, también hay que tener cuidado con los espacios puesto que no CSS3 no los acepta.
<html> <head> </head> <body> <div class="estilo_div"> </div> </body> </html>
enlazamos nuestro archivo .css que en este ejemplo lo llamaremos [ estilos.css ], a nuestro archivo [ .html ], con el siguiente codigo HTML.
ahora en nuestro archivo estilos.css creamos lo siguiente:
.estilo_div{
background:orange;
height:100px;
width:250;
}
o si queremos una escala de el colo verde lo colocamos con el código correspondiente.
.estilo_div{
background:#66ff00;
height:100px;
width:250;
}
Obteniendo un DIV de color naranja con una altura de 100px y un ancho de 250px .
Aquí les dejo algunos ejemplos de las escalas de colores con sus respectivos códigos:
| Código | Col | Código | Col | Código | Col | Código | Col |
|---|---|---|---|---|---|---|---|
| #000000 | #330000 | #660000 | #FF0000 | ||||
| #000033 | #330033 | #660033 | #FF0033 | ||||
| #000066 | #330066 | #660066 | #FF0066 | ||||
| #000099 | #330099 | #660099 | #FF0099 | ||||
| #0000CC | #3300CC | #6600CC | #FF00CC | ||||
| #0000FF | #3300FF | #6600FF | #FF00FF | ||||
| #003300 | #333300 | #663300 | #FF3300 | ||||
| #003333 | #333333 | #663333 | #FF3333 | ||||
| #003366 | #333366 | #663366 | #FF3366 | ||||
| #003399 | #333399 | #663399 | #FF3399 | ||||
| #0033CC | #3333CC | #6633CC | #FF33CC | ||||
| #0033FF | #3333FF | #6633FF | #FF33FF | ||||
| #006600 | #336600 | #666600 | #FF6600 | ||||
| #006633 | #336633 | #666633 | #FF6633 | ||||
| #006666 | #336666 | #666666 | #FF6666 | ||||
| #006699 | #336699 | #666699 | #FF6699 | ||||
| #0066CC | #3366CC | #6666CC | #FF66CC | ||||
| #0066FF | #3366FF | #6666FF | #FF66FF | ||||
| #009900 | #339900 | #669900 | #FF9900 | ||||
| #009933 | #339933 | #669933 | #FF9933 | ||||
| #009966 | #339966 | #669966 | #FF9966 | ||||
| #009999 | #339999 | #669999 | #FF9999 | ||||
| #0099CC | #3399CC | #6699CC | #FF99CC | ||||
| #0099FF | #3399FF | #6699FF | #FF99FF | ||||
| #00CC00 | #33CC00 | #66CC00 | #FFCC00 | ||||
| #00CC33 | #33CC33 | #66CC33 | #FFCC33 | ||||
| #00CC66 | #33CC66 | #66CC66 | #FFCC66 | ||||
| #00CC99 | #33CC99 | #66CC99 | #FFCC99 | ||||
| #00CCCC | #33CCCC | #66CCCC | #FFCCCC | ||||
| #00CCFF | #33CCFF | #66CCFF | #FFCCFF | ||||
| #00FF00 | #33FF00 | #66FF00 | #FFFF00 | ||||
| #00FF33 | #33FF33 | #66FF33 | #FFFF33 | ||||
| #00FF66 | #33FF66 | #66FF66 | #FFFF66 | ||||
| #00FF99 | #33FF99 | #66FF99 | #FFFF99 | ||||
| #00FFCC | #33FFCC | #66FFCC | #FFFFCC | ||||
| #00FFFF | #33FFFF | #66FFFF | #FFFFFF |
Ahora si queremos colocarle una imagen y no un color podremos hacerlo con la propiedad [ background-image: url( "direccion de la imagen") ] o tambien la podemos colocar solo [ background: url( "direccion de la imagen") ] de las dos formas son validas.
.estilo_div{
background-image:url(imagen.jpg);
height:100px;
width:250;
}
si nuestra imagen estubiera en otra carpeta fuera de donde tenemos guardado nuestro archivo [ estilo.css ], como por ejemplo: tenemos dos carpetas una donde tenemos nuestros archivos CSS llamada css y otra donde tendremos nuestras imagenes llamada imagenes, entonces nuestra direccion quedaria:
.estilo_div{
background-image:url(../imagenes/imagen.jpg);
height:100px;
width:250;
}
Si quieres que tu imagen solo se muestre una sola vez le colocamos la propiedad: [ background-repeat: no-repeat ], para que tu imagen no se repita mas de una vez.
.estilo_div{
background-image:url(../imagenes/imagen.jpg);
background-repeat:no-repeat;
height:100px;
width:250;
}
0 comentarios :
Publicar un comentario