Home

      Comment post English
x

Select your language

EnglishEspañol

Tutorial de CSS - Segunda parte


31 people like this


<< VIENE DE TUTORIAL DE CSS - PRIMERA PARTE

 
Definir fondos de pantalla con CSS

Lo primero que se aprenderá a definir estéticamente con CSS, son los fondos de elementos. Antiguamente con HTML, solamemente se podían definir los fondos de documentos (páginas) y de las celdas de tablas. Pero CSS nos permite definir el fondo de todo tipo de elementos; como fondos de documentos, tablas, celdas, div, span, párrafos, listas, campos de formularios, y muchos más. Por lo tanto, la diversidad estética y flexibilidad que nos provee CSS, es muy superior, permitiendo el diseño de páginas estéticamente mucho más vistosas.

Las propiedades que nos permiten definir los fondos de elementos HTML así como efectos visuales de estos fondos son las siguientes:

  • background-color: Define el color de fondo de elemento HTML.
  • background-image: Define una imagen de fondo para un elemento HTML.
  • background-repeat: Define si la imagen de fondo se repite en mosaico, en caso de ser más pequeña que el elemento HTML.
  • background-attachment: Define si la imagen de fondo es estática o se desliza junto a la pantalla al hacer scroll (deslizar hacia arriba y abajo la pantalla).
  • background-position: Define la posición de la imagen de fondo dentro del elemento HTML.
Como habrán notado, cada una de las propiedades están compuestas por dos palabras clave. En CSS, los nombres de propiedades pueden estar compuestos por dos o más palabras. Entonces, en un nombre de propiedad individual, las palabras que la componen deben estar siempre, pero siempre, con guiones; o sea que si se las escribe separadas, puede que se genere un error en la página, desaparezca el elemento definido o simplemente no se aplique la definición estilística.

Por ejemplo:

- background color está mal y generará un error

- background-color está correctamente escrito

Por lo tanto recuerden que todas las propiedades CSS compuestas por más de una palabra siempre están separadas por guiones en lugar de espacios.

Ahora analicemos cada una de las propiedades que definen el estilo de fondos de elementos HTML:
 
 
1. background-color:

La propiedad background-color (que en inglés significa color de fondo), permite definir los colores de fondo de distintos elementos HTML que componen una página Web.

Por ejemplo, la manera de definir el color de fondo de un documento o página Web es la siguiente:

body {
    background-color: #ff0000;
}

Esto indica que el color de fondo del body (cuerpo del documento o página Web), es rojo.

Como se puede observar, el valor del color de fondo es #ff0000, algo que para muchos, puede resultar extraño. Aunque no lo crean, esto que se ve son tres números; sólo que están escritos en un sistema numérico distinto al nuestro, el sistema numérico hexadecimal. Paso a explicarles con mayor detalle por qué esto es así:

En informática, todos los colores que se ven en la pantalla están formados por la combinación de tres colores:

- Una tonalidad de rojo, entre 256 tonalidades de rojo.
- Una tonalidad de verde, entre 256 tonalidades de verde.
- Una tonalidad de azul, entre 256 tonalidades de azul.

Esta técnica, utilizada por todas las computadoras modernas, se denomina RGB (por Red, Green, Blue; que en inglés significan rojo, verde, azul). Siempre se posicionan en este orden, primero se indica el nivel de tonalidad del rojo (Red), luego el de verde (Green) y finalmente el de azul (Blue); de ahí que el sistema se denomina RGB.

Entonces, ya que todos los colores están formados por una combinación de tres colores pertenecientes a gamas de rojo, verde y azul; esto significa que podemos formar literalmente millones de colores (16.777.216 para ser más exactos).

El valor de cada uno de los tres colores puede estar entre 0 y 255 (nunca menos de 0 ni más de 255). Por ejemplo, un valor de 255 para R nos da un rojo intenso, un valor de 255 para G nos da verde intenso y 255 para B nos da un azul intenso.

Por otro lado, un valor de 128 para R nos da un rojo de intensidad media y lo mismo se aplica para los otros dos colores.

Veamos algunos ejemplos:

Para representar el color rojo intenso, debemos indicar un valor de 255 para R (rojo intenso o máximo) y 0 (cero) para los otros dos colores primarios que componen el color final a representar (o sea nada de verde y nada de azul). De esta manera el rojo no queda contaminado por el verde y el azul, quedando totalmente puro.

Para representar el rojo: 255 de rojo, 0 de verde, 0 de azul.

Si se quiere representar el color verde en pantalla; se necesita indicar para los colores primarios que lo componen: un valor de 0 para R, 255 para verde y 0 de azul. De esta manera el verde es puro si estar contaminado por tonalidades rojas y azules.

Lo mismo se hace para el azul; cuyos valores para componerlo son: 0 de R, 0 de G y 255 de B.

Ahora, si se quieren componer otros colores que no sean los primarios, se pueden combinar distintos valores de estas tres gamas. Por ejemplo:

Si combinamos un máximo de rojo (255), un máximo de verde (255) y nada de azul (0), obtenemos un amarillo.
Si combinamos un máximo de rojo (255), nada de verde (0) y un máximo de azul (255), obtenemos un color magenta.
Si combinamos nada de rojo (0), un máximo de verde (255) y un máximo de azul (255), obtenemos un celeste verdoso, también conocido como cian.

La máxima combinación de los tres colores nos da un color blanco puro (máxima iluminación, compuesta por valores máximos de los tres colores primarios) R: 255, G: 255, B: 255.

La combinación de la falta total de los tres colores (R: 0, G: 0, B: 0) nos da una falta total de luz, o sea negro.

Cuando los tres valores son iguales (por ejemplo R: 190, G: 190, B: 190) obtenemos distintos niveles de grises. Por lo tanto, como hay 256 niveles de cada color primario (entre 0 y 255), y para obtener colores grises, los tres valores deben ser iguales; en informática se pueden tener en total 256 tonalidades de grises.

Las cobinaciones de tonalidades de estos tres colores primarios, dan como resultado la capacidad de representar en pantalla millones de colores. Por ejemplo, R: 255, G: 140, B: 0 nos da un naranja oscuro; R: 255, G: 20, B: 147 nos da un rosa profundo; y así con otras combinaciones.

Para saber cuántos colores puedo obtener a partir de estas distintas combinaciones, debo multiplicar las 256 tonalidades posibles de rojo, por las 256 tonalidades posibles de verde, por las 256 tonalidades posibles de azul:

256 x 256 x 256 = 16.777.216 colores posibles.

En CSS, los colores pueden indicarse de tres formas:

  • Con valores entre 0 y 255 para cada uno de los tres colores primarios (rojo, verde, azul) que componen a un color representado escrito en numeración hexadecimal, precedido por el símbolo numeral (#). Por ejemplo, #a020f0 para púrpura (el símbolo numeral antes de los tres valores, indica que a continuación se introducirán tres números en sistema hexadecimal).
  • Con valores entre 0 y 255 para cada uno de los tres colores primarios (rojo, verde, azul) que componen a un color representado escrito en numeración decimal. Por ejemplo, rgb(160,32,240) para púrpura.
  • Indicando el nombre del color. Por ejemplo purple para púrpura.

Veamos un ejemplo en el que se aplican colores de fondo a distintos elementos de una página Web:

<html>
<head>
<title>
Ejemplo de página con hoja de estilo CSS interna</title>
<style type="text/css">

body {background-color: #ff0000;}
p {background-color: #ffff00;}
h1 {background-color: rgb(230,230,250);}
#parrafo2 {background-color: fuchsia;}


</style>

</head>

<body>
<h1>T&iacute;tulo con fondo en color lavanda</h1>

<p>Primer p&aacute;rrafo con fondo de color amarillo</p>
<hr />
<p>Segundo p&aacute;rrafo con fondo de color amarillo</p>
<p id="parrafo2">P&aacute;rrafo con fondo de color fucsia</p>
<p style="background-color: brown;">P&aacute,rrafo con fondo de color marr&oacute;n</p>

</body>
</html>

En el ejemplo anterior se definen internamente, dentro de la sección <style>...</style> de la cabecera; los colores de fondo de los elementos HTML que aparecen en la página. Los colores de fondo se indican utilizando los tres formatos posibles en CSS (numeración hexadecimal, numeración decimal, nombre del color).

En la primera línea de la sección CSS se indica, utilizando valores hexadecimales, que el color de fondo del body (cuerpo o página) es rojo (#ff0000). El símbolo numeral antes de los tres valores, indica que a continuación se introducirán números en sistema hexadecimal. Analicemos estos valores hexadecimales.

#ff0000 ------- # (marca que a continuación se insertarán tres valores hexadecimales, uno para cada tonalidad de rojo, verde y azul).
#ff0000 ------- ff (marca un valor 255 en sistema de numeración hexadecimal para la tonalidad roja).
#ff0000 ------- 00 (marca un valor 0 en sistema de numeración hexadecimal para la tonalidad vede).
#ff0000 ------- 00 (marca un valor 0 en sistema de numeración hexadecimal para la tonalidad azul).

Cuando indicamos un color utilizando el sistema de numeración hexadecimal, luego del símbolo numeral (#), siempre cada valor hexadecimal de tonalidad de rojo, verde y azul, está compuesto por dos cifras (en el caso anterior, ff para rojo, 00 para verde y 00 para azul). Estos valores siempre se encuentran entre 0 y 255 (0 y ff en hexadecimal).

A continuación se indica, también en formato hexadecimal, que el color de fondo de los párrafos de la página es amarillo (#ffff00).

En la tercera línea de selectores CSS, se indica en formato decimal, que el color de fondo de los títulos <h1> de la página es lavanda.

En la cuarta línea de selectores CSS, se indica con el nombre del color (obviamente en inglés), que el elemento con nombre identificador parrafo2 tiene color de fondo fucsia. En la sección del <body> se aplica dicho identificador a un párrafo. Recordemos de lo ya explicado en la parte anterior del tutorial, que se pueden aplicar a un elemento determinado de la página, las propiedades CSS indicadas en un identificador (cuyo nombre de selector en este caso es #parrafo2), simplemente agregando un atributo id en la etiqueta del elemento, con valor el nombre del identificador, que en este casos es parrafo2 (sin el símbolo numeral, ya que en sintaxis CSS, este símbolo, al preceder un nombre, señala que se trata de un identificador; mientras que en HTML los identificadores se insertan en las etiquetas directamente utilizando el atributo id con el nombre del identificador, sin numeral).
 
Finalmente, directamente dentro de la etiqueta de un párrafo, se indica con el nombre del color en inglés, que su color de fondo es marrón (brown).

Como ya se explicó en la sección de Jerarquías CSS, de la parte anterior del tutorial, los estilos CSS definidos directamente dentro de una etiqueta de elemento, tienen mayor prioridad a lo definido en la sección <style>...</style> de la cabecera. Por lo tanto, a pesar que se define en la sección <style>...</style> de la cabecera, que los párrafos tienen color amarillo, el párrafo con identificador parrafo2 es de color fucsia (porque lo indicado en un id o en una class (clase), tiene mayor prioridad que lo indicado en <style>...<style>) y el último párrafo es de color marrón, porque el estilo indicado directamente dentro de una etiqueta, mediante el atributo style, también tiene mayor prioridad que lo indicado en <style>...</style>.

La forma de indicar el color es indistinta, puede utilizarse cualquiera de los tres sistemas (numeración hexadecimal, numeración decimal, nombre del color) en cualquiera de los elementos; esto depende de la preferencia del desarrollador Web.

Es bueno recordar que si se utiliza el sistema hexadecimal, los valores RGB siempre deben ir precedidos por el símbolo numeral (#), para indicar que los valores están escritos en ese sistema numérico. Por ejemplo background-color: #f5f5dc; para color beige.

Si se indican en sistema decimal, los valores RGB siempre deben estar entre paréntesis y precedidos por las siglas rgb (todo junto y sin estar separados por espacios). Por ejemplo background-color: rgb(255,0,255); para color magenta.

Por último, hay que aclarar que si se define el color de fondo directamente con el nombre del color, siempre debe estar escrito en inglés. Por ejemplo background-color: green; para color verde. Sin embargo la cantidad de colores disponibles mediante los nombres de colores, es muy inferior a la que se puede definir mediante los sistemas numéricos hexadecimal o decimal (que nos permiten definir la totalidad de 16.777.216 colores que la computadora puede representar) ya que por obvias razones los seres humanos no contamos con más de 16 millones de términos o palabras que definen colores; por eso es más conveniente utilizar o el sistema decimal o el hexadecimal, a menos que estemos interesados en agregar colores clásicos como blanco, negro, amarillo, rojo, verde, azul, etc.

2. background-image:

La propiedad background-image (imagen de fondo) sirve para agregar una imagen en el fondo de cualquier elemento, de manera sencilla, especificando la dirección del archivo de imagen y su nombre. Por defecto u omisión, si la imagen tiene un tamaño inferior, en pixeles, al elemento cuyo fondo rellenará; la imagen se repetirá tanto horizontal como verticalmente, hasta cubrir toda el área del fondo del elemento, en forma de mosaico.

La sintaxis que se utiliza para agregar una imagen de fondo en un elemento es la siguiente:

background-image: url("nombre_de_imagen");

Veamos un ejemplo:

<html>
<head>
<title>
Ejemplo de página con hoja de estilo CSS interna</title>
<style type="text/css">

body {background-color:rgb(255,255,0); background-image: url("fondopagina.jpg");}
 

</style>

</head>

<body>
<h1>Ejemplo 2</h1>

<p>Estamos probando, c&oacute;mo agregar una imagen en el fondo de un elemento HTML, en este caso al fondo de la p&aacute;gina.</p>
<hr />
 

</body>
</html>


En este ejemplo, primero especificamos en la sección <style>...</style>, que el fondo de la página o documento HTML, tiene un color amarillo (255,255,0) y que además el nombre del archivo de la imagen con la que recubriremos ese fondo en este ejemplo se llama fondopagina.jpg. Este archivo se encuentra en el mismo directorio del archivo HTML donde estamos trabajando, si no fuea así habría que indicar la ruta completa de los directorios donde se encuentra el archivo, pero como en este caso se encuentra en el mismo directorio, solamente hay que especificar el nombre del archivo.

Una buena técnica estética a tener en cuenta cuando se va a agregar una imagen de fondo, es que mientras se abre la página, como el archivo HTML es lo primero en descargarse y la imagen de fondo puede llegar a tardar algunos segundos en descargarse (dependiendo del tamaño de la imagen), es conveniente agregar también, un color de fondo a la página, similar a los colores prevalentes en la imagen de fondo, para evitar así un contraste muy fuerte entre el color de fondo de la página y la imagen de fondo que se carga posteriormente. De esta manera se da un efecto visual más fluido o suave al abrirse una nueva página.

Otro aspecto estético a tener en cuenta, es que la imagen de fondo no debe interferir o tener colores similares al de la fuente de texto, ya que se puede dificultar la lectura del texto en la página.

3. background-repeat:

Como al agregarse una imagen de fondo a un elemento de mayor tamaño, por omisión la imagen se repite indefinidamente, tanto horizontal como verticalmente, a lo largo y ancho del elemento cuyo fondo cubre; existe una propiedad que nos permite manipular este efecto a nuestro antojo, esta propiedad se llama background-repeat (repetición de fondo).

Con esta propiedad se puede elegir si la imagen de fondo de un elemento HTML, se repite normalmente tanto horizontal como verticalmente; o si solamente se repite en el eje x (horizontal); o solamente en el eje y (vertical); o sencillamente no se repite en absoluto.

Los valores posibles de repetición de la imagen de fondo de un elemento son los siguientes:

  • repeat: este es el valor por omisión, mediante el cual la imagen de fondo se repite indefinidamente, tanto en el eje x como en el eje y.
  • repeat-x: con este valor, la imagen de fondo se repite sólo horizontalmente, en el eje x.
  • repeat-y: con este valor, la imagen de fondo se repite sólo verticalmente, en el eje y.
  • no-repeat: con este valor, la imagen no se repite en absoluto y solamente aparece una vez.

Veamos un ejemplo:

<html>
<head>
<title>
Ejemplo de página con hoja de estilo CSS interna</title>
<style type="text/css">

body {background-color:rgb(255,255,0); background-image: url("fondopagina.jpg"); background-repeat: repeat-y;}
 

</style>

</head>

<body>
<h1>Ejemplo 3</h1>

<p>Estamos probando, c&oacute;mo se repite la imagen de fondo s&oacute;lo de manera vertical en el eje y.</p>
<hr />
 

</body>
</html>


Este ejemplo es igual al anterior, con la única diferencia que la imagen de fondo de la página (elemento body) se repite sólo de manera vetical en el eje y, mediante el agregado de la propiedad background-repeat: repeat-y; en el selector body.
 

4. background-position:

Recién se explicó cómo hacer para evitar que una imagen de fondo se repita indefinidamente como mosaico en los ejes x, y; o cómo hacer para que se repita en un solo eje; o simplemente para que no se repita. Ahora vamos a aprender a posicionar la imagen de fondo en el elemento HTML que la contiene. Esto se hace mediante la propiedad background-position (posición de fondo).

Obviamente, si la imagen de fondo se repite en uno o los dos ejes (x horizontal, y vertical), la imagen no se puede posicionar, ya que esos espacios vacíos serán rellenados repetidamente con la imagen de fondo. Para poder posicionarlo en uno de los ejes o en ambos, se tiene que especificar la no repetición de la imagen de fondo en los ejes correspondientes. Por ejemplo si se quiere que la imagen de fondo esté ubicada en el centro del elemento, sin repetirse, se debe dar un valor de no-repeat a la propiedad background-repeat. Luego se tiene que especificar en la propiedad background-position que se quiere colocar la imagen de fondo en el centro del elemento HTML que cubre.

La imagen de fondo puede posicionarse de distintas formas; mediante el uso de porcentajes de distancia del margen izquierdo y superior de la imagen de fondo desde el margen izquierdo y superior del elemento HTML que la contiene, en relación al tamaño del elemento. También se puede posicionar señalando la distancia en pixeles del borde izquierdo de la imagen de fondo al borde izquierdo del elemento que la contiene así como la distancia en pixeles del borde superior de la imagen de fondo al borde superior del elemento que la contiene. Por último, existen nueve valores genéricos de CSS que permiten posicionar la imagen de fondo en determinados puntos del elemento HTML; estos nueve valores para la propiedad background-position son:

  1. left top: para posicionar la imagen de fondo en la esquina izquierda superior del elemento HTML que la contiene.
  2. left center: para posicionar la imagen de fondo a la izquierda y el centro del elemento HTML que la contiene.
  3. left bottom: para posicionar la imagen de fondo en la esquina izquierda inferior del elemento HTML que la contiene.
  4. center top: para posicionar la imagen de fondo al centro y arriba del elemento HTML que la contiene.
  5. center center: para posicionar la imagen de fondo en el centro absoluto del elemento HTML que la contiene.
  6. center bottom: para posicionar la imagen de fondo al centro y abajo del elemento HTML que la contiene.
  7. right top: para posicionar la imagen de fondo en la esquina derecha superior del elemento HTML que la contiene.
  8. right center: para posicionar la imagen de fondo a la derecha y el centro del elemento HTML que la contiene.
  9. right bottom: para posicionar la imagen de fondo en la esquina derecha inferior del elemento HTML que la contiene.

Si en lugar de los valores genéricos preferimos utilizar el sistema de porcentajes, el valor de la propiedad background-position debe estar compuesto por dos porcentajes el de la posición horizontal primero y el de la posición vertical segundo. El porcentaje horizontal que se indica primero, marca la distancia en relación al ancho del elemento, de la imagen de fondo a los bordes izquierdo y derecho del elemento; mientras que el porcentaje vertical que se indica después, marca la distancia en relación a la altura del elemento, de la imagen de fondo a los bordes superior e inferior del elemento. Entonces los valores 0% 0% indican que la imagen se encuentra posicionada en la esquina izquierda superior del elemento, mientras que la 100% 100% que se encuentra posicionada en la esquina derecha inferior. El valor 50% 100% señala que la imagen de fondo está al centro en el eje horizontal y sobre el margen inferior del elemento.

Por último, si se prefiere el sistema de pixeles, el funcionamiento es similar al anterior, sólo que en lugar de porcentajes se usan pixeles. El primer valor indica la distancia horizontal en pixeles del borde izquierdo de la imagen de fondo al borde izquierdo del elemento HTML, mientras que el segundo valor señala la distancia vertical en pixeles del borde superior de la imagen de fondo al borde superior del elemento HTML que la contiene.

En CSS los pixeles se simbolizan con px. Por ejemplo si el elemento que contiene la imagen de fondo tiene un ancho de 200 pixeles y una altura de 900 pixeles, la imagen de fondo tiene un ancho de 20 pixeles y una altura de 20 pixeles, y especificamos que el valor de background-position es 0px 0px, estamos señalando que la imagen de fondo se encuentra en la esquina izquierda superior del elemento. Si por otro lado, el valor de background-position es es 180px 880px (o sea el tamaño del elemento menos el de la imagen de fondo), la imagen de fondo se posicionará en la esquina derecha inferior. Hay que tener cuidado con este último método, ya que si se establecen valores en pixeles, mayores al tamaño del elemento HTML, la imagen de fondo no se visualizará o se visualizará parcialmente, dependiendo del tamaño de la imagen y del valor en pixeles establecido.

Para el siguiente ejemplo usaremos un elemento de HTML que se utiliza mucho en el diseño de páginas Web con CSS; este elemento es <div>. Por sí solo este elemento no tiene ninguna apariencia visual al ser agregado en una página, sin embargo se trata de una herramienta muy poderosa y flexible que permite diseñar páginas de estética muy variada. Se trata de un elemento que define espacios o secciones rectangulares (también conocidas como divisiones, de ahí el nombre de su etiqueta) dentro de una página. Cada división puede contener toda una serie de elementos y además tener diversas características visuales, lo que las convierte en esa herramienta tan poderosa que todo desarrollador Web necesita. Lo que define las características visuales de un elemento <div> son propiedades CSS.

Veamos un ejemplo con dos espacios <div>, que en su interior contienen imágenes de fondo que no se repiten y están ubicadas en posiciones deteminadas dentro de estos elementos (cabe aclarar, que en este ejemplo aparecen algunas propiedades CSS, que sirven para dar formato a los elementos <div> y que no hemos visto aún. Pero no se hagan problema, ya que serán analizadas en secciones siguientes del tutorial. Lo importante ahora es concentrarse en las propiedades de fondos que hemos visto hasta ahora). 

Una manera muy sencilla de agregarle las propiedades CSS a un <div> es mediante un identificador (id) o una clase (class), en este caso usaremos un identificador distinto para cada <div> :

<html>
<head>
<title>
Ejemplo de fondos de elementos con hoja de estilo CSS</title>
<style type="text/css">

#rectangulo1 {
position: absolute;
width: 400px;
height: 400px;
top: 100px;
left: 10px;
background-color:
rgb(255,255,0);
background-image: url("imagenes/fondodiv1.jpg");
background-repeat: no-repeat;
background-position: right top
}

 
#rectangulo2 {
position: absolute;
width: 400px;
height: 400px;
top: 100px;
left: 510px;
background-color: rgb(0,0,255);
background-image: url("imagenes/fondodiv2.jpg");
background-repeat: no-repeat;
background-position: 100% 0%;
}

 

</style>

</head>

<body>
<div id="rectangulo1">Espacio o rect&aacute;ngulo 1 de la p&aacute;gina Web</div>

<div id="rectangulo2">Espacio o rect&aacute;ngulo 2 de la p&aacute;gina Web</div>

</body>
</html>

En este ejemplo se agregan dos <div>, a los que se les aplican las propiedades CSS de los identificadores rectangulo1 y rectangulo2.

En el caso del <div> al que se le inserta el id rectangulo1; tiene un tamaño de 400 pixeles de ancho por 400 pixeles de alto; está ubicado a 10 pixeles de distancia del borde izquierdo de la página y a 100 pixeles del borde superior de la página; su color de fondo es amarillo (255,255,0); la imagen de fondo se llama fondodiv1.jpg y se encuentra en el directorio imagenes, que a su vez se encuentra dentro del directorio del archivo HTML. El fondo de imagen no se repite y está posicionado en la esquina derecha superior del <div>.
 
En el caso del <div> al que se le inserta el id rectangulo2; tiene un tamaño de 400 pixeles de ancho por 400 pixeles de alto; está ubicado a 510 pixeles de distancia del borde izquierdo de la página y a 100 pixeles del borde superior de la página; su color de fondo es azul (0,0,255); la imagen de fondo se llama fondodiv2.jpg y se encuentra en el directorio imagenes, que a su vez se encuentra dentro del directorio del archivo HTML. El fondo de imagen no se repite y está posicionado en la esquina derecha inferior del <div>.

5. background-attachment:

La propiedad background-attachment (acoplamiento de fondo), sirve para especificar si la imagen de fondo de un elemento se mantiene fija o se desliza junto al resto del elemento al hacer scroll (deslizar el elemento con la barra deslizadora del costado).

Por ejemplo, si a una página le establecemos una imagen de fondo sin repeticiones verticales, podemos hacer que al deslizar la página hacia abajo, la imagen de fondo siga siempre en la misma posición fija respecto al navegador o pantalla, estando siempre visible, dando la sensación de estar fija. También se puede hacer lo contrario, que es que la imagen se deslice junto al resto de la página o los elementos de la página, moviéndose hacia ariba, junto a los demás elementos, cuando deslizamos la página hacia abajo con la barra deslizadora del costado.

Los valores posibles de background-attachment son:

  • scroll: En inglés significa deslizar y es el valor por defecto u omisión (default) y permite que la imagen de fondo se deslice junto al resto del elemento que lo contiene.
  • fixed: En inglés significa fijo, permite que la imagen de fondo quede fija respecto al elemento que la contiene al ser este último deslizado con una barra de scroll (barra de deslizamiento).
  • local: La imagen de fondo se desliza junto a los demás elementos que se encuentran dentro del elemento que la contiene (el efecto es similar al valor de scroll).

Veamos un ejemplo:

<html>
<head>
<title>
Ejemplo de fondo de documento Web fijo con hoja de estilo CSS interna</title>
<style type="text/css">

body {
background-color: #ff00ff
;
background-image: url("fondopagina.jpg");
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
}
 

</style>

</head>

<body>
<h1>Ejemplo de fondo fijo de documento Web</h1>

<p>A continuaci&oacute;n en la parte de abajo, hay un rect&aacute;ngulo alto, posicionado con CSS muy abajo, para generar scroll o deslizamiento de la p&aacute;gina y poder mostrar como funciona la propiedad background-attachment.</p>
<div style="position: absolute; top: 800px; left: 500px; width: 100px; height: 1000px; background-color: #eeeeee;">
Estamos probando, c&oacute;mo se repite la imagen de fondo s&oacute;lo de manera vertical en el eje y.</p>
<hr />
 

</body>
</html>

En el ejemplo anterior, hay un título, un párrafo y un rectángulo de color de fondo gris claro (especificado en numeración hexadecimal con los tres valores RGB iguales a ee, que en sistema decimal equivale a 238) ubicado a 800 pixeles desde el borde superior de la página y una altura de 1000 pixeles, para lograr que aparezca la barra de deslizamiento lateral y poder así probar la propiedad background-attachment. En cuanto al fondo de página, es de color magenta (especificado en hexadecimal ff00ff, que en decimal equivale a 255,00,255), tiene una imagen de fondo que se llama fondopagina.jpg que se encuentra en el mismo directorio del archivo HTML, no se repite ni horizontal ni verticalmente, y se encuentra fijo a la página al deslizarse.

6. Todos los valores de fondo de elemento abreviados en una sola propiedad:

Hasta ahora aprendimos a definir el fondo de un elemento HTML utilizando las cinco propiedades CSS de fondo; sin embargo hay una manera mucho más abreviada que puede usarse cuando deben especificarse varios aspectos visuales de fondo de elemento, sin necesidad de escribir cada propiedad. Para esto se usa la propiedad CSS background (fondo). Esta propiedad puede contener múltiples valores en una sola línea, separados por espacios.

Por ejemplo:

<html>
<head>
<title>
Ejemplo de fondo de documento Web definido en una sola propiedad</title>
<style type="text/css">

body {
background: #ffffff url("mi_fondo.png") no-repeat right top;
}
</style>

</head>

<body>
<h1>Ejemplo de fondo de elemento en CSS</h1>

<p>Estamos probando, c&oacute;mo definir el fondo de un elemento abreviando todas las propiedades en una sola llamada <b>background</b>.</p>
<hr />
 

</body>
</html>


En el ejemplo anterior en una sola línea se define un fondo de página de color blanco, una imagen de fondo llamada mi_fondo.png, con la imagen de fondo que no se repite y que está ubicada en la esquina derecha superior de la página.
-------------------------------------------------------------------------------------------------------- 

Definir texto de páginas Web con CSS

Con CSS se puede definir estéticamente el texto, permitiendo así obtener textos visualmente muy atractivos. Las propiedades que establecen el aspecto visual de los textos son los siguientes:

  • color: Establece el color de texto.
  • direction: Define la dirección de escritura (izquierda a derecha o derecha a izquierda).
  • letter-spacing: Permite aumentar o disminuir el espacio entre letras de un texto.
  • line-height: Establece la altura de renglones.
  • text-align: Define cómo está alineado horizontalmente el texto de un elemento.
  • text-decoration: Especifica si queremos texto con o sin decoraciones (por ejemplo texto subrayado).
  • text-indent: Define la sangría del primer renglón de un bloque de texto.
  • text-shadow: Permite agregar sombra al texto.
  • text-transform: Sirve para pasar de minúsculas a mayúsculas y vice versa, a las letras de un bloque de texto.
  • unicode-bidi: Esta propiedad si se la utiliza junto a la propiedad direction, permite anular el formato de escritura occidental, permitiendo desarrollar páginas Web en idiomas no ocidentales.
  • vertical-align: Define el alineamiento vertical de un elemento respecto al texto que tiene al lado (por ejemplo texto que se encuentra junto a una imagen).
  • white-space: Establece la manera de organizar al texto que se encuentra dentro de un elemento.
  • word-spacing: Define el espacio entre palabras que se encuentran dentro de un elemento.

1. color:

Con la propiedad CSS color, se puede establecer el color de texto de cualquier elemento HTML. Hay tres formas de especificar el color de texto, al igual que con background-color, como ya vimos anteriormente: ingresando los valores RGB en sistema numérico decimal, sistema numérico hexadecimal o escribiendo el nombre del color en inglés.

  • Con valores entre 0 y 255 para cada uno de los tres colores primarios (rojo, verde, azul) que componen a un color representado escrito en numeración hexadecimal, precedido por el símbolo numeral (#). Por ejemplo, #a020f0 para púrpura (el símbolo numeral antes de los tres valores, indica que a continuación se introducirán tres números en sistema hexadecimal).
  • Con valores entre 0 y 255 para cada uno de los tres colores primarios (rojo, verde, azul) que componen a un color representado escrito en numeración decimal. Por ejemplo, rgb(160,32,240) para púrpura.
  • Indicando el nombre del color. Por ejemplo purple para púrpura.

Si por ejemplo se introduce la propiedad color para el elemento body; se está señalando que todos los caracteres de la página, tendrán el color especificado. Si se le introduce a un selector p (párrafo), el texto de los párrafos, tendrá el color indicado; si lo agregamos a un selector td, todas las celdas de tablas en una página tendrán texto del color indicado y así con otros elementos, incluyendo obviamente nombres de identificadores (id) y clases (class).

Por ejemplo:

<html>
<head>
<title>
Ejemplo de color de texto</title>
<style type="text/css">

body {
color: #900000;

background-color: #ffff00;
}
#parrafo_azul
{
color: rgb(0,0,255);
}

h1{
color: purple;
}

</style>

</head>

<body>
<p>
Probando color de texto</p>
<ul>
<li>
Item 1</li>
<li>
Item 2</li>
</ul>

<h1>Ejemplo de t&iacute;tulo p&uacute;rpura</h1>

<p id="parrafo_azul">Estamos probando, c&oacute;mo definir el color del texto de un elemento usando un id.</p>
<hr />
 

</body>
</html>

En el ejemplo anterior, definimos usando el sistema numérico hexadecimal, que el texto de la página es rojo oscuro (#800000). El texto del primer párrafo y de los ítems de la lista <ul> tiene ese color, así como el de cualquier otro elemento que se agregue a la página. Sin embargo, como se define específicamente que los elementos <h1> tienen un color púrpura (purple), el título que dice "Ejemplo de título púrpura", será obviamente púrpura. El texto del elemento al que se le vaya a insertar el id "parrafo_azul", en este caso un párrafo, tendrá texto de color azul rgb(0,0,255).

Esto ocurre, porque señalamos específicamente, en esos elementos, que el color de texto tiene otros colores, y lo que se define para un elemento particular tiene mayor prioridad o jerarquía que lo que se define para su elemento padre; en este caso el padre es <body>. Todo esto, sobre una página con fondo de color amarillo, definido en el body usando el sistema numérico hexadecimal (#ffff00).

2. text-align:
Con la propiedad text-align (alineamiento de texto) podemos definir el alineamiento horizontal del texto de un elemento. El texto puede estar alineado a la izquierda, centro, derecha o justificado. Cuanto el texto está justificado, cada línea o renglón se estira para que todas las líneas tengan el mismo ancho, dejando así márgenes rectos de ambos lados.

Los valores posibles para text-align son:

  • left (izquierda) - Este es el valor por defecto (default) u omisión.
  • center (centro)
  • right (derecha)
  • justify (texto justificado)

Ejemplo con text-align:

<html>
<head>
<title>
Ejemplo de alineamiento de texto</title>

</head>

<body style="background-color: #ffff00;">
 

<h1 style="color: #990000; text-align: center;">Ejemplo de alineamiento de texto</h1>

<p style="text-align: left;">Cuando los amigos se entienden bien entre ellos, cuando los amantes se entienden bien entre ellos, cuando las familias se entienden bien entre ellas, entonces nos creemos en armon&iacute;a. Enga&ntilde;o puro, espejo para alondras. A veces siento que entre dos que se rompen la cara a trompadas hay mucho mas entendimiento que entre los que est&aacute;n ah&iacute; mirando desde afuera.</p>

<p style="text-align: right;">And&aacute;bamos sin buscarnos, pero sabiendo que and&aacute;bamos para encontrarnos.</p>
 

<p style="text-align: justify;">Me miras, de cerca me miras, cada vez mas de cerca y entonces jugamos al c&iacute;clope, nos miramos cada vez m&aacute;s de cerca y los ojos se agrandan, se acercan entre s&iacute;, se superponen y los c&iacute;clopes se miran, respirando confundidos, las bocas se encuentran y luchan tibiamente, mordi&eacute;ndose con los labios, apoyando apenas la lengua en los dientes.</p>

</body>
</html>

En el ejemplo anterior, se define directamente insertando las propiedades CSS dentro de la etiqueta de cada elemento, mediante el atributo style, el alineamiento del texto de cada elemento.

Primero, indicamos en numeración hexadecimal, en la etiqueta <body>, que el color de fondo de la página es amarillo (#ffff00). Luego agregamos un título <h1>, cuyo texto es de color rojo oscuro (#990000); y está alineado al centro de la línea. A continuación hay tres párrafos con frases del escritor Julio Cortázar. El primer párrafo está alineado a la izquierda, el segundo a la derecha y el tercero tiene el texto justificado.
 
3. text-decoration:
Con la propiedad CSS text-decoration (decoración de texto) se pueden agregar o quitar decoraciones de un texto. En realidad estas decoraciones no son más que líneas horizontales por debajo del texto, por encima del texto o tachando el texto. Por ejemplo se puede usar para subrayar una frase o para tachar texto.

También se suele utilizar para quitarle a los hipervínculos HTML (links), la línea de subrayado que aparece por omisión en los links y adaptarlos visualmente a la estética de una página en la que el subrayado no queda bien.
 
Los valores posibles para la propiedad text-decoration son:

  • none: (ninguna) sirve para definir que un texto no tiene línea inferior o subrayado - Este es el valor por defecto u omisión (default), salvo en los hipervínculos, los cuales por defecto están subrayados.
  • underline: (subrayado) línea horizontal por debajo del texto o subrayado.
  • overline: línea horizontal por encima del texto.
  • line-through: agrega una línea horizontal que tacha el texto.

Ejemplo con text-decoration:

<html>
<head>
<title>
Ejemplo de decorado de texto</title>
<style type="text/css">
body {
color: rgb(100,0,0);
background-color: #eeeeee;
}

.tachados{
text-decoration: line-through;
}

.nuevo_precio {
text-decoration: overline;
}

h1{
color: purple;
text-align: center;
text-decoration: underline;
}
</style>

</head>

<body>
 

<h1>Precio kilo de tomates</h1>

<span class="tachados">US$ 2,40</span> <span class="nuevo_precio">US$ 2,00</span>

<h1>Precio kilo de naranjas</h1>
<span class="tachados">US$ 1,20</span> <span class="nuevo_precio">US$ 1,00</span><br />

<h1>Precio kilo de zanahorias</h1>
<span class="tachados">
US$ 1,10</span> <span class="nuevo_precio">US$ 1,00</span><br />

<h1>Precio kilo de cebollas</h1>
<span class="tachados">US$ 2,40</span> <span class="nuevo_precio">US$ 2,00</span><br />

</body>
</html>

 
En el ejemplo anterior se define desde la sección <style>...</style>, las propiedades CSS del texto de la página.

En body, se indica que el texto es de color rojo oscuro (100,0,0) y que el fondo de página es de un color gris claro (#eeeeee). Los títulos <h1> son de color púrpura, texto centrado y subrayado (text-decoration: underline).

En la sección del <body> se incluyen varios elementos <span>. Los elementos <span> son espacios rectangulares separados del resto, a los que si no se les agregan propiedades CSS, visualmente no presentan ningún cambio a la página. Su importancia se halla en la gran flexibilidad de aceptación de propiedades CSS (casi todas las propiedades CSS), que dan como resultado efectos visuales únicos. Son similares a los elementos <div>, con la única diferencia que luego de un <div> se agrega un salto de línea automático, haciendo que el siguiente elemento aparezca debajo del <div>, mientras que los <span> pueden aparecer uno al lado del otro. Como en este ejemplo utilizamos precios que se colocan en la misma línea, uno al lado del otro, se opta por usar <span>.

A los <span> les insertamos las propiedades de texto CSS definidas en las clases tachados y nuevo_precio según sea necesario. A los <span> que incluyen los precios de antes, les insertamos la clase tachados, cuyos textos están tachados con text-decoration: line-through. A los <span> que incluyen los precios de modificados, les insertamos la clase nuevo_precio, cuyos textos tienen una línea superior definida con text-decoration: overline.

Antes de continuar, vamos a aclarar que la razón por la que usamos clases (class) en lugar de identificadores (id) es porque las clases pueden ser aplicadas a varios elementos de una página simultáneamente, mientras que los identificadores solamente pueden aplicarse en un y sólo un elemento por página.
 

 


31 people like this

Share
Related Articles

Suggested posts
Follow Youbioit






Comments

Post new comment

The content of this field is kept private and will not be shown publicly.