Las propiedades CSS más usadas

Profesores:JAB y Ester Torres

Tipos de propiedades CSS

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...
    código CSS
    img, #intro, .botones #boton1{
      Sentencias CSS
      Sentencias CSS
    }
    
    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).
    <div id="intro">
      Texto a modificar
    </div>
    
    o bien podría estar ubicado dentro de un <span> que podría tener el mismo nombre.
    <span id="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


    CSS que afecta a las cajas (<div>):

    Color de fondo:
    background-color: olive;
    background-color: rgba(12,65,32,0.5);
    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).

    Posicionamiento:
    position: relative / absolute / fixed;
    left:20px;
    right:20px;

    top:40px;
    bottom:40px;
    }

    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.


    Sombras:
    box-shadow: 2px 7px 5px gray;
    box-shadow: 0 0 9px red;
    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".

    Enlace no subrayado

    Colores:
    a{
      color: chocolate;
    }

    a:hover{
      color: red;
    }

    Para definir el color que debe tener el enlace cuando el cursor pase por encima es necesario utilizar el evento :hover, detrás del selector a.

    Enlace que cambia de color al pasar encima con el cursor

    Cursor:
    a:hover{
      cursor: default;
    }
    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.

    Enlace en el que el cursor no cambia al pasar el cursor por encima