CSS vodič za jednostavnije i brže pisanje

• 
• Ivan Mišić
  30.09.2009
  4 Komentara
• 
  Tweet
• Izdvojeni tutorijali, Web Design | css

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 }

1

p { color: #333333 }

Boje – generalno

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

1
2
3
4
5

/* 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.

1
2
3
4
5

.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.

1
2
3

.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.

1
2
3
4
5
6
7

.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.

1

.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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/* 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.

1
2
3
4
5
6
7
8

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

Povezani postovi

• Twitter Status Updates Na Vlastitoj Internet Stranici
• Naprednije korištenje HTML lista
• Zebra stil tablice uz pomoć css-a i jQuery JavaScript biblioteke
• Ubrzajte učitavanje i uštedite bandwidth koristeći CSS Sprites
• 7 Načina za poboljšanje performansi Vaših Internet stranica