Los últimos tutoriales de desarrollo web
×

CSS Tutorial

CSS CASA CSS Introducción CSS Sintaxis CSS Cómo CSS Colores CSS Antecedentes CSS Fronteras CSS márgenes CSS Relleno CSS Anchura altura CSS Texto CSS Fuentes CSS Campo de golf CSS lista CSS mesa CSS Modelo de cuadro esquema CSS CSS visualización CSS Anchura máxima Posición CSS CSS Flotador CSS Inline-block CSS Alinear CSS combinadores CSS Pseudo-clase CSS Pseudo-elemento CSS Barra de navegación CSS Menús desplegables CSS La información sobre herramientas CSS galería de imágenes CSS Opacidad imagen CSS Sprites de imagen CSS Attr selectores Formas CSS CSS contadores

CSS3

CSS3 Introducción CSS3 Esquinas redondeadas CSS3 Imágenes de frontera CSS3 Antecedentes CSS3 Colores CSS3 gradientes CSS3 Oscuridad CSS3 Texto CSS3 Fuentes CSS3 Transformaciones 2D CSS3 Transformaciones 3D CSS3 transiciones CSS3 animaciones CSS3 imágenes CSS3 Botones CSS3 Paginación CSS3 varias columnas CSS3 Interfaz de usuario CSS3 caja de medición CSS3 Flexbox CSS3 consultas de medios CSS3 Ejemplos MQ

CSS Diseño web adaptable

Diseño web adaptable Introducción Diseño web adaptable ventana Diseño web adaptable Vista en cuadrícula Diseño web adaptable consultas de medios Diseño web adaptable imágenes Diseño web adaptable vídeos Diseño web adaptable marcos

CSS Examples

CSS Ejemplos CSS Examen CSS Certificado

CSS References

CSS Referencia CSS selectores CSS funciones CSS referencia Aural CSS Web Safe Fuentes CSS animatable CSS Unidades CSS PX-EM Convertidor CSS Colores CSS Los valores de color CSS Los nombres de color CSS3 Soporte para el navegador

 

CSS Ejemplos


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

La sintaxis CSS explicó


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

Propiedades de texto explican


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

Modelo de caja explicó


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

Las pseudo-clases explicadas


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

Pseudo-elementos explicados


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

Menús desplegables explican


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

Galería de imágenes explicó


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

Opacidad de la imagen explicó


Sprites CSS Imagen

Un objeto Sprite imagen
Un sprite de imagen - un listado de navegación
Un sprite de imagen con efecto hover

Sprites imagen explican


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

formas explicadas


Los contadores de CSS

Crear un contador
Contadores anidados 1
Contadores anidados 2

contadores explican


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

CSS3 antecedentes explican


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

Gradientes CSS3 explican


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

Texto CSS3 explicó


CSS3 Fuentes

Use sus "propios" fuentes en @font-face regla
Use sus "propios" fuentes en @font-face regla (negrita)

CSS3 explican fuentes


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 2D transforma explicó


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

CSS3 3D transforma explicó


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

Transiciones CSS3 explican


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

Animaciones CSS3 explican


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 Imágenes explican


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 botones que se explican


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 paginación explicó


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

CSS3 varias columnas explican


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

Caja de CSS3 apresto explicó


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 Flexbox explicó


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