Cargando...


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


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
}

 

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}

 

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%

 

Bordes

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}

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%
}

 

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%
}

 

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}

 

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}

 

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;
}

 

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;}

 

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;
}


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)}


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:"<<" ">>"}


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)}







Haga clic aquí para ver los comentarios 0 Comentarios:

Gracias por tu comentario

Gracias por sus comentarios

Etiquetas

Abrir HTMl dentro de DIV addthis.com app nativas App para moviles Bases de Datos MySql Botones de Compartir Cajas CSS Cascading Style Sheets CHECKBOX Clasificacion CSS CMS Comentarios en PHP comparacion prestashop y magento Conectar con Base De Datos MySql Convenciones de PHP Creación de Formularios css Declarar Estilos CSS Desventajas de Magento Desventajas de Prestashop Diseño paginas web en barcelona Diseño y Desarrollo Web DIV y SPAN Documento Hojas de Estilo ejemplo css ejemplo estilo css Ejemplo Etiquetas Form Ejemplos HTML Ejercicio CSS El Sistema ha Devuelto: (111) Error de Conexión a::1 Fallida Estilos CSS Estructura de HTML Etapas del Diseño Web Etiqueta DIV Etiqueta SPAN Etiquetas HTML Eventos de Formularios HTML Fases del Desarrollo Web Fases del Diseño Web FORM formulario de contacto Formulario de Contacto HTML Formularios HTML framework móviles Framework para Móviles Funcion mail() de PHP Funciones Mysql PHP Glosario de Términos Guia Basica CSS Guia CSS Hoja de Estilo en Cascada hojas de estilo Hojas de Estilo Externas HTML HTML a Texto Plano HTML y PHP HTTP HTTPS Ingeniería Web INPUT Introducción HTML JavaScrip Javascript jquery touch jquerymovile Lenguaje HTML Lenguaje PHP Magento Manejadores de Contenido Marketing Web Marqueting web barcelona Mysql Mysql_Connect Mysql_Query Mysql_Select_Db Objeto Button Objeto Checkbox Objeto Form Objeto Hidden Objeto Password Objeto Radio Objeto Select Objeto Text Objeto Textarea Objetos de Formularios HTML phoneGap PHP plantilla css Plantilla Web con CSS Posicionamiento con Hojas de Estilo Posicionamiento CSS position: static position:absolute position:relative Prestashop Prestashop vs Magento Programación Web Propiedades CSS Propiedades de Formularios Propiedades Y Métodos Puertos para Apache Qué es HTML Que es PhoneGap RADIO Reglas CSS Reglas de PHP Segundo Ejemplo CSS Selectores CSS sencha touch SEO Servidor Web shareaholic.com Sintaxsis PHP Stylesheet TEXTAREA Tiendas En Linea Tipos de CSS titanium appcelerator Uso de los DIV Variables PHP Ventajas de Magento Ventajas de Prestashop Webmaster Widget Xampp Conexión Refused

Directorios Web. Publicar Blogs


En estos sitios puedes promocionar tus sitios web y blog
Directorio de Blogs Blogazos.com Directorio Mexicano Directorio 360dir

Formulario de Contacto

Nombre

Correo electrónico *

Mensaje *