Rregullat e shkurtuara në CSS
Kodimi në CSS është një pune manuale dhe që konsumon goxha kohë, prandaj çdo shkurtim që mund të përftojmë është një plus i madh për produktivetitin. Në këtë artikull-referencë do ju tregoj mënyrën e shkurtuar të rregullave që përdorni çdo e ditë e që ndoshta nuk e dinit që mund të shkruhen edhe kështu. Ruajeni si referencë këtë artikull në rastet kur do i harroni rregullat.
Personalisht më pëlqen kur për të zgjidhur një problem më ofrohen disa mundësi, kështu që mund të zgjedh atë që më përshtatet më tepër. Gjithashtu, më pëlqen të shkoj drejt rrugës më të shkurtër, në mënyrë që ti kursej vetes kohë. Kjo vlen pa dyshim edhe për CSS! Kush kodon faqe në HTML dhe CSS e di shumë mirë sa punë manuale ka për të ndërtuar strukturën dhe për ta “ngjyrosur” atë, prandaj do i vlerësonte disa këshilla që mund ti shkurtojnë kohë. Më poshtë do ju tregoj mënyrën standarte për ti shkruar rregullat dhe menjëherë pas tyre do gjeni mënyrën e shkurtuar. Gjithashtu do ju tregoj vlerat e mundshme për një rregull dhe vlerën bazë.
Quajeni këtë artikull më tepër si një pikë reference të cilës mund ti ktheheni kur rregullat apo vlerat nuk ju kujtohen.
Sfondi (Background)
Sfondi i një elementi mund të jetë imazh, ngjyrë ose të dyja bashkë dhe mund të përsëritet, të pozicionohet dhe të përcaktohet si shfaqet.
Mënyra Standarte
| 1 | #elementi{ |
| 2 | background-color:#aaa; /* emri i ngjyres, #rrggbb, #rgb, rgb(0-2555, 0-255, 0-255), rgb(0-100%, 0-100%, 0-100%) (baze: transparent) */ |
| 3 | background-image:url(imazhi.png); /* url(adresa/e/imazhit) (baze: none) */ |
| 4 | background-repeat:no-repeat; /* repeat, repeat-x, repeat-y, no-repeat (baze: repeat) */ |
| 5 | background-position:top left; /* top, bottom, right, left, center, px, % (baze: top left) */ |
| 6 | background-attachment:scroll; /* scroll, fixed (baze: scroll) */ |
| 7 | } |
Mënyra e Shkurtuar
| 1 | #elementi{ |
| 2 | background:#aaa url(imazhi.png) no-repeat top left scroll; |
| 3 | } |
Kini parasysh që nëse nuk e plotësoni një vlerë, ajo do të zëvendësohet automatikisht nga vlera bazë. Psh, nëse nuk vendosni përsëritjen dhe pozicionin, sfondi do marrë respektivisht vlerat bazë “repeat” dhe “top left”.
Korniza e jashtme (Border) dhe e brendshme (Outline)
Border) shfaqet rrotull elementit duke zënë hapësirë (Modeli Kuti – Box) dhe mund të përcaktohet ngjyra, stili, trashësia dhe vendodhja. Outline përmban egzaktësisht të njëjtat rregulla si Border, vetëm se sipas Modelin Kuti nuk zë hapësirë.
Mënyra Standarte
| 1 | #elementi{ |
| 2 | border-width:2px; /* thin, thick, medium, numer ne px (baze: medium) */ |
| 3 | border-style:solid; /* solid, dotted, dashed, double, groove, inset, outset, ridge, hidden (baze: none) */ |
| 4 | border-color:#999; /* emri i ngjyres, #rrggbb, #rgb, rgb(0-2555, 0-255, 0-255), rgb(0-100%, 0-100%, 0-100%) (baze: ngjyra e elementit) */ |
| 5 | } |
Mënyra e Shkurtuar
| 1 | #elementi{ |
| 2 | border:2px solid #999; |
| 3 | } |
Konturi mund të përcaktohet shkurtimisht edhe vetëm për një anë të caktuar (psh: ana e sipërme).
Mënyra Standarte
| 1 | #elementi{ |
| 2 | border-top-width:1px; |
| 3 | border-top-style:dotted; |
| 4 | border-top-color:red; |
| 5 | } |
Mënyra e Shkurtuar
| 1 | #elementi{ |
| 2 | border-top:1px dotted red; |
| 3 | } |
Për ta mbyllur me Konturet, do shohim si madhësia e konturit vendoset për çdo anë.
Mënyra Standarte
| 1 | #elementi{ |
| 2 | border-top-width:5px; |
| 3 | border-right-width:3px; |
| 4 | border-bottom-width:10px; |
| 5 | border-left-width:6px; |
| 6 | } |
Mënyra e Shkurtuar
| 1 | #elementi{ |
| 2 | border-width:5px 3px 10px 6px; |
| 3 | } |
Tekstet (Font)
Rregullat e teksteve përcaktojnë çfarë Fonti do përdoret, madhësinë e tij, trashësinë, stilin dhe lartësinë e linjës.
Mënyra Standarte
| 1 | #elementi{ |
| 2 | font-style:italic; /* normal, italic, oblique (baze: normal) */ |
| 3 | font-variant:normal; /* normal, small-caps (baze: normal) */ |
| 4 | font-weight:bold; /* normal, lighter, bold, bolder, 100-900 (baze: normal) */ |
| 5 | font-size:14px; /* small, smaller, medium, large, larger, xx-small, x-small, xx-large, x-large, px, pt, em, % (baze: normal) */ |
| 6 | line-height:2; /* normal, px, pt, em, %, numer (baze: normal) */ |
| 7 | font-family:Arial, Verdana, sans-serif; /* Arial, Verdana, Helvetica, Times, serif, sans-serif, etj. (baze: Fonti i Shfletuesit) */ |
| 8 | } |
Mënyra e Shkurtuar
| 1 | #elementi{ |
| 2 | font:italic normal bold 14px/2 Arial, Verdana, sans-serif; |
| 3 | } |
Nëse nuk vendosni një rregull do të përdoret vlera bazë e saj. Kini parasysh që nëse nuk doni të vendosini një vlerë për “line-height”, duhet ta hiqni slashin (/) në krah të madhësisë së gërmës (14px në vend të 14px/2).
Listat (List)
Listat janë mënyra e mirë për të shfaqur informacionin të renditur apo shpesh herë një zgjidhje e mirë për menu navigimi. Ato mund të jenë të renditura ose jo dhe me CSS mund të përcaktojmë tipin e ndarësit, pozicionin dhe imazhin e ndarësit.
Mënyra Standarte
| 1 | #elementi{ |
| 2 | list-style-type:circle; /* disc, circle, square, lower-alpha, lower-roman, etj. (baze: disc) */ |
| 3 | list-style-position:outside; /* inside, outside (baze: outside) */ |
| 4 | list-style-image:url(ndaresi.png); /* url(adresa/e/imazhit) (baze: none) */ |
| 5 | } |
Mënyra e Shkurtuar
| 1 | #elementi{ |
| 2 | list-style:circle outside url(ndaresi.png); |
| 3 | } |
Hapësira e jashtme (Margin) dhe e brendshme (Padding)
Ashtu si diferenca me Border dhe Outline, edhe midis Margin dhe Padding ndryshimi i vetëm është hapësira që zënë në Modelin Kuti. Margin zë hapësirë të jashtme duke i spostuar elementet e tjerë, ndërsa Padding zë hapësirë të brëndshme duke i spostuar elementët që ndodhen brenda elementit mëmë. E vetmja vlerë që mund të përcaktohet për Margin dhe Padding është hapësira.
Mënyra Standarte
| 1 | #elementi{ |
| 2 | margin-top:10px; /* auto, px, pt, em, % */ |
| 3 | margin-right:4px; |
| 4 | margin-bottom:6px; |
| 5 | margin-left:2px; |
| 6 | } |
Mënyra e Shkurtuar
| 1 | #elementi{ |
| 2 | margin:10px 4px 6px 2px; |
| 3 | } |
Forma tjetër e shkurtuar është kur hapësira e sipërme është e barabartë me atë të poshtme dhe hapësira djathtas është e barabartë me atë majtas.
Mënyra Standarte
| 1 | #elementi{ |
| 2 | margin-top:10px; |
| 3 | margin-right:20px; |
| 4 | margin-bottom:10px; |
| 5 | margin-left:20px; |
| 6 | } |
Mënyra e Shkurtuar
| 1 | #elementi{ |
| 2 | margin:10px 20px; |
| 3 | } |
Një tjetër shkurtim mund të përdoret kur hapësira e majtë është e barabartë me atë të djathtën, por hapësira e sipërme dhe e poshtme janë të ndryshme.
Mënyra Standarte
| 1 | #elementi{ |
| 2 | margin-top:10px; |
| 3 | margin-right:15px; |
| 4 | margin-bottom:15px; |
| 5 | margin-left:20px; |
| 6 | } |
Mënyra e Shkurtuar
| 1 | #elementi{ |
| 2 | margin:10px 15px 20px; |
| 3 | } |
Forma e fundit e shkurtuar është kur të gjitha hapësirat kanë të njëjtën vlerë.
Mënyra Standarte
| 1 | #elementi{ |
| 2 | margin-top:10px; |
| 3 | margin-right:10px; |
| 4 | margin-bottom:10px; |
| 5 | margin-left:10px; |
| 6 | } |
Mënyra e Shkurtuar
| 1 | #elementi{ |
| 2 | margin:10px; |
| 3 | } |
Shpresoj t’ju kem ndihmuar në mësimin e CSS-së dhe në pasjen e një pike reference atëherë kur format e shkurtuara dhe disa nga vlerat më kryesore nuk ju kujtohen. Nëse dini ndonjë truk tjetër, shkruajeni tek komentet dhe kontriboni në këtë artikull.
Mësim të mbarë.
Fadion Dashi
Fadioni është prej shumë vitesh i apasionuar pas internetit dhe punon freelance si dizenjues dhe programues per web. Kur nuk është duke punuar, i pëlqen të shkruajë, të fotografojë, të admirojë koleskionin e tij të aparatëve fotografikë manualë dhe të kalojë kohë të bukur me miqtë.
Pershendetje Joni, artikulli eshte goxha i mire. Une kam pak kohe qe po merrem me web design, por me shume ne menyre amatoriale pasi problemin e kam tek CSS. E kam te veshtire per ta mesuar dhe do me pelqente qe ketu tek Feniksi.com te kishte me shume artikuj ne lidhje me CSS pasi besoj se dhe shume te tjere kane te njejtin problem si une. Dhe dua te te pyes, psh nqs perdorim menyren e shkurtuar i bie qe vlerat te cilat nuk permenden te marrin gjendjen default, por ku mund ta mesoj une se cila eshte gjendja default e cdo tagu? A ka ndonje tabele online psh qe tregon gjendjen default te css tageve?
Flm Misteralb. Ketu ne Feniksi jemi fokusuar kryesisht ne web dhe sigurisht qe guidat per CSS do te vazhdojne. Te keshilloj te lexosh edhe 2 guidat per kthimin e nje dizenjoje ne HTML dhe CSS sepse do te informojne shume rreth procesit, por edhe per rregullat CSS, selektoret, truke, etj. Sidoqofte, nese ka ndonje gje specifike qe kerkon, mund ta na e thuash.
Ne rregullat standarte me siper kam vendosur cilat jane vlerat e mundshme dhe ajo baze (ne komentet e rreshtave). Keto jane nder rregullat me te perdorshme dhe mjafton te memorizosh nje pjese te tyre, ndersa te tjerat i kerkon specifikisht ne google (psh: “border default value”).