Ejemplos de propiedades en CSS

martes, 24 de junio de 2014

Todos los ejemplos de css de Virtualnauta

Clasificación de los ejemplos de css por propiedades

Fondo

PropiedadesDescripciónEj
background-colorAplicar color de fondo a diferentes elementos.Ejemplo de como definir el color de fondo
background-imageUtilizar una imagen como fondo.Ejemplo de como definir una imagen de fondo
background-repeatLa imagen de fondo se repite.Ejemplo de una imagen que se repite hasta cubrir todo el fondo
background-attachmentDejar fija la imagen de fondo.Ejemplo de una imagen de fondo fija que no permite ser desplazada
background-positionUbicar una imagen en un lugar determinado.Ejemplo de como ubicar la imagen de fondo con pixels

Si deseas profundizar en el tema del uso del fondo, dirígete a CSS Fondo

Textos

PropiedadesDescripciónEj
text-indentComo dejar sangría en un texto.Ejemplo de como desplazar la primera línea de un texto
text-alignCentrar un texto.Ejemplo de como centrar un texto
text-decorationDefinir un texto tachado o subrayado.Ejemplo de un texto sin efectos
text-transformConvertir un texto a minúsculas o mayúsculas.Ejemplo de como convertir a mayúscula la primer letra de cada palabra
letter-spacingControlar el espacio entre letras.Ejemplo comparativo de como dejar espacios en blanco entre letras
word-spacingControlar el espacio entre palabras.Ejemplo comparativo de como dejar espacios en blanco entre palabras
white-spaceDefinir la ubicación del salto de línea.Ejemplo de un texto no limitado por el tamaño de la caja
colorColorear el texto a su gusto.Ejemplo de como definir el color de un texto
directionDefinir el sentido de la escritura.Ejemplo comparativo entre la escritura de izq a der o de der a izq

Si deseas profundizar en el tema de textos, dirígete a CSS Textos

Fuentes

PropiedadesDescripciónEj
font-familyDefinir un tipo de fuente.Ejemplo del uso de una familia de fuentes
font-styleEscribir en itálica.Ejemplo del uso de los diferentes estilos de fuentes
font-variantVariar la fuente a mayúsculas más pequeñas.Ejemplo comparativo de como convertir minúsculas a pequeñas mayúsculas
font-weightComo darle intensidad a la fuente.Ejemplo comparativo de todas las intensidades de las fuentes
font-sizeDefinir el tamaño de la fuente.Ejemplo comparativo de todos los tamaños que se pueden aplicar a las fuentes

Si deseas profundizar en el tema de fuentes, dirígete a CSS Fuentes

Bordes

PropiedadesDescripciónEj
border-widthEstablecer el ancho del borde del elemento.Ejemplo de bordes con diferetes espesores
border-colorColorear el borde.Ejemplo de bordes de diferetes colores
border-styleUso de bordes ocultos.Ejemplo de bordes ocultos
Uso de bordes punteados.Ejemplo de bordes punteados
Uso de bordes a rayas.Ejemplo de bordes a rayas
Uso de bordes solidos.Ejemplo de bordes solidos
Uso de bordes dobles.Ejemplo de bordes dobles
Uso de bordes sombreados.Ejemplo de bordes acanalados
Uso de bordes en relieve.Ejemplo de bordes en relieve
Uso de bordes en recuadro.Ejemplo de bordes en recuadro
Uso de bordes resaltados.Ejemplo de bordes resaltados

Si deseas profundizar en el tema de bordes, dirígete a CSS Bordes

Márgenes

PropiedadesDescripciónEj
marginComo dejar un márgen alrededor de un elemento con medidas.Ejemplo de como definir el ancho de un margen en pixels
marginComo dejar un márgen alrededor de un elemento con porcentajes.Ejemplo de como definir el ancho de un margen en porcentajes

Si deseas profundizar en el tema de márgenes, dirígete a CSS Márgenes

Relleno - Padding

PropiedadesDescripciónEj
paddingComo controlar el relleno que hay entre el borde y el contenido.Ejemplo de como definir el ancho del padding

Si deseas profundizar en el tema del relleno, dirígete a CSS Relleno

Listas

PropiedadesDescripciónEj
list-style-typeAplicar diferentes marcadores a los Ítems de una lista desordenada.Ejemplo de marcadores de lista disco, círculo y cuadrado
Aplicar números decimales y números romanos en listas ordenadas.Ejemplo de marcadores de lista decimal, decimal comenzando de 0, número romano en mayúscula y minúscula
Aplicar letras, números y blancos para listas ordenadas.Ejemplo de marcadores de lista con letras gregorianas, alfabeto en minúscula y mayúscula

Si deseas profundizar en el tema de listas, dirígete a CSS Listas

Tablas

PropiedadesDescripciónEj
table-layoutComo controlar el tamaño de las celdas de una tabla.Ejemplo del formato de celdas ajustadas automaticamente frente a uno fijo
border-collapseDefinir un borde separado o un borde de una línea fina en una tabla.Ejemplo comparativo entre un estilo de borde plegado y otro separado

Si deseas profundizar en el tema de tablas, dirígete a CSS Tablas

Dimensiones

PropiedadesDescripciónEj
widthDefina el ancho de un párrafo a su gusto.Ejemplo de como determinar el ancho de un elemento en pixels
min-widthDefina un ancho mínimo para un párrafo.Ejemplo de como determinar el ancho mínimo de un elemento en pixels
max-widthComo definir un ancho máximo para un párrafo.Ejemplo de como determinar el ancho máximo de un elemento en pixels
heightComo establecer la altura de un elemento.Ejemplo de como definir la altura de un elemento en pixels
min-heightDefina una altura mínimo para un elemento.Ejemplo de como definir la altura mínima de un elemento en pixels
max-heightDefina una altura máxima para un párrafo.Ejemplo de como definir la altura máxima de un elemento en pixels
line-heightDeclare una separación entre líneas.Ejemplo de como definir una distancia entre líneas de un mismo párrafo

Si deseas profundizar en el tema de las dimensiones, dirígete a CSS Dimensiones

Efectos visuales

PropiedadesDescripciónEj
overflowInsertar una barra de desplazamiento en caso que el contenido sea superior a la caja que lo contieneEjemplo que agrega una barra de desplazamiento para poder ver todo el contenido de la caja
clipMostrar parte de una imagenEjemplo de como especificar los bordes de una región visible
displayComo convertir diferentes elementos en Ítems de una listaEjemplo de una lista formada con los elementos p, span, y div
visibilityMostrar u ocultar un textoEjemplo de como visualizar u ocultar un título

Si deseas profundizar en el tema de los efectos, dirígete a CSS Efectos Visuales

Ubicación

PropiedadesDescripciónEj
positionPosiciona un elemento dentro de la página por medio del método estáticoEjemplo que demuestra que el valor static no afecta la posición de un elemento
Por medio del método relativoEjemplo que muestra como ubicar un elemento relativamente de su posición normal
Por medio del método absolutoEjemplo que ubica un elemento de forma absoluta a la página
Por medio del método fijoEjemplo que ubica un elemento de forma fija en la página
top
right
bottom
left		Ubicar un elemento por medio de estas propiedades.Ejemplo que utiliza diferentes unidades para ubicar un elemento
floatPosicionamiento flotante a la izquierda.Ejemplo de como ubicar un elemento de forma flotante a la izquierda
Posicionamiento flotante a la derechaEjemplo de como ubicar un elemento de forma flotante a la derecha
clearNo permite elementos flotantes a la izquierda.Ejemplo que no permite ubicar elementos flotantes a la izquierda del mismo
No permite elementos flotantes a ambos ladosEjemplo que no permite ubicar elementos flotantes a ambos lados del mismo
vertical-alignAlineación vertical del texto : Línea de referencia.Ejemplo que alínea verticalmente un elemento con el valor baseline
Por debajoEjemplo que alínea verticalmente un elemento con el valor sub
Por arribaEjemplo que alínea verticalmente un elemento con el valor super
Por encimaEjemplo que alínea verticalmente un elemento por la parte superior de otro
Texto superiorEjemplo que alínea verticalmente un texto en la parte superior de otro elemento
MedioEjemplo que alínea verticalmente un elemento por el medio de otro
InferiorEjemplo que alínea verticalmente un elemento por la parte inferior de otro
Texto inferiorEjemplo que alínea verticalmente un texto en la parte inferior de otro elemento
LongitudEjemplo que alínea verticalmente un elemento por medio de un valor en pixels
PorcentajeEjemplo que alínea verticalmente un elemento por medio de un valor en porcentajes
z-indexUbica una imagen en una capa inferior al texto.Ejemplo que posiciona una capa a un nivel más bajo que el texto

Si deseas profundizar en el tema de las ubicaciones, dirígete a CSS Ubicación

Contenido y Numeración Automática

PropiedadesDescripciónEj
contentAgregar un contenido junto con los pseudo elementos ":after y :before"Ejemplo de como insertar una imagen antes de un elemento

Si deseas profundizar en el tema de los contenidos y la numeración automática, dirígete a CSS Contenido y Numeración Automática

Pseudo Class

PropiedadesDescripciónEj
:linkDefine el color de un enlace que aún no ha sido visitadoEjemplo de como definir el color de un enlace no visitado
:visitedDefine el color de un enlace que ya ha sido visitadoEjemplo de como definir el color de un enlace visitado
:activeComportamiento del color de un enlace mientras se esta presionandoEjemplo de como definir el color de un enlace que está siendo presionado
:hoverComportamiento del color de un enlace al pasar el cursor sobre élEjemplo de como definir el color de un enlace cuando el cursor pasa por encima
:focusHacer foco en un enlaceEjemplo de como cambiar el color de fondo de un enlace cuando se hace foco sobre él
:langEspecificar el lenguaje usado en el elementoEjemplo de como definir dos tipos de comillas por medio de :lang

Si deseas profundizar en el tema de las pseudo clases, dirígete a CSS Pseudo Class

Pseudo Element

PropiedadesDescripciónEj
:first-lineCambios en la primera línea de un textoEjemplo que afecta a la primer línea de un texto
:first-letterCambios en la primera letra de un textoEjemplo que afecta a la primer letra de un texto
:beforeInserta un contenido antes del elementoEjemplo de como insertar una imagen antes de un elemento
:afterInserta un contenido después del elementoEjemplo que inserta un gráfico después de un texto

Si deseas profundizar en el tema de los pseudo elementos, dirígete a CSS Pseudo Element