Las principales propiedades CSS que nos permitirán configurar el borde de los elementos HTML son: border-width (ancho del borde), border-style (estilo del borde) y border-color (color del borde).
Es posible definir los bordes en una sola línea usando la propiedad border e indicándolos en el siguiente orden: superior, derecho, inferior e izquierdo.
Veamos un ejemplo de código CSS aplicado al código fuente del archivo HTML index3.html (descrito al comienzo del curso):
#div1 {
border-width:4px;
border-style:dotted;
border-color:blue;
}
#div2 {
border:4px solid red;
}
Los bordes pueden visualizarse de forma algo diferente según el navegador web usado. Por ejemplo, el borde punteado se muestra con cuadraditos en unos (como Mozilla Firefox e Internet Explorer) o con puntos (como en Google Chrome).
Si deseamos configurar los bordes de determinados lados únicamente, podremos usar las variantes:
- border-top-width, border-right-width, border-bottom-width, border-left-width: ancho de los bordes superior, derecho, inferior e izquierdo.
- border-top-style, border-right-style, border-bottom-style, border-left-style: estilo de los bordes superior, derecho, inferior e izquierdo.
- border-top-color, border-right-color, border-top-color, border-top-color: color de los bordes superior, derecho, inferior e izquierdo.
Asimismo podemos usar las variantes border-top, border-right, border-bottom y border-left, del mismo modo que hemos indicado anteriormente con border:
En el código CSS del siguiente ejemplo definimos un borde derecho para cada una de las etiquetas HTML <div> del archivo index3.html:
#div1 {
width:300px;
border-right-width:3px;
border-right-style:dotted;
border-right-color:blue;
}
#div2 {
width:300px;
border-right:4px solid red;
}
Relacionado: [ Listado de colores ]
El contorno de un elemento HTML no es lo mismo que el borde y tampoco forma parte del elemento en sí, aunque también podremos configurarlo usando las siguientes propiedades CSS:
- outline-color: color del contorno.
- outline-style: estilo del contorno, pudiendo tener uno de los siguientes valores dotted, dashed, solid, double, groove, none, ridge, inset, outset.
- outline-width: ancho del contorno, pudiendo indicarse su valor en píxels o con thin, medium, thick.
También podemos usar la propiedad outline con la cual podemos establecer todas las configuraciones anteriores en una sola línea manteniendo el siguiente orden: color, estilo, grosor.
Partiendo de la pagina web index8.html, con el código CSS del siguiente ejemplo aparte de poner un borde al enlace, definimos un contorno punteado de color rojo y con una anchura de 4 píxels:
a {
border:1px solid black;
outline-color:red;
outline-style:dotted;
outline-width:4px;
}
Obsera que el contorno está fuera del borde.
Para poder usar estas propiedades CSS en el navegador web Internet Explorer 8, es necesario declarar <doctype> al principio de la página web.
Con la propiedad cursor es posible cambiar el tipo de cursor del ratón al pasarlo sobre un elemento, pudiendo asignársele uno de los siguientes valores:crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help:
<html>
<head>
<title>Cursos gratis</title>
</head>
<body>
<p>Mueve el cursor sobre las opciones...</p>
<p style="cursor:auto">auto</p>
<p style="cursor:crosshair">crosshair</p>
<p style="cursor:default">default</p>
<p style="cursor:e-resize">e-resize</p>
<p style="cursor:help">help</p>
<p style="cursor:move">move</p>
<p style="cursor:n-resize">n-resize</p>
<p style="cursor:ne-resize">ne-resize</p>
<p style="cursor:nw-resize">nw-resize</p>
<p style="cursor:pointer">pointer</p>
<p style="cursor:progress">progress</p>
<p style="cursor:s-resize">s-resize</p>
<p style="cursor:se-resize">se-resize</p>
<p style="cursor:sw-resize">sw-resize</p>
<p style="cursor:text">text</p>
<p style="cursor:w-resize">w-resize</p>
<p style="cursor:wait">wait</p>
<p style="cursor:url('BlueglassArrow.cur')">Sitúate encima</p>
</body>
</html>
Como puedes observar en el último ejemplo, es posible usar un archivo de cursor (por compatibilidad es recomendable usar los que tengan extensión .cur o .ani) cargándolo con url().
No todos los navegadores web soportan url().
Puedes descargar cursores gratis desde este enlace.
Para definir el alto de un elemento HTML se usa la propiedad height, y width para configurar el ancho.
También podemos indicar un ancho y alto mínimos con min-width y min-height, así como un ancho y alto máximos con max-width y max-height:
En el código CSS del siguiente ejemplo, aparte de definir un borde configuramos un alto y ancho para el primer <div> del archivo index3.html:
#div1 {
border:1px solid black;
height:120px;
width:140px;
}
min-width, min-height, max-width y max-height no están soportadas en Internet Explorer 6 y anteriores.
Para configurar el aspecto visual de losenlaces podemos usar cualquier propiedad CSS, como color, font-family, etc.
Asimismo, para definir el color de un enlace dependiendo de sus diferentes estados podemos usar:
- a:link: enlace no visitado.
- a:visited: enlace visitado.
- a:hover: al situar el cursor del ratón encima del enlace.
- a:active: enlace seleccionado.
IMPORTANTE: si configuramos varios aspectos de los enlaces hemos de seguir el siguiente orden:
- a:hover debe definirse después de a:link y a:visited.
- a:active debe definirse después de a:hover.
En el siguiente ejemplo usando la página web index6.html, con el código CSS definimos que al pasar el cursor del ratón sobre los enlaces se muestren de color verde, y los enlaces visitados queden de color rojo:
a:hover {
color:green;
}
a:visited {
color:red;
}
Relacionado: [ Enlaces en HTML ] - [ Listado de colores ]
Con la propiedad background-color podemos definir un color de fondo para un elemento HTML (indicando el color por su nombre, o en formato hexadecimal o RGB). Para ver sus posibles valores consulta el siguiente Listado de colores.
También disponemos de las siguientes propiedades referentes a imágenes:
- background-image: permite establecer una imagen de fondo.
- background-repeat
Indica cómo se repetirá la imagen (por defecto se repetirá ocupando todo el ancho y alto del elemento).
Puede tomar como valor repeat-x (se repetirá horizontalmente), repeat-y (se repetirá verticalmente) o no-repeat (se mostrará una sola vez).
- background-position:
Indica la posición en la que debe mostrarse la imagen respecto al elemento HTML en que se encuentra.
Puede indicarse principalmente estableciendo la posición horizontal y vertical en píxels (siendo '0px 0px' la esquina superior izquierda), porcentajes (siendo '0% 0%' la esquina superior izquierda) o bien usando las palabras: left top, left center, left bottom, right top, right center, right bottom, center top, center center o center bottom.
- background: permite definir todas las propiedades anteriores en una sola línea.
En el siguiente ejemplo definimos un color para el cuerpo de la página WEB index3.html y sus <div>, y ponemos una imagen de fondo en el primero de forma que no se repetirá hasta ocupar todo el espacio disponible en el mismo:
body {
background-color:lightgray;
}
#div1 {
background-color:yellow;
background-image:url('fondo.jpg');
background-repeat:no-repeat;
height:100px;
width:100px;
}
#div2 {
background-color:gray;
}
Observa como el fondo del <div> es amarillo, y al no ocupar la imagen todo el espacio del mismo, éste resulta parcialmente visible.
Las principales propiedades CSS que podemos usar para configurar una lista son:
- list-style-image: seleccionar una imagen como marcador de cada elemento de la lista.
- list-type-position:
Indica si el símbolo o imagen en los elementos de la lista debe mostrarse dentro o fuera del flujo de su contenido.
Principalmente puede tener como valor: inside (el símbolo se mostrará en el flujo de contenido de la lista, con lo que se insertará una tabulación extra) o outside (el símbolo se mostrará fuera del flujo de contenido).
- list-style-type:
Definir el estilo en que será mostrado cada elemento. Algunos de los valores que pueden asignársele son:
- circle: círculos.
- decimal: números enteros.
- decimal-leading-zero: números, rellenando con ceros a la izquierda (01,02,03,04,05...).
- disc: mostrará un círculo con un relleno.
- lower-alpha: letras en minúsculas (a,b,c,d,e...).
- lower-roman: números romanos usando caracteres en minúsculas (i, ii, iii, iv, v...).
- none: ningún simbolo o caracter.
- square: muestra un cuadradito.
- upper-alpha: letras en mayúscula (A,B,C,D,E...).
- upper-roman: números romanos usando caracteres en mayúsculas (I, II, III, IV, V...).
También disponemos de la propiedad list-style, con la que podemos definir todas las opciones anteriores con el siguiente orden: tipo de la lista, posición, imagen.
En el siguiente ejemplo, usando como base la página web index5.html indicamos que en la primera lista se mostrará un cuadradito como marcador para cada opción y que éste debe incluirse con el flujo de los elementos de la lista:
#lista1 {
list-style-type:square;
list-style-position:outside;
}
#lista2 {
list-style:inside url('ok.gif');
}
En la segunda lista se muestra una imagen. Observa que se encuentra tabulada más a la derecha (se ha definido list-style-position como inside).
Para poder asignar a la propiedad list-style-type el valor decimal-leading-zero (entre otros no indicados anteriormente por no ser tan usados) en el navegador web Internet Explorer 8 y versiones anteriores, es necesario declarar <doctype> al principio de la página web.
Relacionado: [ Listas en HTML ]
Para configurar los márgenes de un elemento disponemos de las propiedades margin-top (margen superior), margin-right (derecho), margin-bottom (abajo) y margin-left (inferior):
En su lugar, también podemos usar margin para definir los márgenes en el siguiente orden: superior, derecho, inferior e izquierdo.
En este ejemplo aparte de definir un borde para los <div> de la página WEB index3.html, configuramos unos márgenes superior, inferior e izquierdo por este orden, así como un margen izquierdo también para el segundo:
#div1 {
border:1px solid black;
margin-top:15px;
margin-bottom:15px;
margin-left:20px;
}
#div2 {
border:1px dotted red;
margin:0px 0px 0px 30px;
}
Podemos configurar el relleno de un elemento (sus márgenes internos) con padding-top (relleno superior), padding-right (derecho), padding-bottom (abajo) y padding-left (inferior).
En su lugar, también podemos usar la propiedad padding para definirlo en el siguiente orden: superior, derecho, inferior e izquierdo.
En el siguiente ejemplo definimos un borde y relleno para los <div> de index4.html: en el primero eliminamos los rellenos superior e inferior y establecemos el izquierdo a '20px', y en el otro definimos un relleno superior, inferior e izquierdo por este orden, aparte de un margen superior con respecto al primero:
#div1 {
border:1px solid black;
padding-top:0px;
padding-bottom:0px;
padding-left:20px;
}
#div2 {
border:1px dotted red;
margin-top:10px;
padding: 10px 0px 10px 30px;
}
Podemos usar las siguientes propiedades CSS para configurar varios aspectos visuales de las tablas:
border-collapse: indica si el borde debe mostrar contraído, sin espacio. De no declararse <doctype> pueden obtenerse resultados inesperados.
Admite los valores: collapse y separate.
- border-spacing: espacio entre el borde y las celdas en píxels, centímetros, etc.
- caption-side: indica en qué posición debe mostrarse el título de la tabla si lo hemos indicado usando la etiqueta HTML <caption>, siendo top (parte superior) y bottom (parte inferior) los valores permitidos.
- empty-cells: indica si debe mostrarse u ocultarse el borde y el fondo de las celdas vacías, siendo los valores permitidos hide (ocultar) y show (mostrar).
Usando de base la página web index7.html, el siguiente código CSS mostrará el título de la página en la parte inferior de la misma, así como el borde de la misma contraído.
table {
caption-side:bottom;
border-collapse:collapse;
}
Relacionado: [ Tablas en HTML ] - [ Listado de colores ]
Para poder usar las propiedades CSS empty-cells, caption-side y border-spacing en el navegador web Internet Explorer 8, es necesario declarar <doctype> al principio de la página web.
Con CSS es posible configurar diversos aspectos del texto, siendo las propiedades más importantes y soportadas por los distintos navegadores web:
- color: color del texto. Consulta este Listado de colores.
- text-align: alineación horizontal del texto, pudiendo tener como valor: left (izquierda), center (centrado), right (derecha) o justify (justificado).
text-decoration: define un estilo decorativo para el texto:
- none: no se aplica decoración al texto.
- underline: subrayado normal (bajo el texto).
- overline: subrayado en la parte superior.
- line-through: subrayado en medio del texto (tachado).
- blink: muestra el texto parpadeante (no soportado en Internet Explorer, Google Chrome o Safari).
- inherit: mostrará el texto según se haya indicado en el elemento padre (por ejemplo, en un <span> que se encuentra dentro de un <div>, se mostraría según lo indicado en éste).
- text-indent: permite configurar la sangría del texto.
text-transform: muestra el texto en mayúsculas y/o minúsculas, pudiendo tener los siguientes valores:
- none: muestra el texto tal cual se escribió.
- capitalize: convierte a mayúsculas mostrando en mayúsculas el primer caracter de cada palabra.
- uppercase: convierte el texto a mayúsculas.
- lowercase: convierte el texto a minúsculas.
- inherit: mostrará el texto según se haya indicado en el elemento padre (por ejemplo, en un <span> que se encuentra dentro de un <div>, se mostraría según lo indicado en éste).
En el siguiente ejemplo se utiliza el código CSS para mostrar el texto del primer <div> de index3.html en color rojo, alineado a la derecha y tachado, mientras que el del segundo se muestra centrado y con la primera letra de cada palabra en mayúsculas:
#div1 {
border:1px solid black;
color:red;
text-align:right;
text-decoration:line-through;
}
#div2 {
border:1px dotted black;
margin-top:10px;
text-align:center;
text-transform:capitalize;
}
Para configurar aspectos referentes al tipo de letra usado en la página web o en determinadas etiquetas HTML de la misma, usaremos propiedades CSS tales como:
font-family: indica el tipo de letra a usar, debiendo ponerse entre comillas en caso de que el nombre esté compuesto por varias palabras.
Puede tener como valor el nombre de una familia de fuentes (times, courier, arial, etc.) o el de una familia genérica (serif, sans-serif, cursive, etc.).
Hay que tener en cuenta que el usuario debe tener el tipo de letra instalada en su sistema, y por ello es recomendable escogerlo entre las que se instalan por defecto en los sistemas operativos (como 'Arial' y 'Times').
Si se indican varios tipos de letra y el navegador web no soporta uno, se intentará usar el siguiente.
- font-size: tamaño del texto indicado principalmente en píxels, puntos, porcentaje o 'em'.
- font-weight: grosor del texto, siendo bold (negrita) y normal los principales valores que puede tomar.
- font-style: estilo del tipo de letra, pudiendo tener como valor normal (texto normal), italic (itálica), oblique (como itálica, aunque soportado en menos navegadores web) o inherit (heredará el estilo de su elemento padre, dentro del que se encuentra).
Tenemos también la posibilidad de usar la propiedad font como combinación de las anteriores, indicando por orden el grosor, tamaño y tipo de letra:
En el siguiente ejemplo tomando como base el archivo index3.html, con el código CSS se muestra el texto del primer <div> con tipo de letra 'Times New Roman' (preferentemente) a tamaño de '10px' y en negrita, y el del segundo con tipo de letra 'Arial' a '16px':
#div1 {
font-family:"Times New Roman", serif;
font-size:10px;
font-weight:bold;
}
#div2 {
font:normal 16px Arial;
}
La propiedad text-indent así como el valor inherit no están soportados en Internet Explorer 7 y anteriores, y para que funcione correctamente en Internet Explorer 8 es necesario declarar <doctype>. En Internet Explorer 9 funciona correctamente.
Relacionado: [ Texto en HTML ] - [ Fuentes recomendadas para páginas web ] - [ Tipografía en la web ]
