CSS vodič za jednostavnije i brže pisanje

Kao u svemu tako i kod pisanja CSS koda neke stvari možete napraviti puno brže i jednostavnije pisanjem kraćeg oblika. Kako to napraviti pogledajte niže u nastavku posta.

CSS osnove sintakse

Osnovna CSS sintaksa nalaže minimalno tri dijela selektor, svojstvo i vrijednost što možete vidjeti u primjeru niže

selector { svojstvo: vrijednost }

p { color: #333333 }

Boje – generalno

Sve boje kojima se hexadecimalni kod ponavlja možete skratiti na 3 znamenke kao u primjeru niže.

/* Duži način */
color: #666666;

/* Kraći način */
color: #666; 

Svojstvo linije – duži način

Postoje tri svojstva koja definiraju liniju, širina (debljina), stil i boja.

.primjer {
border-width: 1px;
border-style:  solid;
border-color: #666666;
}

Svojstvo linije – kraći način

Kombiniranjem ova tri svojstva na način prikazan niže dobivate isto što i sa dužim načinom.

.primjer {
border: 1px  solid #666;
}

Svojstvo pozadine – duži način

Pozadinu možete definirati sa 5 svojstava, koja odvojenim pisanjem ne samo da traju duže, već i zauzimaju puno više mjesta.

.primjer {
background-color: #ffffff;
background-image: url(neka-slika.png);
background-repeat: no-repeat;
background-position: 0px 0px;
background-attachment: fixed;
}

Svojstvo pozadine – kraći način

Kombinacijom smo uštedjeli na vremenu i prostoru, odnosno veličini CSS datoteke.

.primjer { background: #fff url(neka-slika.png) no-repeat  0px 0px fixed; }

Margine i padding – duži način

Ovo padding ne znam kako prevesti (ne pada mi ništa na pamet trenutno) stoga ostaje engleska riječ J

/* Primjer margina */
.primjer {
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px
}

/* Primjer paddinga */
.primjer {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px
}

Margine i padding – kraći način

Kombiniranjem ova 4 svojstva sve možemo napisati u jednom retku puno brže i jednostavnije.

/* Primjer margina */
.primjer {
margin: 10px 15px  20px 25px;
}
/* Primjer paddinga */
.primjer {
padding: 10px 15px  20px 25px;
}