Regla CSS

Indica el formato que tomara un elemento HTML

Selector de etiqueta

Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector

p {
  color: red;
}

Selector Descendente

Selecciona los elementos que se encuentran dentro de otros elementos

p b {
    color: red;
}

Selector de ID

Selecciona el elemento que tenga un ID dado

p#error {
    color: red;
}

Selector de Clase

Selecciona los elementos que tengan una clase dada

p.error {
    color: red;
}

Selector Universal

Se utiliza para seleccionar todos los elementos del documento

* {
  color: red;
}

Combinación de Slectores

ul#superior li.activo a {
    color: red;
}

p.rojo,
p.azul {
    color: red;
}

Existen 3 maneras de incluir una hoja de estilos dentro de un documento HTML.

// Incluir CSS en el mismo documento HTML
<style type="text/css">
    p {
        font-size: 12px;
        color: red;
    }
</style>

// Definir CSS en un archivo externo
<link rel="stylesheet" type="text/css" href="estilos.css"/>


// Incluir CSS en los elementos HTML
<p style="font-size: 12px; color: red;">Un párrafo de texto.</p>

Unidades Absolutas

in, pulgadas. Una pulgada equivale a 2.54 centímetros.
cm, centímetros.
mm, milímetros.
pt, puntos. Un punto equivale a 0.35 milímetros.
pc, picas. Una pica equivale a 12 puntos.

Unidades Relativas

em, relativa al tamaño en puntos de la fuente del texto.
ex, aproximadamente 0.5em
px, relativa a la resolución de la pantalla.
%, un porcentaje de su medida máxima.

Colores

palabras clave
RGB hexadecimal
RGB numérico
RGB porcentual

Pueden ser expresados de varias maneras

Palabras Claves

Corresponden al nombre en ingles del color

RGB Decimal

El modelo RGB consiste en definir un color indicando la cantidad de color rojo, verde y azul que se debe mezclar para obtener ese color

p {
    color: rgb(71, 98, 176);
}

RGB Porcentual

Se toma un porcentaje en base al valor decimal, donde 0 = 0% y 255 = 100%

p {
    color: rgb(27%, 38%, 69%);
}

RGB Hexadecimal

Se representa un color en base al valor hexadecimal de cada componente RGB

p {
    color: #4762B0;
}

El modelo de Cajas

Es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares

Ancho

La propiedad CSS que controla la anchura de la caja de los elementos se denomina width.

Se puede limitar la anchura maxima y minima de un elemento con las propiedades min-width y max-width

#lateral { width: 200px; }

#lateral {
    min-width: 400px;
    max-width: 600px;
}

Altura

La propiedad CSS que controla la altura de la caja de los elementos se denomina height.

Se puede limitar la altura maxima y minima de un elemento con las propiedades min-height y max-height

#lateral { height: 200px; }

#lateral {
    min-height: 400px;
    max-height: 600px;
}

Margen Externo

CSS define cuatro propiedades que controlan cada uno de los márgenes horizontales y verticales de un elemento.

Podemos centralizar estas cuatro margenes usando la propiedad margin.

Margen Interno

CSS define cuatro propiedades para controlar cada uno de los margenes de relleno horizontales y verticales de un elemento.

Podemos centralizar estas cuatro margenes usando la propiedad padding.

Bordes

CSS permite modificar el aspecto de cada uno de los cuatro bordes de la caja de un elemento.

Por lo tanto, CSS define 20 propiedades relacionadas con los bordes.

anchura o grosor
color
estilo

Para cada borde se puede establecer

Bordes - Anchura/Grosor

La anchura de los bordes se controla con las cuatro propiedades siguientes:

div {
  border-top-width: 10px;
  border-right-width: 15px;
  border-bottom-width: 20px;
  border-left-width: 25px;
}

div {
  border-width: 10px 15px 20px 25px;
}

Bordes - Color

El color de los bordes se controla con las cuatro propiedades siguientes:

div {
  border-top-color: #CC0000;
  border-right-color: blue;
  border-bottom-color: #00FF00;
  border-left-color: #CCC;
}

div {
  border-color: #CC0000 blue #00FF00 #CCC;
}

Bordes - Estilo

CSS permite establecer el estilo de cada uno de los bordes mediante las siguientes propiedades:

div {
  border-top-style: dashed;
  border-right-style: double;
  border-bottom-style: dotted;
  border-left-style: solid;
}

div {
  border-style: dashed double dotted solid;
}

Bordes - Mas Atajos

Existen atajos asociados a los lados de los bordes

div {
  border-top: 1px solid red;
  border-right: 1px solid red;
  border-bottom: 1px solid red;
  border-left: 1px solid red;
}

div {
  border: 1px solid red;
}

Fondos - Color/Imagen

CSS permite establecer un fondo a un elemento y la forma en la que este se comportara

body {
  background-color: #F5F5F5;
}

body {
  background-image: url("imagenes/fondo.png");
  background-repeat: repeat-x;
}

Fondos - Posición

CSS permite establecer la posición de la imagen de fondo

body {
  background-image: url("imagenes/fondo.png");
  background-position: bottom left;
}

Fondos - Atajo

CSS permite definir todas las propiedades del fondo mediante una unica propiedad llamada background.

body {
  background: url("fondo.png") repeat-x bottom left;
}

Posicionamiento

Los navegadores crean y posicionan de forma automática todas las cajas que forman cada página HTML.

CSS permite modificar la posición en la que se muestra cada caja.

Existen cinco maneras de posicionar una caja

Posicionamiento normal o estático
Posicionamiento relativo
Posicionamiento absoluto
Posicionamiento fijo
Posicionamiento flotante

Posicionamiento Estatico

Se trata del posicionamiento que utilizan los navegadores si no se indica lo contrario.

div {
  position: static;
}

Posicionamiento Relativo

Variante del posicionamiento normal que consiste en posicionar una caja según el posicionamiento normal y después desplazarla respecto de su posición original.

div {
  position: relative;
  top: 20px;
  right: 50px;
}

Posicionamiento Absoluto

La posición de una caja se establece de forma absoluta respecto de su elemento contenedor y el resto de elementos de la página ignoran la nueva posición del elemento.

div {
  position: absolute;
  top: 20px;
  right: 50px;
}

Posicionamiento Fijo

El desplazamiento se establece de la misma forma que en el posicionamiento absoluto, pero en este caso el elemento permanece inamovible en la pantalla independientemente del resto de elementos e independientemente de si el usuario sube o baja la página en la ventana del navegador.

div {
  position: fixed;
  top: 20px;
  right: 50px;
}

Posicionamiento Flotante

Se trata del modelo más especial de posicionamiento, ya que desplaza las cajas todo lo posible hacia la izquierda o hacia la derecha de la línea en la que se encuentran.

div {
  float: left;
}

Visualización - Display

La propiedad CSS display define la forma en que un elemento es mostrado.

div { display: block; }

div { display: inline; }

div { display: inline-block; }

div { display: none; }

Visualización - Visibility

La propiedad CSS visibilty define si un elemento va a ser mostrado.

div {
    visibility: hidden;
}

div {
    visibility: visible;
}

Texto - Tipografía

CSS define numerosas propiedades para modificar la tipografía del texto.

p {
    color: blue;
    font-family: "Times New Roman", Times, serif;
    font-size: 2em;
    font-weigth: 500;
    font-style: italic;
}

p {
    font: 2em italic 500 blue "Times New Roman", Times, serif;
}

Texto - Apariencia

CSS define numerosas propiedades que determinan la apariencia del texto en su conjunto.

p {
    text-align: justify;
    line-height: 2.5em;
    text-decoration: underline;
    text-transform: capitalize;
    vertical-align: top;
    text-indent: 2em;
    letter-spacing: 2px;
    word-spacing: 5px;
}

Listas

CSS permite controlar varios aspectos de las listas

ul {
    list-style-type: circle;
    list-style-position: outside;
}

ul {
    list-style-image: url("check.png");
}

ul {
    list-style: url("check.png") square;
}