sintaxis CSS
El selector de elementos
El selector de ID
El selector de clase (para todos los elementos)
El selector de clase (por solo <p> elementos)
La agrupación de selectores
Fondos de CSS
Ajuste el color de fondo de una página
Ajuste el color de fondo de diferentes elementos
Permite establecer una imagen como fondo de una página
Cómo repetir una imagen de fondo sólo en horizontal
Cómo posicionar una imagen de fondo
Una imagen de fondo fijo (esta imagen no se desplazará con el resto de la página)
Todas las propiedades de fondo en una declaración
Ejemplo antecedente avanzada
Las propiedades del fondo explicados
CSS Fronteras
Ajuste el ancho de los cuatro bordes
Ajuste el ancho del borde superior
Ajuste el ancho del borde inferior
Ajuste el ancho del borde izquierdo
Ajuste el ancho del borde derecho
Establecer el estilo de los cuatro bordes
Ajuste el estilo del borde superior
Ajuste el estilo del borde inferior
Ajuste el estilo del borde izquierdo
Establecer el estilo del borde derecho
Ajuste el color de los cuatro bordes
Establecer el color del borde superior
Ajuste el color del borde inferior
Establecer el color del borde izquierdo
Establecer el color del borde derecho
Todas las propiedades de borde en una declaración
Establecer diferentes en cada lado de las fronteras
Todas las propiedades del borde superior en una declaración
Todas las propiedades de los bordes inferiores de una declaración
Todas las propiedades del borde izquierdo en una declaración
Todas las propiedades del borde derecho en una declaración
Propiedades del borde explican
márgenes CSS
Especificar diferentes márgenes para cada lado de un elemento
Que el margen izquierdo se hereda del elemento padre
La propiedad margin abreviada
Ajuste automático de margen para centrar el elemento en su contenedor
Explican las propiedades del margen
Relleno CSS
Establecer el relleno izquierdo de un elemento
Ajuste el relleno derecho de un elemento
Ajuste el relleno superior de un elemento
Establecer el relleno inferior de un elemento
Todas las propiedades de relleno en una declaración
Propiedades de relleno explican
Texto CSS
Ajuste el color del texto de los diferentes elementos
Alinear el texto
Retire la línea debajo de enlaces
Decorar el texto
Controlar las letras en un texto
texto del guión
Especificar el espacio entre caracteres
Especificar el espacio entre líneas
Ajuste la dirección del texto de un elemento
Aumentar el espacio en blanco entre las palabras
Desactivar el ajuste de texto dentro de un elemento
La alineación vertical de una imagen dentro del texto
Fuentes CSS
Establecer la fuente de un texto
Ajuste el tamaño de la fuente
Establecer el tamaño de la fuente en píxeles
Establecer el tamaño de la fuente en el em
Ajuste el tamaño de la fuente en porcentaje y em
Ajuste el estilo de la fuente
Establecer la variante de la fuente
Establecer la constancia de la fuente
Todas las propiedades de la fuente en una declaración
Propiedades de fuentes explicaron
Enlaces CSS
Añadir diferentes colores para los enlaces visitados / no visitados
El uso de text-decoration en los enlaces
Especificar un color de fondo para los enlaces
Añadir otros estilos de hipervínculos
Avanzada - Crear cajas de conexiones
Avanzada - Crear cajas de conexiones con las fronteras
Propiedades del vínculo explican
Listas CSS
Todos los diferentes marcadores de elementos de lista en las listas
Establecer una imagen como el marcador de ítems de lista
Colocar el marcador de ítems de lista
Todas las propiedades de la lista en una declaración
Listas de estilo con colores
De ancho completo bordeado lista
Propiedades de la lista explican
Tablas CSS
Especificar un borde negro de la tabla, los elementos TH y TD
El uso de border-collapse
Solo borde alrededor de la mesa
Especificar el ancho y la altura de una mesa
Establecer la alineación horizontal del contenido (texto-align)
Establecer la alineación vertical del contenido (vertical-align)
Especificar el relleno de los elementos th y td
divisores horizontales
tabla Hoverable
mesas de rayas
Especificar el color de los bordes de la tabla
Ajuste la posición de la leyenda de la tabla
Tabla sensible
Crear una tabla de fantasía
Propiedades de las tablas explican
Modelo de cuadro de CSS
Especificar un elemento con un ancho total de 250 píxeles
Esquema CSS
Trazar una línea alrededor de un elemento (contorno)
Establecer el estilo de un esquema
Establecer el color de un esquema
Establecer el ancho de un esquema
Propiedades del contorno explican
CSS Dimensión
Ajuste la altura y el ancho de un elemento
Ajuste de ancho máximo de un elemento
Ajuste la altura y la anchura de los diferentes elementos
Ajuste la altura y la anchura de una imagen usando ciento
Establecer min-width y max-ancho de un elemento
Conjunto min-max-altura y la altura de un elemento
Propiedades de dimensión explican
CSS visualización
Cómo ocultar un elemento (visibility:hidden)
Cómo no mostrar un elemento (display:none)
Cómo mostrar un elemento en bloque como un elemento en línea
Cómo mostrar un elemento en línea como un elemento en bloque
Cómo utilizar CSS junto con JavaScript para mostrar el contenido oculto
Explican las propiedades de pantalla
Posicionamiento CSS
Coloque un elemento con relación a la ventana del navegador
Posicionar un elemento con respecto a su posición normal
Coloque un elemento con un valor absoluto
elementos superpuestos
Establecer la forma de un elemento
Cómo crear una barra de desplazamiento cuando el contenido de un elemento es demasiado grande para caber
Cómo configurar el navegador para manejar automáticamente desbordamiento
Ajuste el borde superior de una imagen con un valor de píxeles
Ajuste el borde inferior de una imagen con un valor de píxeles
Ajuste el borde izquierdo de una imagen con un valor de píxeles
Ajuste el borde derecho de una imagen utilizando un valor de píxel
Cambiar el cursor de texto de la imagen Posición (esquina superior izquierda)
Texto de la imagen Posición (esquina superior derecha)
Texto de la imagen de posición (ángulo inferior izquierdo)
Texto de la imagen Posición (esquina inferior derecha)
Texto de la imagen posición (centrado)
Explican las propiedades de posición
flotante CSS
Un simple uso de la propiedad float
Una imagen con la frontera y márgenes que flota hacia la derecha en un párrafo
Una imagen con una leyenda que flota hacia la derecha
Deje que la primera letra de un flotador párrafo a la izquierda
Crear una galería de imágenes con la propiedad float
Desactivación de flotación (con la propiedad clara)
Creación de un menú horizontal
La creación de una página web sin tablas
Propiedades de flotación explican
Alinear elementos CSS
Centro de la alineación con el margen
Izquierda / Derecha alineación con la posición
Izquierda / Derecha alineación con la posición - solución Crossbrowser
Izquierda / Derecha alineación con el flotador
Izquierda / Derecha alinear con el flotador - solución Crossbrowser
Alinear las propiedades explicadas
CSS combinadores
selector de descendiente
selector de hijo
Selector de hermanos adyacentes
Selector general del hermano
Selectores Combinator explican
Contenido generado por CSS
Introduzca la URL entre paréntesis después de cada vínculo con la propiedad de contenido
Numeración de las secciones y subsecciones con "Section 1", "1.1", "1.2" , etc.
Especificar las comillas con la propiedad citas
CSS pseudo-clases
Añadir diferentes colores a un hipervínculo
Añadir otros estilos de hipervínculos
El uso de: enfoque
:first-child - coincide con el primer elemento p
:first-child - coincide con el primer elemento i en todos los elementos p
:first-child - Relacionar todos los i elementos en todos los elementos p primer hijo
Utilice de :lang
CSS pseudo-elementos
Hacer la primera carta especial en un texto
Hacer la primera línea especial en un texto
Hacer la primera letra y la primera línea especial
Uso: antes de insertar algún contenido antes de un elemento
Uso: después de insertar algún contenido después de un elemento
Barras de navegación CSS
Totalmente de estilo barra de navegación vertical
Totalmente de estilo barra de navegación horizontal
Las barras de navegación explican
CSS Menús desplegables
texto desplegable
Menú desplegable
Menú desplegable alineado a la derecha,
imagen desplegable
Barra de navegación desplegable
La información sobre herramientas CSS
información sobre herramientas derecha
información sobre herramientas a la izquierda
Top información sobre herramientas
información sobre herramientas inferior
Información sobre la herramienta con la flecha
información sobre herramientas de animación
La información sobre herramientas explicadas
Galería CSS Imagen
Galería de imágenes
Galería de imágenes sensible
CSS opacidad de la imagen
La creación de imágenes transparentes - efecto del ratón
Creación de una caja transparente con el texto en una imagen de fondo
Sprites CSS Imagen
Un objeto Sprite imagen
Un sprite de imagen - un listado de navegación
Un sprite de imagen con efecto hover
CSS selectores de atributos
Selecciona todos los <a> elementos con un atributo de destino
Selecciona todos los <a> elementos con a = "_ blank" atributo de destino
Selecciona todos los elementos con un atributo de título que contiene una lista separada por espacios de palabras, uno de los cuales es "flor"
Selecciona todos los elementos con un valor de atributo de clase que comienza con "top" (debe ser la palabra completa)
Selecciona todos los elementos con un valor de atributo de clase que comienza con "top" (no debe ser palabra completa)
Selecciona todos los elementos con un valor de atributo de clase que termina con "test"
Selecciona todos los elementos con un valor de atributo de clase que contiene "te"
Selectores de atributos explican
Formas CSS
Campo de entrada de ancho completo
Campo de entrada acolchada
Campo de entrada bordeado
Campo de entrada con borde inferior
Campos de entrada de color
Campos de entrada enfocadas
2 campos de entrada se centraron
Entrada icono / imagen con
Entrada de búsqueda de animación
áreas de texto de estilo
El estilo de menús selectos
El estilo de los botones de entrada
Los contadores de CSS
Crear un contador
Contadores anidados 1
Contadores anidados 2
CSS3 esquinas redondeadas
Añadir esquinas redondeadas a los elementos
Alrededor de cada esquina por separado
Crear esquinas elípticas
Esquinas redondeadas CSS3 explican
Imágenes CSS3 Frontera
Crear un borde de la imagen alrededor de un elemento, usando la palabra clave ronda
Crear un borde de la imagen alrededor de un elemento, usando la palabra clave estiramiento
Borde de la imagen - Diferentes valores rebanada
Imágenes fronterizas CSS3 explican
Fondos de CSS3
Añadir varias imágenes de fondo para un elemento
Especificar el tamaño de una imagen de fondo
Escalar una imagen de fondo usando "contener" y "cubierta"
Definir tamaños de múltiples imágenes de fondo
Imagen de fondo de tamaño completo (llenar completamente el área de contenido)
El uso del fondo origen para especificar dónde la imagen de fondo se posiciona
Utilice fondo-clip para especificar el área de la pintura del fondo
Los gradientes CSS3
Gradiente Lineal - arriba a abajo
Gradiente Lineal - de izquierda a derecha
Gradiente Lineal - diagonal
Gradiente lineal - con un ángulo especificado
Gradiente Lineal - con múltiples etapas de color
Gradiente Lineal - color de un + texto del arco iris
Gradiente lineal - con la transparencia
Gradiente Lineal - un gradiente lineal de repetición
Degradado radial - paradas de color uniformemente espaciadas
Degradado radial - paradas de color diferente espaciados
Degradado radial - shape
Degradado radial - diferentes palabras clave de tamaño
Degradado radial - un degradado radial de repetición
Efectos de sombra CSS3
Efecto simple sombra
Añadir un color a la sombra
Añadir un efecto de desenfoque a la sombra
El texto blanco con la sombra negro
Un resplandor de neón rojo sombra
Un resplandor sombra de neón rojo y azul
El texto blanco con la sombra negro, azul y azul marino
Añadir una simple caja-sombra a un elemento
Añadir color a la caja-sombra
Añadir color y efecto borroso al box-shadow
Crea tarjetas similares al papel (texto)
Crea tarjetas de papel-como (imágenes polaroid)
CSS3 explican los efectos de sombra
Texto CSS3
Especificar cómo oculto, el contenido desbordado debe ser señalada al usuario
Cómo visualizar el contenido desbordado cuando se ciernen sobre el elemento
Permitir que las palabras largas para poder ser roto y se envuelven en la línea siguiente
Especificar reglas de división de líneas
CSS3 Fuentes
Use sus "propios" fuentes en @font-face regla
Use sus "propios" fuentes en @font-face regla (negrita)
Transforma CSS3 2D
translate() - mover un elemento desde su posición actual
rotate() - girar un elemento hacia la derecha
rotate() - rotar un elemento en sentido antihorario
scale() - aumentar un elemento
scale() - disminuir un elemento
skewX() - sesga un elemento a lo largo del eje X
skewY() - sesga un elemento a lo largo del eje Y
skew() - sesga un elemento a lo largo del X y del eje Y
matrix() - rotar, escalar, mover, y el sesgado un elemento
CSS3 Transformaciones 3D
rotateX() - rotar un elemento en torno a su eje X en un determinado grado
rotateY() - rotar un elemento en torno a su eje en un grado dado
rotateZ() - rotar un elemento en torno a su eje Z en un determinado grado
Las transiciones CSS3
Ancho de la modificación de un elemento - Transición
Transición - ancho de la modificación y la altura de un elemento
Especificar diferentes curvas de velocidad para una transición
Especificar un retardo para un efecto de transición
Añadir una transformación a un efecto de transición
Especificar todas las propiedades de transición en una propiedad abreviada
Las animaciones CSS3
Obligar a una animación a un elemento
Animación - el cambio de color de fondo de un elemento
Animación - el cambio de color de fondo y la posición de un elemento
Retrasar una animación
Ejecutar la animación 3 veces antes de que se detenga
Ejecutar la animación para siempre
Animación girar en sentido inverso
Animación funcionar en ciclos alternos
Curvas de velocidad para animaciones
Animación propiedad abreviada
Imágenes de CSS3
imagen redondeada
imagen de un círculo
Imagen en miniatura
Imagen en miniatura como enlace
imagen sensible
Texto de la imagen (esquina superior izquierda)
Texto de la imagen (esquina superior derecha)
Texto de la imagen (abajo a la esquina izquierda)
Texto de la imagen (esquina inferior derecha)
Texto de la imagen (centrado)
imágenes de Polaroid
Filtro de imágenes en escala de grises
Avanzada de imágenes - modal con CSS y JavaScript
CSS3 Botones
Botones básicos de CSS
colores de los botones
tamaños de botón
botones redondeados
Fronteras botón de color
botones Hoverable
botones de sombra
botones de movilidad
ancho del botón
grupos de botones
Grupo de botones bordeado
Botón animado (Hover Efecto)
Botón de animación (efecto dominó)
Botón de animación (Presionado Efecto)
CSS3 paginación
paginación simple
Paginación activa y hoverable
Redondeada de paginación activo y hoverable
Efecto de transición Hoverable
Limita la paginación
La paginación con borde redondeado
La paginación con el espacio entre los enlaces
tamaño de la paginación
La paginación con el espacio entre los enlaces
paginación centrada
Migas de pan
CSS3 varias columnas
Crear varias columnas
Especificar la distancia entre columnas
Especificar el estilo de la regla entre columnas
Especificar el ancho de la regla entre columnas
Especificar el color de la regla entre columnas
Especificar el ancho, estilo y color de la regla entre columnas
Especificar el número de columnas de un elemento debe extenderse a lo largo
Especificar una sugerido, el ancho óptimo para las columnas
Interfaz de usuario CSS3
Permite que un usuario cambie el tamaño del ancho de un elemento
Permite que un usuario cambiar el tamaño de la altura de un elemento
Permite que un usuario cambiar el tamaño de la anchura y la altura de un elemento
Añadir espacio entre un esquema y el borde de un elemento
Interfaz de usuario CSS3 explicó
CSS3 caja de medición
Ancho de elementos sin la caja-dimensionamiento
Anchura de los elementos con forma de caja de tamaño
Los elementos de formulario + Caja de dimensionamiento
CSS3 Flexbox
Flexbox con tres elementos flexibles
Flexbox con tres elementos de flexión - dirección RTL
flex-dirección - fila inversa
flex-dirección - la columna
flex-dirección - columna inversa
justificar el contenido - flex-end
justificar el contenido - Centro
justificar el contenido - el espacio intermedio
justificar el contenido - espacio alrededor
alinear-artículos - tramo
alinear-artículos - flex-inicio
alinear-artículos - flex-end
alinear-artículos - centro
alinear-elementos - la línea de base
flex-wrap - nowrap
flex-wrap - envoltura
flex-wrap - wrap-inversa
alinear-contenido - Centro
Ordenar los elementos flexibles
Margin-right: auto;
Margen: auto; = Centrado perfecto
alinear-auto en los elementos flexibles
Especificar la longitud del elemento de flexión, en relación con el resto de los elementos de flexión
Crear un sitio web que responde con Flexbox
CSS3 Consultas de medios
Cambiar el color de fondo de verde claro si la ventana es 480px de ancho o mayor
Mostrar un menú que flote a la izquierda de la página, si la ventana es 480px de ancho o mayor
CSS3 preguntas de los medios explicados
CSS3 preguntas de los medios - Más ejemplos
La página HTML
Ancho de 520 a 699px - Aplicar un icono de correo electrónico a cada enlace
Ancho de 700 a 1000 píxeles - Prefacio los vínculos con un texto
Anchura por encima de 1001PX - Aplicar dirección de correo electrónico a los enlaces
Anchura por encima de 1151px - Añadir icono ya que utilizamos antes
Utilice la lista de enlaces de correo electrónico en una barra lateral en una página web
Medios CSS3 consulta ejemplos explicados