HTML-CSS-crash_course

CSS cheetsheet

Tabla de contenido

Guia_rapida

CSS es un lenguaje de estilos que se utiliza para darle estilo a un documento HTML. Define el aspecto visual de un documento HTML.

Selectores

Los selectores se utilizan para seleccionar los elementos HTML a los que se les aplicará el estilo.

p {
  color: red;
}

<p id="demo">Este es un parrafo</p>

#demo {
  color: red;
}

<p class="demo">Este es un parrafo</p>

.demo {
  color: red;
}

* {
  color: red;
}

Un selector universal se utiliza para resetear los estilos de un documento.

* {
  margin: 0;
  padding: 0;
}

p, h1, h2 {
  color: red;
}

Propiedades

Colores

Codigos de colores: nombres, hexadecimales, abreviacion hexadecimal, rgb, rgba, hsl, hsla

Referencia de colores

Usualmente los colores se representan en hexadecimal en numeros en base 16 desde el 00000 al FFFFFF, donde cada par de numeros representa un color, el primero es el rojo, el segundo es el verde y el tercero es el azul. Tambien se pueden especificar los colores en RGB, donde cada valor es un numero entre 0 y 255, donde 0 es el minimo y 255 es el maximo. En RGBA la transparencia se puede especificar con un valor entre 0 y 1, donde 0 es transparente y 1 es opaco.

body {
  background-color: #ff0000;
  background-color: rgba(255, 0, 0, 1);
}

body {
  background-color: rgb(255, 0, 0);
}

body {
  background-color: rgba(255, 0, 0, 0.3);
}

Unidades

Unidades relativas

Las unidades relativas son unidades que se basan en otras unidades, por ejemplo, en el caso de las unidades de medida de texto, el tamaño de la fuente se basa en el tamaño de la fuente del elemento padre.

Unidades absolutas

Las unidades absolutas son unidades que no se basan en otras unidades, por ejemplo, en el caso de las unidades de medida de texto, el tamaño de la fuente no se basa en el tamaño de la fuente del elemento padre.

Tipografía

Fuentes

Las fuentes son los tipos de letra que se pueden usar en un documento, por ejemplo, Arial, Times New Roman, Verdana, etc.

Familias de fuentes

Las familias de fuentes son un conjunto de fuentes que se pueden usar en un documento, por ejemplo, Arial, Times New Roman, Verdana, etc. Las familias de fuentes se pueden especificar con la propiedad font-family.

body {
  font-family: Arial, Helvetica, sans-serif;
}

Tipos de fuentes

Los tipos de fuentes son los estilos de las fuentes, por ejemplo, normal, cursiva, negrita, etc.

body {
  font-style: italic;
}

Tamaño de fuentes

El tamaño de las fuentes se puede especificar en pixeles o en unidades relativas.

body {
  font-size: 1em;
}

h1 {
  font-size: 2em;
}

Estilos de fuentes

Los estilos de fuentes se pueden especificar con las propiedades font-style y font-weight.

body {
  font-style: italic;
  font-weight: bold;
}

Fuentes combinadas

Las fuentes combinadas se pueden especificar con la propiedad font.

body {
  font: italic bold 1em Arial, Helvetica, sans-serif;
}

Texto

Color de texto

p {
  color: red;
}

Alineación de texto

La alineación de texto se puede especificar con la propiedad text-align.

body {
  text-align: center;
}

Espaciado de texto

El espaciado de texto se puede especificar con la propiedad letter-spacing.

body {
  letter-spacing: 2px;
}

Altura de texto

La altura de texto se puede especificar con la propiedad line-height.

body {
  line-height: 1.5;
}

Transformación de texto

La transformación de texto se puede especificar con la propiedad text-transform.

body {
  text-transform: uppercase;
}

Decoración de texto

La decoración de texto se puede especificar con la propiedad text-decoration.

body {
  text-decoration: underline;
}

Referencia de fuentes

Tamaños

El tamaño de los elementos se puede especificar con las propiedades width y height.

body {
  width: 100%;
  height: 100%;
}

body {
  width: 100px;
  height: 100px;
}

<meta viewport="width=device-width, initial-scale=1.0">

body {
  width: 100vw;
  height: 100vh;
}

body {
  width: 100vmin;
  height: 100vmin;
}

body {
  width: 100vmax;
  height: 100vmax;
}

Espaciado

El espaciado esta definido por el margen, el relleno y el borde de un elemento.

Margenes

body {
  margin: 1em;
}

body {
  margin: 1em 2em;
}

body {
  margin: 1em 2em 3em 4em;
}

body {
  margin: 1em 2em 3em;
}

Relleno

body {
  padding: 1em;
}

body {
  padding: 1em 2em;
}

body {
  padding: 1em 2em 3em 4em;
}

body {
  padding: 1em 2em 3em;
}

Borde

div {
  border: 1px solid red;
  border-radius: 1em;
}

body {
  border: 1px solid #000;
}

body {
  border: 1px solid #000;
  border-radius: 1em;
}

body {
  border: 1px solid #000;
  border-radius: 1em;
  box-shadow: 1px 1px 1px 1px #000;
}

Referencia de espaciado

Posicionamiento

El posicionamiento define la posición de un elemento en la página, por ejemplo, si un elemento esta arriba, abajo, a la izquierda o a la derecha de otro elemento.

Posicionamiento estático

El posicionamiento estático es el posicionamiento por defecto de los elementos, los elementos se posicionan en el flujo normal del documento.

Posicionamiento relativo

El posicionamiento relativo es el posicionamiento de los elementos que se basa en el posicionamiento estático, los elementos se posicionan en el flujo normal del documento.

body {
  position: relative;
  top: 1em;
  left: 1em;
}

Posicionamiento absoluto

El posicionamiento absoluto es el posicionamiento de los elementos que se basa en el posicionamiento relativo, los elementos se posicionan en el flujo normal del documento.

body {
  position: absolute;
  top: 1em;
  left: 1em;
}

fondos

Las imagenes se pueden especificar con la propiedad background-image. El color de fondo se puede especificar con la propiedad background-color. El tamaño de fondo se puede especificar con la propiedad background-size. La posición de fondo se puede especificar con la propiedad background-position. La repetición de fondo se puede especificar con la propiedad background-repeat.

body {
  background-image: url("https://picsum.photos/200/300");
}

body {
  background-image: url("https://picsum.photos/200/300");
  background-repeat: no-repeat;
  background-size: cover;
}

body {
  background-image: url("https://picsum.photos/200/300");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

p {
  background-color: green;
}

div {
  background-image: url("img_tree.png");
}

<div class="container-x></div>

.container-x {
  height:200px;
  width:200px;
  background-color:pink;
  background-image:url("https://picsum.photos/100/100")
}

body {
  background-image: url("img_tree.png");
  background-attachment: fixed;
}

ejercicio

Prueba agregar uno a uno los estilos css para ver como cambia el resultado.

<div class="container-x"></div>

.container-x {
  height:200px;
  width:200px;
  background-color:pink;
  background-image:url("https://picsum.photos/100/100");
  backgound-repeat:no-repeat;
  background-size:cover;
}

Display

El display define si un elemento es un bloque o un elemento en línea.

Display block

Los elementos de bloque son elementos que se muestran en una nueva línea, por ejemplo, <div>, <p>, <h1>, <form>, etc.

Display inline

Los elementos en línea son elementos que se muestran en la misma línea, por ejemplo, <span>, <a>, <img>, etc.

Display none

Los elementos ocultos no se muestran en la página.

body {
  display: none;
}

Indice

body {
  z-index: 1;
}

Desbordamiento

El desbordamiento define si un elemento se desborda o no.

body {
  overflow: hidden;
}

Transformaciones

Las transformaciones una transformacion al elemento


```css
body {
  transform: rotate(45deg);
}

Hover

Las pseudoclases hover definen el estado de un elemento cuando el mouse esta sobre el elemento y son muy populares para crear efectos de transición en hipervinculos y botones.

a:hover {
  color: red;
}

<a href="#" class="btn btn-primary">Primary</a>

.btn {
  padding: 1em;
  border-radius: 1em;
  transition: 0.5s ease-in-out;
}

.btn-primary {
  background-color: #000;
  color: #fff;
}

.btn-primary:hover {
  background-color: #fff;
  color: #000;
}

Animaciones

Un ejemplo de animacion simple utilizando @keyframes y animation.


```css
body {
  animation: mymove 5s infinite;
}

@keyframes mymove {
  from {
    left: 0px;
  }
  to {
    left: 200px;
  }
}

Recursos

Frameworks

Algunos frameworks CSS que pueden ser de utilidad.

This site is open source. Improve this page.