Curso de Css. Propiedad Background. Colores de fondo. Trabajo con listas.
Colores de fondo ó Background.
La Propiedad background de css nos permite aplicar estilo al fondo de los elementos, ya sea un color, una imagen, etc.
background-attachment
background-color
background-image
background-position
background-repeat
Vamos a seguir adornando y aprendiendo a trabajar con css, esta vez aplicando colores de fondo a distintos elementos. Como ya hemos creado unos marcos, los utilizaremos para mejorar el aspecto de nuestros párrafos y listas, dándoles un toque de color, además emplearemos algunas técnicas css, para mejorar todavía más la presentación. Veremos que más cosas podemos hacer con los div y algunas cosas más que irán surgiendo.
Primero, vamos a ir una vez más a nuestra hoja de estilo y añadiremos lo siguiente:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .marcoparraf { border:1px solid black; margin:20px; background-color:silver; /*---------------Propiedad añadida--------*/ } p.marcoparraf { padding:10px; } ul.marcoparraf { padding:10px 10px 10px 30px; } ol.marcoparraf { padding:10px 10px 10px 30px; } .marcocondiv { border:1px solid black; background-color:gray; /*---------------Propiedad añadida--------*/ } |
el resultado es este:
Marco contenedor de una página web.
Hasta ahora hemos presentado los elementos en la ventana del navegador, tal cual, es decir sin estar enmarcados en un marco general, pero esto no se debe hacer así, lo suyo es presentar una página web con ciertas medidas, dentro de un marco que englobe todo el contenido de la misma. Por otro lado un marco general global, nos ayudará a estructurar y colocar mejor cada parte o elemento que compone la página. Por tanto vamos a crear uno ahora mismo, tan solo es añadir un bloque div, que englobe todo el contenido o código fuente que hemos escrito, para ello abriremos nuestro div y le asignaremos un selector de clase, aunque podemos hacerlo con un selector unico «id», ya que solo habrá uno por página, como querais hacerlo.
añadir lo siguiente después de la etiqueta <body>:
<div class=»marcocontenedor»> y no olvideis cerrar el div </div>antes de la etiqueta </body>.
Después ir a la hoja de estilo y añadir la nueva clase y aplicarla un borde:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | /*---------------Clase añadida--------*/ .marcocontenedor { border:1px solid black; } /*---------------------*/ .marcoparraf { border:1px solid black; margin:20px; background-color:silver; } p.marcoparraf { padding:10px; } ul.marcoparraf { padding:10px 10px 10px 30px; } ol.marcoparraf { padding:10px 10px 10px 30px; } .marcocondiv { border:1px solid black; background-color:gray; } |
Y ya tenemos nuestro marco contenedor. He dejado un pequeño margen superior, para que se pueda ver el borde superior del marco del contenedor. lógicamente los elementos no estan espaciados correctamente dentro de él, por tanto ya sabemos o deberiamos saber que hay que hacer. Si pensasteis en el padding, acertasteis. Vamos nuevamente a la hoja de estilo, añadir algo de padding y ya de paso algún color de fondo para el marco, que lo pondremos esta vez en hexadecimal, para que os vayais familiarizando con esta
codificación.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | /*---------------Clase añadida--------*/ .marcocontenedor { border:1px solid black; margin:10px; padding:10px; background-color:#B4BDD1; } /*---------------------*/ .marcoparraf { border:1px solid black; margin:20px; background-color:silver; } p.marcoparraf { padding:10px; } ul.marcoparraf { padding:10px 10px 10px 30px; } ol.marcoparraf { padding:10px 10px 10px 30px; } .marcocondiv { border:1px solid black; background-color:gray; } |
Esto ya va pareciendo otra cosa, ¿Verdad?.
Aplicando Css a listas de una página web.
Las listas en html son un elemento muy importante y que nos dán mucho juego a la hora de organizar las distintas páginas de un sitio web.
A esto hay que sumarle, que al combinarlas con los enlaces ó vínculos y las propiedades css las posibilidades de estas en cuanto a crear menús, botones, etc muy funcionales y con gran estilo se disparan.
Como dije anteriormente, este curso no englobará todo lo que css da de sí, o podemos hacer con él. Para ello haría falta dedicarle un gran número de páginas web y tiempo tanto para crearlas, como para leerlas y francamente si no nos vamos a dedicar a crear páginas web demasiado sofisticadas en lo que ha estilo se refiere, con lo aprendido en mi curso y algunos truquillos y cosas que ireis captando de la web, os sobrará.
Lo que si aprendereis, será lo más básico que podemos hacer con las listas. Si os interesa el tema siempre podreis seguir investigando sobre ello, leyendo en otras web especializadas en diseño con hojas de estilo y propiedades css, eso lo dejo a vuestra elección.
Dicho lo cual, empezaremos diciendo que el navegador coloca por defecto unos adornos o numeración dependiendo si la lista es ordenada o desordenada, que marcan cada apartado o elemento «li» de la lista. Podemos quitarlos. Por ejemplo, si queremos presentar la lista desordenada, sin adornos, añadiremos la siguiente regla a la hoja de estilo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | .marcocontenedor { border:1px solid black; margin:10px; padding:10px; background-color:#B4BDD1; } .marcoparraf { border:1px solid black; margin:20px; background-color:silver; } p.marcoparraf { padding:10px; } ul.marcoparraf { padding:10px 10px 10px 30px; list-style:none; /*---------------Regla añadida--------*/ } ol.marcoparraf { padding:10px 10px 10px 30px; } .marcocondiv { border:1px solid black; background-color:gray; } |
Aplicando la propiedad list-style con el atributo none, hemos desactivado el adorno. Ahora
apliquemos el atributo circle.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | .marcocontenedor { border:1px solid black; margin:10px; padding:10px; background-color:#B4BDD1; } .marcoparraf { border:1px solid black; margin:20px; background-color:silver; } p.marcoparraf { padding:10px; } ul.marcoparraf { padding:10px 10px 10px 30px; list-style:circle; /*---------------Regla añadida--------*/ } ol.marcoparraf { padding:10px 10px 10px 30px; } .marcocondiv { border:1px solid black; background-color:gray; } |
ahora el adorno serán circulos pequeños.
Existe tambien la propiedad square cuyo adorno son cuadrados. También podemos numerarla como si fuesen listas ordenadas «ol» o utilizar el alfabeto para ordenarlas, tanto con letras mayúsculas como minúsculas. Aquí os dejo algunas variantes que podeis utilizar en las listas:
list-style:circle;
list-style:square;
list-style:upper-alpha;
list-style:lower-alpha;
list-style:georgian;
list-style:armenian;
list-style:upper-latin;
list-style:lower-latin;
list-style:lower-greek;
list-style:upper-roman;
list-style:lower-roman;
list-style:decimal-leading-zero;
list-style:decimal;
list-style:lower-roman;
En listas ordenadas, tambien podemos cambiar el adorno numérico que escribe el navegador por defecto, y ponerlo por ejemplo en numeros romanos (I,II,III,IV….) ó en letras (A,B,C,D….),o empezar la numeración por un número distinto del num. 1.por ejemplo que el primero sea un 4, el segundo un 5 y asi continuar. Para ello hay que aplicar el atributo star a la lista, en el código html.
Como veis css, es bastante completo y fácil de entender y de aplicar.
Como hemos dicho el trabajar con listas, da mucho juego, pero uno de los principales usos que se les dá, es para crear menús de enlaces. Para ello necesitamos crear una lista, y en cada elemento <li>, incluiremos un enlace o vínculo. El quitar los objetos decorativos de la lista es opcional, aunque suele hacerse para crear menús y queden mas estéticos. Para ello en el elemento de lista usariamos la propiedad que acabamos de ver, list-style:none; y en el elemento de ancla «a» usariamos la propiedad text-decoration:none;, para presentar solo el nombre de los enlaces sin subrayado. Si queremos un menú horizontal de botones, pondremos los elementos <li> todos seguidos. Luego crearemos marcos en cada elemento <li>, (Esto ya sabemos hacerlo, tan solo tenemos que poner en la hoja de estilo ul li {……}, o si hemos empleado una clase o un div, empleariamos el nombre de la clase y luego seleccionariamos con mas precisión al elemento ul y li, de esta manera .nombredeclase ul li {border:1px solid black;}.
Una vez tenemos los bordes, los ajustaremos a los elementos li que incluyen los enlaces y para activarlos escribiremos una nueva propiedad en la hoja de estilo, pero esta vez el selector apuntará más fino todavía, apuntaremos a los elementos de ancla ul li a {……}.
No quiero liaros con esta explicación rápida que acabo de hacer de como crear un menú de enlaces. Realmente es más sencillo hacer un menú, que entender la explicación que he dado. La verdad es que no pretendo que os lieis ya a hacer menús, porque todavia os faltan propiedades muy importantes que aprender, por ejemplo la propiedad width y la propiedad height, que las veremos a continuación o el manejo de div flotantes, que lo veremos en la siguiente página.Si acaso después de acabar el curso teneis interés en hacer menús, comunicaros conmigo y gustosamente os ayudaré en lo que pueda.
Propiedades width y height de Css.
El ancho (width) y alto (height) de los elementos, los controlamos con las propiedades
width y height, respectivamente.
podemos aplicar las propiedades anteriores y darle el tamaño y proporciones que deseemos a los elementos. Veamos un ejemplo aplicado a nuestra página:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | .marcocontenedor { border:1px solid black; margin:10px; padding:10px; background-color:#B4BDD1; } .marcoparraf { border:1px solid black; margin:20px; background-color:silver; } p.marcoparraf { padding:10px; } ul.marcoparraf { padding:10px 10px 10px 30px; list-style:circle; /*---------------Regla añadida--------*/ } ol.marcoparraf { padding:10px 10px 10px 30px; width:150px; height:auto; } .marcocondiv { border:1px solid black; background-color:gray; } |
El resultado será: