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.
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)}
|
Desarrollo de sitios web con php, java script, html5, css, tiendas virtuales, manejadores de contenido cms, wordpress y joomla.
No hay comentarios.:
Publicar un comentario
Gracias por tu comentario