Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS
Desde 0 | HTML | CSS | ASP | PHP | AJAX | Javascript | Promoción de webs | Rentabilidad de webs
Directorio | Manuales | Scripts | FAQs | Programas | Artículos Copyleft | Actualidad | La Cosecha | Colabora
Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades
Generador METAs | Compras | Busca cursos
Alojamiento | Dominios.es | Micropagos SMS | Buscadores | Patentes, marcas | Creación web | Multimedia | Videos
Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

Definición de estilos CSS Shorthand


Disminuye el peso de tus hojas de estilo utilizando la forma shorthand de especificación CSS, que no es más que una manera reducida de escribir las propiedades de estilos.


04/4/05 - Shorthand:

Vamos a explicar cómo escribir de forma reducida nuestras reglas CSS para que nuestros archivos de estilo tengan menos peso y sean más entendibles a la hora de una actualización.

Según la W3C hay dos formas de escribir la misma regla de CSS: la estándar y la shorthand. Una es la larga y la otra es la reducida.

Propiedad Font (fuente)

font-style || font-variant || font-weight || font-size / line-height || familia de fuente

Ejemplo:

P {font: italic normal bold 12px/14pt Verdana, Tahoma, Arial}

Propiedad Background (fondo)

background-color || background-image || background-repeat || background-attachment || background-position

Ejemplo:

Body {background: #FFF url(../images/ejemplo.gif) no-repeat fixed center}

Margin (Margen)

longitud | porcentaje | auto

Ejemplo:

Body {margin: 5px} /* todos los márgenes a 5px */ P {margin: 2px 4px} /* márgenes superior e inferior a 2px, márgenes izquierdo y derecho a 4px */ DIV {margin: 1px 2px 3px 4px} /* margen superior a 1px, right margin a 2px, bottom margin a 3px, left margin a 4px */

Padding (Relleno)

longitud | porcentaje | auto

Ejemplo:

Body {padding: 2em 3em 4em 5em} /* Si definimos cuatro valores estamos aplicando el padding superior, derecho, inferior e izquierdo */ Body {padding: 2em 4em) /* Si definimos dos o tres valores, los valores faltantes se toman del lado opuesto: superior e inferior a 2em, derecho e izquierdo a 4em */ Body {padding: 5em} /* Si definimos un solo valor se aplican a todos los lados */

Border (Borde)

border-width || border-style || color

Ejemplo:

H3 {border: thick dotted blue}

 Seguir navegando a partir aquí:
+ 1 manual relacionado
+ 1 categoria relacionada

 Autoría, licencia y acciones sobre este artículo

Informe de Federico Elgarte*
URL: http://www.cssboulevar.com.ar/

Atención: Copyright. Este artículo no se puede reproducir sin la autorización expresa del autor.

* Para consultas técnicas utilizar la lista de correo.

Versión imprimible Versión imprimible del artículo
Enviar artículo por e-mail Enviar artículo por e-mail
Añadir un comentario al artículo Publicar un comentario del artículo

Manuales relacionados con este artículo
Dentro de Manual de CSS, hojas de estilo

Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en CSS


 Comentarios de los visitantes
Aun no hemos recibido comentarios de este artículo.
Puedes ser el primero en enviar tu comentario.



Enlaces:
Maestrosdelweb
  Ir arriba

Manuales relacionados
+Manual de CSS, hojas de estilo
Categorías
+CSS

Lectura recomendada

Compra este libro en Agapea, la librería urgente a domicilio.

Tienda DesarrolloWeb

DesarrolloWeb.com | Copyright | Anunciese | Acerca de | Datos legales | Contacta | Por GuiarteMultimedia