Contenido Reciente





Clasificación de Propiedades CSS Hojas de Estilo en Cascada




Las propiedades CSS permiten crear páginas web con diversos estilos, es costumbre utilizar solo las más básicas, pero es mejor conocer su clasificación para aplicarlas en el proceso de desarrollo de sitios web. Con el amplio uso de los entornos de desarrollo como Expression web y Dreamweaver, los estilos CSS se crean automáticamente al generar la estructura de las páginas, pero siempre será necesario saber como entrar a editar código.


Propiedades CSS Hojas de Estilo en Cascada


Las propiedades de CSS se clasifican según elemento que modifican dentro de las páginas:

  • Fondo
  • Textos y decoración
  • Fuente
  • Bordes
  • Margenes
  • Relleno
  • Listas
  • Tabla
  • Dimensiones
  • Efectos
  • Posición


Propiedades CSS para Fondo

background-color, background-image, background-repeat, background-attachment, background-position.

Propiedad
Descripción
Ejemplo
background-color
Aplicar color de fondo a diferentes elementos.
body {background-color: #FFC0CB}
h3 {background-color: transparent}
background-image
Utilizar una imagen como fondo.
body {background-image:url('fondo.jpg')}
background-repeat
La imagen de fondo se repite.
body{
background-image:url('fondo.jpg');
background-repeat:repeat
}
background-attachment
Dejar fija la imagen de fondo.
body{
background-image: url('fondo.gif');
background-repeat: no-repeat;
background-attachment: fixed
}
background-position
Ubicar una imagen en un lugar determinado.
body
{
background-image: url('simbolo1.gif');
background-repeat: no-repeat;
background-position: 50px 20px
}

 

Propiedades CSS para Textos y Decoración

text-indent, text-align, text-decoration, text-transform, letter-spacing, word-spacing, white-space, color, direction.

Propiedad
Descripción
Ejemplo
text-indent
Como dejar sangría en un texto.
p {text-indent: 2cm}
text-align
Centrar un texto.
p {text-align: center}
text-decoration
Definir un texto tachado o subrayado.
h2 {text-decoration: underline}
h3 {text-decoration: overline}
h4 {text-decoration: line-through}
text-transform
Convertir un texto a minúsculas o mayúsculas.
h3 {text-transform:capitalize}
h4 {text-transform:uppercase}
p {text-transform:lowercase}
letter-spacing
Controlar el espacio entre letras.
p {letter-spacing:normal}
h3 {letter-spacing:10px}
word-spacing
Controlar el espacio entre palabras.
h3 {word-spacing:normal}
p {word-spacing:20px}
white-space
Definir la ubicación del salto de línea.
p {white-space:nowrap}
color
Colorear el texto a su gusto.
p {color:red}
h3 {color:rgb(128,0,128)}
h4 {color:#0000ff}
direction
Definir el sentido de la escritura.
h4 {direction:ltr}
p {direction:rtl}

 

Propiedades CSS para Fuentes

font-family, font-style, font-variant, font-weight, font-size.

Propiedades
Descripción
Ejemplo
font-family
Definir un tipo de fuente.
p{font-family:Helvetica}
h3{font-family:serif}
font-style
Escribir en itálica.
h3 {font-style:normal}
h4 {font-style:italic}
p {font-style:oblique}
font-variant
Variar la fuente a mayúsculas más pequeñas.
h3 {font-variant:normal}
p {font-variant:small-caps}
font-weight
Como darle intensidad a la fuente.
font-weight:normal
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:100
font-weight:700
font-size
Definir el tamaño de la fuente.
font-size:xx-small
font-size:x-small
font-size:small
font-size:médium
font-size:large
font-size:x-large
font-size:xx-large
font-size:larger
font-size:smaller
font-size:15
font-size:160%

 

Propiedades CSS para Bordes

Las propiedades css principales para bordes son border-width, border-color, border-style.

Propiedades
Descripción
Ejemplo
border-width
Establecer el ancho del borde del elemento.
p {
border-style:solid;
border-top-width:thin;
border-right-width:medium;
border-bottom-width:thick;
border-left-width:10px
}
border-color
Colorear el borde.
p{
border-style: solid;
border-top-color: #FF0000;
border-left-color: #FF0000
}
border-style
Uso de bordes ocultos.
p{border-style: hidden}
Uso de bordes punteados.
p{border-style: dotted}
Uso de bordes a rayas.
p{border-style: dashed}
Uso de bordes sólidos.
p{border-style: solid}
Uso de bordes dobles.
p{border-style: double}
Uso de bordes sombreados.
p{border-style: groove}
Uso de bordes en relieve.
p{border-style: ridge}
Uso de bordes en recuadro.
p{border-style: inset}
Uso de bordes resaltados.
p{border-style: outset}


Propiedades CSS para Margenes

margin.

Propiedades
Descripción
Ejemplo
margin
Como dejar un margen alrededor de un elemento con medidas.
p.margin {margin: 2cm}
margin
Como dejar un margen alrededor de un elemento con porcentajes.
p.margin
{
margin-top:10%;
margin-left:50%
}

 

Propiedades CSS para Rellenos - padding

padding

Propiedades
Descripción
Ejemplo
padding
Como controlar el relleno que hay entre el borde y el contenido.
p
{
border-style: solid;
padding-top:1cm;
padding-right:20%
}

 

Propiedades CSS para Listas

list-style-type.

Propiedades
Descripción
Ejemplo
list-style-type
Aplicar diferentes marcadores a los Ítems de una lista desordenada.
ul.disco {list-style-type: disc}
ul.circulo {list-style-type: circle}
ul.cuadrado {list-style-type: square}
Aplicar números decimales y números romanos en listas ordenadas.
ol.decimal {list-style-type: decimal}
ol.decimal-0 {list-style-type: decimal-leading-zero}
ol.min-romanas {list-style-type: lower-roman}
ol.may-romanas {list-style-type: upper-roman}
Aplicar letras, números y blancos para listas ordenadas.
ol.georgia {list-style-type: georgian}
ol.alpha-min {list-style-type: lower-alpha}
ol.alpha-may {list-style-type: upper-alpha}
ol.nada {list-style-type: none}

 

Propiedades CSS para Tablas

table-layout, border-collapse.

Propiedades
Descripción
Ejemplo
table-layout
Como controlar el tamaño de las celdas de una tabla.
table.auto
{table-layout: auto}

table.fija
{table-layout: fixed}
border-collapse
Definir un borde separado o un borde de una línea fina en una tabla.
table.plegado
{border-collapse: collapse}

table.separado
{border-collapse: separate}

 

Propiedades CSS para Dimensiones

width, min-width, max-width, height, min-height, max-height, line-height.

Propiedades
Descripción
Ejemplo
width
Defina el ancho de un párrafo a su gusto.
.ancho {
width: 200px;
border: 1px solid #006699;
padding: 5px;}
min-width
Defina un ancho mínimo para un párrafo.
p.minimo {
min-width: 700px;
border: 1px solid;
}
max-width
Como definir un ancho máximo para un párrafo.
.maximo {
max-width: 50px;
border: 1px solid #006699;
padding: 5px;
}
height
Como establecer la altura de un elemento.
.alto {
height: 200px;
border: 1px solid #006699;
padding: 5px;
}
min-height
Defina una altura mínimo para un elemento.
.minimo {
min-height: 100px;
border: 1px solid #006699;
padding: 5px;
}
max-height
Defina una altura máxima para un párrafo.
.maximo {
max-height: 30px;
max-width: 200px;
border: 1px solid #006699;
padding: 5px;
}
line-height
Declare una separación entre líneas.
.sep {
width: 150px;
line-height: 5;
border: 1px solid #006699;
padding: 5px;
}

 

Propiedades CSS para Efectos visuales

overflow, clip, display, visibility

Propiedades
Descripción
Ejemplo
overflow
Insertar una barra de desplazamiento en caso que el contenido sea superior a la caja que lo contiene
div {
background-color:#FFFFD9;
width:100px;
height:150px;
overflow: scroll;
}
clip
Mostrar parte de una imagen
img {
position:absolute;
clip:rect(0px 50px 100px 0px)
}
display
Como convertir diferentes elementos en Ítems de una lista
#test1{
display: list-item;
list-style-image: url(ok.gif);
list-style-position: inside;
}
visibility
Mostrar u ocultar un texto
h2.visible
{visibility:visible;}
h2.invisible
{visibility:hidden;}

 

Propiedades CSS para Ubicación

position, top, right, bottom, left, floatm, clear, vertical-align, z-index

Propiedades
Descripción
Ejemplo
position
Posiciona un elemento dentro de la página por medio del método estático
p.estatico{
position:static;
top:100px;
left:100px
}
Por medio del método relativo
p.rela{
position:relative;
top:100px;
left:50px
}
Por medio del método absoluto
p.abso{
position:absolute;
top:80px;
left:60px
}
Por medio del método fijo
p.fijo{
position:fixed;
top:60px;
left:200px
}
top
right
bottom
left
Ubicar un elemento por medio de estas propiedades.
p.fijo{
position:fixed;
top:2cm;
left:100px
}
float
Posicionamiento flotante a la izquierda.
span {float: left}
Posicionamiento flotante a la derecha
p {float: right}
clear
No permite elementos flotantes a la izquierda.
span {
float: left;
clear: left}
span.no {
float: left;
clear: none}
No permite elementos flotantes a ambos lados
span {
float: left;
clear: both
}
span.no {
float: left;
clear: none
}
vertical-align
Alineación vertical del texto : Línea de referencia.
img.base {vertical-align:baseline}
Por debajo
img.sub {vertical-align:sub}
Por arriba
img.super {vertical-align:super}
Por encima
img.top {vertical-align:top}
Texto superior
img.t-t {vertical-align:text-top}
Medio
img.mid {vertical-align:middle}
Inferior
img.bottom {vertical-align:bottom}
Texto inferior
img.t-b {vertical-align:text-bottom}
Longitud
img.longitud {vertical-align:30px}
Porcentaje
img.porc {vertical-align:100%}
z-index
Ubica una imagen en una capa inferior al texto.
img {
position:absolute;
left:40px;
top:10px;
z-index:-1;
}


Propiedades CSS para Contenido y Numeración Automática

content

Propiedades
Descripción
Ejemplo
content
Agregar un contenido junto con los pseudo elementos ":after y :before"
h2:before {content: url(imagen.gif)}


Propiedades CSS para Pseudo Class

Propiedades
Descripción
Ejemplo
:link
Define el color de un enlace que aún no ha sido visitado
/* Color rojo - enlace no visitado */
a:link {color:#FF0000}
/* Color verde - enlace visitado */
a:visited {color:#00FF00}
/* Color amarillo - posiciona cursor */
a:hover {color:#FFFF00 }
/* Color naranja - activa el enlace */
a:active {color:#FF8000 }
:visited
Define el color de un enlace que ya ha sido visitado
/* Color rojo - enlace no visitado */
a:link {color:#FF0000}
/* Color verde - enlace visitado */
a:visited {color:#00FF00}
/* Color amarillo - posiciona cursor */
a:hover {color:#FFFF00 }
/* Color naranja - activa el enlace */
a:active {color:#FF8000 }
:active
Comportamiento del color de un enlace mientras se está presionando
/* Color rojo - enlace no visitado */
a:link {color:#FF0000}
/* Color verde - enlace visitado */
a:visited {color:#00FF00}
/* Color amarillo - posiciona cursor */
a:hover {color:#FFFF00 }
/* Color naranja - activa el enlace */
a:active {color:#FF8000 }
:hover
Comportamiento del color de un enlace al pasar el cursor sobre él
/* Color rojo - enlace no visitado */
a:link {color:#FF0000}
/* Color verde - enlace visitado */
a:visited {color:#00FF00}
/* Color amarillo - posiciona cursor */
a:hover {color:#FFFF00 }
/* Color naranja - activa el enlace */
a:active {color:#FF8000 }
:focus
Hacer foco en un enlace
/* Foco en el enlace */
a:focus {background:#FFFF00; color:#00FF00}
:lang
Especificar el lenguaje usado en el elemento
:lang(es) {quotes:'"' '"'}
:lang(fr) {quotes:"<<" ">>"}


Propiedades CSS para Pseudo Element

Propiedades
Descripción
Ejemplo
:first-line
Cambios en la primera línea de un texto
h2:first-line {letter-spacing:10px}
:first-letter
Cambios en la primera letra de un texto
p:first-letter {
background:#006699;
color:#FFFFFF
}
:before
Inserta un contenido antes del elemento
h2:before {content: url(tri.gif)}
:after
Inserta un contenido después del elemento
h2:after {content: url(tri.gif)}