body {
  background: url("ozadje.gif") #fff top left repeat-x;
}

Kot vidite imamo z uporabo krajšega opisa še ogromno prostora, da izboljšamo naš CSS.

1. Font

Pri oblikovanju fontov se ponavadi uporablja:

p {
  font-size: 1em;
  line-height: 1.5em;
  font-weight: bold;
  font-style: italic;
  font-varient: small-caps;
  font-family: arial,sans-serif;
}

Isti stil lahko krajše opišemo na naslednji način:

p {
  font: 1em/1.5em bold italic small-caps arial,sans-serif;
}

Še nekaj besed v opozorilo: Ta krajša verzija bo delovala le v primeru, ko bomo uporabili obe lastnosti font-size in font-family. Upoštevati moramo tudi, da če izpustimo font-weight, font-style ali font-varient, bodo vrednosti teh lastnosti avtomatsko postavljene na normal.

2. Border

Namesto:

p {
  border-width: 1px;
  border-style: solid;
  border-color: #000;
}

lahko uporabimo:

p {
  border: 1px solid #000;
}

Enako velja za border-top, border-right, border-bottom in border-left.

3. Margin, padding in border

Krajši opis, ki sledi, se lahko enako uporabi za margin, padding ali border.

p {
  margin-top: 1px;
  margin-right: 2px;
  margin-bottom: 3px;
  margin-left: 4px;
}

Krajše opišemo z:

p {
  margin: 1px 2px 3px 4px;
}

Lahko tudi združimo margin-top z margin-bottom in margin-right z margin-left:

p {
  margin: 5px 10px;
}

4. Background

Kot sem že enkrat omenil lahko namesto:

body {
  background: url("ozadje.gif");
  background-color: #fff;
  background-position: top left;
  background-repeat: repeat-x;
}

uporabimo:

body {
  background: url("ozadje.gif") #fff top left repeat-x;
}

5. List-style

Pri elementih tipa ul lahko uporabimo:

ul {
  list-style-image: ("bullet.gif");
  list-style-type: disc;
  list-style-position: inside;
}

ali pa krajše zapišemo kot:

ul {
  list-style: ("bullet.gif") disc inside;
}

Zaključek

Naučili smo se, da so krajši opisi CSS lastnosti v ogromno primerih zelo priročni in da lahko z njihovo uporabo zelo vplivamo na velikost CSS datoteke.

Komentarji