Scopul acestui articol este de a lua în considerare diferitele opțiuni pentru stilul h1, h2. Eticheta H1 este o etichetă importantă în corpul paginii. De regulă, acesta conține titlul tematic al paginii. Eticheta H1 ar trebui alocată astfel încât utilizatorul să nu aibă dificultăți în a înțelege ce se află pe pagina site-ului dvs. Prin urmare, această etichetă trebuie să fie un moment luminos al paginii dvs. Stilul CSS al etichetei H1 poate fi simplu, dar principalul lucru este că dimensiunea fontului este cea mai mare dintre celelalte pe pagină. Și nu numai pentru că captează ochiul utilizatorului, dar joacă un rol și în relevanța paginii și, prin urmare, în optimizare.
Eticheta H2 este o etichetă complementară, poate fi o subdiviziune semantică a H1. Vom lua în considerare și opțiunile pentru stilizarea sa.
Mai jos sunt exemple și moduri de a crea css stil h1, h2 anteturi.
Modalități de styling h1, h2 headers
Vestul
Ca o opțiune, nu rău, dar nu-mi place foarte mult modul CSS de a implementa banda. Această metodă de creare a unei benzi css h1, am găsit pe unul dintre locurile occidentale. Această bandă este implementată pe un cod css pur, deși crossbrowser a suferit (în IE se pare că este un bloc simplu). Mai jos este codul sursă al stilului CSS.
În HTML, h1, banda arată astfel:
Felul meu
După cum puteți vedea, cod css greoaie, atât pentru stilizarea doar tag-ul H1. Prin urmare, îmi propun calea proprie de a crea o bandă similară. Browserele Crosby au fost testate pe IE, FireFox, Opera, Chrome. Mai jos este furnizat codul css și toate fișierele sursă.
Cum se utilizează în HTML:
Greutatea totală a imaginilor este de 750 de octeți. Codul CSS nu mai mult de două linii, greutate - 236 octeți. Sunt mulțumit de rezultat, în plus, totul este simplu și clar, în contrast cu metoda de Vest, în cazul în care greutatea codului CSS - 980 bytes. Desi mina si varianta de vest în greutate sunt identice, codul este afacere mult mai rău decât pentru a procesa imaginea în Photoshop. Putem presupune că viteza de descărcare a unui fișier css este mai rapidă decât trei fișiere (care sunt identice cu greutatea unui fișier css), dar puteți implementa fundalul sub formă de sprite, ceea ce va crește viteza încărcării site-ului. Aflați despre creșterea vitezei utilizând metoda CSS sprite.
Exemplele CSS H1, H2
Toate exemplele vor fi implementate pe principiul stilurilor de modelare prin metoda mea (exemplu site-ul sitear.ru).
CSS pentru antetul H1
În această secțiune, să aruncăm o privire asupra exemplelor reale de stilizare a antetului h1. Exemple, a spus cu voce tare, deoarece fiecare site are un design unic. Iată unul, un exemplu universal al stilului H1. Ideea mea de anteturi de styling este deja înțeleasă, vreau să o finalizez, folosind transparența-imagine în fundal-imagine, care poate fi ușor de făcut în Photoshop. Vedeți exemplul de mai jos.
După cum puteți vedea imaginile originale sunt translucide, și în titlul de clasă, modificarea valorii fundalului folosit, puteți obține următoarele rezultate:
CSS h1 + h2 (co-styling)
Stylize h1 și h2 împreună, este adecvat în prezența unui epilog sau a unei mici introduceri a unui articol de pe site-ul dvs. care poate fi plasat în eticheta h2. De exemplu:
H1 - Styling de h1, h2 titluri;
H2 - Află cum să faci titlurile h1, h2 pe css.
Acesta este exemplul meu, cel mai probabil aveți propria dvs. idee cum să proiectați paginile site-ului. Exemplul css h1 + h2, similar cu cel precedent, ia în considerare codul css.
Esența stilului articulației (h1 + h2) a anteturilor este similară cu exemplul de mai sus, numai în acest caz se utilizează blocuri div.
CSS Styling H2 Header
În mod tipic, eticheta h2 este utilizată pentru a evidenția sub-paragrafele unui articol sau a altui material de pe site. De exemplu, ca pe site-ul sitear.ru. Aș sfătui să creez antete modeste, cu cheie mică, dar confortabile. Îmi place foarte mult ideea cum este organizată pe Wikipedia. Vă sfătuiesc să creați același lucru. Este simplu și convenabil. De exemplu:
Simplu, convenabil și prietenos cu browserul încrucișat.
Articole similare
Trimiteți-le prietenilor: