Admin
 
 
Logo DIPLOX
Propieades css con sintaxis corta
Volver Por face
  
Viernes, 28/08/2009
Una de las posibilidades de CSS es la de utilizar una sintaxis corta, lo que posibilita utilizar multiples propiedades en una sola línea. Utilizar una sintaxis corta mejora la visibilidad y optimiza el archivo CSS.

A continuación se muestran varias propiedades con su sintaxis corta.

FONT
Sintaxis corta:
font: font-style | font-variant | font-weight | font-size | line-height | font-family
Por ejemplo:
font-family: serif;
font-size: 1.4em;
font-weight: bold;
quedaría:
font: bold 1.4em serif;
MARGIN y PADDING
Sintaxis corta:
margin: margin-top | margin-right | margin-bottom | margin-left
padding: padding-top | padding-right | padding-bottom | padding-left
Por ejemplo:
padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 3px;
quedaría:
padding: 1px 4px 3px 4px;
BORDER
Sintaxis corta:
border: border-width | border-style | color
Por ejemplo:
border-width: 1px;
border-style: solid;
border-color: #000;
quedaría:
border: 1px solid #000;
border-top, border-right, border-bottom y border-left funcionarían de un modo similar a la hora de aplicar este tipo de sintaxis. Así por ejemplo para definir un borde derecho sería:
border-right: 4px dotted #CCC;
LIST-STYLE
Sintaxis corta:
list-style-type | list-style-position | list-style-image
Por ejemplo:
list-style-position: inside;
list-style-image: url (flecha.gif);
list-style-type: disc;
quedaría:
list-style: disc inside url (¨flecha.gif¨);
BACKGROUND
Sintaxis corta:
background: background-color | background-image | background-repeat | background-attachment | background-position
Por ejemplo:
background-color: #EEE;
background-image: url (bg.gif);
background-attachment: fixed;
quedarí­a:
background: #EEE url (bg.gif) fixed;
La utilización de esta sintaxis es soportada tanto por IE, como por Mozilla y Opera. Únicamente es parcialmente soportada por navegadores antiguos como IE4 o NS4.


Volver Por face