Avtor: -primož- 26.08.09

Izboljšajte svoje CSS kodiranje

CSS koda včasih postane zelo dolga, tudi čez 1000 vrstic (npr. pri Joomli). Ta vodič vam bo podal nekaj napotkov, ki se jih je dobro držati, da imate lepo organizirano kodo in, da se v njej znajdete.

1. Organizacija elementov

Spletna stran je razdeljena na več delov, kot so Header, Body, Footer, … Pregledna CSS datoteka ima elemente teh delov razporejene po vrsti (ponavadi od zgoraj navzdol), imena teh delov pa zapisana v obliki komentarja.

Zgled:

/*** ponastavitev ***/
nastavitev margin, padding na 0

/*** osnovni elementi ***/
body, a

/*** Header - Glava ***/
elementi glave

/*** Content – Vsebina ***/
elementi vsebine

/*** Levi meni ***/
elementi menija

/*** Footer – Noga ***/

2. Ponastavitev

CSS deduje vrednosti atributov. To nam omogoča, da na začetku nastavimo splošne vrednosti elementov, ki veljajo, dokler jim v naslednjih vrsticah ne spremenimo vrednosti. Ponastavitev se uporablja predvsem zato, da na strani nimamo problemov z robovi in odmiki.

Zgled:

html, body, div, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, form, textarea, p, table, th, td {
margin: 0;
padding: 0;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}

table {
border-collapse:collapse;
border-spacing:0;
}

Kasneje boste zaradi dedovanja zgornje elemente še vedno lahko spreminjali.

3. Abecedni vrstni red atributov

Ker morate včasih za kakšen element uporabiti mnogo atributov se boste bolje znašli, če bodo atributi razvrščeni po abecednem vrstnem redu. Tako se boste tudi izognili ponavljanju.

Zgled:

#newsflash {
color: #FFF;
font-family: Tahoma, Arial;
font-size: 14px;
font-weight: bold;
height: 53px;
padding: 15px 0 0 30px;
text-decoration: none;
text-align: left;
width: 600px;
}

4. Držite se ene oblike pisanja kode

Imate dve možnosti. Prva je, da pišete vse atribute v eno vrstico (primer 1), druga pa je, da vsak atribut definirate v svoji vrstici (primer 2). Priporočam vam, da vsak atribut spišete v svojo vrstico, saj je tako koda bolj pregledna.

Primer 1:

#newsflash { color: #FFF; font-size: 14px; height: 53px;}

Primer 2:

#newsflash {
color: #FFF;
font-size: 14px;
height: 53px;
}

5. Uporabljajte komentarje

Ko prvič dopolnjujete in urejate kodo poznate vse razrede, veste, kaj kaj naredi in kaj morate spreminjati, da dobite želeni efekt. Toda, ko se kakšno leto ne posvetiti isti kodi pozabite, kaj kateri class ali id dela. To se vam ne more zgoditi, če uporabljate komentarje.

/* komentar */ - večvrstični komentar – med /* in */ zapišete svoj komentar

Primer:

#logo {
color: #FFF;
line-height: 24px; /* ime spletne strani */
text-align: left;
}

6. Najdite tisto, kar iščete v HTML kodi

Recimo, da bi si želeli spremeniti stil naslova levega menija, pa imate 1200 vrstic CSS kode. Najprej morate ugotoviti, kako se imenuje element, ki ga želite urejati. Ime elementa je v HTML kodi določen tako: class="ime_elementa" ali pa tako id="ime_elementa". Ko ugotovite, kako se element imenuje pojdite v meni svojega urejevalnika kode (Front Page, Dreamweaver) in najdite funkcijo find (Edit > Find). Vpišete ime elementa in nato s pomočjo tega najdete svoj element, ki ga želite urejati.

*Pri brskalnikih je uporabna tudi funkcija Prikaz izvorne kode oz. Ogled vira strani.

Upam, da Vam bodo ti napotki koristili pri vašem stiliziranju s CSSjem. Uživajte ob kodi!

[ Na vrh ]

Komentiraj:

Sorodni vodiči
CSS Osnove CSS !important 6 CSS namigov Flyout meni CSS galerija 650 predelava in nadgradnja	CSS Povečava slike hover oblaček za namig Poseben CSS za Internet Explorer Spustni meni a.k.a. Drop down menu Izginjajoče besedilo

Moje-Mesto.com

Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.

Facebook oglaševanje

Izdelava spletnih strani

Ustvari.si

Nescafé

!joomlacomment 4.0 Copyright (C) 2009 Compojoom.com . All rights reserved."

Moje-Mesto.com

Oglasi

Naključni CSS vodiči