Curso Web Mastering & Design

Módulo 1, unidad 3

Introducción a las Hojas de estilo

(CSS)
Configurar el aspecto – utilización de los CSS

Hasta ahora hemos visto como crear la estructura base del documento
de nuestra página web. Sin embargo, aún estamos lejos de crear una
página web que se parezca a aquellas que solemos ver normalmente
en la red.
En esta unidad analizaremos brevemente la utilización de las hojas de
estilo.
Orientación de las hojas de estilo (CSS)

Las hojas de estilo a cascada (Cascading Style Sheets, CSS)

representan el estándar W3C (World Wide Web Consortium) para
definir el aspecto y la modalidad de presentación de los documentos
escritos en HTML, XHTML y en cada lenguaje XML.
Por presentación se entiende el modo en el cual el documento es
visualizado y presentado al usuario, mediante cualquier tipo de
navegador.
En definitiva, CSS permite separar los contenidos de la página y la
información de su aspecto.
La sigla CSS implica un lenguaje separado con una sintaxis propia,
distinta a aquella que hemos ya visto para el (X)HTML.
En esta primera lección introductoria sobre las hojas de estilo, así
como para el (X)HTML, analizaremos los conceptos y la tecnología
fundamental para modificar radicalmente el aspecto de nuestras
páginas, cambiando, por ejemplo, el texto y los caracteres hasta
agregar colores e imágenes a las páginas.

¿Por qué utilizar las hojas de estilo (CSS)?

Los elementos de presentación del (X)HTML, vistos en la lección

precedente, no logran modificar el aspecto de una página web del
mismo modo que las hojas de estilo.

• El uso de los CSS nos permite crear y modificar el aspecto de una

página web rápidamente y con menos trabajo. De hecho, es
 posible cambiar el aspecto de todo un sitio web revisando una sola
hoja de estilo.
• Utilizando las hojas de estilo es posible mejorar la accesibilidad a
los contenidos presentes en nuestras páginas web.
• Reduce la complejidad de mantenimiento de los sitios web y
permite visualizar el mismo documento en infinidad de
dispositivos diferentes, ya que es posible marcar de manera
mucho más significativa los elementos presentes.

Funcionamiento de las hojas de estilo

Tres pasos fundamentales:

1) Realizar un documento base en HTML o XHTML.
2) Escribir las “reglas de estilo” para definir el aspecto de cada
elemento: color, tamaño y tipo de letra del texto, posición de cada
elemento dentro de la página, etc.
3) Aplicar las “reglas de estilo” escritas en nuestro documento base.

Cuando el navegador mostrará el documento, este seguirá las reglas

dictadas para visualizar correctamente los elementos indicados.
Analicemos singularmente los distintos pasos.
1. Crear las marcas para el documento

Algunas marcas (X)HTML utilizadas para nuestro documento de

base sirven para poder aplicar una “capa de presentación” contenido
en el file CSS.
El elemento de estilo visto en la lección precedente: <style
type="text/css">, nos servirá para poder escribir las “reglas de estilo”.

2. Escribir las “reglas”

Una hoja de estilo está formada por una o más “instrucciones de

estilo”, llamadas convencionalmente “reglas” (rules), que sirven para
describir como un elemento o grupos de elementos deberán ser
visualizados. Cada “regla” selecciona un elemento y establece su
aspecto.

Ejemplo del aspecto de una “regla”

1) h1 { color: green; }
2) p { font-size: small; font-family: sans-serif; }

El ejemplo reportado contiene dos reglas. La primera nos indica que

el elemento h1 se debe ver en verde. La segunda nos dice que el
párrafo debe aparecer con una font específica, en una dimensión
precisa.
Según la terminología específica del CSS, cada “regla” está formada
por dos secciones principales que son:

• el “selector” que identifica el o los elementos HTML a los que se

aplica la regla de estilo;
• la “declaración” que especifica los estilos que se aplican a los
elementos. Cada declaración a su vez está dividida en dos partes:
la primera indica una propiedad que es la característica que se
modifica en el elemento seleccionado, como por ejemplo su
tamaño de letra y el valor que establece el nuevo valor de la
característica modificada en el elemento.
Las declaraciones, como en el ejemplo reportado, se incorporan
dentro los paréntesis de llaves.
2.1 Selectores

En el ejemplo reportado los elementos h1 y p se utilizan como los

“selectores” de la regla de estilo.
Las propiedades definidas mediante la regla serán aplicadas a cada
elemento h1 y p presente en nuestro documento. Sucesivamente,
también veremos como aplicar las reglas a elementos individuales.

2.2 Declaraciones.

Cada declaración está formada por el conjunto propiedad/valor.

Una norma puede contener más de una declaración.
En el ejemplo hemos visto que la norma relativa al elemento p del
párrafo contiene dos características: la dimensión de los caracteres y
su tipo.
Cada declaración debe, en este caso, separarse de las otras con la
inserción de un punto y coma, como es posible notar en el ejemplo.
La unión entre los paréntesis de llaves y las declaraciones contenidas
en ellos, generalmente se llama “bloque de declaración” (declaration
block).
Los file CSS ignoran los espacios y los elementos dentro de estos
“bloques”, por lo tanto, cada declaración es normalmente reportada
en una misma línea como en el siguiente ejemplo: p { font-size:
small; font-family: sans-serif; }
Los valores dependen de las propiedades. Por ejemplo, algunas
propiedades se refieren a los tamaños, otras configuraciones al color,
otras pueden referirse a listas de palabras claves.
Usando las propiedades es importante considerar los valores que
estas pueden aceptar.

Aplicar las “reglas de estilo”

Existen tres modos mediante los cuales se pueden aplicar las reglas a
nuestro documento:
Hojas de estilo externas: En este caso, todos los estilos CSS se
incluyen en un archivo de tipo CSS que las páginas HTML enlazan
mediante la etiqueta <link>. Un archivo de tipo CSS no es más que
un archivo simple de texto cuya extensión es .css. El documento con
esta extensión puede ser conectado o importado en uno o más
documentos (X)HTML. De este modo todos los file presentes en un
sitio web pueden compartir al mismo tiempo una misma hoja de
estilo.
Esta modalidad de aplicación de las “reglas de estilo” es seguramente
la más eficaz y, por lo tanto, la más usada en el web-design.

Hojas de estilo internas: a esta categoría pertenece el primer

ejemplo de esta lección, donde nuestras reglas se insertan al interno
de nuestro documento base (X)HTML.
Las hojas de estilo de esta categoría funcionan solamente para el
documento en el cual han sido insertadas, se emplea la etiqueta
<style> de HTML y se posicionan necesariamente en la cabecera
(head) del documento.
Además, el elemento de estilo debe contener un tipo de atributo que
identifica el contenido “text/css”, como en el siguiente ejemplo.

Ej.

<head>
<title>nuevodesign</title>
<style type="text/css">/
/* reglas de estilo a insertar */
</style>
</head>
Estilos en linea (inline styles): como se ha mencionado, también es
posible aplicar propiedades y valores a elementos individuales según
el siguiente modelo:

<h1 style="color: red">Introducción</h1>

Para agregar más de una propiedad sólo hay que utilizar los puntos y
comas de este modo:
<h1 style="color: red; style=margin-top: 2em">Introducción</h1>
Las hojas de estilo en la estructura (X)HTML

Como fue analizado en la lección precedente, los documentos base en

(X)HTML presentan una estructura jerárquica en la cual encontramos
elementos que dependen en gran medida de otros.
El elemento p depende de body, los elementos body y head dependen
de html.
Del mismo modo las normas de estilo se aplican no solo a la parte del
documento donde se asocian directamente sino también a aquellas
partes de las que son dependientes.
Por ejemplo, si establecemos una norma de estilo relativa a un font,
usando el elemento del párrafo p como selector, tal norma será
aplicada a todos los párrafos presentes en el documento, así como a
los otros elementos de texto en línea (dependientes del elemento),
contenidos en los mismos párrafos.
Este principio base de utilización del CSS es llamado: herencia
(inheritance).
Este principio nos sirve de ayuda en la creación de nuestras hojas de
estilo dado que, tomando en cuenta la estructura jerárquica de los
documentos (X)HTML y de la herencia, podemos evitar aplicar
reglas para cada uno de los elementos ya que una única regla puede
ser heredada por todos los elementos dependientes.
Por ejemplo, si queremos aplicar una regla de estilo al elemento
párrafo luego no será necesario aplicarla nuevamente al elemento de
énfasis “em” ya que éste depende del párrafo.
Las hojas de estilo “en cascada”

Finalmente entenderemos porque las hojas de estilo son definidas de

este modo.
El sistema CSS nos permite aplicar múltiples hojas de estilo a un
mismo documento sin crear conflictos en la visualización final.
Por ejemplo, ¿qué pasaría si en una hoja de estilo externa se hubiese
escrito una determinada regla para un cierto elemento y en la hoja de
estilo interna apareciera otra opuesta?.
Existe una jerarquía en la aplicación de las hojas de estilo

El término “cascada” se refiere a aquello que sucede cuando distintas

fuentes relativas a reglas de estilo compiten entre ellas para el control
de los elementos presentes en una página.
“una determinada regla de estilo es omitida cuando resulta
sobrescrita por una regla de estilo con mayor importancia”.
Por ejemplo, si no se aplica alguna hoja de estilo a una página, esta
será automáticamente realizada en un cierto modo por nuestro
navegador, según sus hojas de estilo (si se trata de una realización
por default). Sin embargo, si el web designer de la página ha
asociado a ésta hojas de estilo, éstas prevalecerán en la visualización
estándar determinada por el navegador.
Determinar la importancia

Como hemos visto, existen 3 modos para asociar las informaciones

de estilo a nuestro documento base (X)HTML.

Generalmente, cuanto más cerca esté la hoja de estilo al

contenido, más importante es.
Por lo tanto, las hojas de estilo internas tienen una importancia mayor
a aquellas externas con extensión .css. Sin embargo, es posible evitar
que una determinada norma sea sobrescrita asignando niveles de
importancia a nuestras hojas de estilo, con el indicador de
importancia (!).
Especificidad

Una vez que los estilos han sido elegidos en base a su importancia,
pueden surgir conflictos dentro del mismo.

Cuando dos normas en una misma hoja de estilo están en conflicto,

para determinar el nivel de importancia se utiliza el tipo de selector
de la norma: entre más específico es el selector, más importancia
tendrá.
Las distintas especificaciones de un selector serán tomadas en
consideración más adelante cuando se examinen detalladamente los
file CSS y se estudien diversos selectores.
Orden de las reglas

Por último, si hay conflictos entre reglas de igual importancia, se

aplica la que se indicó en último lugar.

Ej.
<style type="text/css">
p {color: blue;}
p {color: red;}
p {color: green;}
</style>
En el ejemplo señalado sabemos que el texto del párrafo de nuestra
página será visualizado en verde, ya que la última regla sobrescribirá
a las otras dos.
Hasta que no se expliquen más adelante los conceptos de tipo de hoja
de estilo y la prioridad, el mecanismo simplificado que se puede
aplicar es el siguiente:

1. Cuanto más específico sea un selector, más importancia tiene

su regla asociada.
2. A igual especificidad, se considera la última regla indicada.
El Modelo de Cajas (box model)

Como hemos mencionado en la lección precedente, los navegadores

muestran los elementos presentes en una página como si fuesen
contenidos en cajas rectangulares.
Las cajas de una página se crean automáticamente. Cada vez que se
inserta una etiqueta HTML, se crea una nueva caja rectangular que
encierra los contenidos de ese elemento.
Las cajas de las páginas no son visibles a simple vista porque
inicialmente no muestran ningún color de fondo ni ningún borde.
Es posible aplicar a estas “cajas” algunas propiedades, relativas a los
bordes, al contenido, a la posición, etc.
Ej.
h1 { border: 1px solid red; }
h2 { border: 1px solid red; }
p { border: 1px solid red; }
em { border: 1px solid red; }
img { border: 1px solid red; }
Mediante la inserción de las reglas reportadas en el ejemplo, una
“caja” con márgenes de color rojo y con un espesor de línea definido
aparecerá entorno a todos los elementos, incluidos los términos
marcados con la etiqueta “em” y las imágenes.
Reagrupar los selectores

Un pequeño consejo para acelerar la digitación de nuestras reglas de

estilo: para aplicar una misma propiedad de estilo a distintos
elementos, es posible indicar todos juntos, de una sola vez, los
diversos selectores.
La regla señalada en el siguiente ejemplo funciona exactamente como
en el ejemplo precedente:

h1, h2, p, em, img { border: 1px solid red; }

También en este caso todos los elementos serán encerrados en “cajas”

con márgenes rojos.
Para agrupar los selectores de una norma es suficiente escribirlos uno
tras otro separados por una coma.

Formatos de textos

Ahora veremos otros elementos para aplicar estilos particulares a

nuestro texto base, estudiando nuevas propiedades y algunos nuevos
selectores.

Propiedades de los caracteres

Mediante la escritura de nuestras reglas de estilo, es posible indicar

específicamente la propiedad font-family, que se utiliza para indicar
el tipo de letra con el que se muestra el texto. Sigue el principio de la
herencia y es aplicable sin distinción a todos los elementos.

Ej. 1 - p { font-family: Arial }

Ej. 2 - body { font-family: "Trebuchet MS"}
Ej. 3 - p { font-family: Verdana, Calibri; }

Los font indicados como valores van siempre reportados con la letra
inicial mayúscula. Además, aquellos nombres de font cuyo nombre
este compuesto por dos partes y, por lo tanto, contiene un espacio,
como en el ejemplo 2, deben ser encerrados por las comillas.
Para indicar como valores varios font al mismo tiempo, se necesita
insertar entre estos una coma, como en el ejemplo 3.
El navegador visualizará solamente aquellas familias de caracteres ya
instaladas en el ordenador de cada usuario.
Especificar más font a una misma propiedad sirve para obviar este
inconveniente. Si el font indicado no está disponible en el ordenador
del usuario que visita la página, será utilizado el font estándar del
navegador.
Los font especificados además, como en el ej. 3, sirven para proveer
alternativas si la primera elección no está disponible. Si el font
Verdana no está disponible el navegador visualizará el font Calibri.

Para especificar las dimensiones de los caracteres es posible utilizar

la propiedad font-size, según el siguiente ejemplo:
h1 { font-size: 1.5em; }
También es posible aumentar en un cierto porcentual las dimensiones
de un tipo de letra respecto de aquellas estándares.
h1 { font-size: 75%; }
Además de todas las unidades de medida relativas y absolutas y el
uso de porcentajes, CSS permite utilizar una serie de palabras clave
para indicar el tamaño de letra del texto:

• tamaño_absoluto: indica el tamaño de letra de forma absoluta

mediante alguna de las siguientes palabras clave: xx-small, x-
small, small, medium, large, x-large, xx-large.
• tamaño_relativo: indica de forma relativa el tamaño de letra del
texto mediante dos palabras clave (larger, smaller) que toman
 como referencia el tamaño de letra del elemento padre, según los
siguientes ejemplos.

strong { font-size: larger; }

h1 { font-size: smaller; }

Estas palabras claves no corresponden a tamaños precisos sino que se

balancean unas en relación a las otras. Por ejemplo, la palabra clave
absoluta medium es estándar, normalmente visualizada en los
navegadores.
CSS recomienda indicar el tamaño del texto en la unidad em o en
porcentaje (%).
Otra propiedad importante relativa a los font es aquella que tiene que
ver con su grosor (texto en negrita) y su estilo (texto en cursiva). La
propiedad que controla el grosor de la letra es font-weight. Por
ejemplo, si queremos abrir un elemento en negrita debemos utilizar la
propiedad font-weight según el siguiente modelo.

p { font-weight: bold; }
o
p { font-weight: bolder; }

Los valores asociados a esta propiedad sirven para cambiar, según

las exigencias, el énfasis con el cual queremos hacer aparecer un
determinado elemento.
Finalmente, con la propiedad font-style, es posible cambiar el estilo
de un determinado elemento como en el siguiente ejemplo.
Ej. p { font style: oblique; }

Normalmente la propiedad font-style se emplea para mostrar un texto

en cursiva mediante el valor italic.

La propiedad genérica Font

Establecer propiedades múltiples relativas a los tipos de letras puede

ser repetitivo.
Por lo tanto, usando los file CSS es posible utilizar la propiedad
abreviada font que encierra en una única norma todas las propiedades
relativas a los caracteres de texto.
El valor de la propiedad font es una lista de todos los valores para
todas las propiedades de los font vistas hasta ahora. En este caso el
orden de los distintos font, separados por un espacio, es importante
para determinar su prioridad de utilización.
Básicamente, la propiedad font debe incluir un valor relativo a la
dimensión de los caracteres (font-size) y un valor relativo a la familia
de pertenencia (font-family), en este preciso orden.
El siguiente es un ejemplo del valor mínimo de una propiedad font:
p { font: 1em Arial; }
Una vez establecidos estos dos valores base todos los demás son
opcionales:
p { font: oblique bold 1em Arial; }
Cambiar el color de los caracteres

Utilizando las normas de estilo es posible también cambiar los

colores de los caracteres utilizando la propiedad color.
El valor de la propiedad color puede ser uno de los 17 nombres de
colores predefinidos o un valor numérico específico de un color del
modelo RGB (del inglés Red, Green, Blue; "rojo, verde, azul") que
hace referencia a la composición del color en términos de la
intensidad de los colores primarios con que se forma.

Ej.
h1 { color: red; }
h1 { color: #FF0000;}
Los valores numéricos de los distintos colores serán tratados más
adelante. Por el momento cambiaremos el color de nuestro texto
mediante los 17 nombres de colores enumerados en la página
sucesiva.
También la propiedad color sigue el principio de la herencia y, por lo
tanto, es posible cambiar el color de todo el contenido textual
presente en un documento aplicando la propiedad al cuerpo (body)
como en el siguiente ejemplo.
body { color: red; }
La siguiente lista contiene las 17 palabras clave relativas a los valores
específicos de la propiedad color, que serán útiles para modificar
rápidamente el color de nuestros textos.

1 Red 7 Purple 13 fuchsia

2 Silver 8 Orange 14 Navy
3 Yellow 9 Teal 15 olive
4 Aqua 10 Black 16 maroon
5 White 11 Blue 17 Lime
6 Gray 12 Green
Subrayados y otras decoraciones para el texto

La propiedad que decora el texto se llama text-decoration.

Los siguientes son los valores aplicables a esta propiedad:

text-decoration: underline – permite subrayar el texto

text-decoration: overline – crea una línea sobre el texto
text-decoration: line through – crea una línea a través del texto
text-decoration: blink – hace parpadear el texto
Con la misma propiedad es posible eliminar aquellos énfasis que
aparecen automáticamente bajo los textos dotados de una conexión.

Ej.
a { text-decoration: none; }

Aplicar colores y fondos

Determinar el valor de los colores

Para poder aplicar un color de fondo específico a una página entera

es oportuno primero tomar en consideración el funcionamiento del
modelo RGB.
Los ordenadores crean los colores que nosotros vemos sobre la
pantalla combinando; según el modelo RGB; los colores rojo, verde y
azul. Partiendo de este modelo es posible crear infinitas
combinaciones entre estos colores, comunicando al ordenador la
cantidad de cada uno a usar en la misma combinación.
Cada color visible en la pantalla puede ser descrito por una serie de
tres números: un valor para el rojo, un valor para el verde y uno para
el azul.
Por ejemplo, una tonalidad “lavanda” poco encendida es determinada
por esta serie de valores: 200, 178, 230.
La cantidad de luz presente en cada canal de color está descrita en
una escala de valores entre 0 y 255, donde el 0 indica una total
ausencia de luminosidad.
Los nombres de los colores ya vistos son ciertamente más fáciles de
utilizar pero limitados. Para especificar una tonalidad distinta de
colores es necesario considerar el valor RGB que nos permite elegir
entre millones de colores distintos.
Veamos como utilizar el modelo RGB para la creación de reglas de
estilo.
El mejor modo de escoger un color es conocer su valor según el
modelo RGB. Para hacer esto es necesario usar un software de
edición de imágenes como Photoshop o Gimp. En la elección de
colores es posible, seleccionado uno, ver sus valores: rojo (R), verde
(G), y azul (B). Bajo estos tres valores encontraremos otro con el
símbolo de numeral al lado (#). Este símbolo nos indica el valor
particular con el cual un color determinado puede ser indicado y
utilizado en una hoja de estilo.
Para utilizar este valor específico en la propiedad color, el código que
hemos visto en el programa de edición será reportado junto al
símbolo numeral, como en el siguiente ejemplo.

Ej. color: #C8B2E6;

Otro modo para indicar un color específico es reportar los valores de

los tres colores del modelo RGB, encerrados entre paréntesis, como
en el siguiente ejemplo.

Ej. color: rgb(200, 178, 230)

Aplicar colores en primer plano y en el fondo

Con las reglas de estilo es posible especificar los colores de fondo y

aquellos en primer plano para cada elemento (X)HTML.
El primer plano de un elemento está constituido por su texto y su
borde. Este color se indica siempre mediante la propiedad color,
según el siguiente modelo:

blockquote {
border: 4px solid;
color: #C8B2E6;
}
En el ejemplo dado, la regla relativa a la aplicación del color indicado
por el código, será aplicada no solo a la citación presente en el texto
sino también a su borde, donde se indica la regla para un espesor
específico.
Con la propiedad background-color es posible rellenar el espacio que
encierra a los elementos indicados.
En el siguiente ejemplo el área de una larga citación, indicada por el
elemento blockquote, es rellenada con un color específico:

blockquote { background-color: #dd3bdd; }

La propiedad background-color puede ser, por lo tanto, utilizada ya
sea para indicar un color de fondo en una página entera o bien para
cada elemento individual (bloque o en línea) indicado en la estructura
(X)HTML.

Agregar una imagen de fondo

Ahora veremos como agregar una imagen utilizando las hojas de

estilo en vez del lenguaje (X)HTML.
Utilizando determinadas reglas de estilo es posible insertar las
imágenes de fondo donde queremos. Además, es posible aplicar una
imagen distinta para cada elemento presente en el documento.

La propiedad background-image se utiliza para agregar una imagen

de fondo a un determinado elemento o a toda la página.
Las imágenes de fondo se indican a través de su URL, que puede ser
absoluta o relativa. Suele ser recomendable crear una carpeta de
imágenes que se encuentre en el mismo directorio que los archivos
CSS y que almacene todas las imágenes utilizadas en el diseño de las
páginas.
Así, las imágenes correspondientes al diseño de la página se
mantienen separadas del resto de imágenes del sitio y el código CSS
es más sencillo (por utilizar URL relativas).
Para aplicar una imagen a toda la página es suficiente aplicar la regla
con esta propiedad al “cuerpo” (body) de nuestro documento base,
como en el siguiente ejemplo.
body{ background-image:url(immagine.gif); }
Si la imagen que se quiere mostrar es demasiado grande para el
fondo del elemento, solamente se muestra la parte de imagen
comprendida en el tamaño del elemento. Si la imagen es más
pequeña que el elemento, CSS la repite horizontal y
verticalmente hasta llenar el fondo del elemento.
En ocasiones, no es conveniente que la imagen de fondo se repita
horizontal y verticalmente. Para ello, CSS introduce la propiedad
background-repeat que permite controlar la forma de repetición de las
imágenes de fondo. A esta propiedad pueden asociarse los siguientes
valores: repeat, repeat-x, repeat-y, no-repeat.

El valor repeat indica que la imagen se debe repetir en todas

direcciones y por tanto, es el comportamiento por defecto. El valor
no-repeat muestra una sola vez la imagen y no se repite en ninguna
dirección, como en el siguiente ejemplo:
body {
background-image: url(immagine.gif); background-repeat: no-repeat;

El valor repeat-x repite la imagen sólo horizontalmente y el valor

repeat-y repite la imagen solamente de forma vertical.
Además, es posible especificar la posición exacta dentro del fondo
del elemento en el cual queremos hacer aparecer nuestra imagen,
mediante la propiedad background-position. Normalmente las
imágenes aparecen, cuando no se especifique lo contrario, en el
ángulo superior izquierdo de una página. Para modificar la posición
estándar de una imagen se usan los siguientes valores: left, center,
right, top, bottom.
Las palabras claves (left, center, right, top, bottom y center) permiten
indicar la distancia que se desplaza la imagen de fondo respecto de su
posición original situada en la esquina superior izquierda. Por
ejemplo, el valor right posicionará la imagen en el ángulo derecho del
área de fondo.
Generalmente estas palabras claves se utilizan en pares, como en el
siguiente ejemplo:

{ background-position: left bottom; }

{ background-position: right center; }
Para determinar la posición exacta de una imagen es también posible
establecer los valores precisos relativos a la distancia del ángulo
superior izquierdo del elemento, indicando primero el dato relativo al
tamaño horizontal.

Ej.
{ background-position: 200px 50px; }
Obviamente, para evitar que también en este caso la imagen se repita,
será necesario aplicar la regla vista en precedencia.
Usando solo la propiedad background-position será posible
determinar solamente el nuevo punto de partida del cual la imagen
será repetida.
Bloquear las imágenes del fondo

Es posible utilizar la propiedad de background-attachment para

lograr que la imagen insertada no se mueva mientras pasan las
páginas del navegador.
Cuando una imagen se establece como fija (valor: fixed) permanece
en la misma posición, relativa al área visual del navegador.

En el siguiente ejemplo una imagen no repetida se posiciona en el

fondo de todo el documento (body). Automáticamente, pasando la
página, la imagen insertada se moverá pero con la adición de la regla
evidenciada la imagen quedará fija en el punto en el cual fue
originalmente insertada.

Ej.
body {
background-image: url(images/immagine.gif); background-repeat:
no-repeat; background-position: center 300px; backgroundattachment:
fixed; }
La propiedad genérica background

Así como para los font, también para los colores y las imágenes es
posible aplicar una única propiedad genérica en todos los valores
utilizados para modificar en poco tiempo nuestras imágenes y colores
de fondo.
Podemos utilizar la función genérica background del siguiente modo
para indicar conjuntamente todos los cambios que son aportados
durante la inserción de un color o una imagen en el fondo de una
página o de un elemento.
Ej.
body { background: black url(immagine.jpg) no-repeat right top
fixed; }
Sin esta regla general deberíamos aportar los mismos cambios del
siguiente modo:

body{ background-color: black; background-image:

url(immagine.jpg); background-repeat: no-repeat;
background-position: right top; background-attachment: fixed;}

Hojas de estilo externas

Al inicio de esta lección hemos mencionado tres modalidades para

conectar las hojas de estilo a las marcas (X)HTML.
Ahora tomaremos en consideración las hojas de estilo externas que
hasta el momento hemos excluido.
Una hoja de estilo externa es un documento solo de texto con la
extensión .css que contiene por lo menos una regla de estilo.
Existen dos modos de hacer referencia a una hoja de estilo externa,
dentro de un documento (X)HTML:

1) el elemento link
2) la regla del @import
Utilizar el elemento link

El mejor método para crear un link directo a un documento .css es

agregar en la cabecera del documento (X)HTML un elemento link.

Ej.
<head>
<link rel="stylesheet" href="/ruta/hojadeestilo.css" type="text/
css" /> <title>Nuevodesign</title>
</head>

En el elemento link es necesario insertar tres atributos:

 • rel="stylesheet": define la relación entre el documento corriente y
aquello al cual se conecta. El valor del atributo rel es siempre
stylesheet cuando se realiza una conexión con una hoja de estilo.
• href="url": proporciona la posición del file .css.
• type="text/css": identifica el tipo de la hoja de estilo como
“text/css”

En un documento es posible incluir sin problemas más de un link

para distintas hojas de estilo. En el caso en el cual se verifiquen
conflictos entre los link, el último en la secuencia sobrescribirá las
instrucciones precedentes.
Importar utilizando el @import

Otro método para adjuntar las hojas de estilo externas a un

documento (X)HTML es aquel que implica la utilización de la norma
@import, según el siguiente ejemplo:

<head>
<style type="text/css">
@import url("http://ruta/stylesheet.css"); p { font-face: Verdana;}
</style>
<title>Nuevodesign</title>
</head>
En el ejemplo, se indica un URL absoluto pero también podría ser
especificado con un URL relativo al documento (X)HTML corriente.
El ejemplo muestra que un @import puede aparecer en un elemento
de estilo con otras reglas, pero debe ser insertado antes de cada
selector.
También en este caso, mediante la utilización del @import, es posible
adjuntar al documento (X)HTML más de una hoja de estilo externo
que contiene nuestras reglas.
Además, es posible usar la función @import dentro de un mismo
documento .css para crear una conexión con otras hojas de estilo
externas.
FIN DE LA LECCIÓN