logo html 5

Propiedades CSS3

Fondo

Texto

Fuente

Unidades absolutas/relativas

listas

Seudo-clases

Seudoelementos

Bordes

Margenes/Relleno/dimensiones

Ubicación

Efectos visuales


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 no-repeat La imagen de fondo no se repite.
repeat-y solo repite la imagen en vertical eje y
repeat-x solo repite la imagen en horizontal eje x
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 en pixeles. 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

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
line-height Interlineado, distancia entre líneas . Ejemplo de como interlinear 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

Si deseas profundizar en el tema de textos, dirígete 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
@font-face Incluir archivo de fuentes 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


Unidades absolutas o relativas

Propiedades Descripción
En función de la fuente mm milímetros {font-size: 8mm}
Cm centimetros {font-size: 1cm}
in pulgadas {font-size: 0.5in}
px pixeles {font-size: 20px}.
pt pulgadas {font-size:12pt}.
En función del navegador lxx-small {font-size: xx-small}
x-small. {font-size: x-small}
lsmall. {font-size: lsmall}
lmedium. {font-size: lmedium}
llarge. {font-size: lmedium}
x-large. {font-size: x-large}
xx-large. {font-size: xx-large}
Unidades relativas em tamaño de la fuente que escoge de una anterior y la multiplica si es 1 sería el mismo tamaño {font-size: 1em}
% porcentaje {font-size: 80%}


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
list-style-image Define la imagen que va a ser usada como marca de cada ítem.. Ejemplo de marcadores de lista disco, círculo y cuadrado
list-style-position Especifica la posición del marcador de los ítems con respecto a la caja de la lista. Ejemplo de marcadores de lista disco, círculo y cuadrado

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


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
:active Comportamiento del color de un enlace mientras se esta presionando
:hover Comportamiento del color de un enlace al pasar el cursor sobre él

Si deseas profundizar en el tema de las pseudo clases, dirígete 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

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


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
border-radius Uso de bordes a redondeados. Ejemplo de bordes a rayas

border
border-top
border-top-width
border-bottom-color
border-left-style
borde-right
para todos los bordes...

Uso de los lados de los bordes. Ejemplo de bordes a rayas

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

 


Márgenes, Relleno y dimensiones

Propiedades Descripción Ej
margin Como dejar un márgen alrededor de un elemento con medidas y porcentajes. Ejemplo de como definir el ancho de un margen en pixels
padding Como controlar el relleno que hay entre el borde y el contenido. Ejemplo de como definir el ancho del padding
width Defina el ancho de un párrafo a su gusto. Ejemplo de como determinar el ancho de un elemento en pixels
height Como establecer la altura de un elemento. Ejemplo de como definir la altura de un elemento en pixels

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

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

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


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
Posicionamiento flotante a ambos lados 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 arriba, abajo, centrado con respecto a un elemento. Ejemplo que alínea verticalmente un elemento con el valor baseline

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

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 deseas profundizar en el tema de los efectos, dirígete a CSS Efectos Visuales