Diario De Yasmin

1 Introducción a las hojas de estilo:

En los entornos estudiados en que la Web fue creada, la gente estaba más preocupada por el

cabidad de sus páginas que por su presentación. A medida que la Web era descubierta por un

espectro mayor de personas de distintas procedencias, las obstaculización del HTML se transformaron en fuente de continua de fracaso, y los autores se vieron forzados a adelantar las limitaciones estilísticas del HTML. Las hojas de estilo resuelven estos problemas al mismo tiempo que reemplazan al limitado rango de mecanismos de presentación del HTML.

Con las hojas de estilo es más fácil definir la cantidad de espacio entre líneas, el sangrado

de las líneas, los colores a utilizar para el texto y el fondo, el tamaño y estilo de las fuentes, y muchos más detalles.

Las hojas de estilo representan, por tanto, un avance importante para los diseñadores de

páginas web, al darles un mayor rango de posibilidades para mejorar la apariencia de sus

páginas. Además, si queremos generar documentos con un aspecto idéntico para dar un aspecto

más robusto y claro a nuestros documentos nos vemos obligados a señalar, para cada elemento

de nuestras páginas, el formato que queremos. Con las hojas de estilo definimos las

características comunes a todas nuestras páginas una sola vez, lo que facilita mucho nuestro

trabajo cuando tenemos muchas páginas en el servidor.

Las Hojas de Estilo o CSS (Cascading Style Sheets - Hojas de Estilo en Cascada) son un

mecanismo que permite aplicar formato a los documentos escritos en HTML (y en otros

lenguajes estructurados, como XML) separando el contenido de las páginas de su apariencia:

- la información estará contenida en la página HTML, pero este archivo no debe definir

cómo será visualizada esa información

- las indicaciones acerca de la composición visual del documento estarán especificadas en

el archivo de la CSS.

Veamos un ejemplo de código CSS que indica que los encabezados H1 deben mostrarse con

tipografía Arial, de 19 puntos, en color azul y alineación central:

H1 {

font-family: Arial, Sans-serif;

font-size: 19pt;

color: #0000FF;

text-align: center;

}

El archivo css contiene reglas que constan de un selector (en este ejemplo, H1) y una o más

declaraciones (en el ejemplo tenemos cuatro declaraciones). Cada declaración tiene dos

partes: una propiedad (por ejemplo, FONT SIZE) y un valor (en este caso, 19pt). Estas reglas

son las que determinan cómo deberá mostrarse la página.

Selector { declaraciones }

declaración = propiedad: valor

Como se ve en el ejemplo anterior, puede haber varias declaraciones, debiendo separar cada

una de la siguiente con el carácter punto y coma (;). Se puede dejar el ; después de la última

declaración, pero no es obligatorio.

Hay tres formas de trabajar con css:

- Hojas de estilo en un archivo externo

- Hojas de estilo incrustadas

- Hojas de estilo en línea

2 Hojas de estilo en un archivo externo

Salvamos el fichero anterior, por ejemplo como “estilos1.css”. Luego, en cada página html de

nuestro sitio agregamos la etiqueta link indicando el fichero que contiene nuestra hoja de estilo

(el archivo con extensión .css):

estilos1.css

H1 {

font-family: Arial, Sans-serif;

font-size: 19pt;

color: #0000FF;

text-align: center;

}

indice.html

<html>

<head>

<title>Título</title>

</head>

<body>

…

<p>Este párrafo es normal</p>

<h1> Este texto aparecerá con fuente arial de 19 puntos, en color azul y

alineación central.</h1>

…

</body>

</html>

El elemento LINK aparece siempre en la sección HEAD del documento y especifica:

• el tipo de vínculo: a una hoja de estilo ("stylesheet")

• la ubicación de la hoja de estilo a través del atributo "href"

• el tipo de hoja de estilo que se vincula: "text/css"

Ahora, todos los encabezados H1 de las páginas que contienen la referencia al archivo de la CSS

tendrán el aspecto que hemos definido.

El documento que contiene todas las definiciones de estilo tendrá extensión .css, y no podrá

contener ninguna etiqueta HTML; sólo podrá contener los estilos.

Se pueden importar tantos documentos de estilos como se deseen, siempre teniendo en

cuenta que si existen definiciones que entran en conflicto entre los diferentes documentos, el

navegador tendrá en cuenta únicamente la última opción leída.

3 Hojas de estilo incrustadas

Hemos visto cómo se especifican las reglas de estilo en un archivo externo. Este método es el

más recomendable y el que permite mayor flexibilidad ya que los estilos pueden cambiarse

sin tocar el código HTML y la CSS puede ser compartida por varias páginas, pero también

existe la posibilidad de poner la hoja de estilo dentro de una página HTML usando el elemento

STYLE en el interior del documento al que se le quiere dar estilo, en la sección <head>. De esta

forma los estilos serán reconocidos antes de que la página se cargue por completo.

<HTML>

<HEAD>

<TITLE>CSS incrustada</TITLE>

H1 { color: blue }

</STYLE>

</HEAD>

<BODY>

<H1>Título color azul</H1>

<P>Un párrafo cualquiera...</P>

</BODY>

</HTML>

Como se ve en el ejemplo, el elemento STYLE se usa dentro del encabezado (<HEAD></HEAD>)

de la página, especificando el tipo de hoja de estilo:

H1 { color: blue }

P { color: red }

... (aquí se agregan todas las reglas de estilo) ...

</STYLE>

Este método permite aplicar la hoja de estilo sólo a la página que la contiene. Si bien no es

tan práctico como usar una CSS externa, resulta útil cuando en nuestro sitio tenemos algunas

pocas páginas que usan un formato distinto al resto.

En muchos casos convendrá usar ambos métodos simultáneamente: poner un elemento link a

una hoja externa para aplicar un estilo general y luego crear una hoja incrustada en la que

solamente deberemos definir las reglas específicas para esa página. Por las leyes de cascada de

las CSS, en caso de existir una misma regla (una en la hoja externa, otra en la hoja incrustada)

con distintos valores, tiene preponderancia la definida en la hoja incrustada.

4 Hojas de estilo en línea

Por último, también es posible aplicar el estilo directamente en la etiqueta o elemento HTML

utilizando el siguiente formato:

...

</elemento>

Nótese que las declaraciones van entrecomilladas.

Por ejemplo:

<p style="text-align: left; color: blue"> Texto alineado a la izquierda y

de color azul </p>

<p style="color:red">Párrafo de texto en color rojo</p>

Por supuesto, la definición del estilo dentro de la propia etiqueta no es la manera más eficaz de

utilizar las hojas de estilo, pero pueden existir casos que lo justifiquen. La existencia de una

regla como la del último ejemplo constituye por sí misma una hoja de estilo por lo que debemos

declarar en el encabezado de la página el tipo de CSS que estamos usando.

Esta declaración no será necesaria si en la misma página estamos usando una hoja de estilo

incrustada o si existe una referencia a una hoja externa.

Esta forma de aplicar la hoja de estilo directamente en la etiqueta es similar al modo usado en

el código HTML, pero con dos importantes diferencias:

- El conjunto de propiedades que se pueden aplicar es mucho mayor y

- Los estilos especificados en una hoja de estilo (cualquiera sea su origen) tienen preferencia

sobre los formatos aplicados con HTML.

Esto significa que si en nuestra hoja de estilo hemos definido:

P {text-align: left}

Todos los párrafos quedarán alineados por la izquierda y, si en un párrafo determinado, usamos:

El párrafo seguirá estando alineado por la izquierda porque las reglas de las CSS tienen más

fuerza que el formato aplicado con HTML.

5 Modelo de caja:

*En esta sección se han reproducido contenidos de [2] con permiso del autor.

Todos los elementos HTML que aparecen en un documento se emplazan dentro de una caja

rectangular que los incluye, es decir, los rodea. Esta característica se estudia por medio del

denominado “Modelo de Caja”. En este modelo se especifican determinadas áreas de la caja

de cada elemento HTML que podrán ser dotadas de estilo según las necesidades de

presentación que tengamos. El comportamiento de la caja va a depender del tipo de elemento

que vayamos a tratar.

El modelo de caja de CSS describe las cajas rectangulares que son generadas por los elementos.

El elemento raíz del documento (<HTML> o, mejor aún, <BODY> en HTML) genera una caja que

actúa como bloque de contención de las cajas generadas subsecuentemente. A su vez, cada caja

puede actuar como bloque de contención de otras cajas generadas por sus elementos

descendientes.

Cada una de las cajas puede separarse en cuatro áreas distintas que definen su aspecto.

− Contenido: es el área que contiene la información representable del elemento (textos,

imágenes, objetos... ).

− Relleno (padding): esta área es el espacio existente entre el rectángulo del contenido y

el borde definible para cada una de las cajas.

− Borde (border): línea que encierra completamente el contenido y su relleno; el

elemento puede presentar un borde con un grosor, una forma y un color que delimitan las

áreas anteriores.

− Imagen de fondo (background-image): imagen que se muestra por detrás del contenido

y el espacio de relleno.

− Color de fondo (background-color): color que se muestra por detrás del contenido y el

espacio de relleno.

− Margen (margin): la parte más externa de cada caja de elemento es el margen. Este

proporciona el espacio que separa una caja de las generadas por los elementos anterior y

siguiente.

El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno se

muestra el color o imagen de fondo (si están definidos) y en el espacio ocupado por el margen se

muestra el color o imagen de fondo de su elemento padre (si están definidos). Si ningún

elemento padre tiene definido un color o imagen de fondo, se muestra el color o imagen de

fondo de la propia página (si están definidos).

Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es

la que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja del elemento

o si la imagen tiene zonas transparentes, también se visualiza el color de fondo. Combinando

imagenes transparentes y colores de fondo se pueden lograr efectos gráficos muy interesantes

Las áreas de padding, border y margin se dividen en cuatro segmentos: top (superior),bottom (inferior), left (izquierdo) y right (derecho). De este modo podemos distinguir border-right, border-top y border-bottom (lo mismo para padding y margin).Veamos un ejemplo donde se manipula la caja de un párrafo: en la figura de la izquierda

podemos apreciar tres cajas iguales, correspondientes a los tres párrafos que se incluyen en el

documento. En la figura de la derecha observamos que el párrafo central ha definido un estilo

para su caja, añadiendo un grosor al margen transparente, un borde punteado de color rojo y un

espacio de relleno en color azul.Todo esto es muy técnico, pero ¿para qué sirve?: fundamentalmente para tener el control no

sólo de las propiedades del elemento en sí (su color, la fuente usada para el texto, etc.), sino

también de las propiedades de esa caja generada por el elemento (sus márgenes, sus bordes, la

posición dentro del documento) que será lo que nos permita componer visualmente la página

de un modo mucho más rico y flexible que con HTML.

Este modelo de caja es el que permite, por ejemplo, que cualquier elemento de la página pueda

recibir todas de las propiedades definidas en CSS. Por eso, a diferencia de lo que sucede con

HTML, todos los elementos pueden tener una imagen de fondo o un borde (sin necesidad de usar

una tabla para eso); también es posible darle una ubicación precisa a cualquier elemento dentro

de la página, ya sea con respecto a la pantalla o a otros elementos. Mejor aún, nos da la

posibilidad de usar un lenguaje como, por ejemplo JavaScript para conseguir efectos muy

interesantes modificando las propiedades de las cajas (moverlas de su posición, mostrarlas o

esconderlas, cambiar su tamaño, etc.).

Cada etiqueta HTML va a generar una caja según el tipo al que pertenezca, pero la descripción

anterior se aplica a todas ellas. La clasificación del tipo de etiquetas es la siguiente:

- Etiquetas de bloque: este tipo de etiquetas son aquellas que fuerzan un salto de línea

antes y después del elemento. Por ejemplo, las etiquetas <div> y <p> son de este tipo.

− Etiquetas en línea: son las etiquetas que se incluyen dentro de otro elemento, y que no

generarán saltos de línea, de modo que su anchura será la necesaria para mostrar su

contenido. Por ejemplo, las etiquetas <b> y <u> pertenecen a este tipo.

− Etiquetas de sustitución: se trata de las etiquetas referidas a elementos que solicitan

recursos al servidor, de forma que su caja será generada en función del objeto que se

incluye en sustitución a la etiqueta. Por ejemplo, las imágenes mediante etiquetas

<img>.

6 Cascada:

Se llama así a la capacidad de que las informaciones de estilo provenientes de varias fuentes

puedan combinarse. Pensemos, por ejemplo, en el caso del site de una organización con varios

departamentos y otros tantos diseñadores encargados del mantenimiento de las páginas. El modo

de asegurar la uniformidad gráfica del sitio completo es utilizar una hoja de estilo común donde

estén definidos los aspectos básicos del diseño (fuentes, colores, etc.). Luego cada

departamento puede tener, además, su propia hoja de estilo donde se definirán los aspectos

específicos de ese departamento. Estas hojas de estilo particulares no necesitan reproducir

aquella hoja común, sino que basta con importarla haciendo que los estilos definidos en una y

otras actúen conjuntamente. Cualquier cambio en la hoja de estilo común (una modificación en

los colores institucionales, por ejemplo) se vería reflejado inmediatamente en todas las páginas

vinculadas.

La cascada define una secuencia ordenada de hojas de estilo en la que las reglas de las últimas

hojas tienen una prioridad mayor que las de las primeras. No todos los lenguajes de hojas de

estilo soportan la cascada.

7 Propiedades

Existen una serie de convenciones en la sintaxis de las definiciones formales de propiedades, en

cuanto a los valores que pueden tomar:

| separa dos o más alternativas; exactamente una de ellas debe aparecer

|| separa dos o más opciones; una o más de ellas debe aparecer, en cualquier orden

[] agrupamiento de elementos

+ repetición 1 ó más veces

* repetición 0 ó más veces

? repetición 0 ó 1 vez

{A,B} repetición como mínimo A veces y como máximo B veces

Ejemplos:

* reproducidos de [2] con permiso del autor

[<family-name> , ]* indica que el valor de tipo <family_name> seguido por una coma se

puede incluir cero o más veces.

El valor <url>? <color> significa que la URL es opcional y el color obligatorio y en el orden

indicado.

Por último, el valor [<medida> | thick | thin] {1,4} indica que se pueden escribir entre

1 y 4 veces un valor que sea o una medida o la palabra thick o la palabra thin.

Las propiedades que podemos usar dentro de una hoja de estilo son:

Propiedades de tipo de letra:

font-size tamaño de la letra

x-large | xx-large | smaller | larger (respecto del anterior definido)

font-weight Peso de la letra

En entero (Normal=400, Bold=700)

Normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700

| 800 | 900

font-style Estilo de letra

normal | italic | oblique

font-family Familia de tipos de letra genérica (serif, …)

[[<nombre-de-la-familia> | <familia-genérica>],]*

[<nombre-de-la-familia> | <familia-genérica>]

font-variant con el valor small-caps las mayúsculas ocupan lo mismo que las minúsculas

normal | small-caps

font genérico para definir los anteriores en una sola propiedad

[font-style || font-variant || font-weight]? font-size

[/line-height]? font-family]

Ejemplo: STYLE=”font: 18pt bold italic; …”

Ejemplo 1:

h1 {font-family: "Verdana"; font-style: italic; font-weight: 600 }

<!-- las cabeceras h1 aparecerán con una fuente de la familia Verdana, pero si no

se encuentra esa familia, el navegador utilizará la que haya por defecto. -->

p {font-family: "Arial", sans-serif; font-size: xx-large }

<!-- los párrafos utilizarán la familia Arial, pero si no se encuentra esa

familia, el navegador recurrirá a la fuente sans-serif. -->

h2 {font-family: "Times New Roman", Garamond, "Courier New"; font-size: 75% }

<!-- las cabeceras h2 aparecerán con una fuente de la familia Times New Roman, si

no se encuentra la familia, recurrimos a Garamond, pero si aún así no la

encontramos, se intentará con Courier New. -->

</style>

...

<body>

<h1>Este es un texto de cabecera H1 con fuente verdana</h1>

<h2>Este otro texto, de cabecera H2, utiliza times new roman</h2>

<p>Este párrafo aparece con fuente arial </p>

</body>

Propiedades de color y fondo:

color: color del elemento html

<color>

background-color: color de fondo de un elemento HTML

<color> | transparent

background-image: imagen de fondo de un elemento HTML

none | <URL del recurso>

background-repeat: forma en que se repite una imagen en el fondo

repeat | repeat-x | repeat-y | no-repeat

background-position: indica la posición dentro del contenedor donde se sitúa la imagen

de background

[top | center | bottom] || [left | center | right]

background-attachment: indica si la imagen se mantiene fija cuando se realice un scroll

(fixed) o no (scroll)

scroll | fixed

background: genérico para definir los anteriores en una sola propiedad

[background-color || background-image || background-repeat ||

background-attachment || background-position]

Ejemplo 2:

body { background-image: url("imagenes/buzon_cerrado.jpg");

background-repeat: repeat-y;

background-position: top left; }

p { font: 14pt Verdana; }

</style>

...

<body>

<p>En este documento hemos incluido una imagen de fondo de un archivo .jpg, hemos

indicado que se repita verticalmente, y cuya primera aparición estará alineada con

la esquina superior izquierda.</p>

</body>

Propiedades de texto:

text-decoration: estilo especial para el texto

none | [underline || overline || line-through]

text-transform: efectos sobre un grupo de texto (conversión a mayúsculas, …)

capitalize | uppercase | lowercase | none

text-align: alineación horizontal de elementos de texto

left | right | center | justify

text-indent: sangrado del texto

letter-spacing: permite definir el espaciado entre las letras

normal | <medida>

word-spacing: separación entre palabras

normal | <medida>

line-height: distancia entre líneas de un párrafo

normal | <medida> | <porcentaje>

Ejemplo 3:

h1 { text-transform: uppercase; }

h2 { text-decoration: underline; text-align: right}

</style>

...

<body>

<h1>este es un texto cabecera h1 en mayúsculas</h1>

<h2> texto subrayado y alineado a la derecha</h2>

</body>

Ejemplo 3:

h1 { text-transform: uppercase; }

h2 { text-decoration: underline; text-align: right}

</style>

...

<body>

<h1>este es un texto cabecera h1 en mayúsculas</h1>

<h2> texto subrayado y alineado a la derecha</h2>

</body>

Propiedades de las cajas de los elementos:

1) Propiedades del margen:

margin: <medida> | <porcentaje> | <auto>

Especifica el grosor del margen de los cuatro lados de la caja de un elemento.

Podremos indicar entre 1 y 4 valores que se referirán a los cuatro márgenes de la caja y

que podrán ser medidas (un ancho fijo), valores en porcentaje (calculado con respecto al

ancho del bloque de contención) o el valor auto (determinado por el navegador),

pudiendo combinarse unos con otros en la misma lista:

• Si hay sólo un valor: se aplica a todos los lados.

• Si hay dos valores: los márgenes superior e inferior son determinados por el

primer valor y los márgenes derecho e izquierdo son determinados por el segundo.

• Si hay tres valores: el superior es definido por el primer valor, el izquierdo y el

derecho son definidos por el segundo, y el inferior es definido por el tercero.

• Si hay cuatro valores: se aplican al margen superior, derecho, inferior e izquierdo,

respectivamente.

Mediante las propiedades margin-top, margin-right, margin-bottom y margin-left

podremos aplicar de forma individual los márgenes superior, derecho, inferior e izquierdo

respectivamente. Los valores posibles para estas propiedades son los mismos que para la

propiedad margin.

margin-left: <medida> | <porcentaje> | <auto>

margin-right: <medida> | <porcentaje> | <auto>

margin-top: <medida> | <porcentaje> | <auto>

margin-bottom: <medida> | <porcentaje> | <auto>

2) Propiedades del borde: Las propiedades del borde especifican el ancho, color y estilo del

borde de una caja. Estas propiedades se aplican a todos los elementos. Vamos a ver sólo las

resumidas, pero igual que en los casos anteriores, se puede aplicar un estilo diferente a cada

uno de los cuatro bordes de la caja.

border-style: estilo del borde del elemento

outset]

El valor inicial del estilo de borde es 'none', ningún borde será

visible a menos que se establezca otro estilo de borde.

None: Ningún borde

Hidden: Igual a 'none'

Dotted: El borde es una serie de puntos

Dashed: El borde es una serie de pequeños segmentos de línea

Solid: El borde es un único segmento de línea

Double: El borde son dos líneas sólidas

Groove: El borde luce como si estuviese tallado en la página

Ridge: Lo opuesto a 'grove': el borde parece que estuviera sobresaliendo de la

página

Inset: El borde hace que toda la caja luzca como si estuviera empotrada en la

página

Outset: Lo opuesto a 'inset': el borde hace que toda la caja parezca sobresalir de

la página

border-width: anchura del borde

[<medida> | <porcentaje> | thin | medium | thick]

border-color: color del borde

<color> | transparent

border: genérico para definir los bordes anteriores

[border-width || border-style || <color>]

Ejemplo 4:

h1 { border-width: thick; border-color: red; border-style: dotted; }

h2 { border-style: solid; margin: 10px;}

h3 { border-style: solid; margin: 0.1cm auto auto 0.75in;}

<!-- 0.1 cm para el margen superior y 0.75 pulgadas para el izquierdo,

mientras que para los márgenes derecho e inferior se ajustará

automáticamente. -->

h4 { border-bottom: thick solid red }

<!-- La regla anterior define un borde inferior para las cabeceras de tipo

h4 (una línea gruesa entera de color rojo). -->

</style>

...

3) Propiedades del relleno:

padding-left: <medida> | <porcentaje>

padding-right: <medida> | <porcentaje>

padding-top: <medida> | <porcentaje>

padding-bottom: <medida> | <porcentaje>

Estas propiedades determinan el relleno superior, derecho, inferior e izquierdo de una

caja. Se puede especificar un ancho fijo o indicar un porcentaje que se calcula con

respecto al ancho del bloque de contención (aún para 'padding-top' y 'padding-bottom')

A diferencia de las propiedades del margen, los valores para el relleno no pueden ser

negativos.

Padding

La propiedad 'padding' es una propiedad resumida que se utiliza para definir los cuatro

rellenos a la vez. Pueden especificarse de 1 a 4 valores para el ancho del relleno:

• Si hay sólo un valor: se aplica a todos los lados.

• Si hay dos valores: los rellenos superior e inferior son determinados por el primer

valor y los rellenos derecho e izquierdo son determinados por el segundo.

• Si hay tres valores: el superior es definido por el primer valor, el izquierdo y el

derecho son definidos por el segundo, y el inferior es definido por el tercero.

• Si hay cuatro valores: se aplican al relleno superior, derecho, inferior e izquierdo,

respectivamente.

El color de la superficie o la imagen del área de relleno es especificado a través de la

propiedad 'background' del elemento.

Ejemplo 5:

<html>

<head>

<title>Ejemplo estilos</title>

.Parrafo1 {

padding-left: 50%;

padding-right: 20px;

padding-top: 1em;

padding-bottom: 6pt;

background-color: yellow;

border: 1px solid;

}

.Parrafo2 {

margin: 1.5cm;

border: solid red thin;

padding-left: 25%;

padding-right: 25%;

padding-top: 0.5cm;

padding-bottom: 1cm;

background-color: blue;

}

b { margin: 2cm;

border: solid red thin;

background-color: green;

}

</style>

</head>

<body>

<p> Este párrafo no tiene estilo </p>

<p class="Parrafo1">A este párrafo le hemos aplicado las cuatro propiedades

individuales para el relleno y para cada lado hemos usado una unidad de medida

distinta. Cuando se usa un porcentaje (como en <code>padding-left</code>) éste

se refiere al ancho del bloque de contención, es decir, a la caja del

elemento padre (en este ejemplo, es <code><BODY></code>). Como el color

de fondo del relleno es igual a la propiedad "<code>background</code>"

del elemento, hemos usado esta propiedad para definir un color amarillo de fondo.</p>

<p> Este párrafo no tiene estilo </p>

<p class="Parrafo2">Este párrafo tiene un estilo diferente</p>

<p> Este párrafo no tiene estilo pero <b>este texto en negrita</b> sí <b>y este

también</b> ¿lo ves?.</p>

</body>

</html>

El resultado es el siguiente:

Propiedades de posicionamiento y visualización:

Los navegadores crean y posicionan de forma automática todas las cajas que forman cada página

HTML. No obstante, CSS permite al diseñador modificar la posición en la que se muestra cada

caja. Así, CSS define cuatro propiedades llamadas top, right, bottom y left para controlar el

desplazamiento de las cajas posicionadas desde su posición original:

top: desplazamiento superior

bottom: desplazamiento inferior

right: desplazamiento lateral derecho

left: desplazamiento lateral izquierdo

Los valores que pueden tomar estas propiedades son:

[<medida> | <porcentaje> | auto |inherit ]

Además de las propiedades que controlan el posicionamiento de los elementos, CSS define otras

propiedades para controlar su visualización. Entre ellas se encuentra la propiedad visibility:

visibility: determina la visibilidad de un elemento

[hidden | visible]

Inicialmente todas las cajas que componen la página son visibles. Empleando el valor hidden es

posible convertir una caja en invisible para que no muestre sus contenidos. El resto de

elementos de la página se muestran como si la caja todavía fuera visible, por lo que en el lugar

donde originalmente se mostraba la caja invisible, ahora se muestra un hueco vacío.

Unidades de medida:

Hay dos tipos de unidades de medida: relativas y absolutas.

Las unidades de medidas relativas especifican una medida en relación a otra propiedad de

medida. Las hojas de estilo que utilizan unidades relativas modificarán su escala de un medio a

otro más fácilmente (ej., de un monitor de ordenador a una impresora láser). Las unidades

relativas son:

• em: relativa respecto del tamaño de fuente empleado. Aunque no es una definición

exacta, el valor de 1em se puede aproximar por la anchura de la letra M ("eme

mayúscula") del tipo y tamaño de letra que se esté utilizando.

• ex: relativa respecto de la altura de la letra x ("equis minúscula") del tipo y tamaño de

letra que se esté utilizando.

• px: píxeles, relativa respecto de la resolución de la pantalla del usuario.

La unidades de medida absoluta son útiles solamente cuando las propiedades físicas del medio

de salida son conocidas. Las unidades absolutas son:

• in: inches — 1 pulgada (inch) es igual a 2.54 centímetros.

• cm: centímetros.

• mm: milímetros.

• pt: puntos — los puntos usados por CSS2.1 equivalen a 1/72 pulgadas. Es la unidad

absoluta más utilizada.

• pc: picas — 1 pica es igual a 12 puntos.

8 La regla @import:

La regla @import permite importar hojas de estilo desde otras hojas de estilo. Se puede usar

de las siguientes formas:

@import "hoja_de_estilo.css";

@import url("hoja_de_estilo.css");

Esta declaración debe ir antes que cualquier otra regla en la hoja de estilo.

Puede usarse en un archivo CSS o dentro del elemento STYLE.

9 Agrupamiento

Cuando tenemos varios selectores que comparten las mismas declaraciones, pueden agruparse

en una lista separada por comas (,). No se trata de un tipo de selector especial sino de una

fórmula abreviada para aplicar las mismas propiedades a distintos selectores en un solo paso.

Por ejemplo, si tenemos:

H1 {font-family: Arial, Sans-serif}

P {font-family: Arial, Sans-serif}

TABLE {font-family: Arial, Sans-serif}

#inclinada {font-family: Arial, Sans-serif}

Podemos simplificarlo de este modo:

H1, P, TABLE, #inclinada {font-family: Arial, Sans-serif}

Por otra parte, las propiedades que se desean modificar en una CSS para un mismo selector

pueden agruparse, pero será necesario separar cada una de ellas con un punto y coma:

p {text-align:center; color:red}

Normalmente se describe una propiedad por línea, de la siguiente manera:

h1 {

padding-left: 11em;

font-family: Georgia, "Times New Roman", Times, serif;

color: red;

background-color: #d8da3d;

}

El valor, representado a la derecha de los dos puntos (:), establece el valor de la propiedad. Es

importante recordar que si el valor está formado por más de una palabra, hay que ponerlo entre

comillas.

p {font-family: "sans serif";}

10 Comentarios

En cualquier lugar de la página de estilos pueden incluirse comentarios. Estos no influyen en el

procesamiento de la Hoja de Estilo y deben comenzar con una barra y un asterisco (/*) y

terminar con un asterisco y una barra (*/). Pueden ocupar varias líneas de texto pero no pueden

anidarse (incluir un comentario dentro de otro comentario).

/* Esto es un comentario */

11 Selectores

Los selectores identifican a un elemento dentro de la página Web para luego poder definir

sus propiedades. Los distintos tipos de selectores abarcan desde el simple nombre de las

etiquetas usadas en HTML (BODY, P, TABLE, UL, etc.) hasta complejas combinaciones que

permiten un juego muy amplio de selecciones dentro de la página.

El conocimiento en profundidad de los distintos selectores es uno de los aspectos más complejos

del lenguaje de las Hojas de Estilo y también el que nos permite sacar el máximo provecho de

las CSS.

Existen muchos editores de páginas Web que facilitan la labor de crear y aplicar Hojas de Estilo,

pero los selectores que se pueden definir con estos programas son sólo los más elementales. La

complejidad que pueden alcanzar los selectores contextuales escapa a las posibilidades de

cualquier herramienta y es ahí donde los diseñadores deberán apelar a sus propios recursos.

En esta sección se explican los llamados selectores simples.

10.1. Selectores de tipo o etiqueta

Son los que identifican a un tipo de elemento dentro de los que conforman el código HTML.

Es decir, usan la misma palabra que la etiqueta (tag) sin los signos < y >. Por ejemplo, TABLE

selecciona todos los elementos <TABLE> de la página. La siguiente regla identifica a los

elementos <H1> de la página y los alinea centralmente:

H1 {text-align: center}

Los selectores de tipo tienen la ventaja de que, con un simple cambio en la Hoja de Estilo,

podemos modificar el aspecto de todos los elementos de ese tipo en todas las páginas de

nuestro sitio. Esa es también su limitación: su utilidad se limita al caso en que todos los

elementos de un tipo tengan la misma apariencia en cada una de nuestras páginas. ¿Qué sucede

si en ciertos casos queremos usar un párrafo con características diferenciadas?.

10.2. Selectores de clases

Solucionemos la cuestión anteriormente planteada: se puede conseguir que haya más de un

estilo para cada etiqueta HTML utilizando las clases. El selector de clases consta de un punto

(.) seguido por el nombre de la clase que hayamos creado. Supongamos que para publicar un

reportaje queremos contar con un párrafo especial que denominaremos "pregunta"; en nuestra

hoja de estilo añadimos:

P.pregunta {font-weight: bold; font-style: italic}

Ahora, a los párrafos que corresponden a las preguntas del entrevistador en el supuesto

reportaje les agregamos el atributo CLASS dentro de la etiqueta de la página HTML:

<P CLASS="pregunta">Esta es una pregunta del reportero</P>

Todos los párrafos de la clase "pregunta" aparecerán con texto en itálicas negritas para

diferenciarlos de los párrafos normales.

También se pueden especificar clases genéricas. En este caso se pone el nombre de una clase

tras el punto, pero no se indica por delante el nombre de ninguna etiqueta. Cualquier etiqueta

que utilice esa clase quedará afectada por su código CSS. Veamos un ejemplo: en nuestra hoja

de estilo añadimos:

.contraste {color: #FFFF00; background-color: #000000}

En este caso, la clase "contraste" equivale a cualquier elemento con el atributo

CLASS="contraste". Para usarlo, en el documento html podríamos incluir, por ejemplo:

<H1 CLASS="contraste">Un título con contraste</H1>

<P CLASS="contraste">Un párrafo con contraste</P>

<OL CLASS="contraste">Una lista con contraste</B>

Ejemplo 6:

Supongamos el archivo misestilos.css cuyo contenido es:

h1 {color: red}

p {color: blue}

p.invertido {color: white; background-color: black}

.colorido {color: green; background-color: yellow}

Ahora supongamos el siguiente documento html:

<html>

<head>

<title>Ejemplo de estilos</title>

</head>

<body>

<h1>Título rojo (selector de tipos)</h1>

<p>Los párrafos son azules. Se usa un selector de tipos

para individualizarlos.</p>

<p class="invertido">Una clase de párrafo especial. La clase se llama "invertido"

y el selector es un selector de clases. El texto es blanco sobre fondo negro.</p>

<p class="colorido">Este párrafo usa otra clase llamada "colorido".

El fondo es amarillo y el texto es verde. Esta es una clase genérica

que se puede aplicar a cualquier elemento, no solamente a los párrafos. </p>

<p>Por ejemplo, una palabra en negrita (elemento B de HTML) se verá así:

<b>con negritas y texto azul,</b> pero un elemento B con el

atributo CLASS="colorido" se verá así: <b class="colorido">texto

en negrita, letras verdes y fondo amarillo</b>.</p>

<p>Otro ejemplo. Esta es una lista de la clase "colorido" que tiene</p>

<li>Texto en verde</li>

<li>Fondo amarillo</li>

</ul>

<p>Pero en el caso en que apliquemos la clase "invertido"

a una lista:</p>

<li>Esta no tendrá ningún efecto porque la clase "invertido"

se puede aplicar sólo a los párrafos.</li>

</ul>

</body>

</html>

10.3. Selectores de ID

Los selectores de ID se parecen a los selectores de clases, pero sólo pueden aplicarse a un

elemento de la página. Esto se hace con el atributo id: no pueden existir dos elementos dentro

del mismo documento con el mismo id. Cada id tiene que ser único. En cualquier otro caso, se

debería usar el atributo class en su lugar.

Sintaxis: en vez de usar un punto se utiliza el carácter # y en lugar de class se pone id.

<html>

<head>

#elemento1 { declaración de estilo }

...

</style>

</head>

<body>

<p id="elemento1"> Párrafo que aplica el estilo. </p>

...

</body>

</html>

Por ejemplo:

<html>

<head>

h1#titulo1 {text-align: center}

#inclinada {font-style: italic}

</style>

</head>

<body>

<h1 id="titulo1">Título centrado</h1>

<p id="inclinada">Párrafo en cursiva</p>

</body>

</html>

En el primer caso, aquel elemento H1 con ID="titulo1" de la página será centrado. En el segundo,

cualquier elemento que tenga asignado el atributo ID="inclinada" irá en itálica.

Los selectores de ID no tienen el grado de flexibilidad de los selectores de clases, pero son una

opción para aquellos casos en que se necesite identificar de modo exclusivo un determinado

elemento de la página.

Veamos un ejemplo:

<h1>Capítulo 1</h1>

...

<h2>Capítulo 1.1</h2>

...

<h2>Capítulo 1.2</h2>

...

<h1>Capítulo 2</h1>

...

<h2>Capítulo 2.1</h2>

...

<h3>Capítulo 2.1.2</h3>

...

El código anterior podría hacer referencia a encabezados de cualquier documento dividido en

capítulos y párrafos. Sería normal asignar un id a cada capítulo de la siguiente manera:

<html>

<head>

h1#capitulo1 {color:red; font-size: 150%; text-align: center}

h2#capitulo1-1 {color:blue; font-size: 120%; font-style: italic}

h2#capitulo1-2 {color:green; font-size: 115%; font-style: italic}

h1#capitulo2 {color:yellow; font-size: 125%; text-align: center}

h2#capitulo2-1 {color:orange; font-size: 90%; font-style: italic}

h3#capitulo2-1-2 {font-size: 80%; font-style: italic}

</style>

</head>

<body>

<h1 id="capitulo1">Capítulo 1</h1>

...

<h2 id="capitulo1-1">Capítulo 1.1</h2>

...

<h2 id="capitulo1-2">Capítulo 1.2</h2>

...

<h1 id="capitulo2">Capítulo 2</h1>

...

<h2 id="capitulo2-1">Capítulo 2.1</h2>

...

<h3 id="capitulo2-1-2">Capítulo 2.1.2</h3>

...

</body>

</html>

Ejemplo 7:

Veamos ahora un ejemplo genérico que combina los distintos selectores vistos hasta ahora:

<html>

<head>

<title>Ejemplo estilos</title>

p.clase1 { color: #0000FF; text-align: center }

h2.clase2 { color: #FF0000; text-align: right }

h1#indent1 { color: #00FF00; text-align: center }

<!-- declaración de estilos para la cabecera de tipo 1

que presente el identificador indent1 -->

</style>

</head>

<body>

<h1>Cabecera de tipo 1 sin estilo </h1>

<h1 id="indent1">Cabecera de tipo 1 con el estilo único para este elemento (verde y

centrado)</h1>

<h2 class="clase2">Cabecera de tipo 2 con el estilo de clase2 (rojo y a la dcha)</h2>

<p>Párrafo sin ningún estilo</p>

<p class="clase1">Párrafo con el estilo de la clase1 (azul y al centro)</p>

</body>

</html>

10.4. Selector universal

El selector universal se escribe con un asterisco (*) y representa a cualquier elemento de la

página. Por ejemplo, con:

* {color: red} /* Se aplica a cualquier etiqueta HTML */

Todos los elementos de la página tendrán como color de primer plano el rojo.

Resulta de utilidad cuando queremos inicializar todos los elementos de nuestra página con

determinadas propiedades generales.

10.5. Selectores descendientes

*reproducido de [2] con permiso del autor

Un selector descendiente selecciona los elementos que se encuentran dentro de otros

elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de

apertura y de cierre del otro elemento.

El selector del siguiente ejemplo selecciona todos los elementos <span> de la página que se

encuentren dentro de un elemento <p>:

p span { color: red; }

Si el código HTML de la página es el siguiente:

<p>

...

<span>texto1</span>

...

<a href="">...<span>texto2</span></a>

...

</p>

El selector p span selecciona tanto texto1 como texto2. El motivo es que en el selector

descendiente, un elemento no tiene que ser "hijo directo" de otro. La única condición es que un

elemento debe estar dentro de otro elemento, sin importar lo profundo que se encuentre.

Al resto de elementos <span> de la página que no están dentro de un elemento <p>, no se les

aplica la regla CSS anterior.

Los selectores descendientes permiten aumentar la precisión del selector de tipo o etiqueta. Así,

utilizando el selector descendiente es posible aplicar diferentes estilos a los elementos del

mismo tipo. El siguiente ejemplo amplía el anterior y muestra de color azul todo el texto de los

<span> contenidos dentro de un <h1>:

p span { color: red; }

h1 span { color: blue; }

Con las reglas CSS anteriores:

• Los elementos <span> que se encuentran dentro de un elemento <p> se muestran de

color rojo.

• Los elementos <span> que se encuentran dentro de un elemento <h1> se muestran de

color azul.

• El resto de elementos <span> de la página, se muestran con el color por defecto aplicado

por el navegador.

La sintaxis formal del selector descendiente se muestra a continuación:

selector1 selector2 selector3 ... selectorN

Los selectores descendientes siempre están formados por dos o más selectores separados entre

sí por espacios en blanco. El último selector indica el elemento sobre el que se aplican los estilos

y todos los selectores anteriores indican el lugar en el que se debe encontrar ese elemento.

En el siguiente ejemplo, el selector descendiente se compone de cuatro selectores:

p a span em { text-decoration: underline; }

Los estilos de la regla anterior se aplican a los elementos de tipo <em> que se encuentren dentro

de elementos de tipo <span>, que a su vez se encuentren dentro de elementos de tipo <a> que

se encuentren dentro de elementos de tipo <p>.

No debe confundirse el selector descendiente con la combinación de selectores:

/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */

p, a, span, em { text-decoration: underline; }

/* El estilo se aplica solo a los elementos "em" que se encuentran dentro

de "p a span" */

p a span em { text-decoration: underline; }

Se puede restringir el alcance del selector descendiente combinándolo con el selector universal.

El siguiente ejemplo, muestra los dos enlaces de color rojo:

p a { color: red; }

<p><a href="#">Enlace</a></p>

<p><span><a href="#">Enlace</a></span></p>

Sin embargo, en el siguiente ejemplo solamente el segundo enlace se muestra de color rojo:

p * a { color: red; }

<p><a href="#">Enlace</a></p>

<p><span><a href="#">Enlace</a></span></p>

La razón es que el selector p * a se interpreta como todos los elementos de tipo <a> que se

encuentren dentro de cualquier elemento que, a su vez, se encuentre dentro de un elemento de

tipo <p>. Como el primer elemento <a> se encuentra directamente bajo un elemento <p>, no se

cumple la condición del selector p * a.

12 El orden de la cascada:

Las hojas de estilo pueden tener tres orígenes:

- El autor: como hemos visto hasta ahora, puede hacerlo a través de una hoja externa o

incrustada, incluso definiendo el estilo en línea.

- El usuario: también puede especificar su propia hoja de estilo. Esta posibilidad puede resultar

de gran ayuda para aquellas personas con discapacidades visuales o, simplemente, para quienes

deseen adaptar las páginas a sus preferencias. Cada navegador tiene su forma particular de

proveer al usuario la posibilidad de especificar una hoja de estilo propia. Por ejemplo, en

Microsoft Internet Explorer puede indicarse en el menú Herramientas / Opciones de Internet

pestaña [General][Accesibilidad]

- La aplicación del usuario: el navegador también aplica una hoja de estilo predeterminada que

presenta los elementos de la página de modo que satisfagan las expectativas generales de

presentación del documento.

Las hojas de estilo con estos tres orígenes actúan conjuntamente y el orden de la cascada

determina, en el caso en que existan reglas incompatibles, cuál de ellas tiene preponderancia.

Las siguientes son las normas que determinan la fuerza de las reglas de estilo:

1) La primera disposición se hace por el origen: las reglas de la hoja de estilo del autor tienen

más fuerza que las del usuario y éstas, a su vez, prevalecen por sobre las del navegador.

2) La segunda disposición es por especificidad: los selectores más específicos tienen mayor

fuerza que los selectores generales. Por ejemplo: UL {} es menos específico que UL LI {}. En la

Recomendación CSS2 puede encontrar la explicación acerca de cómo se calcula la especificidad

de un selector.

3) Finalmente, se dispone por el orden especificado: si dos reglas tienen la misma fuerza, origen

y especificidad, la última en ser especificada es la que vence. Las reglas en las hojas de estilo

importadas se considera que están antes que cualquier regla en la propia hoja de estilo.

13 La regla !important

La regla !important está pensada para permitir una mejor accesibilidad a los documentos,

otorgándoles a los usuarios con requerimiento especiales (fuentes grandes, combinaciones de

colores, etc.) el control sobre la presentación. Ejemplo:

P { font-size: 14px !important }

Las declaraciones !important tienen más fuerza que las declaraciones normales y las hojas de

estilo del autor y del usuario pueden contener la declaración !important, en cuyo caso la regla

del usuario tiene mayor fuerza que la del autor.

Aquí es importante destacar que, aunque las hojas de estilo del autor tienen preponderancia por

sobre las del usuario, con la regla !important esto se revierte y se le da mayor poder a las

preferencias del usuario.

14 La etiqueta span:

A veces se quiere dar estilo a un trozo de texto que no está comprendido en ninguna

etiqueta. Para poder hacerlo se usa span.

SPAN puede usarse como un selector en una hoja de estilo, y también acepta los atributos

STYLE, CLASS e ID.

Ejemplo:

.clase1 { color:red; }

</style>

...

<p>En un lugar de <span class=”clase1”>La Mancha</span> de cuyo nombre no

quiero acordarme, no ha mucho que vivía...</p>

Sólo el texto “La Mancha” saldrá de color rojo.

15 DIV

Un div (abreviatura de "división") es básicamente un contenedor. En él, podemos meter

cualquier clase de contenido, con la gran ventaja de que lo podemos manipular a nuestro antojo

con CSS, colocarlo en cualquier parte de la página, de cualquier tamaño, de cualquier color, con

bordes o sin ellos, con imágenes de fondo o sin ellas, etc. A diferencia de las tablas, los divs no

se dividen por dentro, pero podemos anidarlos y organizarlos casi como las tablas (en caso de ser

necesario).

Un DIV puede contener párrafos, encabezados, tablas, y aun otras divisiones (otros div). Esto lo

hace ideal para hacer diferentes clases de contenedores.

Veamos un ejemplo: se trata de conseguir el siguiente aspecto:

Vamos a realizarlo paso a paso:

Paso 1: sin utilizar estilos.

<html>

<head>

<title>Ejemplo de DIV sin estilos y sin DIV</title>

</head>

<body>

<h1>Título de la Página</h1>

<ul>

<li><a href="pepe">Enlace</a></li>

<li><a href="#">Enlace</a></li>

</ul>

<h2>Subtítulo 1 </h2>

<p>En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho

tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín

flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más

noches, duelos y quebrantos los sábados, lentejas los viernes, algún palomino de

añadidura los domingos, consumían las tres partes de su hacienda. El resto della

concluían sayo de velarte, calzas de velludo para las fiestas con sus pantuflos de

lo mismo, los días de entre semana se honraba con su vellori de lo más fino. </p>

<p>Tenía en su casa una ama que pasaba de los cuarenta, y una sobrina que no

llegaba a los veinte, y un mozo de campo y plaza, que así ensillaba el rocín como

tomaba la podadera. Frisaba la edad de nuestro hidalgo con los cincuenta años, era

de complexión recia, seco de carnes, enjuto de rostro; gran madrugador y amigo de

la caza.</p>

<h3>Sub-subtítulo</h3>

<p>Quieren decir que tenía el sobrenombre de Quijada o Quesada (que en esto hay

alguna diferencia en los autores que deste caso escriben), aunque por conjeturas

verosímiles se deja entender que se llama Quijana; pero esto importa poco a

nuestro cuento; basta que en la narración dél no se salga un punto de la verdad.

</p>

El Quijote - Miguel de Cervantes

</body>

</html>

La salida, en el navegador, es:

Paso 2: creamos nuestra hoja de estilos ejemplo_div2.css y la vamos a ir aplicando paso a paso

para que veáis cómo funciona.

/* Para evitar resultados extraños en distintos navegadores, damos algo de estilo al

texto del body*/

body {

font-family:Georgia, "Times New Roman", Times, serif;

font-size:12px;

color:#666666;

text-align:center; /*aquí mandamos a centrar todo el contenido*/

}

#contenedor {

width:600px; /*ancho total de la página*/

border:1px solid #333333;

/*encadeno los 3 atributos claves del borde en una sola línea, ahorrando código

background-color:#FFF8F0;

margin:10px auto; /*10px arriba y abajo, y auto a los lados */

/*para los navegadores nuevos es suficiente para centrar la página*/

text-align:left;

/*aquí alineamos todo de nuevo a la izquierda, pero dentro del contenedor*/

}

#encabezado {

margin:10px; /*para que no se pegue al borde*/

padding:10px; /*algo de relleno*/

width:224px; /*este ancho es para que cuadre con el texto*/

height:50px; /*idem*/

border:1px solid #333333; /*decoración*/

background-color:#CC6600; /*decoración*/

float:left; /*para que el elemento flote a la izquierda*/

display:inline; /*(*)*/

}

#encabezado h1 { /*encadenamos el identificador del div, con la etiqueta para

referirnos sólo al h1 dentro del div encabezado, así no afectará a otros h1 en el resto

del documento.*/

font-size:18px;

font-weight:bold;

width:224px;

border-bottom:16px solid #FFFFFF;

color:#FFFFFF;

margin:0; /*los h1 vienen con margen, con esto se lo quito*/

text-transform:uppercase; /*convierte todas en mayúsculas*/

padding-bottom:10px;

}

#menu {

float:left;

margin:10px 10px auto 0;

border:1px solid #333333;

width:320px;

height:24px;

}

#contenido {

width:580px; /*el ancho más el padding da 600px de ancho que es lo que mide la

pág.*/

clear:both; /*con esto nos aseguramos de que no se ponga nada a los lados*/

padding:10px;

}

#contenido h2 {

font-size:16px;

color:#CC3300;

width:246px;

text-transform:uppercase;

border-bottom:1px dotted #CC3300;

}

#contenido h3 {

width:246px;

font-size:14px;

color:#999900;

border-bottom:1px dotted #999900;

}

#pie {

width:560px; /*menos porque debemos sumar el padding del div contenido*/

text-align:right;

padding:10px;

font-size:80%; /*más pequeño el texto*/

font-style:italic;

color:#999999;

}

En este segundo paso sólo aplicaremos el estilo del body. Para ello, simplemente añadimos entre

</title> y </head> lo siguiente:

Simplemente con hacer este cambio, la salida del navegador es así:

C.F.G.S. Administración de Sistemas Informáticos en Red Página 32/44

IES Luis Braille – Coslada

Profesora: Victoria Montón

Autora: Mª de los Ángeles Bravo, con anotaciones de Victoria MontónLenguajes de Marcas. Unidad 3.

Paso 3: aplicamos el estilo “contenedor”.

<html>

<head>

<title>Ejemplo de DIV - paso 3</title>