Õpetus: Kuidas muuta/kirjutada themel .css fail kompaktseks

Home Forum Index Kujundused Õpetus: Kuidas muuta/kirjutada themel .css fail kompaktseks

Anna teada kui oled valmis saanud mõne oma tehtud kujundusega või küsi midagi juba olemasolevate kohta.
Reply to topicReply to topic Printer Friendly Page
Forum FAQ • Search • View unanswered posts

Õpetus: Kuidas muuta/kirjutada themel .css fail kompaktseks

Post Posted: 9.05.06. 12:58:15

Väike juhend, siis sellest kuidas on võimalik muuta oma themel (kujunduse) .css fail kompaktsemaks.

Väike näide, mismoodi tavaliselt seda faili kirjutatakse:

Oletame, et meil on koodis sellised read, mis kindlasti ka on.

Code:
       padding-top: 7px;
   padding-right: 7px;
 padding-bottom: 7px;
   padding-left: 7px;
}

Esimese asjana, mis silma hakkab on see, et rida padding kordub mitu korda, mis tähendab seda, et kui ise teha niimoodi võtab see tohutu aja ära ja kui on juba olemasolev theme sedasi, siis on selle kood väga kohmakas. Teisena hakkab kohe silma, et 7px kordub pidevalt, aga tegelikkuses seda px (pixlit) sinna taha vaja ei olegi.

Nüüd toon mõned näited kuidas ilus ja kompaktne kood välja näeb:

Code:
  padding: 7;
}

Kogu lugu Smile ja kas pole mitte suur vahe, kas kirjutada 4 rida või 1 rida? Minu arust on küll.

Toon veel mõned näited ja siis seletan asja veel:

Mõttetu kood:

Code:
margin-top: 1px;
 margin-right: 5px;
  margin-bottom: 5px;
 margin-left: 5px
}

Kompaktne kood:

Code:
              margin: 5;
}

Nagu näha ei midagi keerulist!
Vastus sellele miks kirjutatakse enamjaolt kõikides tasuta themedes kood väga mahukaks - võib-olla ma eksin, aga arvatavasti siiski mitte! Põhjus nimelt selles, et üldjuhul ükski kõvem veebivend ei raiska palju oma aega tasuta kujunduste tegemisele ja seepärast jääb see töö algajatele asjaarmastajatele kes proovivad kätt ja tahavad midagi ärateha.

NB! Õpetuses seletasin praegu ära selle kuidas toimida, kui on ühesugused koodi read (näit: 0px;), kuid lähiajal täiendan oma õpetust ja seletan, kuidas saab tervet koodi paremaks muuta ja selle tulemusena oma saiti ka kiirendada. Wink

Viper please enter your server specs in your user profile! Crying or Very sad

Viper
Tõusmas kõrgemale
Tõusmas kõrgemale
 
Back to top

Re: Õpetus: Kuidas muuta/kirjutada themel .css fail kompakt

Post Posted: 9.05.06. 13:09:23

Lisan siis kah ühe asja...
Ütleme et mitu tabelit või teksti kasutavad sarnaseid asju, näiteks
Code:
.plokipea {
  width: 3px;
  color: #EFEFEF;
  border: 1px solid #496D9F
}

.suurtabel {
  width: 100%;
  text-size: 12px;
  color: #EFEFEF;
  border: 1px solid #496D9F

On näha et teksti värv(color) ning tabeli äär(border) on täpselt samad, sama koodi saaks kirjutada ka nii..
Alguses lisame osa mis on ühine(järjekord pole muidugi eriti tähtis):
Code:
.plokipea,.suurtabel {
  color: #EFEFEF;
  border: 1px solid #496D9F
}
Ning siis osad mis erinevad üksteisest:
Code:
.plokipea {
  width: 3px
}

.suurtabel {
  width: 100%;
  text-size: 12px


Madis's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
Linux/2.0.63/5.0.67/5.2.5/9.2.1

Madis
Administraator
Administraator
 
Back to top
Reply to topicReply to topic

Page 1 of 1

Forum Index Kujundused Õpetus: Kuidas muuta/kirjutada themel .css fail kompaktseks


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You can download files in this forum