Käytä fontteja, reunoja ja kuvia koristamaan otsikoita
Otsikot ovat yleisiä useimmilla verkkosivuilla. Itse asiassa melkein missä tahansa tekstidokumentissa on ainakin yksi otsikko niin, että tiedät sen, mitä olet lukemassa. Nämä otsikot koodataan käyttämällä HTML-otsikkotekijöitä - h1, h2, h3, h4, h5 ja h6.
Joillakin sivustoilla saatat huomata, että otsikot on koodattu ilman näitä elementtejä. Sen sijaan otsikot saattavat käyttää kappaleita, joilla on erityisiä luokkamääritteitä, jotka on lisätty niille, tai luokitteluelementtejä. Syy, josta kuulen usein virheellisestä käytännöstä, on, että suunnittelija "ei pidä tapaa, jolla otsikot näyttävät". Oletusarvon mukaan otsikot näkyvät lihavoituna ja ne ovat suurempia, erityisesti h1- ja h2-elementtejä, jotka näkyvät paljon suuremmassa kirjasinkokoisena kuin loput sivun tekstistä. Muista, että tämä on vain näiden elementtien oletuskuva! CSS: n avulla voit näyttää otsikon haluamallasi tavalla! Voit muuttaa fonttikokoa, poistaa rohkeat ja paljon muuta. Otsikot ovat oikea tapa koodata sivun otsikot. Seuraavassa on joitain syitä.
Miksi käyttää otsikkotunnuksia eikä DIV: ää ja muotoilua
Hakukoneet kuten otsikkotunnisteet
Tämä on paras syy käyttää otsikoita ja käyttää niitä oikeassa järjestyksessä (esim. H1, sitten h2, sitten h3 jne.). Hakukoneet antavat suurimman painotuksen tekstiin, joka sisältyy otsikkotunnisteisiin, koska tekstissä on semanttinen arvo. Toisin sanoen, merkitsemällä sivun otsikko H1, kerrot hakukonehämähäkki, että se on sivun # 1 keskittymä. H2-otsikoilla on # 2 painotus ja niin edelleen.
Sinun ei tarvitse muistaa, mitä luokkia olet käyttänyt otsikoiden määrittämisessä
Kun tiedät, että kaikilla Web-sivuillasi on H1, joka on lihavoitu, 2em ja keltainen, voit määritellä sen kerran tyylisivustasi ja tehdä sen. 6 kuukautta myöhemmin, kun lisäät toisen sivun, lisäät vain H1-tunnisteen sivun yläreunaan, sinun ei tarvitse palata muille sivuille, jotta voit selvittää, minkä tyyppisen tunnuksen tai luokan olet määrittänyt otsikko ja alaotsikot.
Ne tarjoavat vahvan sivun
Piirteet tekevät tekstistä helpompaa lukea. Siksi useimmat yhdysvaltalaiset oppilaitokset opettivat oppilaita kirjoittamaan ääriviivat ennen kuin he kirjoittavat paperin. Kun käytät otsikkotunnisteita ääriviivoissa, tekstissä on selkeä rakenne, joka näkyy hyvin nopeasti. Lisäksi on olemassa työkaluja, jotka voivat tarkastella sivun ääriviivoja synopsin luomiseksi, ja ne perustuvat ääriviivatekniikan otsikkotuotteisiin.
Sivusi tekee mielekästä vaikka tyylit katkeilivat
Kaikki eivät voi tarkastella tai käyttää tyyliarkkeja (ja tämä palaa # 1 - hakukoneet katselevat sivun sisältöä (tekstiä), eivät tyyliarkeja). Jos käytät otsikkotunnisteita, teket sivuillasi helpommin, koska otsikot antavat tietoja, joita DIV-tunniste ei halua.
Se on hyödyllinen näytönlukijoille ja sivuston esteettömyydelle
Nimikkeiden asianmukainen käyttö luo asiakirjalle loogisen rakenteen. Tämä on se, mitä näytönlukijat käyttävät sivuston "lukemiseen" näkövammaisille käyttäjille, mikä tekee sivustostasi vammaisille.
Muokkaa otsikoiden tekstiä ja fonttia
Helpoin tapa siirtyä pois otsikkotunnisteiden "iso, rohkea ja ruma" ongelma on muotoilla tekstiä tavalla, jota haluat niiden näyttävän. Itse asiassa, kun työskentelen uudella verkkosivustolla, kirjoitan tyypin 1, h1, h2 ja h3 tyyliin. Olen yleensä kiinni vain fontin perhe ja koko / paino. Esimerkiksi tämä voi olla uuden sivuston alustava tyyliarkki (nämä ovat vain muutamia esimerkkejä tyyleistä, joita voitaisiin käyttää):
body, html {marginaali: 0; pehmuste: 0; } p {font: 1em Arial, Geneva, 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, Geneva, Helvetica, sans-serif; }Voit muokata otsikkosi fontteja tai muuttaa tekstiä tai jopa tekstin väriä . Kaikki nämä kääntävät "ruma" otsikonne jotain elävämpää ja sopusoinnussa suunnittelusi kanssa.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; marginaali: 0; pehmuste: 0; väri: # e7ce00; }Rajat voivat pukeutua otsikoihin
Rajat ovat erinomainen tapa parantaa otsikoita. Ja rajoja on helppo lisätä. Mutta älä unohda kokeilla rajoja - et tarvitse reunaa otsikon kummallakin puolella. Ja voit käyttää enemmän kuin pelkkää tylsää rajaa.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; marginaali: 0; pehmuste: 0; väri: # e7ce00; raja-top: solid # e7ce00 medium; raja-pohja: pisteviiva # e7ce00 ohut; leveys: 600px; }Lisäsin ylätason ja alareunan näytekappaleeni esittelemään mielenkiintoisia visuaalisia tyylejä. Voit lisätä rajoja millään tavalla, jonka haluat saavuttaa haluamasi tyylin.
Lisää taustakuvia otsikoihin vielä enemmän Pizazz
Monilla verkkosivustoilla on sivun yläosassa otsikko-osio, joka sisältää otsikon - tyypillisesti sivuston otsikon ja graafin. Useimmat suunnittelijat ajattelevat tätä kahtena eri elementtinä, mutta sinun ei tarvitse. Jos grafiikka on vain sisustettu otsikko, niin miksi ei lisätä sitä otsikko tyylejä?
h1 {font: bold italic 3em / 1em "Times New Roman", "MS Serif", "New York", serif; tausta: #fff url ("fancyheadline.jpg") toista-x pohja; pehmuste: 0,5em 0 90px 0; teksti-align: center; marginaali: 0; border-bottom: solid # e7ce00 0.25em; väri: # e7ce00; }Tämän otsikon temppu on, että tiedän, että kuva on 90 pikseliä pitkä. Joten lisäsin pehmuste 90px otsikon alareunaan (pehmuste: 0.5 0 90px 0p;). Voit pelata marginaaleilla, rivin korkeudella ja pehmusteella saada otsikon tekstin näyttämään tarkalleen missä haluat.
Muistettavaa, kun käytät kuvia, on se, että jos sinulla on reagoiva verkkosivusto (jota sinun pitäisi) ja ulkoasua, joka muuttuu näytön koon ja laitteiden mukaan, otsikko ei aina ole sama koko. Jos otsikko on tarkka koko, se voi aiheuttaa ongelmia. Se on yksi syy siihen, että yleensä vältän taustakuvia otsikossa, niin viileinä kuin ne voivat joskus näyttää.
Kuvanvaihto otsikoissa
Tämä on toinen suosittu tekniikka web-suunnittelijoille, koska sen avulla voit luoda graafisen otsikon ja korvata otsikkotunnuksen tekstin kyseisen kuvan avulla. Tämä on totuudenmukaisesti antiikin käytäntö web-suunnittelijoilla oli käytössään vain muutamia fontteja ja halusi käyttää enemmän eksoottisia kirjasimia työstään. Web-fonttien nousu on todella muuttanut suunnittelijoiden lähestymistapaa sivustoihin. Otsikot voidaan nyt asettaa monenlaisiin fontteihin ja kuviin, joissa sulautetut fontit eivät enää ole tarpeen. Sellaisena, löydät vain CSS-kuvat korvaamaan otsikoita vanhemmissa sivustoissa, joita ei ole vielä päivitetty nykyaikaisemmiksi käytännöiksi.
Alkuperäinen artikkeli Jennifer Krynin. Julkaisija Jeremy Girard 9/6/17