Así como en la vida real existen propiedades (como el color de ojos, estatura o bebida preferida) qué únicamente se pueden aplicar a las personas, o propiedades (como los caballos de potencia, tipo de combustible o número de puertas) que sólo se pueden aplicar a los vehículos, en el mundo de HTML y CSS pasa lo mismo, hay propiedades CSS que sólo se pueden aplicar a un tipo concreto de etiquetas HTML.
Así, existen propiedades CSS que afectan sólo...
al texto
a las cajas <div> que contienen elementos
a los enlaces
Aunque, antes de hacer un repaso rápido a todas ellas es de obligado cumplimiento tener bien claro el funcionamiento de los selectores CSS.
¿Qué son los Selectores CSS?
Los selectores CSS son una lista de uno o más elementos HTML (nombrándolos a través de su id, class o tipo de etiqueta) que indican a quien van a afectar las sentencias CSS que siguen al selector.
código CSS
.botones{
Códigos CSS
Códigos CSS
}
En este caso .botones" es el selector que sirve para modificar todos aquellos elementos que tengan el class="botones".
Si en vez de utilizar un class hubiésemos utilizado un id, sustituiríamos el . (un punto) por # (una almohadilla).
También es posible indicar múltiples selectores, bien utilizando , (la coma) para separar los diferentes elementos o bien el espacio para construir una ruta al elemento indicado. Por ejemplo...
En este ejemplo, las sentencias CSS afectarían a todas las etiquetas de tipo img (osea a todas las imágenes), también afectarían al elemento con id="intro", y también elemento con id="boton1" que está dentro de cualquier elemento con class="botones".
En los siguientes ejemplos, el texto podría estar dentro de una caja <div> que podría llamarse "intro" (como nombre de tipo id).
<divid="intro">
Texto a modificar
</div>
o bien podría estar ubicado dentro de un <span> que podría tener el mismo nombre.
<spanid="intro"> Texto a modificar </span>
Al tener el mismo nombre, el CSS sería el mismo:
Para información más extensa sobre los selectores accede al tema:
CSS que afectan al texto
Los textos afectados por el código CSS de los siguiente ejemplos irán ubicados dentro de un <div> o <span>, excepto en los casos en los que se indique lo contrario (como por ejemplo utilizando 'text-align').
Color del texto
color: #1162ac; color: chocolate;
Cambia el color del texto.
Se puede especificar con el código hexadecimal del color (utilizando el prefijo #) o con el nombre de color (olive, gold, chocolate...). (Más información en el módulo 5).
Texto color:#1162ac; Texto color:chocolate;
Tipografía
font-family: helvetica; font-family: charlemagne;
Utiliza una tipografía determinada.
Si la fuente no es de sistema se debe añadir el fichero ttf/otf y realizar una vinculación con la misma.
(Tratado en el tema 9 del módulo 2).
Tamaño del texto:
font-size: 20px; font-size: 2em;
Define el tamaño del texto.
Se puede definir con un tamaño fijo (expresado en píxeles: px), o con un tamaño escalable (em), que indica la proporción respecto al tamaño inicial de la fuente (2em equivale al doble del tamaño inicial).
Tamaño fijo: 20px Tamaño escalable: 2em
Estilo 'negrita':
font-weight: bold;
Define con CSS el estilo 'negrita' de un texto.
Aunque el estilo 'negrita' se puede especificar con código HTML a través de la etiqueta <b>, con CSS también podemos utilizar esta propiedad de una manera mucho más eficiente.
Negrita
Sombra de un texto:
text-shadow: 2px 4px 6px #1162ac;
Define una sombra que afecta a un texto a través de 4 parámetros (separación horizontal, separación vertical, suavidad y color).
El color se puede especificar con código hexadecimal o con el nombre del color (olive, gold, silver...)
Texto con sombra
Alineación de un texto:
text-align: center; text-align: right;
Para definir la alineación de un texto, este debe estar contenido dentro de una caja (<div>, <section>...)
Los valores pueden ser 'left', 'right', 'center' o ' justify'.
Texto centrado (center)
Texto alineado a la derecha (right)
Centrado vertical:
line-height: 70px;
Sirve para definir la altura de la línea donde se muestra un texto y por lo tanto para centrarlo verticalmente.
El texto sólo puede ocupar una única línea y debe estar contenido dentro de un <div>.
Espacio entre letras:
letter-spacing: 3px; letter-spacing: -1px;
Define el espacio entre letras.
Un valor positivo las aleja entre ellas, mientras que un valor negativo las acerca.
Espacio de 3px Espacio de -1px
Espacio entre palabras:
word-spacing: 10px; word-spacing: -5px;
Define el espacio entre palabras.
Un valor positivo las aleja entre ellas, mientras que un valor negativo las acerca.
Espacio entre diferentes palabras de 10px Espacio entre diferentes palabras de -5px
Define el color de fondo de una caja (o <div>)
Se puede indicar un color hexadecimal, nombre de color o rgb+a (alpha), donde el 4º valor es la cantidad de transparencia (del 0 al 1).
background-color con color 'olive'
background-color con transparencia al 50%
Separación interna:
padding: 20px; padding: 20px 0px 6px 40px;
Define el espacio existente entre el contenido y el borde de la caja.
Si se especifica un solo valor será utilizado para la separación por los 4 lados. Si se especifican 4 valores serán utilizados en orden (arriba, derecha, abajo e izquierda) y se especifican 2 serán utilizados (arriba/abajo y derecha/izquierda).
Márgenes y separación:
#caja1{ margin-left:35px; margin-bottom:20px;
}
#caja2{ margin-left:40px;
}
#caja3{ margin-left:35px; margin-bottom:20px;
}
Define el espacio existente entre cajas (<div>) o bien entre cajas y los márgenes de la página.
Si se especifica un solo valor será utilizado para la separación por 4 lados. Si se especifican 4 valores serán utilizados en orden (arriba, derecha, abajo e izquierda) y se especifican 2 serán utilizados (arriba/abajo y derecha/izquierda).
Para ubicar un (<div>) en una coordenada concreta antes se tiene que definir su posicionamiento (position). Posteriormente, para indicar sus coordenadas se puede utilizar left o right para alinearlo horizontalmente desde la izquierda o derecha y/o top o bottom para alinearlo desde la parte superior o inferior.
Para definir una sombra a un (<div>) se deben indicar 4 valores. El primero y segundo es la separación horizontal y vertical de la sombra (con un número positivo se desplaza hacia derecha/abajo y con uno negativo hacia la izquierda/arriba, mientras que con "0" se sitúa justo en la posición del texto). El tercer valor hace referencia a la suavidad del borde de la sombra, mientras que el último valor pertenece al color que tendrá la sombra.
Sombra gris desplazada hacia derecha/abajo
Sombra roja sin desplazamiento
Alinear (a la derecha):
width:230px; float: left / right;
clear: both;
Para poder colocar diferentes <div> alineados en la misma linea podemos utilizar display:inline-block o float:left o right;.
En este último caso, deberemos también definir la anchura de cada caja.
Para evitar que el <div> que sigue en el HTML al último se coloque en el hueco vacio dejado en la línea anterior utilizamos clear:both;.
A
B
C
D
E
F
CSS que afecta a los enlaces:
Eliminar subrayado:
a{ text-decoration: none;
}
Elimina el subrayado que aparece por defecto en cualquier enlace.
Es necesario utilizar el selector a{. Utilizado sin indicar ningún elemento afectará a todos los enlaces. Utilizando #div a{ afectará únicamente a los enlaces que se encuentran dentro de la caja con id="div".
Es posible definir un tipo de cursor (dentro de los existentes). Aunque los más habituales son "pointer" (el que aparece por defecto al crear un enlace) o "default" (el cursor habitual de la flecha), que en este caso aparece cuando el cursor pasa por encima del siguiente enlace de ejemplo.