A címsorok a legtöbb weboldalon általánosak. Valójában nagyjából minden szöveges dokumentumban szerepel legalább egy címsor, hogy tudd, mit olvasol. Ezeket a címsorokat a HTML fejléc elemek - h1, h2, h3, h4, h5 és h6.
Egyes webhelyeken előfordulhat, hogy a címsorok kódolva vannak, anélkül, hogy ezeket az elemeket használnák. Ehelyett a címsorok használhatnak olyan bekezdéseket, amelyekhez speciális osztályattribútumok vannak hozzáadva, vagy osztásokat osztályelemekkel. Ennek a helytelen gyakorlatnak az oka gyakran az, hogy a tervezőnek "nem tetszik a címsorok kinézete". Alapértelmezés szerint a fejlécek félkövéren vannak feltüntetve, és nagyobbak, különösen a h1 és h2 elemek, amelyek sokkal nagyobb betűmérettel jelennek meg, mint az oldal többi szövege. Ne feledje, hogy ezeknek az elemeknek csak az alapértelmezett megjelenése! Val vel CSS, a kívánt irányba tetszés szerint kinézhet! Megváltoztathatja a betűméretet, eltávolíthatja a félkövér betűt és még sok minden mást. A címsorok a megfelelő módszerek az oldal címsorainak kódolására. Íme néhány ok, amiért.
Miért érdemes inkább a fejléc címkéket használni, mint a megosztottságot
Ez a legjobb ok a címsorok használatára, és a megfelelő sorrendben (pl. h1, majd h2, majd h3 stb.). Kereső motorok adja meg a legnagyobb súlyt a fejléccímkékben szereplő szövegnek, mert ennek a szövegnek van szemantikai értéke. Más szavakkal, a H1 oldalcímke címkézésével elmondja a keresőmotor pókjának, hogy ez az oldal első számú célja. A H2 fejlécek # 2 kiemeléssel rendelkeznek, és így tovább.
Nem kell emlékeznie arra, hogy milyen osztályokat használt a címsorok meghatározásához
Ha tudod, hogy az összes weboldaladon félkövér, 2em és sárga H1 lesz, akkor ezt egyszer megadhatod a stíluslapodban, és kész. 6 hónappal később, amikor újabb oldalt ad hozzá, csak hozzá kell adnia egy H1 címkét az oldal tetejéhez, nincs visszalépni más oldalakra, hogy megtudja, milyen stílusazonosítóval vagy osztályral használta a fő címsor és az alfejek meghatározását.
Adjon meg egy erős oldalvázlatot
A körvonalak megkönnyítik a szöveg olvashatóságát. Ezért a legtöbb amerikai iskola megtanította a diákokat, hogy vázlatot írjanak, mielőtt megírják a cikket. Ha fejléccímkéket vázlatos formátumban használ, a szövege világos felépítésű, amely nagyon gyorsan nyilvánvalóvá válik. Ráadásul vannak olyan eszközök, amelyek áttekinthetik az oldal vázlatát, hogy összefoglalást nyújtsanak, és ezek a vázlat szerkezetének címkék címkéire támaszkodnak.
Az oldal még a kikapcsolt stílusokkal is érzékeny lesz
Nem mindenki tekintheti meg és használhatja a stíluslapokat (és ez visszatér az 1. helyre - a keresőmotorok az oldal tartalmát (szövegét), nem a stíluslapokat). Ha fejléccímkéket használ, hozzáférhetőbbé teszi oldalait, mert a címsorok olyan információkat tartalmaznak, amelyek a DIV tag nem lenne.
Hasznos a képernyőolvasók és a webhelyek akadálymentessége szempontjából
A címsorok megfelelő használata logikai struktúrát hoz létre a dokumentum számára. A képernyőolvasók ezt használják arra, hogy "elolvassák" a webhelyet egy látássérült felhasználó számára, és hozzáférhetővé tegyék webhelyét a fogyatékkal élők számára.
Stílusozza a címsorok szövegét és betűtípusát
A címkézési címkék "nagy, merész és csúnya" problémájától való eltávolodás legegyszerűbb módja, ha a szöveget úgy formázza, ahogyan szeretné. Valójában egy új webhelyen dolgozva a legjobb, ha általában a bekezdést, a h1, h2 és h3 stílusokat írja be. Ragaszkodjon csak a betűtípuscsaládhoz és a mérethez / súlyhoz. Ez például egy új webhely előzetes stíluslapja lehet (ezek csak néhány használható stílus):
Módosíthatja a betűtípusok vagy módosítsa a szöveg stílusát vagy akár a szöveg színét. Mindezek a "csúnya" címsort valami élénkebbé és a tervednek megfelelővé változtatják.
A határok felöltözhetnek a címsorokra
A határok remek módja a címsorok javításának, és könnyen hozzáadhatók. De ne felejtsen el kísérletezni a határokkal - nincs szüksége szegélyre a címsor mindkét oldalán. És nem csak egyszerű, unalmas határokat használhat.
Hozzáadtunk egy felső és alsó szegélyt a minta címsorunkhoz, hogy bemutassunk néhány érdekes vizuális stílust. Bármilyen módon hozzáadhat szegélyeket, hogy elérje a kívánt tervezési stílust.
Adjon hozzá háttérképeket a címsorokhoz a még több Pizazz érdekében
Számos webhely rendelkezik az oldal tetején egy fejléccel, amely tartalmaz egy címsort - általában a webhely címét és grafikáját. A legtöbb tervező ezt két külön elemnek tekinti, de nem muszáj. Ha a grafika csak a címsor díszítésére szolgál, akkor miért ne adhatná hozzá a címsorstílusokhoz?
Ennek a címsornak a trükkje az, hogy tudjuk, hogy a képünk 90 pixel magas. Tehát betöltöttük a 90 képpontos címsor aljára (kitöltés: 0,5 0 90px 0p;). Játszhat a margókkal, a vonal magasságával és a párnázással, hogy a címsor szövege pontosan ott jelenjen meg, ahol szeretné.
A képek használatakor egy dologra kell emlékezni, hogy ha van egy érzékeny weboldal (amit érdemes) a képernyőméret és az eszközök alapján változó elrendezéssel, a címsor nem mindig lesz azonos méretű. Ha a címsorának pontos méretre van szüksége, ez problémákat okozhat. Ez az egyik oka annak, hogy általában kerüljük a háttérképeket a címsorban, olyan hűvösnek, amennyire néha kinézhetnek.
Képcsere a címsorokban
Ez egy másik népszerű technika a webtervezők számára, mivel lehetővé teszi grafikus címsor létrehozását, és a címsor szövegének helyettesítését az adott képpel. Ez valóban elavult gyakorlat a webtervezők részéről, akik nagyon kevés betűtípushoz férhettek hozzá, és egzotikusabb betűtípusokat akartak használni munkájuk során. A webes betűtípusok térnyerése valóban megváltoztatta azt, ahogyan a tervezők megközelítik az oldalakat. A címsorok sokféle betűtípussal állíthatók be, és a beágyazott betűkészletekre már nincs szükség. Mint ilyen, csak a régebbi webhelyek címsorainak CSS-képeit cserélheti le, amelyeket még nem frissítettek korszerűbb gyakorlatokra.
Szerk.: Jeremy Girard