Anexo 10: Las propiedades CSS

La sintaxis básica para la creación de Hojas de Estilos en Cascada CSS (Cascading Style Sheets) es la siguiente:

selector { propiedad: valor; }

Las propiedades que son generales a los tres primeros niveles de CSS (Nivel 1, Nivel 2, Nivel 3) son:

Propiedades de fuente (font)

Propiedad	Valores	Ejemplo
font-family	nombre o tipo de fuente	{font-family: arial;}
font-style	normal ¦ italic	{font-style: italic;}
font-variant	normal ¦ small-caps	{font-variant: small-caps;}
font-weight	normal ¦ bold	{font-weight: bold;}
font-size	porcentaje ¦ longitud  xx-small ¦ x-small  small ¦ medium ¦ large  x-large ¦ xx-large  smaller ¦ larger	{font-size: 12pt;}

Propiedades de texto

Propiedad	Valores	Ejemplo
letter-spacing	normal ¦ longitud	{letter-spacing: 5pt;}
line-height	normal ¦ número  longitud ¦ porcentaje	{line-height: 15pt;}
text-align	left ¦ right  center ¦ justify	{text-align: center;}
text-decoration	none ¦ underline  overline ¦ line-through	{text-decoration: underline;}
text-indent	porcentaje ¦ longitud	{text-indent: 25px;}
text-transform	capitalize ¦ uppercase  lowercase ¦ none	{text-transform: lowercase;}
vertical-align	sub ¦ super	{vertical-align: sub;}
word-spacing	normal ¦ longitud	{word-spacing: 10px;}

Propiedades de color y de fondo

Propiedad	Valores	Ejemplo
color	color	{color: salmon;}
background-color	color ¦ transparent	{background-color: yellow;}
background-image	url ¦ none	{background-image:      url(leopardo.gif);}
background-repeat	repeat ¦ repeat-x  repeat-y ¦ no-repeat	{background-repeat:    no-repeat;}
background-  attachment	scroll ¦ fixed	{background-attachment:    fixed;}
background-  position	top left ¦ top center  top right ¦ center left  center center ¦ center right;   bottom left ¦ bottom center  bottom right  x% y% ¦ x y	{background-position:    bottom left;}

Propiedades de caja: bordes

Propiedad	Valores	Ejemplo
border	anchura ¦ estilo ¦ color	{border: thick dotted brown;}
border-left	anchura ¦ estilo ¦ color	{border-left: thick dotted    brown;}
border-right	anchura ¦ estilo ¦ color	{border-right: thick dotted    brown;}
border-top	anchura ¦ estilo ¦ color	{border-top: thick dotted    brown;}
border-bottom	anchura ¦ estilo ¦ color	{border-bottom: thick dotted     brown;}
border-width	thin ¦ medium  thick ¦ longitud	{border-width: medium;}
border-left-   width	thin ¦ medium  thick ¦ longitud	{border-left-width: thin;}
border-right-   width	thin ¦ medium  thick ¦ longitud	{border-right-width: 0.5px;}
border-top-   width	thin ¦ medium  thick ¦ longitud	{border-right-width: 0.2in;}
border-bottom-   width	thin ¦ medium  thick ¦ longitud	{border-right-width: 0.4cm;}
border-color	color	{border-color: purple;}
border-left-  color	color	{border-left-color: #FF00FF;}
border-right-  color	color	{border-right-color: black;}
border-top-  color	color	{border-top-color: rgb(200,140,250);}
border-bottom-  color	color	{border-bottom-color: blue;}

Propiedades de caja: márgenes

Propiedad	Valores	Ejemplo
margin-top	longitud ¦ porcentaje ¦ auto	{margin-top: 1.5em;}
margin-bottom	longitud ¦ porcentaje ¦ auto	{margin-bottom: 8px;}
margin-left	longitud ¦ porcentaje ¦ auto	{margin-left: 10pt;}
margin-right	longitud ¦ porcentaje ¦ auto	{margin-right: 6pt;}

Propiedades de caja: acolchonamientos

Propiedad	Valores	Ejemplo
padding-top	longitud ¦ porcentaje	{padding-top: 1.5em;}
padding-bottom	longitud ¦ porcentaje	{padding-bottom: 8px;}
padding-left	longitud ¦ porcentaje	{padding-left: 10pt;}
padding-right	longitud ¦ porcentaje	{padding-right: 6pt;}

Las propiedades de posicionamiento relativo

Propiedad	Valores	Ejemplos
position	static ¦ relative  absolute ¦ fixed	position: relative;
top	auto ¦ longitud  porcentaje	top: 20px;
right	auto ¦ longitud  porcentaje	right: 10px;
bottom	auto ¦ longitud  porcentaje	bottom: 0;
left	auto ¦ longitud  porcentaje	left: 8px;

Los valores de la propiedad position

Valor	Efecto
absolute	Posicionar la caja en relación al contenedor,    que puede ser otra caja, o que puede ser la  ventana principal del navegador
fixed	Posicionar la caja en relación al contenedor,  pero no moviéndola inclusive si la página  tiene una barra de desplazamiento vertical,  dejándola siempre fija en el mismo lugar
relative	Posicionar la caja relativa a su posición   normal que de otro modo ocuparía
static	Posicionar la caja en donde normalmente   debe ser puesta como lo determine el  navegador, dejándola estática en ese lugar

La propiedad cursor

Propiedad	Valores	Ejemplos
cursor	auto ¦ cross-hair  default ¦ pointer ¦ move   text ¦ help ¦ URL  n-resize ¦ s-resize  e-resize ¦ w-resize  ne-resize ¦ nw-resize   se-resize ¦ sw-resize  progress ¦ hand ¦ wait  inherit ¦ all-scroll  col-resize ¦ row-resize   no-drop ¦ not-allowed  vertical-text	{cursor: cross-hair;}   {cursor: help;}   {cursor: progress;}  {cursor: hand;}  {cursor: wait;}

Nota: No todos los valores de la propiedad cursor estarán disponibles en todas las plataformas, ya que el número y el tipo de cursores disponibles depende directamente del sistema operativo instalado en la máquina, y en donde no haya un cursor para cierto valor el cursor exhibido será el que corresponde al valor predeterminado (default) del sistema.

La propiedad de profundidad z

Propiedad	Valores	Ejemplos
z-index	auto ¦ número	{z-index: -1}   {z-index: 0}   {z-index: 1}   {z-index: 3}

Los valores de la propiedad white-space

Valor	Efecto
normal	Hacer enrollamiento usual de texto cuando   una línea de texto llegue al extremo derecho  de la ventana del navegador, y efectuar una  condensación de espacios en blanco
nowrap	Condensar los espacios en blanco pero no   se efectúe enrollamiento de texto cuando  una línea de texto llegue al extremo derecho  de la ventana del navegador
pre	No condensar los espacios en blanco ni   enrollar las líneas de texto, respetando los  saltos de línea del texto fuente original
pre-line	No condensar los espacios en blanco, y   enrollar las líneas de texto respetando los  saltos de línea del texto fuente original o al  final de una línea
pre-wrap	Condensar los espacios en blanco, y   enrollar las líneas de texto respetando  los saltos de línea del texto original o al  final de una línea

Los valores de la propiedad overflow

Valor	Efecto
auto	Se le deja al navegador la decisión sobre   lo que se debe hacer con el contenido que  no cabe dentro de la caja, ya sea usar el  valor predeterminado o el valor scroll
hidden	El texto que se desborda fuera de la caja   es recortado (clipped) y no es mostrado al  usuario
scroll	Se crea una caja contenedora con barra   de desplazamiento vertical para poder  tener acceso a todo el contenido
visible	El texto que no cabe dentro de la caja   se desborda fuera de la caja y es mostrado  como tal al usuario

Las propiedades de fondo

Propiedad	Valores	Ejemplos
background-image	url("") ¦ ninguno	background-image:   url("damita.jpg");
background-repeat	no-repeat   repeat-x  repeat-y  repeat	background-repeat:   repeat-x

La propiedad line-height

Propiedad	Valores	Ejemplo
line-height	normal ¦ número   longitud ¦ porcentaje	line-height: 2.5em;

La propiedad list-style-type

Propiedad	Valores	Ejemplo
list-style-type	disc ¦ circle ¦ square   none ¦ decimal	list-style-type: square;

Las palabras clave de
los 147 colores CSS

Palabra clave	Tonalidad
aliceblue
antiquewhite
aqua
aquamarine
azure
beige
bisque
black
blanchedalmond
blue
blueviolet
brown
burlywood
cadetblue
chartreuse
chocolate
coral
cornflowerblue
cornsilk
crimson
cyan
darkblue
darkcyan
darkgoldenrod
darkgrey* (o a)
darkkhaki
darkmagenta
darkolivegreen
darkorange
darkorchid
darksalmon
darkseagreen
darkslateblue
darkslategray
darkturquoise
darkviolet
deeppink
deepskyblue
dimgray
dodgerblue
firebrick
floralwhite
forestgreen
fuchsia
gainsboro
ghostwhite
gold
goldenrod
gray
green
greenyellow
honeydew
hotpink
indianred
indigo
ivory
khaki
lavender
lavenderblush
lawngreen
lemonchiffon
lightblue
lightcoral
lightcyan
lightgoldenrodyellow
lightgreen
lightgrey
lightpink
lightsalmon
lightseagreen
lightskyblue
lightslategray
lightsteelblue
lightyellow
lime
limegreen
linen
magenta
maroon
mediumaquamarine
mediumblue
mediumorchid
mediumpurple
mediumseagreen
mediumslateblue
mediumspringgreen
mediumturquoise
mediumvioletred
midnightblue
mintcream
mistyrose
moccasin
navajowhite
navy
oldlace
olive
olivedrab
orange
orangered
orchid
palegoldenrod
palegreen
paleturquoise
palevioletred
papayawhip
peachpuff
peru
pink
plum
powderblue
purple
red
rosybrown
royalblue
saddlebrown
salmon
sandybrown
seagreen
seashell
sienna
silver
skyblue
slateblue
slategrey* (o a)
snow
springgreen
steelblue
tan
teal
thistle
tomato
turquoise
violet
wheat
white
whitesmoke
yellow
yellowgreen