Curso IT Fundamentos CSS 021_Tipos de valores, unidades, tamaños, colores

Tipos numéricos

En CSS, se utilizan diferentes valores numéricos en diferentes propiedades. Los tipos numéricos comunes son:

• Cadenas: Texto entre comillas simples o dobles, asegurando la consistencia de las comillas.
• Números: Enteros o decimales. Como 1024, -100, 0.255. Evite usar números sin unidades a menos que representen valores puramente numéricos.
• Unidades: Tipo numérico con unidad, por ejemplo 45deg, 5s o 10px.
• Porcentajes: Tipo numérico porcentual, por ejemplo 50%. Los valores porcentuales se usan comúnmente para ancho, alto, etc.
• Valores de color: Hexadecimal, RGB, RGBA, HSL, HSLA, etc. Use representaciones de color apropiadas, considere el contraste y accesibilidad, evite colores demasiado brillantes o similares.
• Palabras clave: Palabras con significado específico como auto, initial, inherit, etc. Comprenda su significado y función.

Unidades

Las unidades en CSS se usan para representar valores de propiedades como longitud, ángulo, tiempo, frecuencia, etc.

Unidades de longitud:

En CSS, las unidades de longitud se usan para representar dimensiones y distancias, aplicables a propiedades como ancho, alto, margen, relleno, etc.

Unidades de longitud relativas:

• em: Relativo al tamaño de fuente del elemento padre. 1.5em significa que el tamaño de fuente es 1.5 veces el del padre.
• rem: Relativo al tamaño de fuente del elemento raíz (html). 1rem equivale al tamaño de fuente del elemento raíz.
• ex: Usado para dimensiones verticales, relativo a la altura de la letra minúscula “x”.

Ejemplo:

1
.example {
2
  font-size: 16px;
3
  padding: 1.5em;
4
  margin: 2rem;
5
  height: 2ex;
6
}

Unidades de longitud absolutas:

• px: Píxel es la unidad más básica y más usada en CSS. Su tamaño depende de la resolución de la pantalla.
• in: Pulgada, 1 pulgada equivale a 96 píxeles.
• cm: Centímetro, usado para dimensiones de objetos físicos.
• mm: Milímetro, usado para papel u otros materiales impresos.
• pt: Punto, unidad de impresión tradicional. 1pt equivale a 1/72 de pulgada.
• pc: Pica, unidad de impresión tradicional. 1pc equivale a 12pt, 16 píxeles.

Ejemplo:

1
.example {
2
  width: 200px;
3
  height: 2in;
4
  margin: 1cm;
5
  font-size: 12pt;
6
}

Unidades de porcentaje relativo:

• %: Porcentaje relativo al elemento padre. width: 50% significa el 50% del ancho del padre.

Ejemplo:

1
.example {
2
  width: 50%;
3
  padding: 10%;
4
}

Unidades de viewport:

• vw: Porcentaje del ancho del viewport, 1vw = 1% del ancho.
• vh: Porcentaje de la altura del viewport, 1vh = 1% de la altura.
• vmin: El menor entre vw y vh.
• vmax: El mayor entre vw y vh.

Ejemplo:

1
.example {
2
  width: 50vw;
3
  height: 30vh;
4
}

Unidades de ángulo:

En CSS, las unidades de ángulo se usan para valores angulares en propiedades de rotación, transformación, etc.

deg (grados):

• deg es la unidad angular más común, un círculo completo tiene 360 grados.

Ejemplo:

1
.example {
2
  transform: rotate(45deg);
3
  background: linear-gradient(45deg, red, yellow);
4
}

rad (radianes):

• rad es la relación entre la circunferencia y el radio, un círculo completo tiene 2π radianes.

Ejemplo:

1
.example {
2
  transform: rotate(1rad);
3
}

grad (gradianes):

• grad es la unidad de gradianes, un círculo completo tiene 400 gradianes.

1
.example {
2
  transform: rotate(50grad);
3
}

turn (vueltas):

• turn representa una vuelta completa, igual a 360 grados.

1
.example {
2
  transform: rotate(0.5turn);
3
}

Unidades de tiempo:

En CSS, las unidades de tiempo se usan para valores temporales en animaciones, transiciones, etc.

s (segundos)

• s es la unidad de segundos.

Ejemplo:

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.base:hover{
7
    background-color: #e74c3c;
8
}
9
.example{
10
    transition: background-color 1s ease;
11
}

ms (milisegundos)

• ms es la unidad de milisegundos, 1 segundo = 1000 milisegundos.

Ejemplo:

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.base:hover{
7
    background-color: #e74c3c;
8
}
9

10
.example{
11
    transition: background-color 2000ms ease;
12
}

Unidades de frecuencia:

En CSS, las unidades de frecuencia representan la frecuencia de eventos periódicos. La más común es Hz (hercios).

Hz (hercios)

• Hercios es la unidad de frecuencia más común, representa ciclos por segundo.

Ejemplo:

1
.example {
2
  animation: shake 1s infinite;
3
}

kHz (kilohercios)

• Kilohercios representa miles de ciclos por segundo, 1 kHz = 1000 Hz.

Ejemplo:

1
.example {
2
  audio {
3
    frequency: 5kHz;
4
  }
5
}

Unidades de resolución:

En CSS, las unidades de resolución representan la densidad de píxeles de imágenes o impresión.

dpi (puntos por pulgada)

• dpi representa puntos por pulgada.

Ejemplo:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 300px 200px;
4
  background-resolution: 300dpi;
5
}

dppx (puntos por píxel)

• dppx representa puntos por píxel en pantalla.

Ejemplo:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 300px 200px;
4
  background-resolution: 2dppx;
5
}

dpcm (puntos por centímetro)

• dpcm es una unidad de resolución que representa puntos por centímetro.

Ejemplo:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 2dpcm 3dpcm;
4
}

Tamaños

Los tamaños en CSS controlan las dimensiones de los elementos.

Propiedades width y height

Establecen el ancho y alto del elemento, usando unidades como px, %, em, rem.

Ejemplo:

1
.example {
2
  width: 300px;
3
  height: 200px;
4
}

Propiedades max-width y max-height

Establecen el ancho y alto máximo del elemento.

Ejemplo:

1
.example {
2
  max-width: 100%;
3
  max-height: 500px;
4
}

Propiedades min-width y min-height:

Ejemplo:

1
.example {
2
  min-width: 200px;
3
  min-height: 100px;
4
}

Colores

Colores por palabra clave

Colores representados por palabras clave predefinidas, como red: rojo, blue: azul, green: verde, etc.

Ejemplo:

1
.example {
2
  color: red;
3
  background-color: blue;
4
}

Colores hexadecimales

Colores RGB representados por números hexadecimales de seis o tres dígitos. La forma de seis dígitos es #RRGGBB. La forma de tres dígitos es #RGB.

Ejemplo:

1
.example {
2
  color: #ff0000;
3
  background-color: #00f;
4
}

Colores RGB, RGBA

La función rgb() acepta tres parámetros para rojo, verde y azul (0-255). rgba() es similar pero con un parámetro adicional de transparencia (0-1).

Ejemplo:

1
.example1 {
2
  color: rgb(255, 0, 0);
3
  background-color: rgb(0, 0, 255);
4
}
5

6
.example2 {
7
  color: rgba(255, 0, 0, 0.5);
8
  background-color: rgba(0, 0, 255, 0.7);
9
}

Colores HSL, HSLA

La función hsl() acepta tres parámetros para tono (0-360), saturación (0%-100%) y luminosidad (0%-100%). hsla() es similar pero con un parámetro adicional de transparencia (0-1).

Ejemplo:

1
.example1 {
2
  color: hsl(0, 100%, 50%);
3
  background-color: hsl(240, 100%, 50%);
4
}
5

6
.example2 {
7
  color: hsla(0, 100%, 50%, 0.5);
8
  background-color: hsla(240, 100%, 50%, 0.7);
9
}

Tabla de colores RGB (oschina.net)