Este articulo pertenece al curso de CSS que empece ha unos días y que tenia un poco olvidado, pero quiero retomarlo. Vamos a empezar por lo sencillo que es dar tamaño y color de fondo a las distintas capas que haremos al hacer una pagina con CSS. Los atributos que vamos a ver son tres, iremos poco a poco ya que esto se ira complicando y conviene aprender lo básico bien para desenvolverse posteriormente de forma adecuada.
Para dar formato a las capas vamos a utilizar unos atributos que os nombro a continuación, ademas de una pequeña descripción de para que sirve cada una:
- width : Este atributo sirve para dar el tamaño del ancho de una capa en CSS. Las medidas se las podemos dar en varios valores pero me voy a centrar en dos que considero los mas importantes, en pixels (px) o en porcentaje (%).
- height: Con este atributo podemos asignar un valor a la largura de la capa que queramos hacer. Los valores se pueden indicar de la misma forma que en la anterior etiqueta.
- background-color : Este atributo sirve para dar color de fondo a la capa, se puede indicar el color de varias formas, con el valor en hexadecimal (#33aa09), con valores RGB (123,066,199) o con el nombre del color en ingles aunque no es aconsejable hacer esto ultimo ya que los navegadores pueden mostrar colores ligeramente diferentes unos de otros según que navegador usemos. Yo prefiero usar en hexadecimal, ademas yo uso el Geany para hacer paginas web y trae incorporado una paleta selectora de colores.
Por ahora solo vamos a usar estos tres atributos que ademas son muy sencillos de usar. Os voy a poner un ejemplo en el cual vamos a crear una pagina web que tenga una capa de 300 pixels de ancho por 500 pixels de largo y que tenga de color de fondo, el color es indiferente, podéis elegir el queráis. De momento podemos usar los nombres de los colores en ingles ya que no vamos a hacer un diseño especifico y para ir aprendiendo vale cualquier color.
Como ya comente en otro articulo, el anterior a este del curso de CSS, recomiendo poner el HTML por un lado y el CSS por otro. Os voy a poner el ejemplo:
<html> <head> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <div id="capa-verde"></div> </body> </html>
Con esto ya tenemos el archivo HTML, ahora toca el archivo llamado “estilo.css” al que hacemos referencia en la sección “head” de la pagina, aquí os lo pongo:
#capa-verde
{
width: 300px;
height: 500px;
background-color: green;
}
Recordad que para que el navegador use este archivo CSS tiene que estar en el mismo directorio, ya que así se lo hemos indicado en la sección “head” de la pagina HTML. Si os fijáis en el HTML he declarado la capa llamada “capa-verde” y luego en el documento CSS abro la declaración de atributos poniendo “#capa-verde”, abro una llave, pongo los atributos anteriormente mencionados y cada uno de ellos tiene su valor correspondiente, al final cierro la llave. Cada atributo y su valor tiene que llevar al final un “;”. Si ejecutáis el documento HTML en un navegador web deberíais ver lo siguiente:
Ahora podéis jugar con estos valores como queráis, es muy sencillo. Supongamos que queremos crear una capa igual que la anterior pero queremos que el ancho, “width”, sea el 80% del ancho del navegador web, solo tenemos que substituir el “300px” por “80%” y listo. Usar los valores en porcentaje esta muy bien ya que así el diseño se amoldara a la resolución de la pantalla en la que un usuario este visitando nuestra pagina, aunque ese es un tema mas complicado que veremos mas adelante, de esa forma estaríamos haciendo una pagina “responsive” o adaptativa.
En el vídeo que os dejo a continuación hago este ejemplo paso a paso y también creo algunas capas con porcentajes. Ademas también hago mas de una capa en una pagina web para que veáis como quedan:
Si te ha gustado o te ha servido para algo el contenido de este articulo compártelo en las redes sociales para que pueda crecer, muchas gracias.
Me gusta todo lo relacionado con la informatica, especialemente Linux y el diseño web y me gusta compartir mis conocimientos, de esa forma aprendo cosas nuevas todos los dias
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure