Hoja de trucos CSS - Introducción

Las hojas de estilo en cascada, también conocidas como CSS, son un lenguaje de hojas de estilo utilizado para describir la presentación de un documento escrito en un lenguaje de marcado como HTML. Básicamente simplifica el proceso de hacer que las páginas web sean presentables. Maneja la apariencia de la página web y se usa para controlar las características de una página web como el color del texto, el estilo de las fuentes, el espacio entre párrafos, la alineación de columnas, las imágenes y colores de fondo y una variedad de otros efectos. . Las ventajas de una hoja de trucos CSS son que ahorra tiempo, las páginas se cargan más rápido, un mantenimiento sencillo, estilos superiores, compatibilidad con múltiples dispositivos y estándares web globales.

Comandos y contenido en CSS Cheat sheet

Sintaxis Básica

La sintaxis básica de la hoja de trucos CSS consiste en un selector y componentes de declaración. El componente selector especifica el elemento HTML que debe diseñarse. El componente de declaración contiene dos o más propiedades y sus especificaciones separadas por punto y coma. El componente de declaración siempre comienza y termina con llaves.

A continuación se encuentran los comandos CSS de Cheatsheet mencionados que realizan diferentes tipos de operaciones:

Especificación Mando
ColoresLos colores se especifican utilizando nombres de color predefinidos o valores RGB, HEX, HSL, RGBA, HSLA.
AntecedentesEl color de fondo de un elemento está especificado por la propiedad de color de fondo
Fronteras
  • propiedad de borde establece todas las propiedades de borde
  • color de borde establece el color de los cuatro bordes
  • border-radius establece los bordes con esquinas redondeadas
  • border-style establece el estilo de los cuatro bordes
  • border-width establece el ancho de los cuatro bordes
MárgenesLa propiedad Margen establece las propiedades de los márgenes en una declaración.
RellenoLa propiedad para establecer las propiedades de relleno en una declaración es el relleno.
Anchura alturaLas propiedades de alto y ancho se utilizan para especificar el alto y el ancho de un elemento.
contornoLa propiedad de estilo de contorno especifica el tipo de contorno para un elemento.
TextoLa propiedad de color se usa para establecer el color del texto.
FuentesLa propiedad font-family se usa para establecer la fuente del texto seleccionado.
EnlacesLa propiedad de decoración de texto se usa para eliminar subrayados de enlaces y la propiedad de color de fondo se puede usar para especificar el color de fondo de los enlaces.
LizaLa propiedad de estilo de lista establece la propiedad de una lista en una declaración. La imagen de estilo de lista especifica una imagen como marcador de elemento de lista. La posición de estilo de lista especifica la posición del marcador de elemento de lista. El tipo de estilo de lista especifica el tipo de marcador de elemento de lista.
MesasBorde establece todas las propiedades de borde en una declaración. El colapso del borde especifica si un borde debe colapsarse o no. El espacio entre bordes es la distancia o el espacio entre celdas adyacentes. El lado del título especifica la ubicación de un título de tabla. El diseño de tabla establece el algoritmo para el diseño de una tabla.
MonitorLa propiedad de visualización especifica si se muestra un elemento y cómo se muestra.
Anchura máximaEn el proceso de especificar el ancho de un elemento de bloque, el uso de max-width mejorará el manejo del navegador de ventanas pequeñas.
PosiciónLa propiedad de posición especifica la posición de un elemento.
DesbordamientoLa propiedad de desbordamiento controla el texto que es demasiado grande para caber en un área.
FlotadorLa propiedad float especifica cómo debe flotar un elemento.

Consejos y trucos gratuitos sobre el uso de comandos de hoja de trucos CSS: -

Algunos trucos esenciales de la hoja de trucos CSS son los siguientes.

  • Box-Model: el CSS Box-Model es esencialmente un cuadro que envuelve todos los elementos HTML. Consiste en márgenes, bordes, relleno y contenido.
  • Pseudoclase: se utiliza para definir un estado específico de un elemento que implica diseñar un elemento de manera diferente cuando un usuario se mueve sobre él, el estilo de los enlaces visitados y no visitados y el estilo de los elementos que están bajo foco.
  • Seudoelemento: se utiliza para dar estilo a una parte de un elemento como la primera letra, palabra o línea. También ayuda a insertar contenido antes y después del contenido de un elemento.
  • Altura vertical de la pantalla: Esto es para especificar en qué medida el contenido debe ocupar la pantalla.
  • Estilo de enlaces telefónicos: especifica las propiedades de los enlaces que se abren como números de teléfono en el teléfono.
  • Barras de navegación: es importante que un sitio web tenga una buena navegación. CSS transforma los aburridos menús HTML en atractivas barras de navegación.

Conclusión

La hoja de trucos CSS, como herramienta de creación de sitios web, es muy efectiva. Dado que las opciones para una mejor presentación de un sitio web y agregar características útiles son más con CSS, es muy preferible.

Artículos recomendados

Esta ha sido una guía para la hoja de trucos CSS. Aquí hemos discutido el contenido y el comando, así como consejos y trucos gratuitos de la hoja de trucos CSS. También puede consultar el siguiente artículo para obtener más información:

  1. Cheat Sheet SQL
  2. Preguntas principales de la entrevista CSS
  3. CSS vs CSS3 Diferencias
  4. Preguntas y respuestas de la entrevista CSS3
  5. Interesante Cheat sheet para UNIX
  6. Cheat Sheet JavaScript: Funciones