Introducción a Cheatsheet CSS3
La hoja de estilo en cascada (CSS) es básicamente un lenguaje de hoja de estilo que se utiliza para implementar el aspecto y el formato de un documento desarrollado en un lenguaje de marcado. La especificación CSS es mantenida principalmente por World Wide Web Consortium (W3C). La moto principal para implementar CSS es mostrar la separación de presentación y contenido que incluye frentes, formatos de diseño. CSS3 es la última versión o estándar para CSS después de CSS2. CSS3 es principalmente una mezcla de especificaciones CSS2 y algunas funcionalidades nuevas.
Encuentra a continuación algunos módulos importantes de Cheatsheet CSS3:
- Modelo de caja
- Selectores
- Efectos de texto
- Transformaciones 2D
- Transformaciones 3D
- Representación de imagen
- Interfase de usuario
- Múltiples diseños de columna
- Animaciones
- Ajuste de contenido y reasignación
En este artículo de Cheatsheet CSS3, discutiremos qué es CSS3 y los diferentes comandos CSS3.
Comandos y contenido en Cheatsheet CSS3
CSS3 tiene una biblioteca extensa, interactiva, ampliable y contiene muchos métodos incorporados para calcular operaciones comunes. A continuación se encuentran los comandos Cheatsheet CSS3 mencionados que realizan diferentes operaciones de línea de comandos:
|
MANDO |
DESCRIPCIÓN |
| : atención | Centrarse en un elemento |
| : activo | Para mostrar y seleccionar un elemento activo |
| : habilitado | Para mostrar un elemento que está habilitado |
| : verificado | Para mostrar un elemento que está marcado |
| : lang | Para permitir que el desarrollador especifique el idioma de un elemento específico |
| : selección | Para mostrar el elemento que está resaltado y seleccionado |
| : raíz | Para mostrar el elemento raíz dentro del documento |
| :primer hijo | Para mostrar el primer elemento hermano |
| :último niño | Para mostrar el último elemento hermano |
| :hijo único | Para mostrar el único elemento hijo |
| : primero de tipo | Para mostrar el primer elemento hermano de un tipo específico |
| : último de tipo | Para mostrar el último elemento hermano de un tipo específico |
| : solo de tipo | Para mostrar el único elemento hermano de un tipo específico |
| : vacío | Para mostrar el elemento que no tiene hijos |
| ::primera letra | Para agregar un estilo específico a la primera letra de un texto |
| ::primera linea | Para agregar un estilo específico a la primera línea de un texto |
| :: después | Para insertar algo de contenido después de un elemento de texto |
| :: antes de | Para insertar algún contenido antes de un elemento de texto |
Operadores: - Los diferentes tipos de operadores en CSS3 son Operadores de comparación (relacionales), Operadores de asignación, Operadores lógicos y Operadores de identidad.
Escalas de medición: las escalas de medición de hoja de trucos CSS3 son las siguientes
|
ESCALA / PARÁMETRO |
DESCRIPCIÓN |
| em | Tamaño de fuente del elemento actual |
| ex | Altura de fuente del elemento |
| px | Visualización de píxeles del dispositivo |
| movimiento rápido del ojo | Tamaño de fuente del elemento raíz |
| vh | Altura del viewport |
| vw | Ancho de la ventana gráfica |
| % | Porcentaje |
| ordenador personal | Pica |
| pt | Punto |
Código de color: Nombre del color = rojo, azul, verde y verde oscuro. Encuentra debajo los códigos para el mismo
|
CÓDIGO |
DESCRIPCIÓN / SIGNIFICADO |
| rgb (x, y, z) | Para rojo = rgb (255, 0, 0) |
| rgb (x%, y%, z%) | Para rojo = rgb (100%, 0, 0) |
| #rrggbb | Para rojo = # ff000 |
| flabor | Color seleccionado por el usuario para personalizar la interfase del usuario |
| rgba (x, y, z, alfa) | Para rojo = rgb (255, 0, 0) |
Propiedades de interfase de usuario: las propiedades de interfase de usuario de la hoja de trucos CSS3 son las siguientes.
|
VALORES DE PROPIEDAD |
DESCRIPCIÓN |
| icono | Para proporcionar el icono en el área |
| redimensionar | Para cambiar el tamaño de los elementos de área especificados |
| tamaño de caja | Para arreglar el área del elemento especificado |
| apariencia | Para implementar los elementos como elementos de la interfaz de usuario |
| navegar hacia abajo | Para mover hacia abajo los elementos de acuerdo con el botón de flecha hacia abajo del teclado |
| nav-left | Para mover a la izquierda los elementos de acuerdo con el botón de flecha izquierda del teclado |
| nav-up | Para subir los elementos según el botón de flecha izquierda del teclado |
| nav-right | Para mover a la derecha los elementos de acuerdo con el botón de flecha derecha del teclado |
| esquema-offset | Para dibujar el contorno del área de texto seleccionada |
Tipos de selector : los tipos de selector de hoja de trucos CSS3 son los siguientes.
|
ESCRIBE UN NOMBRE |
DESCRIPCIÓN / SIGNIFICADO |
| Universal | Para mostrar cualquier elemento |
| Tipo | Para mostrar cualquier elemento de tipo específico |
| Clase | Para mostrar múltiples elementos de diferentes tipos |
| Carné de identidad | Para mostrar e identificar un único tipo de elemento específico sin afectar a otros |
| Niño | Para mostrar un elemento que cae directamente debajo de otro elemento |
| Agrupamiento | Identificar múltiples elementos de diferentes tipos. |
| Hermano adyacente | Para buscar todos los elementos que tienen el mismo padre y elementos y están en la secuencia inmediata |
| Hermano general | Para buscar todos los elementos que tienen el mismo elemento primario y elementos y que no están necesariamente en la secuencia inmediata |
Consejos y trucos gratuitos sobre el uso de los comandos CSS3 Cheat sheet: -
- El modo de mezcla CSS3 se puede utilizar para unificar la apariencia del contenido especificado y también permite a los usuarios configurar diferentes versiones de color de imagen. Hay alrededor de 15 valores de modo de mezcla presentes en CSS3 Cheat Sheet. También agrega una ventaja adicional desde la perspectiva de representación de interfase de usuario.
- El recorte es otra gran característica de CSS. Usando la funcionalidad de recorte, un usuario puede definir la visibilidad del área de la imagen según el requisito. Por lo tanto, si alguna parte de la imagen queda fuera del área deseada, se puede implementar el recorte para ocultar esa área de imagen adicional.
- En el caso de CSS, se pueden implementar propiedades shape-inside y shape-outside para ajustar el contenido alrededor de la ruta personalizada CSS y se puede definir y asignar según los requisitos del usuario final. Básicamente, permite al usuario diseñar la interfase según las especificaciones definidas.
- El uso de animación SVG (gráficos vectoriales escalables) es otra ventaja para CSS3. Usando SVG con animación CSS3, la interfase será más interactiva y SVG también tiene su propia API DOM.
- La función de mapa se aplicará a todos los elementos en una lista de entrada.
- La función reducir se usa para aplicar algunos cálculos en una lista y devuelve un valor
- Los efectos de desplazamiento pueden implementarse utilizando CSS3 Cheat Sheet
- Se puede implementar un menú pegajoso usando filtros CSS3 y SVG y esto ayuda a un nuevo enfoque representativo desde la perspectiva de interfase del usuario
- Desde la perspectiva del diseño web, los efectos de paralaje se pueden producir usando CSS3.
- La estructura 3D interactiva y la interfase de usuario se pueden producir usando CSS3
- Con la combinación de un selector diferente, se puede generar un icono de formato de archivo junto al enlace de descarga usando CSS3.
Conclusión
En este artículo de Cheat sheet CSS3, hemos visto que CSS3 es fácil de usar y su sintaxis es más fácil de recordar. CSS3 se puede utilizar en la representación de tecnologías de desarrollo web mediante el uso de diferentes enfoques y tecnologías de hoja de estilo que admiten CSS3. Según el tipo de necesidad del proyecto, el tiempo de trabajo y todos los demás aspectos discutidos, CSS3 debe usarse para alcanzar el objetivo deseado.
Artículos recomendados
Esta ha sido una guía para la hoja de trucos CSS3. Aquí hemos discutido el contenido y el comando, así como consejos y trucos gratuitos de la hoja de trucos CSS3. También puede consultar el siguiente artículo para obtener más información:
- Hoja de trucos CSS
- Hoja de trucos HTML
- Increíble hoja de trucos para UNIX
- Cheat Sheet JavaScript: Características