Virtualnauta
Sea protagonista de la Web

Virtualnauta > Tutorial CSS > Ejemplos

CSS

Básico

CSS Home
CSS Introducción
CSS Sintaxis
CSS Su uso
CSS Fondo
CSS Texto
CSS Fuente
CSS Bordes
CSS Contorno
CSS Margen
CSS Padding
CSS Lista
CSS Tablas

Avanzado

CSS Dimensiones
CSS Efectos Visuales
CSS Ubicación
CSS Contenido/Numerac.
CSS Pseudo Class
CSS Pseudo Element
CSS Tipos de Medios

Ejemplos y Examen

CSS Ejemplos
CSS Examen

Guías de referencia

CSS Guía de Referencia
CSS Colores
CSS Código de Colores

Ejemplos de CSS


<<< Tipos de Medios Examen de CSS >>>

Todos los ejemplos de css de Virtualnauta

Clasificación de los ejemplos de css por propiedades


Fondo

Propiedades Descripción Ej
background-color Aplicar color de fondo a diferentes elementos. Ejemplo de como definir el color de fondo
background-image Utilizar una imagen como fondo. Ejemplo de como definir una imagen de fondo
background-repeat La imagen de fondo se repite. Ejemplo de una imagen que se repite hasta cubrir todo el fondo
background-attachment Dejar fija la imagen de fondo. Ejemplo de una imagen de fondo fija que no permite ser desplazada
background-position Ubicar una imagen en un lugar determinado. Ejemplo de como ubicar la imagen de fondo con pixels

Si desea profundizar en el tema del uso del fondo, dirijase a CSS Fondo


Textos

Propiedades Descripción Ej
text-indent Como dejar sangría en un texto. Ejemplo de como desplazar la primera línea de un texto
text-align Centrar un texto. Ejemplo de como centrar un texto
text-decoration Definir un texto tachado o subrayado. Ejemplo de un texto sin efectos
text-transform Convertir un texto a minúsculas o mayúsculas. Ejemplo de como convertir a mayúscula la primer letra de cada palabra
letter-spacing Controlar el espacio entre letras. Ejemplo comparativo de como dejar espacios en blanco entre letras
word-spacing Controlar el espacio entre palabras. Ejemplo comparativo de como dejar espacios en blanco entre palabras
white-space Definir la ubicación del salto de línea. Ejemplo de un texto no limitado por el tamaño de la caja
color Colorear el texto a su gusto. Ejemplo de como definir el color de un texto
direction Definir el sentido de la escritura. Ejemplo comparativo entre la escritura de izq a der o de der a izq

Si desea profundizar en el tema de textos, dirijase a CSS Textos


Fuentes

Propiedades Descripción Ej
font-family Definir un tipo de fuente. Ejemplo del uso de una familia de fuentes
font-style Escribir en itálica. Ejemplo del uso de los diferentes estilos de fuentes
font-variant Variar la fuente a mayúsculas más pequeñas. Ejemplo comparativo de como convertir minúsculas a pequeñas mayúsculas
font-weight Como darle intensidad a la fuente. Ejemplo comparativo de todas las intensidades de las fuentes
font-size Definir el tamaño de la fuente. Ejemplo comparativo de todos los tamaños que se pueden aplicar a las fuentes

Si desea profundizar en el tema de fuentes, dirijase a CSS Fuentes


Bordes

Propiedades Descripción Ej
border-width Establecer el ancho del borde del elemento. Ejemplo de bordes con diferetes espesores
border-color Colorear el borde. Ejemplo de bordes de diferetes colores
border-style Uso 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 desea profundizar en el tema de bordes, dirijase a CSS Bordes



Márgenes

Propiedades Descripción Ej
margin Como dejar un márgen alrededor de un elemento con medidas. Ejemplo de como definir el ancho de un margen en pixels
margin Como dejar un márgen alrededor de un elemento con porcentajes. Ejemplo de como definir el ancho de un margen en porcentajes

Si desea profundizar en el tema de márgenes, dirijase a CSS Márgenes


Relleno - Padding

Propiedades Descripción Ej
padding Como controlar el relleno que hay entre el borde y el contenido. Ejemplo de como definir el ancho del padding

Si desea profundizar en el tema del relleno, dirijase a CSS Relleno


Listas

Propiedades Descripción Ej
list-style-type Aplicar 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 desea profundizar en el tema de listas, dirijase a CSS Listas


Tablas

Propiedades Descripción Ej
table-layout Como controlar el tamaño de las celdas de una tabla. Ejemplo del formato de celdas ajustadas automaticamente frente a uno fijo
border-collapse Definir 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 desea profundizar en el tema de tablas, dirijase a CSS Tablas


Dimensiones

Propiedades Descripción Ej
width Defina el ancho de un párrafo a su gusto. Ejemplo de como determinar el ancho de un elemento en pixels
min-width Defina un ancho mínimo para un párrafo. Ejemplo de como determinar el ancho mínimo de un elemento en pixels
max-width Como definir un ancho máximo para un párrafo. Ejemplo de como determinar el ancho máximo de un elemento en pixels
height Como establecer la altura de un elemento. Ejemplo de como definir la altura de un elemento en pixels
min-height Defina una altura mínimo para un elemento. Ejemplo de como definir la altura mínima de un elemento en pixels
max-height Defina una altura máxima para un párrafo. Ejemplo de como definir la altura máxima de un elemento en pixels
line-height Declare una separación entre líneas. Ejemplo de como definir una distancia entre líneas de un mismo párrafo

Si desea profundizar en el tema de las dimensiones, dirijase a CSS Dimensiones


Efectos visuales

Propiedades Descripción Ej
overflow Insertar una barra de desplazamiento en caso que el contenido sea superior a la caja que lo contiene Ejemplo que agrega una barra de desplazamiento para poder ver todo el contenido de la caja
clip Mostrar parte de una imagen Ejemplo de como especificar los bordes de una región visible
display Como convertir diferentes elementos en Ítems de una lista Ejemplo de una lista formada con los elementos p, span, y div
visibility Mostrar u ocultar un texto Ejemplo de como visualizar u ocultar un título

Si desea profundizar en el tema de los efectos, dirijase a CSS Efectos Visuales


Ubicación

Propiedades Descripción Ej
position Posiciona un elemento dentro de la página por medio del método estático Ejemplo que demuestra que el valor static no afecta la posición de un elemento
Por medio del método relativo Ejemplo que muestra como ubicar un elemento relativamente de su posición normal
Por medio del método absoluto Ejemplo que ubica un elemento de forma absoluta a la página
Por medio del método fijo Ejemplo 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
float Posicionamiento flotante a la izquierda. Ejemplo de como ubicar un elemento de forma flotante a la izquierda
Posicionamiento flotante a la derecha Ejemplo de como ubicar un elemento de forma flotante a la derecha
clear No permite elementos flotantes a la izquierda. Ejemplo que no permite ubicar elementos flotantes a la izquierda del mismo
No permite elementos flotantes a ambos lados Ejemplo que no permite ubicar elementos flotantes a ambos lados del mismo
vertical-align Alineación vertical del texto : Línea de referencia. Ejemplo que alínea verticalmente un elemento con el valor baseline
Por debajo Ejemplo que alínea verticalmente un elemento con el valor sub
Por arriba Ejemplo que alínea verticalmente un elemento con el valor super
Por encima Ejemplo que alínea verticalmente un elemento por la parte superior de otro
Texto superior Ejemplo que alínea verticalmente un texto en la parte superior de otro elemento
Medio Ejemplo que alínea verticalmente un elemento por el medio de otro
Inferior Ejemplo que alínea verticalmente un elemento por la parte inferior de otro
Texto inferior Ejemplo que alínea verticalmente un texto en la parte inferior de otro elemento
Longitud Ejemplo que alínea verticalmente un elemento por medio de un valor en pixels
Porcentaje Ejemplo que alínea verticalmente un elemento por medio de un valor en porcentajes
z-index Ubica una imagen en una capa inferior al texto. Ejemplo que posiciona una capa a un nivel más bajo que el texto

Si desea profundizar en el tema de las ubicaciones, dirijase a CSS Ubicación


Contenido y Numeración Automática

Propiedades Descripción Ej
content Agregar un contenido junto con los pseudo elementos ":after y :before" Ejemplo de como insertar una imagen antes de un elemento

Si desea profundizar en el tema de los contenidos y la numeración automática, dirijase a CSS Contenido y Numeración Automática


Pseudo Class

Propiedades Descripción Ej
:link Define el color de un enlace que aún no ha sido visitado Ejemplo de como definir el color de un enlace no visitado
:visited Define el color de un enlace que ya ha sido visitado Ejemplo de como definir el color de un enlace visitado
:active Comportamiento del color de un enlace mientras se esta presionando Ejemplo de como definir el color de un enlace que está siendo presionado
:hover Comportamiento del color de un enlace al pasar el cursor sobre él Ejemplo de como definir el color de un enlace cuando el cursor pasa por encima
:focus Hacer foco en un enlace Ejemplo de como cambiar el color de fondo de un enlace cuando se hace foco sobre él
:lang Especificar el lenguaje usado en el elemento Ejemplo de como definir dos tipos de comillas por medio de :lang

Si desea profundizar en el tema de las pseudo clases, dirijase a CSS Pseudo Class


Pseudo Element

Propiedades Descripción Ej
:first-line Cambios en la primera línea de un texto Ejemplo que afecta a la primer línea de un texto
:first-letter Cambios en la primera letra de un texto Ejemplo que afecta a la primer letra de un texto
:before Inserta un contenido antes del elemento Ejemplo de como insertar una imagen antes de un elemento
:after Inserta un contenido después del elemento Ejemplo que inserta un gráfico después de un texto

Si desea profundizar en el tema de los pseudo elementos, dirijase a CSS Pseudo Element


Ejemplos Dinámicos

Descripción Ej
Diseñe su formulario con CSS en lugar de usar tablas Ejemplo de como diseñar un formulario


¿No encuentras lo que buscas?



<<< Tipos de Medios Examen de CSS >>>

Búsqueda

 

Otros tutoriales

HTML
Herramientas Útiles
Diseño de formularios

Diseño Web

Diseño Web

Recomendados

LaWebdelProgramador
Desarrolloweb
Frogx.three

    Virtualnauta provee del material para uso exclusivo de aprendizaje.
No garantizamos que el contenido sea correcto.
El riezgo por el uso del mismo queda bajo la entera responsabilidad del usuario.
Mientras use este sitio, usted acuerda haber leido y aceptado nuestros términos de uso y privacidad.

Copyright 2007 - 2009 by Martín Solomiak. Todos los derechos reservados.


webmaster@virtualnauta.com

Mapa del sitio Valid XHTML 1.0 Transitional Valid CSS!