Recopilación completa de ejemplos de CSS

Texto CSS

• Establecer el color del texto

• Alineación de texto

• Retraso de texto

• Decorar el texto

• Establecer el espacio entre los caracteres

• Establecer el espacio entre las palabras

• Establecer el espacio entre las líneas de texto

• Mantener los espacios en blanco y los saltos de línea

• Salto de línea de texto dentro de un elemento

• Alineación vertical de la imagen en el texto

Fuente CSS

• Establecer la fuente del texto

• Establecer el tamaño de la fuente

• Establecer el estilo de la fuente

• Establecer la variante de la fuente

• Establecer la negrita de la fuente

• Establecer todas las propiedades de fuente en una declaración-Atributos abreviados de fuente

Enlace CSS

• Establecer estilos para diferentes estados de los enlaces

• Eliminar la subrayado predeterminado de los enlaces

• Eliminar el contorno de guiones discontinuos de los enlaces

• Crear un cuadro de enlace

• Invertir la imagen

Lista CSS

• Especificar los puntos y números en la lista

• Establecer la posición del marcador de elementos de lista

• Establecer la imagen como marcador de elementos de lista

• Crear un menú desplegable simple

• Establecer todas las propiedades de lista en una sola declaración-Atributo abreviado de estilo de lista

CSS de tabla

• Establecer el borde de la tabla

• Especificar el tamaño de la tabla

• Crear una mejor tabla mediante la dobladura de los bordes de tabla

• Establecer la alineación horizontal del texto dentro de la celda de tabla

• Establecer la alineación vertical del contenido

• Especificar cómo mostrar las celdas vacías

• Especificar el relleno de la celda de tabla

• Especificar el algoritmo de diseño de tabla-Automático o fijo

• Establecer la posición del título de la tabla

Fondo CSS

• Establecer el color de fondo del elemento

• Establecer la imagen como fondo del elemento

• Repetir la imagen de fondo horizontalmente o verticalmente

• Especificar la posición de la imagen de fondo

• Fondo de imagen fijo, no se desplaza con los elementos que lo contienen

• Establecer todas las propiedades de fondo a la vez-Atributo de recordatorio de fondo

• Establecer el tamaño de la imagen de fondo

• Establecer el recorte del fondo

• Establecer el punto de origen del fondo

• Añadir múltiples fondos a un elemento

Unidades CSS

• Utilizar unidades absolutas (por ejemplo, px, pt, cm, etc.)

• Utilizar unidades relativas (por ejemplo, em, ex, %, etc.)

Tamaño CSS

• Establecer el ancho y la altura del elemento

• Establecer el ancho y la altura máximos del elemento

• Establecer el ancho y la altura mínimos del elemento

• Controlar el desbordamiento

Alineación CSS

• Alinear texto e elementos incrustados en elementos de bloque

• Centrar elementos de bloque utilizando propiedades de márgenes

• Alinear elementos horizontalmente utilizando la propiedad float

• Alinear elementos en direcciones horizontal y vertical utilizando la propiedad position

• Prevenir que el padre colapse con la propiedad clear

• Crear un menú horizontal simple

Posicionamiento CSS

• Posicionar el elemento en relación a la ventana del navegador

• Posicionar el elemento en relación a su elemento padre

• Posicionar el elemento en relación a su posición normal

• Utilizar z para posicionar el elemento-Elementos superpuestos con la propiedad index

Mostrar CSS

• Ocultar el elemento utilizando la propiedad de visibilidad

• Eliminar el elemento del DOM utilizando la propiedad display

• Mostrar el elemento como un elemento flotante

• Mostrar el elemento como un elemento de bloque

• Doblar elementos de tabla

Borde y contorno CSS

• Dibujar un borde alrededor del elemento

• Dibujar un borde alrededor de los lados del elemento

• Establecer diferentes estilos para el borde

• Establecer todas las propiedades de borde a la vez-Atributo de recordatorio de borde

• Crear esquinas redondas alrededor del elemento

• Crear un borde utilizando una imagen

• Dibujar un contorno alrededor del elemento

• Dibujar un borde alrededor del elemento sin afectar a los elementos circundantes

Margen y relleno CSS

• Establecer los márgenes de los lados de un elemento

• Establecer todas las propiedades de márgenes en una sola declaración-Atributo de recordatorio de márgenes

• Establecer el relleno de los lados de un elemento

• Establecer todas las propiedades de relleno a la vez-Atributo de recordatorio de relleno

Opacidad CSS

• Establecer la transparencia de un elemento

• Efecto de volteo de imagen y transparencia

• Texto en un cuadro transparente

Contenido generado por CSS

• Especificar comillas

• Partes y categorías de numeración automática

• Utiliza CSS para insertar contenido generado

Pseudo-clases CSS

• Establecer estilos para diferentes estados de enlaces de hipertexto

• Utiliza el pseudo-clase :focus para establecer estilos en elementos de formulario con el foco

• Usar :first-El pseudo-clase child establece estilos para el primer elemento hijo

• Usar :first-Establecer estilo del último elemento hijo usando la pseudoclase child

• Usar :nth-Pseudoclase child para el nth del elemento-Establecer estilo de child

• Establecer estilos para idiomas específicos usando la pseudoclase :lang()

• Usar pseudoclases con selectores

Pseudoelemento de CSS

• Usar:: first-Letter pseudoelemento para crear efecto de下沉 de la primera letra

• Usar:: first-Line pseudoelemento para establecer la primera línea de texto de diferentes maneras

• Insertar contenido antes o después del elemento usando los pseudoelementos:: before o:: after

• Usar pseudoelementos en las clases

CSS3Gradiente

• Crear una gradiente lineal de arriba a abajo

• Crear una gradiente lineal de izquierda a derecha

• Crear una gradiente lineal en diagonal

• Establecer la dirección de la gradiente lineal usando el ángulo

• Crear una gradiente lineal usando múltiples marcadores de color

• Establecer la posición de parada del color al crear una gradiente

• Gradiente lineal repetido

• Crear gradiente radial

• Establecer la forma del gradiente radial

• Establecer el tamaño del gradiente radial

• Gradiente radial repetido

• Usar transparencia en la gradiente

CSS3Sombra

• Crear efecto de sombra de cuadro

• Agregar múltiples sombras de cuadro a la cuadro del elemento

• Crear efecto de sombra de texto

CSS3 2Transformación D

• Mover elementos usando el método translate()

• Girar elementos usando el método Rotate()

• Aumentar o disminuir el tamaño de los elementos usando el método scale()

• Aplicar el método matrix()2Transformación D

• Aplicar múltiples transformaciones a elementos

CSS3 3Transformación D

• Usar translate3Método d() para mover elementos en el espacio tridimensional

• Usar rotate3Método d() para girar elementos en el espacio tridimensional

• Usar scale3Método d() para escalar elementos en el espacio tridimensional

• Usar matrix3Aplicación del método d()3Transformación D

• Aplicar múltiples3Transformación D aplicada a elementos

CSS3Transición

• Aplicar efectos de transición al color de fondo

• Aplicar efectos de transición a múltiples propiedades

• Establecer todas las propiedades de transición a la vez-Atributo de abreviatura de transición

CSS3Animación

• Elementos animados en la página web

• Definir claveframes al crear animaciones

• Establecer todas las propiedades de animación a la vez-Atributo de abreviatura de animación

CSS3Diseño de múltiples columnas

• Crear un diseño de múltiples columnas

• Establecer el número de columnas o el ancho

• Establecer el espacio entre columnas

• Agregar reglas o líneas verticales entre columnas