CSShort - vodič za CSS skraćenice

Korišćenje CSS-a za dizajn web stranica je uveliko umanjilo potrebu da npr pišete <font> tag nebrojeno puta, i time se smanjilo vreme potrebno da se sajt učita u korisnikov browser. Razdvajanje izgleda od sadržaja stranice je takođe vrlo korisno.

Ali zašto se zaustaviti na tome? Uputstvo na ovoj stranici će vam pomoći da UMANJITE vaš postojeći CSS kod! Ne samo da će se veličina CSS fajla smanjiti, nego će CSS kod postati pregledniji i lakši za održavanje. Skraćenice u CSS-u Vam omogućavaju da definišete nekoliko međusobno zavisnih parametara u jednoj liniji CSS koda. One kombinuju te zavisne parametre u jednu skraćenu formu. U većini slučajeva, browser će postaviti predefinisanu (default) vrednost ako iz skraćenice izostavite neku opcionu vrednost.

Background

kod:

background-color: #ccc;
background-image: url(slika.gif);
background-repeat: no-repeat;
background-position: bottom left;

skraćenica:

background: #ccc url(slika.gif) no-repeat bottom left;

Možete izostaviti bilo koji segment skraćenice, i tada će browser uzeti default podešavanja ako nije drugačije određeno u CSS kodu. Npr. ako izostavite bottom left slika će biti postavljena gore levo u elementu za koji određujete pozadinu.

 

Font

kod:

font-size: 12px;
line-height: 18px;
font-weight: bold;
font-style: italic;
font-family: serif;

skraćenica:

font: 12px bold italic serif;

Ova CSS skraćenica će biti ispravna samo ako navedete i font-size i font-familiy. Ako izostavite ili jedan ili drugi selektor skraćenica će biti potpuno ignorisana. Takođe, ako ne navedete line-height, font-weight i font-style ove vrednosti će biti uzete po default podešavanjima u browseru ili druge ako je tako podešeno za sadržavajuće elemente stranice.

 

Border

kod:

border-width: 1px;
border-color: red;
border-style: solid;

skraćenica:

border: 1px red solid;

ili

kod:

border-left-width: 1px;
border-left-color: red;
border-left-style: solid;

skraćenica:

border-left: 1px red solid;

Ako izostavite neke vrednosti iz skraćenice, browser će postaviti default ili ranije podešene vrednosti.

 

Margin, Padding

U zavisnosti od toga koliko različitih veličina ima element za koji određujete CSS skraćenicu, možete primeniti sledeća pravila:

Četiri različite veličine

kod:

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

skraćenica:

margin: 2px 1px 3px 4px; (gore, desno, dole, levo)

 

Tri različite veličine

kod:

margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em;

skraćenica:

margin: 5em 1em 3em; (gore, levo i desno, dole)

 

Dve različite veličine

kod:

margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%;

skraćenica:

margin: 5% 1%; (gore i dole, levo i desno)

Jedna veličina

kod:

margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

skraćenica:

margin: 10px; (gore i levo i dole i desno)

Navedena pravila za CSS skraćenice možete primeniti i na border i padding selektore.

 

Outline

kod:

outline-color: #fff;
outline-style: solid;
outline-width: 3px;

skraćenica:

outline: #fff solid 3px;

Outline se retko koristi jer neki browseri ne podržavaju ovaj CSS 2.1 standard (podržavaju ga Firefox, Safari, OmniWeb i Opera, a NE podržavaju Internet explorer i Netscape). Za razliku od border , outline ne zauzima prostor oko elementa i prikazuje se preko elementa - što znači da prikazivanje ili ne prikazivanje outline ne kvari raspored elemenata ili prostor između njih.

 

List-style

kod:

list-style: #ccc;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(slika.gif)

skraćenica:

list-style: #ccc disc outside url(slika.gif);

Izostavite bilo koji deo skraćenice i browser će postaviti default ili ranije podešene vrednosti.

 

Color

kod:

color: #ccff00;

skraćenica:

color: #cf0;

Umesto oznake za boju sa šest simbola koristite oznake sa tri simbola (kada se ponavljaju kao u primeru). Takođe, W3C nalaže da i oznake boja budu napisane malim slovima, kao i validan XHTML.

Postoje i zamene za neke osnovne boje kao što su:

maroon = #800000
red = #ff0000 = #f00
yellow = #ffff00 = #ff0
olive = #808000
purple = #800080
fuchsia = #ff00ff = #f0f
white = #ffffff = #fff
lime = #00ff00 = #0f0
green = #008000
navy = #000080
blue = #0000ff = #00f
aqua = #00ffff = #0ff
teal = #008080
black = #000000 = #000
silver = #c0c0c0
gray = #808080
orange = #ffa500

(Možete koristiti bilo koje od ovih oznaka, npr. red ili #ff0000 ili #f00)