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

Avaleht Foorum 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.
Vasta teemaleVasta teemale Printerisõbralik lehekülg
Foorumi KKK • Otsi • Vaata vastamata teateid

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

Postitus Postitatud: 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.

Kood:
       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:

Kood:
  padding: 7;
}

Kogu lugu Naeratus 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:

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

Kompaktne kood:

Kood:
              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. Silmapilgutus

Viper please enter your server specs in your user profile! Nuttev või väga kurb

Viper
Tõusmas kõrgemale
Tõusmas kõrgemale
 
Tagasi üles

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

Postitus Postitatud: 9.05.06. 13:09:23

Lisan siis kah ühe asja...
Ütleme et mitu tabelit või teksti kasutavad sarnaseid asju, näiteks
Kood:
.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):
Kood:
.plokipea,.suurtabel {
  color: #EFEFEF;
  border: 1px solid #496D9F
}
Ning siis osad mis erinevad üksteisest:
Kood:
.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
 
Tagasi üles
Vasta teemaleVasta teemale

Lehekülg 1, lehekülgi kokku 1

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


Sa ei saa teha siia alafoorumisse uusi teemasid
Sa ei saa vastata siinsetele teemadele
Sa ei saa muuta oma postitusi
Sa ei saa kustutada oma postitusi
Sa ei saa hääletada küsitlustes
Sa ei saa lisada faile selles alafoorumis
Sa saad allalaadida faile selles alafoorumis