Pealkirjade kaunistamiseks kasutage fonte, piirdeid ja pilte
Pealkirjad on levinud enamikul veebilehtedel. Tegelikult on suvalises tekstidokumendis vähemalt üks pealkiri, nii et saate teada, mida lugeda pealkiri. Need pealkirjad on kodeeritud, kasutades HTML-pealkirja elemente - h1, h2, h3, h4, h5 ja h6.
Mõned saidid võite leida, et pealkirjad on kodeeritud ilma neid elemente kasutamata. Selle asemel võivad pealkirjad kasutada neile lisatavate spetsiifiliste klassi atribuutidega või klassi elementidega jagamist. Põhjus, miks ma tihti kuuleks seda valet praktikat, on see, et disainer "ei meeldi, kuidas rubriigid välja näevad". Vaikimisi kuvatakse pealkirjad paksus kirjas ja need on suuremad, eriti hl ja h2 elemendid, mis kuvatakse palju suuremas kirjasuuruses kui ülejäänud lehe tekst. Pidage meeles, et see on ainult nende elementide vaikevaade! CSS-i abil saate pealkirja vaadata, kui soovite! Võite muuta fondi suurust, eemaldada rasvane ja palju muud. Pealkirjad on õige lehekülg lehe pealkirjade kodeerimiseks. Siin on mõned põhjused.
Miks kasutada DIV-de ja kujunduse asemel pealkirja märke
Otsingumootorid nagu rubriigid
See on parim alus rubriikide kasutamiseks ja nende kasutamine õiges järjekorras (st h1, siis h2, siis h3 jne). Otsingumootorid annavad teksti pealkirjas pealkirjas olevatele tekstidele kõrgeima kaaluga, kuna sellele tekstile on semantiline väärtus. Teisisõnu, märkides oma lehe pealkirja H1, ütlete otsingumootori ämblikule, et see on lehekülje # 1 fookus. H2 pealkirjad on # 2 rõhuasetusega ja nii edasi.
Teil pole vaja meeles pidada, milliseid klasse olete oma pealkirjade määratlemiseks kasutanud
Kui teate, et kõikidel teie veebisaitidel on H1, mis on paks, 2em ja kollane, saate selle oma laaditabelis üks kord määrata ja seda teha. Kuus kuud hiljem, kui lisate teise lehe, lisate lihtsalt oma lehe ülaosale hiire H1, ei pea te uuesti lehtedele minema, et teada saada, millist stiili või klassi kasutate peamise pealkiri ja alamrubriigid.
Nad annavad tugeva lehe kokkuvõtte
Joonistused teevad teksti lihtsamaks lugemiseks. Sellepärast on enamik USA kooli õpetanud õpilasi kirjutama ülevaade enne kui nad kirjutada paberit. Kui kasutate siltide pealkirju üldisel kujul, on teie tekstil selge struktuur, mis ilmneb väga kiiresti. Lisaks on olemas tööriistad, mis võimaldavad ülevaate lehe ülevaate läbi vaadata, ning need tuginevad kontuurstruktuuri pealkirjadele.
Teie leht muudab mõtteid ka siis, kui stiilid on välja lülitatud
Mitte igaüks ei saa vaadata ega kasutada stiililehte (ja see tuleb tagasi # 1 - otsingumootorid vaatavad lehe sisu (teksti), mitte stiililehte). Kui kasutate siltide pealkirju, muudate oma lehed veelgi hõlpsamini, sest pealkirjad annavad teavet, mida DIV-i märgend mitte.
See on kasulik ekraanilugejatele ja veebisaitide juurdepääsetavusele
Rubriikide õige kasutamine loob dokumendile loogilise struktuuri. Seda kasutavad ekraanilugejad saidi lugemiseks nägemiskahjustusega kasutajale, muutes saidi puuetega inimestele kättesaadavaks.
Stiilige oma pealkirjade tekst ja font
Lihtsaim viis pealkirja "suur, julge ja kole" probleemi eemaldamiseks on teksti stiilimine nii, nagu soovite, et see välja näeks. Tegelikult, kui töötab uue veebisaidi juures, kirjutan tavaliselt esimest asja, lõik, h1, h2 ja h3. Tavaliselt jääb mul just fontide perekond ja suurus / kaal. Näiteks võib see olla uue saidi esialgse stiililehe (need on vaid mõned näited, mida võiks kasutada):
keha, html {margin: 0; padding: 0; } p {font: 1em Arial, Genf, Helvetica, sans-serif; } h1 {font: bold 2em "Times New Roman", Times, serif; } h2 {font: bold 1.5em "Times New Roman", Times, serif; } h3 {font: bold 1.2em Arial, Genf, Helvetica, sans-serif; }Te saate muuta oma pealkirja fonte või muuta teksti stiili või isegi teksti värvi . Kõik need muudavad teie "kole" pealkirja midagi erksamat ja kooskõlas teie disainiga.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; marginaal: 0; padding: 0; värv: # e7ce00; }Piirid saavad kleit üles pealkirjad
Piirid on suurepärane võimalus oma pealkirjade parandamiseks. Ja piiri on lihtne lisada. Kuid ärge unustage eksperimenteerida piiridega - te ei pea pealkirja mõlemal küljel piiri. Ja võite kasutada rohkem kui lihtsalt igavaid piire.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; marginaal: 0; padding: 0; värv: # e7ce00; border-top: solid # e7ce00 keskmise; border-bottom: punktiir # e7ce00 õhuke; laius: 600px; }Lisasin oma proovi pealkirja pealmise ja alumise piiri, et tutvustada mõnda huvitavat visuaalset stiili. Võite piirid lisada mis tahes viisil, mida soovite soovitud disaini stiili saavutada.
Lisage pealkirjadele taustpilte veelgi Pizazziks
Paljudel veebisaitidel on lehe ülaosas pealkirja sektsioon, mis sisaldab pealkirja - tavaliselt saidi pealkiri ja graafika. Enamik disaineritest arvab seda kahte eraldi elementi, kuid sul pole seda vaja. Kui graafika on lihtsalt pealkirja kaunistamiseks, siis miks mitte lisada selle pealkirja stiile?
h1 {font: bold italic 3em / 1em "Times New Roman", "MS Serif", "New York", serif; taust: #fff url ("fancyheadline.jpg") repeat-x alt; padding: 0.5em 0 90px 0; teksti-joondus: keskus; marginaal: 0; border-bottom: solid # e7ce00 0.25em; värv: # e7ce00; }Selle pealkirja trikk on see, et ma tean, et minu kujutis on pikkusega 90 pikslit. Nii et lisasin täienduse 90px pealkirja põhjale (padding: 0.5 0 90px 0p;). Võite mängida marginaalide, rida-kõrguse ja polsterdusega, et saada pealkirja tekst, kus kuvatakse täpselt, kus soovite.
Piltide kasutamisel tuleb meeles pidada, et kui teil on reageerimisvõimeline veebisait (mis peaks olema) koos kujundusega, mis muutub vastavalt ekraani suurusele ja seadmetele, ei pea pealkiri alati olema sama suur. Kui peate pealkirja olema täpne suurus, võib see põhjustada probleeme. See on üks põhjusi, miks ma üldiselt vältida taustpildi pealkirjas, nii lahe kui nad võivad mõnikord välja nägema.
Pildi asendamine pealkirjades
Veebi disainerite jaoks on see teine populaarne meetod, kuna see võimaldab teil luua graafilise pealkirja ja asendada pealkirja teksti selle pildiga. Veebi disaineritel on tõepärastel juhtudel ligipääs väga vähesetele fontidele ja tahtsid oma töös kasutada eksootilisemaid fonte. Veebifontide tõus on tegelikult muutnud disainerite lähenemist saitidele. Pealkirju saab nüüd seada mitmesuguste fontidega ja pilte nende varjatud fondidega enam ei vajata. Sellisena leiate CSS-pilte ainult vanemate saitide pealkirjade asendamiseks, mida pole seni veel ajakohastatud versioonid uuendatud.
Jennifer Krynini algne artikkel. Redigeeris Jeremy Girard 9./6/17