A linkleltár második részében szemezgettem az internet kincsei közül a CSS témájában, most néhány hasznos tippet szeretnék megosztani a stíluslapokkal kapcsolatban.

Gyakori hibák

Saját tapasztalatomból (is) tudom, hogy következetességgel és odafigyeléssel sok-sok munkaóra megspórolható. Én a legtöbb időt az alábbiak figyelmen kívül hagyása miatt vesztegettem el.

Pont, vessző, pontosvessző, szóköz – mindig csak a megfelelő helyre!

  • .p » ponttal az elején a class="p" stílusú tag-ekre vonatkozik
    p » pont nélkül minden bekezdésre érvényes
  • a, a:hover, a:visited » ez egyes stílusok felsorolásakor közéjük mindig kell vessző, az utolsó után viszont soha
  • a {border: 0; background: #000; color: #fff;} » egy stílus meghatározásánál az egyes tulajdonságok után mindig legyen pontosvessző (bár az utolsó után már nem kötelező, de nem baj, ha ott van)
  • a {font-size: 10px} » az érték és annak mértékegysége között soha ne legyen szóköz

Nem mindegy a sorrend!

  • p a » bekezdésn belüli link
    a p » linken belüli bekezdés
  • p.header » minden class="header" stílusú bekezdés
    .header p » a class="header" header stílusú tag-en belüli összes bekezdés

Egyszerűen jobb

Mint az élet sok más területén, így itt is igaz, hogy a legegyszerűbb a legjobb; mert ha kevesebb a kód, akkor először is kisebb a fájl, másodszor pedig könnyebb átlátni.

Rövidítsünk, ha lehet!

  • p {font-weight: bold;
    font-style: italic;
    font-variant: small-caps;
    font-size: 11px;
    line-height: 15px;
    font-family: helvetica, sans-serif}

    » mindezek helyett elég ennyi:
    p {font: bold italic small-caps 11px/15px helvetica, sans-serif}

  • body {background-color: #000;
    background-image: url(bg.gif);
    background-repeat: no-repeat;
    background-position: center top}

    » egyenértékű ezzel:
    body {background: #000 url(bg.gif) no-repeat center top}

  • p {border-color: #000;
    border-style: solid;
    border-width: 10px}

    » egyszerűbben és rövidebben:
    p {border: #000 solid 10px}

Ráadásul…

  • …jó tudni, hogy egy tag-nek akárhány stílusa lehet (szóközökkel elválasztva).
    p class="txt alignright" » ebben az esetben a bekezdések a .txt és az .alignright stílusokban definiált tulajdonságokkal jelennek meg

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s