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

#elementi{
      background-color:#aaa; /* emri i ngjyres, #rrggbb, #rgb, rgb(0-2555, 0-255, 0-255), rgb(0-100%, 0-100%, 0-100%) (baze: transparent) */
      background-image:url(imazhi.png); /* url(adresa/e/imazhit) (baze: none) */
      background-repeat:no-repeat; /* repeat, repeat-x, repeat-y, no-repeat (baze: repeat) */
      background-position:top left; /* top, bottom, right, left, center, px, % (baze: top left) */
      background-attachment:scroll; /* scroll, fixed (baze: scroll) */
}

Mënyra e Shkurtuar

#elementi{
      background:#aaa url(imazhi.png) no-repeat top left scroll;
}

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

#elementi{
      border-width:2px; /* thin, thick, medium, numer ne px (baze: medium) */
      border-style:solid; /* solid, dotted, dashed, double, groove, inset, outset, ridge, hidden (baze: none) */
      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) */
}

Mënyra e Shkurtuar

#elementi{
      border:2px solid #999;
}

Konturi mund të përcaktohet shkurtimisht edhe vetëm për një anë të caktuar (psh: ana e sipërme).

Mënyra Standarte

#elementi{
      border-top-width:1px;
      border-top-style:dotted;
      border-top-color:red;
}

Mënyra e Shkurtuar

#elementi{
      border-top:1px dotted red;
}

Për ta mbyllur me Konturet, do shohim si madhësia e konturit vendoset për çdo anë.

Mënyra Standarte

#elementi{
      border-top-width:5px;
      border-right-width:3px;
      border-bottom-width:10px;
      border-left-width:6px;
}

Mënyra e Shkurtuar

#elementi{
      border-width:5px 3px 10px 6px;
}

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

#elementi{
      font-style:italic; /* normal, italic, oblique (baze: normal) */
      font-variant:normal; /* normal, small-caps (baze: normal) */
      font-weight:bold; /* normal, lighter, bold, bolder, 100-900 (baze: normal) */
      font-size:14px; /* small, smaller, medium, large, larger, xx-small, x-small, xx-large, x-large, px, pt, em, % (baze: normal)  */
      line-height:2; /* normal, px, pt, em, %, numer (baze: normal) */
      font-family:Arial, Verdana, sans-serif; /* Arial, Verdana, Helvetica, Times, serif, sans-serif, etj. (baze: Fonti i Shfletuesit) */
}

Mënyra e Shkurtuar

#elementi{
      font:italic normal bold 14px/2 Arial, Verdana, sans-serif;
}

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

#elementi{
      list-style-type:circle; /* disc, circle, square, lower-alpha, lower-roman, etj. (baze: disc) */
      list-style-position:outside; /* inside, outside (baze: outside) */
      list-style-image:url(ndaresi.png); /* url(adresa/e/imazhit) (baze: none) */
}

Mënyra e Shkurtuar

#elementi{
      list-style:circle outside url(ndaresi.png);
}

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

#elementi{
      margin-top:10px; /* auto, px, pt, em, %  */
      margin-right:4px;
      margin-bottom:6px;
      margin-left:2px;
}

Mënyra e Shkurtuar

#elementi{
      margin:10px 4px 6px 2px;
}

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

#elementi{
      margin-top:10px;
      margin-right:20px;
      margin-bottom:10px;
      margin-left:20px;
}

Mënyra e Shkurtuar

#elementi{
      margin:10px 20px;
}

Forma e fundit e shkurtuar është kur të gjitha hapësirat kanë të njëjtën vlerë.

Mënyra Standarte

#elementi{
      margin-top:10px;
      margin-right:10px;
      margin-bottom:10px;
      margin-left:10px;
}

Mënyra e Shkurtuar

#elementi{
      margin:10px;
}

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