Det er mange tagger for formatering av tekst. Noen av dem brukes ofte (og du vil raskt huske dem), andre - sjelden (du trenger ikke å huske dem).

Her skal vi se på de som brukes ofte.

Tagger som lager tekstoverskrifter

Disse kodene fremhever tekst som overskrifter. De. Hver overskrift starter på en ny linje, er uthevet med fet skrift og har sin egen størrelse (overskriften på første nivå er størst, sjette nivå er minste).

Disse taggene kan brukes med alternativet for horisontal justering tilpasse. Mulige verdier for denne parameteren:

• venstre- venstre,
• Ikke sant- til høyre,
• senter- i midten,
• rettferdiggjøre- i bredden.

Eksempelkode:

Avsnittsskift og linjeskift-tagger

stikkord
- tvungen linjemating tag. Teksten etter denne taggen starter på en ny linje.
Tagger dele teksten inn i avsnitt. Før begynnelsen av hvert avsnitt bør du plassere en kode

, er den avsluttende taggen valgfri. I motsetning til taggen
Avsnitt er atskilt fra hverandre med en blank linje.

Ved lappen

det er en parameter tilpasse, som spesifiserer hvordan tekst i et avsnitt er justert. Mulige verdier for denne parameteren:

• venstre- venstre,
• Ikke sant- til høyre,
• senter- i midten,
• rettferdiggjøre- i bredden.

Eksempelkode:

HTML-formatering

Dette er et avsnitt, det er atskilt fra resten av teksten med tomme linjer øverst og nederst og justert til venstre.

Dette er et avsnitt, det er atskilt fra resten av teksten med tomme linjer øverst og nederst og er justert til høyre.

Dette er et avsnitt, det er atskilt fra resten av teksten med tomme linjer øverst og nederst og justert til midten.

Det er bare tekst.
Dette er tekst på en ny linje.

I nettleservinduet vil det se slik ut:

Etiketter som gjør tekst kursiv

Disse kodene kursiverer tekst, men de gjør dette av forskjellige grunner.
Tagger brukes til å logisk fremheve titler på bøker, artikler og sitater.
Tagger brukes til å fremheve definisjoner.
Tagger Og fremheve viktige deler av teksten. Sistnevnte anbefales ikke til bruk.

Eksempelkode:

HTML-formatering Denne teksten er i cite-tagger
Denne teksten er i dfn-tagger
Denne teksten er i em-tagger
Denne teksten er i i-tagger

I nettleservinduet vil det se slik ut:

Etiketter som gjør tekst fet

Begge brukes til å fremheve viktige deler av teksten, men førstnevnte er å foretrekke.

Eksempelkode:

Denne teksten i taggene er sterk
Denne teksten er i b-tagger

I nettleservinduet vil det se slik ut:

Tagger som fremhever tekst med understreking

Begge brukes til å understreke viktige tekstavsnitt, men førstnevnte foretrekkes.

Eksempelkode:

HTML-formatering Bare tekst

Denne teksten er i u-tags

I nettleservinduet vil det se slik ut:

Tagger som viser tekst i monospace-skrift

Teksten vises i en monospace-font, men det er å foretrekke å bruke den første.

Eksempelkode:

HTML-formatering Bare tekst
Denne teksten er i kbd-tagger
Denne teksten er i prøvetagger
Denne teksten er i tt-tagger

I nettleservinduet vil det se slik ut:

Tagger som viser tekst i hevet og senket skrift

Tagger vise tekst under linjenivå i en mindre skriftstørrelse.
Tagger vise tekst over linjenivå i en mindre skriftstørrelse.
Praktisk for å utlede matematiske og kjemiske formler.

Eksempelkode:

HTML-formatering y=x 2 - ligning av en parabel.

H 2 O er formelen til vann.

I nettleservinduet vil det se slik ut:

Font-taggen og dens parametere

Tagger angi parameterne for tekstskrift:

ansikt- navn på fonten. Du kan liste opp flere skriftnavn, atskilt med komma. I dette tilfellet, hvis den første angitte fonten ikke blir funnet (du vet ikke hvilke fonter som er installert på brukerens datamaskin), vil nettleseren bruke den neste i listen.

størrelse- skriftstørrelse i vilkårlige enheter fra 1 til 7. Standard skriftstørrelse er 3.

farge- tekstfarge (standard - svart).

Det er to måter å angi en farge på: ved navn og ved å angi en heksadesimal fargekode.

Med personlige farger (det er 156 av dem) er alt enkelt, se på den tilsvarende tabellen, velg fargen du liker og skriv navnet i parameterverdien (for eksempel farge = "blå").

Men den andre metoden gir mye mer valg. Her kan vi velge mellom en million farger ved å spesifisere dens heksadesimale kode. Denne koden er på 6 sifre og begynner med tegnet "#". Vi vil ikke gå i detalj om hvordan fargekoden er dannet, vi vil bare påpeke at den kan fås for eksempel i Photoshop. Les om hvordan du gjør dette på siden
Det blir klarere med et eksempel:

La oss markere ordet "tekst" i rødt:

Tekst

La oss nå legge til kursiv etiketter (åpner til venstre, lukker til høyre):

Tekst

Og nå - fet etikett:

Tekst

Hver gang legger vi alle tidligere tagger inn i nye. Dette kalles hekkerekkefølge. Du kan bruke forskjellige tagger for å formatere teksten, det viktigste er å ikke bryte hekkerekkefølgen.

Dette avslutter den tredje leksjonen, vi så på de viktigste måtene å formatere tekst på, i neste leksjon skal vi se på mindre anvendelige formateringskoder. Likevel vil det ikke være en dårlig idé å gjøre deg kjent med dem.

eller studer tagger som formaterer HTML-tekst

Vi presenterer for din oppmerksomhet en av de viktigste og enkleste leksjonene i opplæringen.

• HTML-tekst er hovedkomponenten på de fleste Internett-sider.
• Ved nøkkelfraser i teksten på HTML-siden brukere kan finne nettstedet ditt.
• HTML-tekst Kan være hvilken som helst størrelse og farge etter eget skjønn. Du kan også bestemme skrifttypen og volumet.
• HTML-skriftstørrelse vanligvis satt i piksler.
• HTML-tekstformatering mye brukt, brukes formateringskoder.

Se nedenfor koder som formaterer HTML-tekst:

• Tagger → fet skrift HTML-tekst(Fet skrift).
• Tagger → fet skrift HTML-tekst(Fet skrift).
• Tagger → monospace HTML-tekst(monospace font).
• Tagger → monospace HTML-tekst(monospace font).
• Tagger → monospace HTML-tekst(monospace font).
• Tagger → HTML-tekst, større enn vanlig størrelse (stor skrift).
• Tagger → HTML-tekst, størrelsen er mindre enn vanlig (liten skrift).
• Tagger → skrå HTML-tekst(Kursiv skrift).
• Tagger → skrå HTML-tekst(Kursiv skrift).
• Tagger → skrå HTML-tekst(Kursiv skrift).
• Tagger → understreket HTML-tekst(understreket skrift).
• Tagger → krysset ut HTML-tekst(gjennomstrekingsskrift).
• Tagger → HTML-tekst(font) i subscript.
• Tagger → HTML-tekst(font) i hevet skrift.

HTML-tekstformatering: gjennomstreket, understreket tekst

Resultat: ... monospace font

Resultat: ...skriftstørrelsen er større enn normalt

Resultat: ... kursiv skrift

Resultat: gjennomstreket tekst (gjennomstrekingsskrift)

Resultat: hevet skrift

Formateringsteknikkene som er presentert ovenfor bør kun brukes for små deler av teksten. Bruk det CSS hvis du ønsker å angi en bestemt skrift for hele siden, eller for flere linjer, for eksempel.

Beskrivelse

Legger til tekstdekor i form av understreking, gjennomstreking, en linje over teksten og blinking. Du kan bruke mer enn én stil om gangen ved å angi verdier atskilt med mellomrom.

Syntaks

tekst-dekorasjon: [blink || line-through || overlinje || understreke ] | ingen | arve

Verdier

blink Stiller inn teksten til å blinke. Slik tekst forsvinner med jevne mellomrom, omtrent en gang i sekundet, og dukker deretter opp igjen på sin opprinnelige plass. Denne verdien støttes for øyeblikket ikke av nettlesere og er avviklet i CSS3, med animasjon anbefalt i stedet. line-through Oppretter gjennomgående tekst (eksempel). overlinje En linje går over teksten (eksempel). understrek Angir teksten som skal understrekes (eksempel). ingen Avbryter alle effekter, inkludert understrekingslenker, som er angitt som standard. arv Verdien arves fra overordnet.

HTML5 CSS2.1 IE Cr Op Sa Fx

Strategisk angrep

Objektmodell

document.getElementById("elementID ").style.textDecoration

document.getElementById("elementID ").style.textDecorationBlink

document.getElementById("elementID ").style.textDecorationLineThrough

document.getElementById("elementID ").style.textDecorationIngen

document.getElementById("elementID ").style.textDecorationOverLine

document.getElementById("elementID ").style.textDecorationUnderstrek

Nettlesere

Internet Explorer-versjoner til og med 7.0 støtter ikke arveverdien. Linjen oppnådd ved å bruke linjegjennomgangsverdien i IE7 er plassert høyere enn i andre nettlesere; Denne feilen er rettet i IE8.

Det finnes en rekke forskjellige måter å style en understreking på. Du husker kanskje Marcin Vicharis artikkel "Crafting link underlines" på Medium. Medium-utviklerne prøver ikke å gjøre noe sprøtt, de vil bare lage en fin linje under teksten.

Dette er den enkleste understrekingen, men den har riktig størrelse og overlapper ikke bokstavlederne. Og det er definitivt bedre enn standard understreking i de fleste nettlesere. Medium måtte møte utfordringer for å oppnå sin stil på nettet. To år senere synes vi fortsatt det er vanskelig å lage vakker understreking.

Mål

Hva er galt med den vanlige tekstdekorasjonen: understreking? I et ideelt scenario bør understrekingen gjøre følgende:

• posisjon under grunnlinjen;
• hoppe over meldinger;
• endre farge, tykkelse og stil på linjen;
• arbeid med flerlinjetekst;
• jobbe med hvilken som helst bakgrunn.

Jeg tror alle disse er rimelige krav, men så vidt jeg vet er det ingen intuitiv måte å oppnå dette ved å bruke CSS.

tilnærminger

Så hva er disse forskjellige måtene vi kan implementere understreking på nettet?

Her er de jeg vurderer:

• tekst-dekorasjon;
• border-bottom ;
• boks-skygge ;
• bakgrunnsbilde ;
• SVG-filtre;
• Underline.js(lerret);
• tekst-dekor-* .

La oss se på disse metodene en etter en og snakke om fordeler og ulemper ved hver av dem.

tekst-dekorasjon

tekst-dekorasjon er den mest åpenbare måten å understreke tekst på. Du bruker én eiendom og det er nok. Ved små skriftstørrelser kan dette se greit ut, men øk skriftstørrelsen og understrekingen begynner å se vanskelig ut.

Det største problemet med tekstdekorasjon er mangelen på tilpasning. Du er begrenset til fargen og skriftstørrelsen på teksten, og det er ingen måte å endre dette på i flere nettlesere. Vi vil snakke om dette mer detaljert senere.

• lett å bruke;
• plassert under grunnlinjen;
• hopper over infomeldinger som standard i Safari og iOS;
• legger vekt på flerlinjetekst;
• fungerer på hvilken som helst bakgrunn.

• hopper ikke over bunntekst i alle andre nettlesere;
• lar deg ikke endre farge, tykkelse eller stil på linjen.

grense-bunn

border-bottom gir en god balanse mellom enkelhet og tilpasningsmuligheter. Denne tilnærmingen bruker den gode gamle CSS-kantegenskapen, noe som betyr at du enkelt kan endre farge, tykkelse og stil.

Slik ser kant-bunn ut for innebygde elementer.

Den største ulempen er avstanden mellom understrekingen og teksten, den er helt under forklaringene. Du kan fikse dette ved å sette elementene til inline-block og redusere linjehøyden , men da mister du muligheten til å bryte tekst. Bra for individuelle linjer, men ikke egnet andre steder.

I tillegg kan vi bruke tekstskygge for å skjule delen av linjen ved siden av de innebygde elementene, og simulere dette ved å bruke samme farge som bakgrunnen. Det vil si at denne teknikken bare fungerer på en enkel enfarget bakgrunn, uten gradienter, mønstre eller bilder.

For øyeblikket bruker vi allerede så mange som fire eiendommer til å designe én linje. Det er mye mer arbeid enn bare å legge til tekstdekor.

• kan hoppe over infomeldinger ved hjelp av tekst-skygge ;
• kan endre farge, vekt og linjestil;
• lar deg bruke overganger og animasjoner av farger og dristighet;
• fungerer med flerlinjetekst med mindre inline-blokk er brukt;
• Fungerer på hvilken som helst bakgrunn så lenge du ikke bruker tekst-skygge.

• Plassert for lavt og beveget seg på en vanskelig måte;
• mange tilleggsegenskaper brukes for riktig drift;
• når du bruker tekst-skygge, ser utheving av tekst stygg ut.

boks-skygge

box-shadow tegner en underlinje ved hjelp av to indre skygger: den ene skaper et rektangel, og den andre skjuler en del av den. Dette betyr at du trenger en ensfarget bakgrunn for at dette skal fungere.

Du kan bruke det samme trikset med tekst-skygge for å fylle ut hullene mellom understreker og bildeforklaringer. Men hvis understrekingsfargen er forskjellig fra tekstfargen - eller den er bare tynn nok - vil ikke linjen kollidere med bildetekst så mye som den ville gjort med tekstdekorasjon .

• lar deg endre fargen og tykkelsen på linjen;
• fungerer med flerlinjetekst.

• lar deg ikke endre understrekingsstilen;
• Fungerer ikke på noen bakgrunn.

bakgrunnsbilde

Bakgrunnsbildemetoden er nærmest det vi ønsker og har minst mulig ulemper. Ideen er å bruke lineær gradient og bakgrunnsposisjon for å lage et bilde som gjentar seg under tekstlinjer.

For at denne tilnærmingen skal fungere, må teksten være i standardvisning: inline; .

Det neste alternativet klarer seg uten lineær gradient, for effekter kan du legge til ditt eget bakgrunnsbilde.

• kan plasseres under grunnlinjen;
• kan hoppe over bildeforklaringselementer ved å bruke tekst-skygge ;
• jobber med tilpassede bilder;
• bryter flere linjer med tekst;
• Fungerer på hvilken som helst bakgrunn så lenge du ikke bruker tekst-skygge.

• Bildestørrelsen kan variere avhengig av skjermoppløsning, nettleser og forstørrelse.

SVG-filtre

Jeg har lekt mye med denne metoden. Du kan lage et SVG-linjefilter som tegner en linje og deretter utvider teksten for å maskere den delen av linjen som vi ønsker skal være gjennomsiktig. Du kan deretter gi filteret en id og referere til det i CSS noe som filter: url('#svg-underline') .

Fordelen med denne tilnærmingen er at åpenhet oppnås uten å bruke tekst-skygge , noe som betyr at vi lar bildetekst vises på hvilken som helst bakgrunn, inkludert gradienter og bakgrunnsbilder! Dette fungerer bare på en enkelt tekstlinje, så husk det.

Slik ser det ut i Chrome og Firefox:

Støtte i IE, Edge og Safari er problematisk. Det er vanskelig å teste SVG-filterstøtte i CSS. Du kan bruke @supports-direktivet med filter , men dette vil bare sjekke funksjonaliteten til filterlenken, ikke funksjonaliteten til selve filteret. Mine forsøk endte i en kjedelig bestemmelse av nettleserens evner; dette er en merkbar ulempe ved metoden.

• kan plasseres under grunnlinjen;
• kan hoppe over utvidelseselementer;
• tillater endringer i linjefarge, tykkelse og stil;
• fungerer på hvilken som helst bakgrunn.

• fungerer ikke med flerlinjetekst;
• fungerer ikke i IE, Edge og Safari, men du kan bruke tekstdekorasjon som en reserve, det ser anstendig ut i Safari.

Underline.js (Canvas)

Underline.js er fascinerende. Jeg synes det er imponerende hva Wenting Zhang har oppnådd med sin beherskelse av JavaScript og oppmerksomhet på detaljer. Hvis du ikke har sett Underline.js-teknologidemoen, slutt å lese og gi den et minutt. Det er også en ni minutters prat fra henne om hvordan det fungerer, men jeg skal holde det kort: Understrekingen er tegnet med elementer . Dette er en ny tilnærming som fungerer overraskende bra.

Til tross for det fengende navnet, er Underline.js bare en teknisk demo. Dette betyr at du ikke bare kan plugge den inn i prosjektet ditt uten å endre koden.

Jeg tenkte jeg skulle nevne dette som et bevis på konseptet har potensial til å lage flotte interaktive understrekinger, men du må skrive ditt eget JavaScript for å få det til å fungere.

Nye tekstdekorasjonsegenskaper

Du husker at jeg lovet å snakke mer om tekst-dekorasjon. Tiden har kommet.

Denne egenskapen fungerer utmerket alene, men du kan legge til noen eksperimentelle egenskaper for å tilpasse utseendet til understrekingen.

• tekst-dekor-farge
• tekst-dekor-hopp
• tekst-dekor-stil

Men ikke bli for begeistret... Nettleserstøtte er som alltid. Så det går.

tekst-dekor-farge

Tekst-dekorasjonsfarge-egenskapen lar deg endre understrekingsfargen separat fra tekstfargen. Støtte for denne egenskapen er bedre enn du kanskje forventer - den fungerer i Firefox og med prefikset i Safari. Her er fangsten: hvis du har bildeforklaringer, vil Safari legge en understreking på toppen av teksten.

tekst-dekor-hopp

Tekst-dekorasjon-hopp-egenskapen gjør det mulig å hoppe over infomeldinger i understreket tekst.

Denne egenskapen er ikke-standard og fungerer foreløpig bare i Safari, med -webkit- prefikset. Safari aktiverer denne egenskapen som standard, så infomeldinger blir ikke alltid slått gjennom.

Hvis du bruker Normalize, vær oppmerksom på at nyere versjoner deaktiverer denne egenskapen av hensyn til konsekvent nettleseroppførsel. Og hvis du vil at understrekingen ikke skal påvirke meldingene, må du aktivere den manuelt.

tekst-dekor-stil

Eiendommen i tekstdekorasjonsstil tilbyr de samme stilalternativene som eiendommen i kantstil, med tillegg av en bølget stil.

Her er en liste over tilgjengelige verdier:

• stiplet
• prikkete
• dobbelt
• fast

Foreløpig fungerer egenskapen i tekstdekorasjonsstil bare i Firefox, her er et skjermbilde fra den:

Hva mangler

Text-decoration-*-serien med egenskaper er mye mer intuitiv å bruke enn andre CSS-understrekingsdekorasjonsegenskaper. Men hvis vi ser nærmere på, er det ikke nok måter å stille inn tykkelsen eller plasseringen av linjen for å tilfredsstille våre behov.

Etter litt research fant jeg et par egenskaper til:

• tekst-understreking-bredde
• tekst-understreking-posisjon

Disse ser ut til å være tidlige utkast til CSS, men ble aldri implementert i nettlesere på grunn av manglende interesse.

konklusjoner

Så hva er den beste måten å understreke på?

For liten tekst anbefaler jeg å bruke tekst-dekor med optimistisk å legge til tekst-dekorasjon-hopp . Det ser litt klebrig ut i de fleste nettlesere, men understreking har alltid vært slik i nettlesere, og folk vil bare ikke legge merke til det. I tillegg er det alltid en sjanse for at, hvis du har tålmodighet, den understrekingen vil se bra ut en dag uten at du trenger å endre noe slik nettlesere gjør.

For brødtekst er det fornuftig å bruke bakgrunnsbilde . Denne tilnærmingen fungerer, ser bra ut, og det er Sass-mikser for den. Du kan i prinsippet hoppe over tekst-skygge hvis understrekingen er tynn eller en annen farge enn teksten.

For enkeltlinjer med tekst, bruk kantlinje-bunn sammen med eventuelle tilleggsegenskaper.

Og hvis du trenger bildeforklaringer som skal vises mot en gradient eller bildebakgrunn, kan du prøve å bruke SVG-filtre. Eller bare unngå å bruke understrek.

I fremtiden, når nettleserstøtten blir bedre, vil det eneste svaret være egenskapssettet tekst-dekorasjon-*.

Jeg anbefaler også å ta en titt på Benjamin Woodroffes artikkel CSS Underlines Suck, som tar opp de samme problemene.

Understreket tekst i HTML utheves ved hjelp av en tag u HTML (fra ordet understreke). Den brukes som følger (den nødvendige delen av teksten plasseres mellom taggene ):

Nettsidebygger "Nubex"

Men denne koden anses som ugyldig, så det er mye mer effektivt og riktig å bruke CSS-stiler for å dekorere teksten.

Understrek tekst - CSS

Som vi allerede sa i artikkelen, er tekstdekorasjoner satt ved hjelp av egenskapen tekst-dekorasjon. Den understrekede teksten spesifiseres av parameteren understreke:

Nettsidebygger Nubex"

Du kan understreke tekst ved hjelp av CSS med mer enn bare en hel linje. La oss se hvilke alternativer du kan bruke for å understreke teksten:

• Understrek tekst med stiplet linje CSS:

  Nettsidebygger Nubex"

  
  
  
• Understreking med prikker:

  Nettsidebygger Nubex"

  
  
  
• Dobbeltstrek:

  Nettsidebygger Nubex"

  
  
  

Som du kan se fra eksemplene ovenfor, kan du kontrollere understrekingsstilen ved å bruke egenskapen grense-bunn(bunnlinjen). Ved å bruke denne parameteren kan du angi understrekingstype, farge og tykkelse.