Professional Documents
Culture Documents
Tabla de Figuras
Figura 1. Elementos de un documento CSS __________________________________________________________ 5
Figura 2. Elementos de Cajas en CSS _______________________________________________________________ 16
2
Manual Rápido de CSS
2007
1) CSS
Las Hojas de Estilo (o CSS, por Cascading StyleSheets) son un mecanismo que permiten aplicar
formato a los documentos escritos en HTML ó XHTML (y en otros lenguajes estructurados, como
XML) separando el contenido de las páginas de su apariencia. Para el diseñador, esto significa que
la información estará contenida en la página HTML, pero este archivo no debe definir cómo será
visualizada esa información, sino la hoja de estilos asociada a él. Las indicaciones acerca de la
composición vis ual del documento estarán es pecificadas en el archivo de la CSS.
En un ejemplo sencillo, una página HTML podría tener uno o varios encabezados definidos con la
etiqueta < h1>, se quieren decorar con tipografía Arial, de 19 puntos, en color azul y alineación
central. Por un lado el archivo XHTML contendría la definición de encabezados y por otra el archivo
CSS contendría la definición de los estilos a aplicar para la etiqueta de encabezados así:
Parte del contenido del archivo pagina.html
…
<h1>1er Título de nivel 1</h1>
…
<h1>1er Título de nivel 1</h1>
…
h1 {
font-family: Arial;
font-size: 19pt;
color: blue;
text-align: center;
}
Luego, agregamos un enlace en el doc ument o HTML a la hoja de estilo creada. El enlac e se crea
dentro de la cabecera del documento. Nuestro documento pagina.html quedaría as í:
<html lang="es">
<head>
<title>Introducción a las CSS</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
…
<h1>1er Título de nivel 1</h1>
…
<h1>1er Título de nivel 1</h1>
…
</body>
</html>
3
Manual Rápido de CSS
2007
La aplicación de estilos toma en cuent a dos conceptos import antes, la herencia y la cascada.
H er encia
Cada página HTML está compuesta por una serie de elementos (tít ulos, párrafos, listas, tablas,
etc.) organizados en una estructura donde cada elemento está contenido por otro element o, que a
su vez puede estar contenido por ot ro.
En esta estructura existe un elemento raíz que es el que actúa de contenedor de todos los demás
elementos. En HTML se puede considerar como elemento raíz al elemento < body> o al elemento
<html>.
La importancia de este hecho es que cada elemento hereda las propiedades del elemento que lo
contiene (llamado el elemento padre). Quiere decir que si especificamos la propiedad color: red
para <BODY> en la hoja de estilos, todos los elementos de la página heredarán esta característica
(como listas y párrafos) y no será neces ario especificar nuevament e la propiedad color en cada
uno de ellos.
Aquí es necesario hacer algunas precisiones:
1. No todas las propiedades son hereditables y para cada propiedad se define si ésta se hereda
o no.
2. El valor inherit puede aplicarse a cualquier propiedad de los elementos. Este valor puede
usarse para reforzar explícitamente la herencia de una propiedad o para lograr que un
elemento herede de su padre una propiedad que de otro modo no sería heredada.
3. Cuando se asigna una propiedad a un elemento, el valor especific ado reemplaz a al valor
heredado, como si se sobrescribiera el valor heredado del padre..
4. Los elementos heredan los valores computados (expresados con bas e a porcentajes o
tamaños relativos ) del padre, no los valores especificados. Todas las propiedades tienen
siempre un valor asignado. El valor por defecto, el valor heredado o el valor asignado en el
archivo CSS ).
C ascada
Cuando varias hojas de estilos se aplican sobre un documento y hay conflictos sobre la regla que
debe aplicarse. El orden de la cascada determina, en el caso en que existan reglas incompatibles,
cuál de ellas tiene preponderancia.
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 que
es la forma más elegante. También se pueden hace la hoja de estilos 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,
simplement e, 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.
La aplicación del usuario: el navegador también aplica una hoja de estilo predeterminada
que present a los elementos de la página de modo que satisfagan las expectativas
generales de presentación del documento.
4
Manual Rápido de CSS
2007
Las siguient es 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 es pecífico que UL LI {}. En
la Recomendación CSS2 puede encontrar la ex plicación acerca de cómo se calcula la
especificidad de un selector. Especificidad
3. Finalmente, se dispone por el orden especificado: si dos reglas tienen la misma fuerza, origen
y especificidad, la última en ser es pecificada 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.
R eglas
Un documento CSS está compuesto por una c olección de reglas . Como lo más probable es que
haya más de una regla, una colección de reglas se llama frecuentemente rule-set o juego de
reglas. Una regla consiste en un selector acompañado de un bloque de declaraciones.
El selector det ermina a que element os en el árbol del documento se aplicarán las reglas. El bloque
de declaración es una lista, separada por punto y coma (”;”), de una o varias declaraciones (o
ninguna), cont enidas entre llaves (”{” y “}”). Cada declaración puede o estar vacía o estar
compuesta por una pareja propie dad/ valor, donde la propiedad y el valor se separan con dos
puntos (”:”).
h1 {
font-family: Times;
color: blue; 1ra. Regla
letter-spacing: 0.5em;
}
Declaración
Selectores #especial {
background-color: white;
font-size: 2em; 2da. Regla
color: black;
} Valor
.para { Propiedad
font-family: Arial;
letter-spacing: 0.5em;
color : red; 3ra. Regla
}
5
Manual Rápido de CSS
2007
Select or es de C SS
Los selectores son los nombres que identifican un estilo o regla. Estos nombres definen pat rones
que determinan a qué elementos del árbol del documento, donde la hoja de estilos es utilizada,
serán aplicadas las declaraciones del estilo. Pueden utilizarse patrones complejos para ser más
específico sobre qué elementos van a aplicarse las reglas, basados en la posición del element o en
el árbol del documento.
SELECTOR UNIVERSAL
El selector universal se marca con un asterisco “*” y abarca a todos los elementos del documento
XHTML. El siguient e ejemplo aplicaría un fondo amarillo a todos los elementos que soportasen la
propiedad background-color salvo que se usase un selector más específico que lo sobrescriba.
* { background-color: yellow; }
El siguient e ejemplo podría ser aplicado a todos los elementos del documento XHTML que tengan
como nombre de clase enf atizado (class="enfatizado")
Cuando el asterisco forma parte de un patrón, como en el ejemplo anterior, puede ser omitido
tranquilamente. Un patrón de .enfatizado sería igual de efectivo que *.enfatizado
p { background-color: white; }
Cuando varios selectores van a compartir el bloque de declaraciones, los selectores pueden ser
agrupados separándolos con una coma. El siguiente ejemplo aplicará un fond o negro a todos los
elementos <h1> y <h2>
Si la clase va a ser aplicada a un número de element os, estos pueden definirse de forma individual,
agruparse o utilizar el selector universal (*. nombreClase ó . nombreClase)
SELECTOR POR ID
El atributo id debe ser único dentro del documento web, por tanto sólo puede aplic arse a una única
aparición de un elemento dent ro del árbol del doc umento. El selector CSS para indicar los id es la
6
Manual Rápido de CSS
2007
almohadilla #. El siguiente ejemplo aplicará un fondo amarillo al elemento <h2> que tenga el id
único ofertas (<h2 id="ofertas">)
Dado que el selector id debe ser único, es tot alment e seguro utilizar el selector univers al
(*#idNombre o #idNombre). Para mejorar la legibilidad y la facilidad en el mantenimiento suele ser
buena idea conservar el nombre del elemento en su lugar (h2#idNombre).
SELECTORES DESCENDENTES
El árbol del documento está organizado de tal forma que cad a elemento del árbol tenga un
elemento padre, exceptuando el elemento raíz. Los selectores descendent es se usan para afectar
a todos los elementos que descienden de un determinado padre. Los selectores descendentes se
crean a partir de selectores separados por espacios, donde cada selector subsiguiente debe estar
contenido en su predecesor. El siguiente ejemplo aplicará un fondo amarillo a cualquier elemento
<strong> contenido dentro de un párrafo, <p>.
Pseudo- Select or es de C SS
Todos los selectores vistos hasta el moment o se refieren a elementos que podemos encont rar
dentro del código HTML. Los pseudo selectores se utilizan en escenarios donde la posición del
elemento dentro del árbol del documento no sea suficiente como selector, como en la primera lí nea
de un párrafo.
Los ps eudo elementos y las ps eudo clases son utilizados para aplicar formato basado en
información fuera del árbol del documento y están precedidos de “dos puntos” :
PSEUDO ELEMENTOS
Son llamados pseudo-elementos porque en realidad no existen en el documento fuente (ninguna
marca identifica la primer letra de un párrafo, por ejemplo) pero son muy útiles para seleccionar
elementos importantes dentro de la composición.
7
Manual Rápido de CSS
2007
CSS 2.1 tiene cuatro pseudo elementos:
:first-line Permite aplicar un estilo determinado a la primera línea de un párrafo.
:first-letter Permite seleccionar la primer let ra de un párrafo, generalmente para utilizarla
como capitular (en un tamaño mayor que el resto del párrafo)
:before Permit e insertar un contenido antes de un elemento determinado y definir el estilo
del contenido ins ertado
:after P ermite insertar un c ontenido después de un elemento determinado y definir el estilo
del contenido ins ertado
Los pseudo-elementos :first-letter y :first-line permiten conseguir el efecto de coloc ar la primer letra
o la primer línea de un párrafo (o ambas cosas a la vez) en un formato diferenciado.
Por ot ro lado, :before (antes ) y :aft er (des pués ) permiten insertar un contenido ant es o después de
un elemento determinado y definir el estilo del contenido insertado. La propiedad 'content', junto
con estos pseudo-elementos, especifican lo que se inserta.
Con la regla anterior conseguiríamos que todas las letras de la primera línea de los párrafos fueran
convertidas en mayúsculas. Por supuesto, la medida de esta primera línea será determinada por el
tamaño de la fuente, el ancho de la ventana, etc.
Sólo las siguientes propiedades se aplican al pseudo -element o :first-line: propiedades de la fuente,
propiedades del color, propiedades del fondo, 'word -spacing', 'letter-spacing', 'text-decoration',
'vertical-align', 'text-transform', 'line-height', 'text-shadow' y 'clear'.
p {
font-size: 12pt;
line-height: 12pt;
}
p:first-letter {
font-size: 200%;
font-weight: bold;
}
Las reglas anteriores determinan que los párrafos tengan una capitular en negritas del doble de
tamaño que la fuente del párrafo.
El siguiente ejemplo aplica un font-size de 2em a la primera letra de un párrafo.
Podemos lograr que antes de cada elemento <h3> aparezca el texto "Tema:" sin necesidad de
tener que escribirlo en cada título. También podemos hacer que cada párrafo termine con un
pequeño ícono o poner "Fin" al pie de cada página us ando las siguientes reglas.
En la última regla hemos especificado también "display: block" para que la palabra "Fin" comienc e
en una nueva línea (como si fuese un nuevo párrafo).
8
Manual Rápido de CSS
2007
PSEUDO C LASES
CSS 2 tiene las siguientes pseudo clases:
:first-child,
:link y :visited Permiten definir un estilo para los enlaces y otro para los enlaces visitados
:active, :hover y :focus Cambian de acuerdo a las acciones del usuario
o :hover se aplica cuando el cursor del mouse señala el elemento.
o :active se aplica cuando el elemento es activado (por ejemplo, cuando el usuario
presiona el botón del mouse).
o :focus se aplica cuando el elemento recibe el foco.
:lang Permite seleccionar elementos en base a su idioma. (una pseudo clase para
lenguaje). Como c ada idioma tiene sus propias convenciones con respecto al formato (uso
de itálicas, sangrías o comillas, por ejemplo), esta pseudo-clase nos permite describir
cómo debe aparecer un elemento según el idioma usado. El código para identificar el
idioma consta generalmente de dos letras: "es" español, "en" inglés, "de" alemán, "fr"
francés, etc.
El siguiente ejemplo aplicaría un color amarillo a todos los elementos de ancla que sean el primer
hijo de cualquier elemento
El siguiente ejemplo da color rojo a los enlaces, color gris a los enlaces visitados, color azul al
enlace sobre el cual se posa el ratón y color fucsia al enlace activado.
El siguiente ejemplo aplicaría un fondo amarillo pálido a los párrafos con un atributo lang de
Franc és
La siguiente regla es pecifica el tipo de comillas que debe usar un elemento Q en francés:
9
Manual Rápido de CSS
2007
Pr opiedades Iniciales de C SS
En esta sección las propiedades se han agrupado en categorías adecuadas. Para cada categoría
se especifica la siguiente información:
Nombre de la propiedad
Conjunto de posibles valores de la propiedad
Valor por defecto (en negrita o especificado separadamente)
Elementos a los cuales se aplica la propiedad (todos a menos de que se indique algo
específico)
El símbolo ¥ indica que la propiedad no es heredada
Las propiedades relativas al manejo de cajas se explicarán en la siguiente sección de manejo de
cajas. Las propiedades se definen con una gramática que parte de la notación y unidades a
continuación.
N OTACIÓN
ab a seguido de b
[a b] agrupación de a y b
a|b a ó b (excluyente, solo a o solo b)
a || b alguno de los dos, o ambos en cualquier orden
a? a es opcional
a* ninguna o más ocurrencias de a
a+ una o más ocurrencias de a
a{1, 4} a ocurre al menos una vez y máximo 4 veces
U NIDADES
Unidades de Longitud
<longitud> (+ | -)? <numero> <unidad>
<numero> <digito>+[. <digito>*]?
<digito> 0|1|2|3 |4|5| 6|7| 8|9
<unidad> <unidad-absoluta> | <unidad-relativa>
<unidad-absoluta> mm | cm | in | pt | pc
<unidad-relativa> em | ex | p x
Unidades de Porcentaje
<porcentaje> <numero>%
URL
<url> url(text)
10
Manual Rápido de CSS
2007
Unidades de Color
<color> <nombre-color> | <rgb-color>
<nombre-color> aqua | black | blue | fuchsia | gray | green | lime | maroon | navy | olive | purple
| red | silver | teal | white | yellow
<rgb-color> #<hex><hex><hex> | #<hex><hex><he x><hex><hex><he x> | rgb(<numero>,
<numero>, <numero>) | rgb(<porcentaje>, <porcentaje>, <porcentaje>)
En CSS hay varias maneras de indicar un color. La forma más sencilla es estableciendo el nombre
del color directamente. Existen 16 nombres de color en inglés válidos, como lo indica el elemento
<nombre-c olor> en la definición de unidades de color anterior. La des ventaja de este método es la
limitación de colores, puede que exista algún color que queramos establecer y no tenga nombre.
Además, debemos aprendernos los nombres. Debido a estos inconvenientes la not ación que más
se usa es la rgb por números hexadecimales ó la de rgb por números decimales. En nuestra
definición de unidades de color estas notaciones están represent adas por el elemento <rgb-color>.
Los colores en nuestro monitor está formados por tres haces de luz: rojo, verde y azul. Se llama
sistema RGB (Red Green Blue). Podemos elegir un color indicando el valor de sus componentes
rojo, verde y azul por separado. Este valor puede variar de 0 a 255 (s e usan 8 bits para repres entar
este rango). P or ejemplo, si queremos un amarillo puro (yellow), ponemos 255 para el rojo, 255
para el verde y 0 para el azul. Si queremos un verde oscuro (sin nombre en inglés asociado)
podríamos utilizar 0 para el rojo, 161 para el verde y 32 para el azul. Si queremos un naranja
podríamos utilizar 255 para el rojo, 128 par a el verde y 0 para el azul. Si queremos un az ul
podríamos utilizar 10 para el rojo, 10 para el verde y 245 para el azul.
El rango de valores (0..255) puede ser representado con dos dígitos hexadecimales, que van
desde el 00 hasta el FF. La forma de escribir un color completo en notación hexadecimal es
#RRGGBB, donde la almohadilla indica que se trata de un color hexadecimal, y RR, GG y BB son
los dígitos correspondientes al rojo, verde y azul, res pectivament e. Entonces el amarillo de nuestro
ejemplo anterior sería #FFFF00, el verde #00A 120, el naranja #FF8000 y el azul #0A0AF5.
La mayoría de los colores que usaremos tendrán por cada componente los mismos dígitos. Por
ejemplo: #FF0000 (rojo), #0000AA (azul marino) o #000000 (negro). Estos colores los podemos
abreviar y dejarlos en tres cifras. Por ejemplo, #F00 es equivalente a #FF0000. Sin embargo,
colores como #A 9A9A9 no pueden ser abreviados.
11
Manual Rápido de CSS
2007
Por tanto, para cons egui r el color blanc o, podemos hacerlo de cinco formas diferentes.
color: white;
color: rgb (255,255,255);
color: rgb (100%, 100%, 100%);
color:#FFFFFF;
color:#FFF;
PROPIEDADES DE FONDO
background-color (¥)
Valor: <color> | transparent
background-image (¥)
Valor: <url> | none
background-repeat (¥)
Valor: repeat | repeat-x | repeat-y | no-repeat
background-attachment (¥)
Valor: scroll | fi xed
background-position (¥)
Valor: [<porcentaje> | <longitud>]{1,2} | [top | center] | [left | center | right]
Por defecto: 0% 0%
Se aplica a: bloques y elementos remplazados
Valor por porcentaje: calculado de acuerdo al tamaño del elemento
background (¥)
Valor: <background-color> || <background-image>
<background-repeat> || <background-attachment>
<background-position>
Por defecto: no definido para las propiedades resumidas
Valor por porcentaje: permitido sobre <background-position>
PROPIEDADES DE FUENTE
color
Valor: <color>
Por defecto: UA specific
font-family
Valor: [[<nombre-de-familia> | <familia-genérica>],]*[<nombre-de-familia> | <familia-
genérica>]
Por defecto: UA specific
font-style
Valor: normal | italic | oblique
font-variant
Valor: normal | small-caps
12
Manual Rápido de CSS
2007
font-weight
Valor: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 |
900
font-size
Valor: <tamaño-absoluto> | <tamaño-relativo> | <longitud> | <porcentaje>
Valor por porcentaje: relativo al tamaño de fuente del elemento padre
font
Valor: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]?
<font-family>
Por defecto: no definido para las propiedades resumidas
Valor por porcentaje: permitido sobre <font-size> y <line-height>
PROPIEDADES DE TEXTO
word-spacing
Valor: normal | <longitud>
letter-spacing
Valor: normal | <longitud>
text-transform
Valor: capitalize | uppercase | lowercase | none
text-decoration (¥)
Valor: none | [ underline || overline || line-through || blink ] | inherit
text-align
Valor: left | right | center | justify
Por defecto: específicos americanos
Se aplica a: elementos de bloque
vertical-align (¥)
Valor: baseline | sub | s uper | top | te xt-top | middle | bottom | text-bottom |
<porcentaje>
Se aplica a: elementos de línea
Valor por porcentaje: con respect al valor „line-height‟ del elemento
white-space
Valor: normal | pre | nowrap
PROPIEDADES DE LISTAS
list-style-type
Valor: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha |
upper-alpha | none
Se aplica a: elementos con valor de „display‟ igual a „list-item‟
13
Manual Rápido de CSS
2007
list-style-image
Valor: <url> | none
Se aplica a: elementos con valor de „display‟ igual a „list-item‟
list-style-position
Valor: inside | outside
Se aplica a: elementos con valor de „display‟ igual a „list-item‟
list-style
Valor: <list-style-type> || <list-style-position> || <list-style-image>
Por defecto: no definido para las propiedades resumidas
Se aplica a: elementos con valor de „display‟ igual a „list-item‟
14
Manual Rápido de CSS
2007
#copyright {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #636466;
text-align: right;
vertical-align: middle;
}
15
Manual Rápido de CSS
2007
El Modelo de C ajas de C SS
El modelo de caja de CSS describe las cajas rectangulares que son generadas por los element os.
El element o raíz del documento (< html> o, mejor aún, <body> en (X)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 cont ención de otras cajas generadas por sus elementos
descendientes.
Esta estrategia permit e tener el control no solo de las propiedades del elemento en s í (su color, la
fuente usada para el t exto, etc.), sino también de las propiedades de la caja generada por el
elemento (sus márgenes, sus bordes, la posición dentro del documento). Esto nos permita
componer visualmente la página de un modo mucho más rico y flexible que con tablas de
(X)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
(X)HTML, todos los elementos pueden t ener una imagen de fondo o un borde (sin nec esidad de
usar una tabla para eso); también es posible darle una ubicación precisa a c ual quier elemento
dentro de la página, ya sea con res pecto a la pantalla o a otros elementos. Mejor aún, nos da la
posibilidad de us ar un lenguaje como JavaScript para c onseguir efectos muy interesantes
modificando las propiedades de las cajas (moverlas de su posición, mostrarlas o esconderlas,
cambiar su tamaño, etc.).
Cada caja tiene un área de contenido (por ejemplo, texto, una imagen, etc.) y las áreas
circundantes opcionales de padding (relleno), border (borde) y margin (margen).
16
Manual Rápido de CSS
2007
PROPIEDADES DE MARGEN PARA C AJAS
margin (¥)
La propiedad 'margin' es una propiedad resumida que se utiliza para definir los cuatro márgenes a
la vez.
Valor: <longitud> | <porcentaje> | auto {1, 4}
Por defecto: no definido para las propiedades resumidas
Valor por porcentaje: se calcula con relación al ancho del bloque de contención
Los signos {1,4} significan que pueden especificars e de 1 a 4 valores para el ancho del margen:
Si hay sólo un valor se aplica a todos los lados
Si hay dos valores los márgenes s uperior e inferior son determinados por el primer valor y
los márgenes derec ho 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, derec ho, inferior e izquierdo,
respectivamente.
A diferencia de las propiedades del margen, los valores par a 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.
Valor: <longitud> | <porcentaje> {1, 4}
Por defecto: no definido para las propiedades resumidas
Valor por porcentaje: se calcula con respecto al ancho del bloque de contención
Los signos {1,4} significan que pueden especificars e 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
17
Manual Rápido de CSS
2007
Si hay cuat ro valores se aplican al relleno s uperior, derecho, inferior e izquierdo,
respectivamente.
El valor thin representa un borde fino, el valor medium representa un borde medio y el valor thick
representa un borde grueso. Si se expresa el valor en forma explícita, las dimensiones del borde
no pueden ser negativas. La interpretación de los tres primeros valores puede variar de un
navegador a otro, pero no la relación entre ellos.
border-width (¥)
La propiedad 'border-width' es una propiedad resumida que se utiliza para definir el ancho de los
cuatro bordes a la vez.
Valor: thin | medium | thick | <lenght> {1, 4}
Por defecto: no definido para las propiedades resumidas
Los signos {1,4} significan que pueden especificarse de 1 a 4 valores para el valor del ancho del
borde.
Si hay sólo un valor se aplica a todos los lados
Si hay dos valores los bordes superior e inferior son determinados por el primer valor y los
Por defecto bordes 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 borde superior, derecho, inferior e izquierdo,
respectivamente.
Si se especifica el color transparent el borde es transparente (no obstante, puede tener grosor). Si
el color del borde de un elemento no es especificado, el navegador toma el valor de la propiedad
'color' del elemento para el color del borde.
border-color (¥)
La propiedad 'border-color' es una propiedad resumida que se utiliza para definir el color de los
cuatro bordes a la vez.
Valor: <color>{1,4}
Por defecto: el valor de la propiedad 'color'
18
Manual Rápido de CSS
2007
Esta propiedad puede tener de uno a cuatro valores que son aplicados a los distintos lados como
en 'border-width'.
border-style (¥)
La propiedad 'border-style' es una propiedad resumida que s e utiliza para definir el estilo de los
cuatro bordes a la vez.
Valor: none | dotted | dashed | solid | double | groove | ridge | inset | outset {1,4}
Esta propiedad puede tener de uno a cuatro valores que son aplicados a los distintos lados como
en 'border-width'.
Por ejemplo:
La regla anterior define un borde inferior para los párrafos (un línea grues a entera de color rojo).
Los valores que no se especific an son colocados en sus valores iniciales.
border (¥)
La propiedad 'border' es una propiedad resumida para colocar el mismo ancho, color y estilo a los
cuatro bordes de una caja.
Valor: <border-width> || <border-style> || <color>
Por defecto: no definido para las propiedades resumidas
19
Manual Rápido de CSS
2007
A diferencia de las propiedades resumidas 'margin' y 'padding', la propiedad 'border' no puede
definir diferentes valores para los cuatro bordes. Para es o, deben usarse una a más de las otras
propiedades del borde.
display (¥)
Valor: inline | block | list-item | run-in | compact | marker | table | inline-table | table-
row-group | table-header-group | table-footer-group | table-row | table-column-
group | table-column | table-cell | table-caption | none | inherit
Por defecto inline
20
Manual Rápido de CSS
2007
como las tablas, columnas y celdas, pero otros lenguajes (XML, por ejemplo) no tienen dichos
elementos.
position (¥)
Valores: static | relative | absolute | fixed | inherit
Por defecto: static
Se aplica a: todos los elementos, no al contenido generado
Con CSS los autores pueden ubicar los elementos de la página usando uno de estos valores:
static: Esta es la posición predeterminada y la que conocemos en HTML. La caja se sitúa
dentro del flujo normal de la página y las propiedades 'top', 'right ', 'bottom' y 'left' no se
aplican.
relative: La posición de la caja se ajusta en relación a su posición normal dentro de la
página. Cuando una caja X se posiciona relativamente, la caja siguiente se sitúa como si X
no se hubiera desplazado.
absolute: Las cajas son quitadas del flujo normal de la página y su posición se especifica
con las propiedades 'left ', 'right', 'top', y 'bottom'. Estas propiedades especifican los
desplazamientos con respecto al bloque de contención de la caja por lo que los elementos
posicionados absolutamente no tienen ninguna influencia sobre la posición de las cajas
siguientes. El bloque de contención para una caja posicionada es establecido por el
antepasado posicionado más cercano o, si no existe, por el bloque de contención inicial (la
esquina superior izquierda de la página, en el modelo visual).
fixed: El posicionamiento fijo es una subcategoría del posicionamiento absoluto. La única
diferencia es que para una caja posicionada de modo fijo, el bloque de c ontención es
establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve
cuando se realiza un desplazamiento. Esto significa que cuando se hace un scroll en la
página los elementos con position: fixed mantienen su posición en la pantalla.
z-index (¥)
En algunos casos, ciertos elementos se superpongan vis ualmente con otros; en esas situaciones,
este orden dentro de la pil a de element os puede adjudicarse explícitamente con la propiedad z-
21
Manual Rápido de CSS
2007
index utilizando un valor entero (cuanto más alto el entero, más cercano al lector o más arriba en
la pila).
Valor: auto | <numero> | inherit
Se aplica a: elementos con propiedad position definida
float (¥)
Valor: left | right | none
Un flotante es una caja que es desplazada a la iz quierda o a la derecha en la línea actual. Esta
propiedad especifica si una caja debe flotar a la izquierda, derecha o no debe flotar en absoluto.
Los valores de esta propiedad tienen los siguientes significados:
left El elemento genera una caja de bloque que flota a la izquierda. El contenido fluye
sobre el costado derecho de la caja, comenzando en la parte superior.
right Igual que 'left', pero el contenido fluye sobre el costado izquierdo de la caja,
comenzando en la parte superior.
none La caja no es flotante.
clear (¥)
Valor: none | left | right | both
Esta propiedad indica cuál de los lados de la(s) caja(s) de un elemento no puede quedar adyacente
a una caja flotante ant erior. Esta propiedad sólo puede especificarse para elementos a nivel de
bloque (incluyendo t ambién a los element os flot antes). Los valores tienen los siguientes
significados:
left El margen superior de la caja generada se aumenta lo suficiente para que su borde
superior quede debajo del borde inferior de cualquier caja flotant e a la izquierda que
aparezca ant es en el document o fuente.
right El margen superior de la caja generada se aumenta lo suficiente para que su borde
superior quede debajo del borde inferior de cualquier caja flotant e a la derecha que
aparezca ant es en el document o fuente.
both La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes
en el doc umento fuente.
none No existe ninguna restricción a la posición de la caja con respecto a los flotantes.
22
Manual Rápido de CSS
2007
visibility (¥)
Esta propiedad especifica si las cajas generadas por un elemento son procesadas. Aunque el
elemento sea invisible sigue afectando la composición de la página, es decir, continúa ocupando
su espacio.
Valor: visible | hidden | collapse | inherit
width (¥)
Esta propiedad especifica el ancho del cont enido de las cajas generadas por elementos a nivel de
bloque y elementos reemplazados (por ejemplo, IMG).
Valor: <longitud> | <porcentaje> | auto
Se aplica a: de bloque and elementos remplazados
Valor por porcentaje: con relación al ancho de los elementos del padre
height (¥)
Esta propiedad especifica la altura del contenido de las cajas generadas por element os a nivel de
bloque y elementos reemplazados (por ejemplo, IMG).
Valor: <longitud> | <porcentaje> | auto | inherit
Se aplica a: de bloque y elementos remplazados
overflow (¥)
Esta propiedad especifica si el contenido de un elemento a nivel de bloque es recortado cuando
desborda la caja del elemento. Generalment e el contenido de una caja de bloque s e mantiene
dentro de los límites de la caja, pero puede suceder que el contenido desborde esos límites y
quede parcial o totalmente fuera de la caja.
Esto puede suceder si especificamos un tamaño det erminado para un elemento (con las
propiedades 'width' y 'height', por ejemplo) y su contenido resulta demasiado grande para las
medidas adjudicadas. También puede darse al utilizar márgenes negativos o posiciones absolutas
para el elemento.
Cuando se produce un desbordamiento, la propiedad 'overflow' especifica si la caja es recortada y
(en caso afirmativo) cómo será rec ortada. La propiedad 'clip' especifica el tamaño y la forma de la
zona de recorte.
Valor: visible | hidden | scroll | auto | inherit
Se aplica a: de bloque and elementos remplazados
23
Manual Rápido de CSS
2007
Los valores tienen los siguientes significados:
vi sible Este valor indica que el contenido no es recortado, es decir, puede ser
procesado fuera de la caja de bloque.
hidden Este valor indica que el contenido es recortado y los usuarios no tendrán
acceso al contenido rec ortado. El tamaño y forma de la z ona de recorte son especificados
por la propiedad 'clip'.
scroll Este valor indica que el contenido es recortado y el navegador debe
proporcionar un mecanismo de desplazamiento que permanecerá siempre visible (aunque
la caja no tenga parte de su contenido recortado).
auto El comportamiento del valor 'aut o' depende del navegador, pero significa
clip (¥)
La propiedad 'clip' se aplica a element os que tienen una propiedad 'overflow' con un valor diferente
a 'visible'.
La propiedad clip define una zona de recorte, es decir, qué porción del contenido de un elemento
es visible. De manera predeterminada, la zona de recorte tiene el mismo tamaño y forma que la
caja del element o. Sin embargo, la zona de recorte puede ser modificada por la propiedad 'clip'.
Valores: <forma> | auto | inherit
Valor inicial: auto
Se aplica a: los elementos a nivel de bloque y reemplazados
24
Manual Rápido de CSS
2007
25