Tabla de Contenidos

CSS Básico

CSS Básico

Hojas de Estilo en Cascada (del inglés Cascading Style Sheets) o CSS, es el lenguaje de estilos utilizado para describir la presentación de documentos HTML. CSS es uno de los lenguajes base de la Open Web y posee una especificación estandarizada por parte del W3C.

Sintaxis

Para definir estilos, se hace el siguiente modo:

  p {                     /* Elemento HTML a dar formato, llamado selector */
    color: red;           /* Propiedad color del elemento (en ester caso texto del párrafo) */
    text_align: center;   /* Propiedad de alineamiento del texto, en este caso centrado */
    }

Las indentaciones y saltos de línea se han puesto e este modo para ganar claridad, pero son ignorados. Los elementos a dar formato se denominan selectores:

Elementos HTML: Pueden definirse varios elementos separados por comas. Afecta a todos los elementos de ese tipo.
Id: Si en HTML se define una id para un elemento concreto, se puede dar formato sólo a ese elemento indicando #id.
Clase: Si en HTML se define una clase para varios elementos o tipos de elementos, se puede dar formato a esa clase indicando .clase.
*: Selector universal que afecta a todos los elementos.

Cabe la posibilidad de que a un elemento se le puedan asignar varias clases en el HTML:

p class="nombreClase1 nombreClase2"

Combinators

Un selector CSS (elemento a dar formato), puede tomar más de un simple selector. Un combinator es un operador entre selectores, para definir una relación entre ambos, a la que se le aplicará el estilo:

Descendiente [Espacio]: Afecta a todos los elemntos contenidos en éste. Se deja un espacio, ejemplo: div {
Hijo >: afecta a los elementos especificados, dentro del elemento donde se declara. Ejemplo: div > p {
Hermano adyacente +: Afecta a un elemento que esté inmediatamente después de otro elemento especificado. Ejemplo: div + p { afectará al primer <p> que estén después de un <div> y a la misma altura (no contenido en él).
Hermano general ~: Afecta a un elemento que esté espués de otro elemento especificado, no sólo al que está inmediatamente después. Ejemplo: div ~ p { afectará a todos los <p> que estén después de un <div> y a la misma altura).

Pseudoclases y pseudoelementos

Las pseudoclases definen diferentes formas en que puede visualizarse un elemento dependiendo de su estado, ejemplo: enlace antes de ser pulsado, después de ser pulsado o cuando se sitúa el cursor sobre él. Pueden combinarse con las clases. Sintaxis:

selector:pseudo-clase {
  propiedad: valor;
}

Ejemplo:

 /* unvisited link */
a:link {
  color: #FF0000;
}
 
/* visited link */
a:visited {
  color: #00FF00;
}
 
/* mouse over link */
a:hover {
  color: #FF00FF;
}
 
/* selected link */
a:active {
  color: #0000FF;
}

Los Pseudoelementos dan estilo a diferentes partes de un elemento.
Sintaxis:

selector::pseudo-elemento {
  propiedad: valor;
}

Ejemplo:

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
 
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Declaración de estilos

CSS externo: En un documento nombreDocumento.css que debe ser referenciado en el head del HTML. Se van declarando los estilos de los diferentes elementos uno debajo de otro.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="mystyle.css">
  </head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

CSS interno: Se declaran los estilos el la cabecera del HTML. En lugar de hacer una referencia, se escriben los estilos uno debajo de otro.
CSS en línea: Se declaran los estilos en cada elemento afectado, dentro de la etiqueta HTML que corresponda. Se suelen poner “seguidos”, es decir, sin saltos de línea ni indentaciones.

Cuando se declaran a la vez en diferentes sitios, se toman por orden de preferecia:

En línea.
Interno.
Externo.
Por defecto del explorador.

Comentarios

Los comentarios en CSS tienen la sintaxis /* Línea/s de comentario */ No olvidar que en HTML los comentarios eran de la forma <!– Comentario –>

Modelo de Caja

CSS funciona con un “modelo de caja”. Cada elemento se encuentra dentro de una caja, cuyos límites, bordes, colocación y espacios interiores y exteriores pueden definirse mediante distintas propiedades.

En este modelo se distinguen las propiedades:

margin: Márgenes. Espacio exterior al borde del elemento. Si el superior y el inferior son diferentes, se “colapsan”, es decir, ambos adquieren el valor del más alto. Esto no ocurre con el resto de propiedades del modelo de cajas. Puede depender del elemento en el que está englobado con la propiedad inherit.
border: Borde del elemento. Por defecto es invisible, pero se le puede dar estilo.
padding: Espacio interior al borde del elemento. Entre el contenido y el borde. Puede expresarse en % respecto al ancho del contenedor (caja delimitada por los bordes, width+padding). También permite usar la propiedad inherit.

Ancho (Width) y alto (Height) de un elemento

Estas propiedades se refieres al ancho y alto del contenedor (contenido), sin contar margin, padding y borders. El ancho y alto totales de la caja es el resultdo de sumer ancho/alto, más margin, padding y bordes.

Outline

Aunque no está referenciada respecto al modelo de caja, existe un elemento denominado Outline, que se corresponde con una línea exterior al borde, pero pegada al mismo. Al no referenciar al modelo de caja, puede solapar a éste en función de las propiedades que tenga declaradas.

Posicionamiento (Layout)

Los elementos se posicionan con las propiedades top, bottom, left y right. Sin embargo, estas propiedades no funcionarán a menos que se establezca primero la propiedad position, y funcionan diferente según el valor de esta posición:

Static: Por defecto. Se colocan los elementos según el flujo “normal” de la web. No le afectan las propiedades top, bottom, left y right.
Relative: Se indica la distancia a la que se situará el elemento, tomando como referencia su posicionamiento “normal”. Ningún otro elemento ocupará su hueco.
Fixed: Siempre se sitúa en la posición indicada. SIEMPRE. Aunque se haga scroll SEGUIRÁ AHÍ.
Absolute: Se posiciona de forma relativa al elemento en el que está contenido, y variará en función de lo que varíe el posicionamiento de éste. Si no está contenido en ninguno, se “mueve” de forma normal con la página web respetando el scroll.
Sticky: Funciona como unposicionamiento relativo, hasta que llega en pantalla a una posición indicada, en la cual se queda en posicionamiento fijo. Ejemplo: top 0; Cuando se haga scroll hacia abajo, el elemento se moverá hasta la parte superior, y cuando llegue ahí, ahí se queda.

z-index

Esta propiedad lo que indica es la prioridad en caso de solapamiento de elementos.

Visualización

Hay dos maneras de controlar los elementos que aparecen: display y visivility.

Display

Es la propiedad CSS más importante para controlar el layout. Indica si un elemento se muestra (se carga o no en la web) y de qué manera. Cada elemento HTML tiene un valor de display por defecto dependiendo de su tipo de elemento. La mayoría de los elements son block o inline:

block: El elemento no puede tener ningún otro al lado, y se sitúa debajo del anterior y encima del siguiente.
inline: El elemento se sitúa en línea con el anterior. No respeta top y bottom, en margin y padding. Tampoco tienen efecto las propiedades height y width.
inline-block: El elemento se comporta como inline, pero se pueden aplicar propiedades height y width.

Display tiene una gran cantidad de propiedades.

Visivility

Esta propiedad indica si el elemento se muestra, pero siempre se carrga en la web, y por lo tanto se respeta su hueco, a diferencia de display. Algunos de sus valores son:

visible: Valor por defecto.
hidden: No se ve, pero queda su hueco.
collapse: Sólo afecta a elementos de tablas. Elimina filas o columnas y el espacio se “colapsa” (se elimina el hueco), que puede usarse para ver otro elemento.

Float

La propiedad float especifica si un elemento debe flotar hacia la izquierda, hacia la derecha o no flotar. Los elementos posicionados absolute ignoran esta propiedad. Los elementos próximos a un elemento flotante fluirán a su alrededor. Para evitar esto, hay que usar la propiedad clear o el truco clearfix.

Clear

Esta propiedad se usa cuando se desea situar un elemento debajo de un float (no a su izquierda o derecha):

none: El elemento no se coloca debajo de flotante. Por defecto.
left o right: El elemento cae debajo de los “flotantes” situados a la izquierda o derecha.
inherit: Valor muy común en muchas propiedades. Hereda del elemento contenedor.

Overflow

Esta propiedad indica qué ocurre cuando un contenido es mayor que el elemento que lo contiene (caja). Algunos valores que puede tomar:

visible: Por defecto, se sale de la “caja”.
hidden: no se ve la parte que se sale de la “caja”.
scroll: Se muestran barras de scroll.
auto: Se muestran las barras de scroll, sólo si se da la situación de solapamiento.