Kuidas ja millal HTML-is rõhumärgist kasutada

click fraud protection

Üks siltidest, mille õpite oma alguses veebidisain haridus on paar silti, mida nimetatakse "rõhumärgenditeks". Vaatame üle, mis need sildid on ja kuidas neid tänapäeval veebidisainis kasutatakse.

Tagasi XHTML-i juurde

Kui õppisite HTML-i aastaid tagasi, tükk aega enne HTML5, kasutasite tõenäoliselt nii rasva- kui ka kaldkirjasilte. Nagu arvata võis, muutsid need sildid elemendid vastavalt paksuks tekstiks või kursiiviks. Nende siltide probleem ja miks nad lükati kõrvale uute elementide kasuks (mida me lähiajal vaatame), on see, et need pole semantilised elemendid. Seda seetõttu, et nad määratlevad teksti väljanägemise asemel teksti välimuse. Pidage meeles, et HTML (see on koht, kuhu need sildid kirjutatakse) on seotud struktuuriga, mitte visuaalse stiiliga! Visuaalidega tegeleb CSS ja veebidisaini parimad tavad on juba ammu leidnud, et teie veebilehtedel peaks olema stiil ja struktuur selgelt eraldatud. See tähendab, et ei kasutata elemente, mis pole semantilised ja mille detailid pigem näevad välja kui struktuurid. Sellepärast on julge ja

instagram viewer
kursiiv sildid on üldjoontes asendatud tugevate (paksus kirjas) ja rõhutustega (kursiiv).

ja

Tugevad ja rõhutatud elemendid lisavad teie tekstile teavet, täpsustades sisu, mida tuleks selle sisu rääkimisel erinevalt käsitleda ja rõhutada. Kasutate neid elemente üsna samamoodi, nagu oleksite varem kasutanud rasvaseid ja kaldkirju. Sisestage oma tekst lihtsalt ava- ja sulgemissiltidega ( ja rõhutamiseks ja ja tugevaks rõhutamiseks) ja rõhutatakse lisatud teksti.

Võite need sildid pesitseda ja pole tähtis, milline on väline silt. Siin on mõned näidised.

Seda teksti rõhutatakse ja enamik brausereid kuvaks selle kursiivina. 
Seda teksti rõhutatakse tugevalt ja enamik brausereid kuvaks selle paksus kirjas. 

Mõlemas näites ei dikteeri me visuaalset ilmet HTML. Jah, vaikimisi välimus silt oleks kursiiv ja oleks julge, kuid neid väljanägemisi saab CSS-is hõlpsasti muuta. See on mõlema maailma parim. Võite kasutada brauseri vaikestiile, et saada dokumendis kursiiv- või rasvane tekst ilma joont ületamata ning struktuuri ja stiili segamata. Ütle, et tahtsid seda Kui tekst pole mitte ainult paks, vaid ka punane, võite selle lisada SCS-i.

tugev {
värv: punane;
}

Selles näites ei pea te rasvase font-kaalu jaoks atribuuti lisama, kuna see on vaikimisi. Kui te ei soovi seda juhuse hooleks jätta, võite selle alati lisada:

tugev {
fondi kaal: paks;
värv: punane;
}

Nüüd oleksite kindel, et teil on julge (ja punase) tekstiga leht kõikjal kasutatakse silti.

Tehke kahekordset rõhku

Üks asi, mida oleme aasta jooksul märganud, on see, mis juhtub, kui proovite rõhuasetust kahekordistada. Näiteks:

Selles tekstis peaks olema mõlemad paksus kirjas ja kursiivis tekst selle sees.

Võib arvata, et see rida tekitaks ala, millel on rasvases kirjas ja kaldkirjas tekst. Mõnikord see tõepoolest juhtub, kuid oleme näinud, et mõned brauserid austavad ainult kahte kahest esiletõstmisstiilist, seda, mis on tegelikule tekstile kõige lähemal, ja kuvavad seda ainult kursiivina. See on üks põhjus, miks me rõhuasetussiltidele topelt ei tee.

Veel üks põhjus selle "kahekordistamise" vältimiseks on stiililine. Tavaliselt piisab soovitud tooni edastamiseks ühest rõhuvormist. Teksti eristamiseks ei ole vaja teksti paksus kirjas, kursiivis muuta, värvida, suurendada ja alla joonida. See tekst - kas kõik need erinevad rõhuasetused - muutuks kiivaks. Nii et olge rõhuasetuse märgistuste või CSS-stiilide kasutamisel ettevaatlik ja ärge pingutage sellega üle.

Märkus paksus ja kaldkirjas

Viimane mõte - kui julge () ja kursiiv () silte ei soovitata enam rõhuasetustena kasutada, on mõned veebidisainerid, kes kasutavad neid silte teksti tekstialade kujundamiseks. Põhimõtteliselt kasutavad nad seda nagu a element. See on tore, kuna sildid on väga lühikesed, kuid nende elementide sellisel viisil kasutamist ei soovitata tavaliselt kasutada. Mainime seda juhul, kui näete seda seal mõnel saidil, mida kasutatakse mitte rasvase või kursiivkirjutatud teksti loomiseks, vaid CSS-konksu loomiseks mõne muu visuaalse stiili jaoks.

instagram story viewer