HTML je precrtan. Precrtani HTML tekst

Opis

Dodaje dekoraciju teksta u obliku podvlačenja, precrtavanja, linije iznad teksta i treptanja. Možete primijeniti više stilova odjednom tako što ćete navesti vrijednosti odvojene razmacima.

Sintaksa

text-decoration: [blink || line-through || overline || podvuci ] | nijedan | nasljediti

Vrijednosti

blink Postavlja tekst da treperi. Takav tekst periodično nestaje, otprilike jednom u sekundi, a zatim se ponovo pojavljuje na svom izvornom mjestu. Ovu vrijednost trenutno ne podržavaju pretraživači i zastarjela je u CSS3, a umjesto toga se preporučuje animacija. line-through Kreira tekst kroz liniju (primjer). overline Linija prelazi preko teksta (primjer). underline Postavlja tekst koji će biti podvučen (primjer). none Poništava sve efekte, uključujući i podvlačenje veza, što je podrazumevano postavljeno. inherit Vrijednost je naslijeđena od roditelja.

HTML5 CSS2.1 IE Cr Op Sa Fx

tekst-dekoracija

Strateški napad

Objektni model

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

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

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

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

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

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

Pregledači

Verzije Internet Explorera do i uključujući 7.0 ne podržavaju vrijednost nasljeđivanja. Linija dobijena korišćenjem vrednosti prolaska kroz liniju u IE7 pozicionirana je više nego u drugim pretraživačima; Ova greška je ispravljena u IE8.

Zdravo svima! U prethodnim člancima naučili smo mnogo o vezama i slikama. Sada je vrijeme da pređemo na tekst. U ovom članku ću govoriti o najpopularnijim html tagovima koji se koriste za davanje određenog izgleda tekstu.

Dakle, prvo kreirajte prazan tekstualni dokument u Notepad-u. Nakon toga promijenite njegovu ekstenziju iz txt u html. Otvaramo ga istovremeno koristeći pretraživač i uređivač teksta, na primjer, istu notepad. Preporučujem korištenje programa u ove svrhe Macromedia Dreamweaver ili Notepad++.

Koristeći uređivač, uredit ćemo naš dokument i vidjeti šta smo uradili koristeći pretraživač.

Da bi promjene stupile na snagu, prvo morate sačuvati promjene u uređivaču pritiskom na disketu ili kombinaciju tipki Ctr+S, a zatim osvježiti isti dokument u pretraživaču.

Naslovi teksta različitih nivoa

Naslovi nisu samo važan dio dizajna teksta, već i jedan od internih alata za optimizaciju. U html tekstu, naslovi se postavljaju oznakama . Da vidite kako će izgledati, napišite sljedeći kod u dokument:

Ovdje postavite tekst koji želite kao naslov

Broj 2 pored slova h označava nivo naslova. Ukupno ima 6 nivoa.Prvi nivo je naslov članka. Sve ostalo su naslovi odjeljaka i pododjeljaka.

Podebljan, podvučen, kurziv tekst

Oznake , , lako riješiti ovaj problem
Ovako možete postaviti podebljani tekst u html-u
Ovako se postavlja kurziv
Ovo će biti podvučeni tekst

Ako trebamo primijeniti nekoliko svojstava na tekst u isto vrijeme, jednostavno ugnijezdimo oznake jednu u drugu.

Bold italic

Promjena veličine fonta

Veličina fonta teksta se postavlja u html pomoću oznake , koji ima atribut "size".

Veličina fonta 5

Kako promijeniti boju teksta

Boja teksta je postavljena istom oznakom koristeći atribut “color”.

Crveni tekst

Tekst onako kako je kucan

HTML ima prilično neugodnu osobinu. Ako ste upisali tekst koji ima nekoliko razmaka u nizu, jedan za drugim, pretraživač će prikazati samo jedan razmak. U nekim slučajevima potrebno je prikazati tekst tačno onako kako je upisan. Za to se koristi oznaka 

Ovaj tekst će izgledati onako kako je kucan

Pa, to je vjerovatno sve. Naravno, mogućnosti za izmjenu teksta pomoću html tagova su prilično ograničene. U većini slučajeva to nije dovoljno. U ovom slučaju, preporučljivo je koristiti css. CSS Ovo je skraćenica, koja u prijevodu na ruski znači kaskadni stilski listovi. O tome ćemo više govoriti u jednoj od narednih lekcija.

Precrtani tekst

Uopšteno govoreći, u HTML-u možete postaviti precrtani tekst koristeći tri različite oznake odjednom. Oznake I se prikazuju sasvim korektno u svim pretraživačima, međutim, ne preporučuju se za upotrebu. Oni čak nisu uključeni u XHTML i HTML5 specifikacije. Stoga za kreiranje precrtanog teksta preporučujem korištenje oznake .

Precrtani tekst

Vizualno, rezultat korištenja ove oznake neće se razlikovati od prva dva. Međutim, ono ima malo drugačije značenje. Ova oznaka bi se trebala koristiti za precrtavanje zastarjelih ili netačnih informacija. Ova oznaka ima 2 atributa:

citirati - namijenjeno je da sadrži link na dokument koji sadrži razlog za brisanje ove informacije

datetime - namijenjen je za pohranjivanje vremena posljednjeg uređivanja informacija.

Za precrtavanje teksta u HTML-u koristite oznaku štrajk:

  1. Elektronik
  2. Syroezhkin
  3. Smirnov
  4. Chizhikov
  5. Kukushkina

Rezultat izvršavanja ovog koda:

  1. Elektronik
  2. Syroezhkin
  3. Smirnov
  4. Chizhikov
  5. Kukushkina

Ova oznaka nema atribute. Umjesto HTML oznake štrajk može se koristiti i skraćena verzija - s(slično, podebljano - b, kurziv - i, podvučeno - u):

Konstruktor LEGO"Nubex"

Kao što vidite rezultat je sličan:

LEGO konstrukcioni set "Nubex"

Korištenje oznake s I štrajk smatra se netačnim sa stanovišta validacije koda (neophodno je koristiti tranzitivni ). Ili druga opcija je korištenje CSS-a.

Precrtan tekst: CSS

Sa CSS-om, tekst se može "dekairati" pomoću svojstva tekst-dekoracija. Ovo svojstvo može imati sljedeće vrijednosti:

  • line-through- koristi se za precrtavanje teksta;
  • podvući- podvlači tekst;
  • overline- koristi se za postavljanje reda iznad teksta (precrtani tekst);
  • blink- probni treptaji (svake sekunde);
  • nijedan- omogućava vam da poništite sve efekte primijenjene na tekst.

Navedene vrijednosti se mogu primijeniti istovremeno; da biste to učinili, trebate napisati potrebne parametre odvojene razmakom. Na primjer, primijenite podvlačenje, precrtavanje i treptanje u isto vrijeme:

Dekoracija teksta: podcrtavanje treptaja preko crte;

Sada napravimo precrtani tekst koristeći CSS:

CSS precrtani tekst - "Nubex"

Konstruktor LEGO Nubex lokacije

CSS vam omogućava da izvršite širok spektar operacija vezanih za dekorativno ukrašavanje cijele stranice. Posebna pažnja posvećena je tekstu koji u većini slučajeva ispunjava većinu svih sajtova. Danas ćemo pogledati jedno zanimljivo svojstvo: precrtani, podvučeni i precrtani tekst. Svi ovi efekti se postavljaju pomoću jednog CSS pravila.

Zadatak

Možete podvući i precrtati tekst u CSS-u pomoću naredbe “text-decoration”. Efekat će zavisiti od toga koja je vrednost navedena. CSS je izmišljen da odvoji logičke i strukturne dijelove web stranice. Ali prije pojave Cascading Style Sheets, korištene su HTML oznake koje su imale slično značenje. Na primjer, element poput omogućava vam da prikažete precrtani tekst. Ova oznaka se sada smatra nepoželjnom i njeno korištenje će automatski poništiti vaš kod stranice. Iako ovaj element još uvijek je podržan od strane svih modernih pretraživača i koristi ga neki programeri. No, vratimo se na CSS. Komanda "text-decoration" može imati sljedeća značenja:

  • Podvući. Dodjeljujući ovu vrijednost, dobićete
  • Overline. Linija će proći preko određenog fragmenta stranice.
  • Line-through. Kreira precrtani ili precrtani tekst.
  • Blink. Odabrani fragment dokumenta povremeno će nestati i ponovo se pojaviti.
  • Postoje i vrijednosti "none" i "naslijediti". Prvi poništava sve efekte, a drugi naređuje da se svojstvo naslijedi od roditeljskog elementa.

Svrha

Čini se da u CSS-u precrtani tekst i slični efekti služe samo za ukrašavanje teksta. U većini slučajeva ova izjava je tačna. Ali ponekad je vrijedno razmisliti o pitanju: zašto su takvi elementi stvoreni? Na primjer, sada zastarjela oznaka "strike" korištena je za označavanje netačnih ili starih informacija. Čitaoci, videći precrtani tekst, razumiju skriveno značenje takve oznake. Podvučene riječi uvijek se odmah ističu iz opšteg toka. Stoga se ovaj efekat mora koristiti za isticanje važnih informacija. Vrijednost "blink", koja čini da tekst treperi, koristi se prilično rijetko, jer se takav efekat općenito smatra neprihvatljivim među programerima. Na kraju krajeva, malo vaših čitalaca voli treperenje simbola koji će im stalno odvlačiti pažnju. Pa, vrijednost “overline” se koristi samo za ukrašavanje teksta.

Posebnosti

Iako su sve vrijednosti za svojstvo "text-decoration" uključene u specifikaciju verzije Cascading Tables, još uvijek postoje neke vrijednosti koje moderni pretraživači ne podržavaju. Na primjer, trepćući tekst neće biti vidljiv u IE. Preglednik Google Chrome ne prihvata neke vrijednosti. Mobilne platforme ne podržavaju u potpunosti ovo svojstvo.

Zaključak

Efekti poput precrtanog teksta i drugih sličnih vrijednosti se često koriste na internetu. Njihova upotreba vam omogućava da ispravno izrazite glavnu ideju autora, pomažući da se pažnja čitatelja koncentriše na željeni dio teksta. Ali nemojte biti previše revni i koristite svojstvo "text-decoration" kad god je to moguće. Uostalom, pretjerano ukrašavanje teksta može naštetiti vama i vašim čitateljima.

Oznaka se još uvijek široko koristi za precrtavanje teksta u HTML kodu. , što je skraćeni pravopis oznake . Među brojnim značenjima engleske riječi “strike” su “precrtati” i “precrtati”. Evo kako izgledaju rezultati korištenja ove dvije oznake:

  2. tekst precrtan pomoću oznake → precrtavanje teksta pomoću oznake

Kao što vidite, rezultat je identičan. Svi moderni pretraživači razumiju ove oznake, ali ipak, obje se ne preporučuju za korištenje. Oni su potpuno odsutni u XHTML i HTML5 specifikacijama. A HTML 4.0 specifikacija je također opisana kao nepoželjna.

Razlog za to su oznake I pripadaju klasi takozvanih oznaka fizičkog formatiranja. Odnosno, ne nose nikakvo semantičko opterećenje i samo određuju stil prikaza teksta. Međutim, sam HTML jezik za označavanje namijenjen je posebno za semantičko označavanje teksta. A za vizuelno oblikovanje koriste se CSS stilovi.

I iako vas možda ne zanimaju takvi akademski detalji, ipak nemojte koristiti ove zastarjele oznake. Ako trebate precrtati tekst u HTML-u, bolje je koristiti oznaku . Evo rezultata korištenja:

  1. tekst precrtan pomoću oznake → precrtavanje teksta pomoću oznake

Kao što vidite, vizuelno nema razlike između , I , ali u značenju postoji veoma velika razlika.

Tag dizajniran za označavanje izbrisanih redova teksta. Odnosno, nosi određene logičke informacije o tekstu i pripada klasi takozvanih semantičkih HTML oznaka. Formatiranje teksta kao precrtavanje kada se primjenjuje – ovo nije svrha ove oznake, već samo posljedica njene logičke suštine.

Ponavljam još jednom: ako vam nije stalo do ideologije HTML jezika za označavanje i bitan je samo vizuelni efekat, samo uzmite u obzir da je oznaka namijenjena precrtavanju teksta ali ne ili . Barem iz istih razloga iz kojih pišete “profesionalizam”, a ne “profesionalizam”.

Osim toga, oznaka funkcionalniji od I . Može prenijeti dodatne informacije o tekstu koristeći atribute “cite” i “datetime”:

  • atribut " citirati" je namijenjen da sadrži link na dokument koji daje razlog za brisanje ovog teksta i, možda, druge detalje o njegovom uređivanju.
  • atribut " datetime» označava datum i vrijeme uređivanja ovog teksta.

Šta trebate učiniti ako trebate prikazati tekst kao precrtan, ali ga ne želite označiti kao izbrisan? Kao što je gore spomenuto, CSS će vam pomoći. Konkretnije, svojstvo “text-decoration” koje ima vrijednost “line-through”. Na primjer, ovako možete to učiniti:

  1. precrtavanje teksta pomoću CSS-a → CSS precrtani tekst

Previše koda? Slažem se. Stoga ga možete smanjiti postavljanjem CSS instrukcija u zasebnu datoteku. U njemu možete, na primjer, opisati klasu precrtanog teksta na sljedeći način:

S ( text-decoration: line-through; ) Ovo će vam omogućiti da pišete u HTML kodu ovako:

  1. CSS precrtani tekst → CSS precrtani tekst

Ovaj kod je također duži nego u slučaju , ali ako se želite pridružiti semantičkom webu, morat ćete se pomiriti s takvom redundantnošću. Sretno precrtavanje!

Prethodne publikacije:

mob_info