Kako postaviti pametne telefone i računala. Informativni portal
  • Dom
  • Windows 7, XP
  • Podebljani tekst koristeći HTML i CSS. Kako napraviti podebljani font u HTML-u podebljan kurziv css

Podebljani tekst koristeći HTML i CSS. Kako napraviti podebljani font u HTML-u podebljan kurziv css

Jedan od najjednostavnijih načina za isticanje riječi ili izraza u tekstu je korištenje drugačijeg slova. Dakle, možete podcrtati riječ ili izraz, korištenje podebljanih stranica jednostavno vam omogućuje da istaknete riječi različitim stilovima - kurzivom, podcrtanim, podebljanim.

Podebljano kao način da se istakne glavna stvar

Najupečatljivije i najupečatljivije riječi izgledaju podebljane. Takve riječi i fraze odmah upadaju u oči. Dakle, da biste naučili kako brzo odabrati potrebna mjesta u tekstu, trebali biste se sjetiti posebnog HTML-koda. Podebljano se postavlja pomoću uparene oznake.

Prije riječi ili izraza, rečenice koju treba istaknuti, postavlja se početna oznaka ... Nakon posljednjeg slova u tekstu koje treba odabrati, nalazi se oznaka za zatvaranje... Sve između ove dvije oznake podebljano je kada se prikazuje u pregledniku.

Ostale opcije odabira

Dakle, otkrili smo da možete odabrati tekst koristeći drugačiji stil. Utvrdili smo da je najjednostavniji i ujedno učinkovit korištenje podebljanog HTML-a. Sada razgovarajmo o drugim opcijama odabira.

Dakle, možete istaknuti tekst kurzivom pomoću uparene oznake , podcrtajte ga sa ... Ovo su najjednostavniji načini odabira teksta.

Postoje i manje poznate i korištene oznake koje se mogu koristiti za isticanje riječi i rečenica u tekstu. Dakle, da bi se prekrižio tekst, dovoljno je koristiti ... Uparena oznaka pomoći će da tekst bude jednorazredni. ... Ako trebate kreirati superscript koristite , dno - .

U ovom slučaju, kao i prije, tekst koji vam je potreban mora biti između početne i završne oznake. Kao što vidite, nema ništa teško, glavna stvar je zapamtiti ove kodove ili ih zapisati.

Korištenje više fontova

Ako želite tekst učiniti izražajnijim, možete koristiti više od samo podebljanog slova. HTML označavanje omogućuje vam da istovremeno označite riječ koristeći više lica. Dakle, riječ možete napraviti podebljanom, precrtanom i kurzivom u isto vrijeme.

Istodobno, treba imati na umu jednu stvar - sve oznake moraju biti zatvorene uzastopno. Na primjer, točan unos može biti:

  • odabrani tekst.

Ako oznake zatvorite drugim redoslijedom, tekst neće biti ispravno istaknut. Primjer pogrešnog unosa:

  • odabrani tekst.

U tom slučaju, preglednik će se zbuniti i neće razumjeti što točno želite od njega.

Usput, ovdje se može primijetiti da se tri varijante stila - podebljano, podvučeno i kurziv - lako pamte ako poznajete prečace u Wordu. Tamo se stil postavlja pomoću istih tipki slova dok držite pritisnut Ctrl.

Kao što vidite, možete koristiti više od kurzivnog ili podebljanog slova. HTML označavanje omogućuje vam da istaknete riječi jednako lako kao i obični Word.

zaključke

Za isticanje teksta naširoko se koriste ne samo različite boje i nijanse, različite veličine i vrste fonta, već i njegov stil. Štoviše, uz pomoć drugačijeg obrisa jedan ili drugi fragment teksta može se lijepo i lako razlikovati.

Da biste promijenili stil fonta, trebali biste koristiti bilo koju oznaku koju poznajete. Podebljani font HTML stranice je najupečatljiviji i vidljiviji, te se stoga najčešće koristi za isticanje.

U HTML-u se podebljani tekst može izvesti na nekoliko načina. To uključuje:

  • Označiti b;
  • Označiti jaka;
  • CSS svojstvo font-weight.

Razgovarajmo o svakoj od opcija za odabir teksta po redu.

Podebljani tekst: oznaka

Označiti b HTML se primjenjuje ovako:

Izrada web stranica "Nubex"

Za oznaku mora postojati zatvaranje, a dostupni su mu univerzalni atributi (npr klasa, id, naslov itd.)

Iako valjanost oznake b i nije zastarjela HTML specifikacijom, relevantnija je za korištenje oznaka jaka, da vidimo zašto.

Podebljani tekst: oznaka

Prema HTML specifikaciji, oznaka b služi za isticanje teksta podebljanim. Nasuprot tome, oznaka jaka HTML je za isticanje važno okviri, riječi koje su ključne za ovu stranicu.

Ova oznaka igra značajnu ulogu u rangiranju stranica u rezultatima pretraživanja, stoga se naširoko koristi u promociji web stranice i SEO optimizaciji. Tražilice uzimaju u obzir tekst zatvoren u oznake , i označite ga važnim.

Korištena oznaka jaka isti način:

Izrada web stranica "Nubex"

To možete primijetiti izvana koristeći oznake i se uopće ne razlikuje (budući da ih svi moderni preglednici tumače gotovo isto), ali semantičke razlike u kodu za tražilice postoje. Stoga većina SEO-a preporučuje korištenje oznake jaka.

Podebljani tekst s CSS-om

Već smo primijetili važnost oznake jaka u promociji tražilica, ali što učiniti ako trebate podebljati veliku količinu teksta (ali tekst ne mora biti označen kao važan za tražilice), ili ako trebate kontrolirati stupanj "podebljanosti" font? U takvim slučajevima koristi se CSS svojstvo. font-weight... Primjenjuje se na sljedeći način:

Podebljani tekst s CSS-om - "Nubex"

Naše stranice su, doista, ogroman korak u web razvoju.

Radimo stvarno kvaliteta stranice.

Vjerujte nam i mi ćemo vas nećemo vas iznevjeriti.

Vrijednosti hrabriji i upaljač možete postaviti stupanj debljine više (ili manje) od roditeljskog. Brojčana vrijednost (100-900) može postaviti stupanj sadržaja masti.

Postoje tri načina za podebljanje teksta na HTML stranici, ali nemojte žuriti odmah upotrijebiti onaj koji vam se sviđa jer takvo isticanje može imati različita značenja i utjecati na optimizaciju stranice za tražilicu.

Podebljano s jakom oznakom

Ova je metoda prikladna ako želite istaknuti važan dio teksta podebljanim slovima. HTML oznaka je logička oznaka oblikovanja i njezina bit: "podcrtati" važnost odabira.

U HTML-u postoje i druge booleove oznake za formatiranje. Na primjer, oznaka čini tekst kurzivom i označava naglasak na istaknutoj frazi.

Ostale vrste odabira teksta opisane su u članku:.

Običan tekst istaknuti važan dio teksta... Običan tekst.

Podebljani tekst pomoću oznake b

Običan tekst podebljan tekst... Običan tekst.

Podebljani CSS

Podebljani tekst može se napraviti ne samo s posebnim HTML oznakama. Ispis možete postići podebljanim na bilo kojoj oznaci postavljanjem svojstva font-weight na nju: bold; (ne radi za sve fontove).

Takav odabir bit će stilske prirode, bez dodavanja logičke težine odabranom tekstu.

Osim toga, možete odabrati ili određenu oznaku ili grupu elemenata odjednom navođenjem stilova kroz CSS klasu.

CSS svojstvo unutar atributa stila:

Podebljan tekst.

Podebljan tekst.

Tekst je u uobičajenom fontu.

Podebljan tekst.

Što učiniti ako ne možete podebljati tekst

Ako ne možete podebljati tekst, najvjerojatnije je vaša stranica nadjačala stilove CSS elemenata. U ovom slučaju, morat ćete prilagoditi ove stilove. U većini slučajeva, to se može učiniti putem glavne datoteke CSS stilova. Ako ovo ne razumijete, obratite se webmasteru. Najvjerojatnije će rješavanje ovog problema trajati ne više od 5 minuta rada (iako, naravno, mogu postojati iznimke).

Pozdrav dragi čitatelji bloga! Ovaj članak će se usredotočiti na oznake za oblikovanje teksta... Podebljani ili kurziv tekst je odličan primjer. Također ćemo razmotriti utjecaj nekih oznaka na internu optimizaciju stranice i pravila za njihovo pisanje. O tome možete pročitati u datom članku. Usput, slične elemente dizajna teksta možete pronaći u mnogim uređivačima teksta, na primjer, u Wordu.

Oznake su podijeljene u 2 vrste: blok i inline oznake. Koristeći prvi, možete promijeniti sadržaj dijela teksta (reci, pojedinačni fragmenti ili riječi), dok drugi mogu promijeniti. Oznake za oblikovanje koje ćemo pogledati u ovom članku pretežno su mala slova.

Pravila i redoslijed pisanja oznaka

Već znate što su početne i završne oznake. Ako ne, onda pročitajte članak na samom početku ovog materijala. Ukratko, postoje dvije vrste oznaka: pojedinačne oznake (na primjer, prelamanje u novi redak
) i spremnik (uparen). Dakle, sve oznake za oblikovanje teksta jesu uparen... To znači da svaki element ima početnu i završnu oznaku, a odabir mora biti postavljen između njih. Na primjer, ispravan odabir fraze izgledao bi ovako: Odabrani isječak

Kada preglednik obradi ovaj fragment, vidjet ćete sljedeći tekst: Odabrani isječak. Usput, sve oznake nisu prikazane u RSS feedu ().

Glavna stvar pri pisanju oznaka je da budu zatvorene. Inače će sav tekst na stranici biti podebljan (u primjeru s oznakom ). Ali postoje slučajevi kada morate istovremeno istaknuti određeni fragment podebljanim i kurzivom. Ali ne postoji oznaka koja izvodi ovu radnju. Postoji samo jedan izlaz iz ove situacije: koristite dvije oznake u isto vrijeme. Nije važno kojim redoslijedom ih koristite. Stoga, pisanjem teksta s ovakvim oznakama:

Odabrani isječak

ili ovako:

Odabrani isječak

I dalje ćete dobiti Odabrani isječak kurzivom i podebljanim u isto vrijeme. Međutim, bolje je koristiti prvu opciju, jer je u početku bila jedina i ispravna. Također, ne zaboravite da svaki preglednik može različito rukovati oznakama (), ovisno o postavkama. Sada prijeđimo na same oznake za formatiranje.

Podebljan i kurziv tekst - oznake , , i

Najpopularnije oznake za oblikovanje teksta - naglašavajući to podebljano i kurzivom... Obično se koriste da daju važnost nekom djelu. Prvi slučaj služi za isticanje fragmenta koji sadrži korisne informacije ili ključne riječi. Kurziv se koristi u iste svrhe kao i podebljani tekst, ali su informacije manje važne jer je kurziv manje vidljiv u pozadini osnovnog teksta od podebljanog teksta.

Prvo razmotrite podebljan tekst... Za ovu radnju koriste se dvije oznake - i ... Nema razlike u izgledu. Iako, s obzirom na to da svaki preglednik može tumačiti svaki element drugačije, možda ćete moći vidjeti razlike. Ovako izgleda tekst u oznakama i u obliku koji je preglednik već obradio:

Tekst u jakim oznakama

Tekst u oznakama b

A evo kako ova dva retka izgledaju u izvornom kodu stranice:

Tekst u jakim oznakama Tekst u oznakama b

Istu situaciju možemo uočiti u slučaju kurzivne oznake i ... Pokušajte pronaći razlike između ova dva primjera:

Tekst u em oznakama

Tekst u oznakama I

A evo i izvornog koda:

Tekst u em oznakama Tekst u oznakama I

Dakle, razmatrane podebljane i kurzivne oznake zapravo se ne razlikuju, ali zašto nam je onda potrebna, na primjer, oznaka ako postoji ? Uostalom, potonji sadrži samo jedan znak (ne računajući zagrade) i stoga ga je lakše napisati. Stvar je u tome da oznake i utjecati. Ako ključne riječi okružite ovim tagovima, to će imati povoljan učinak na promociju web stranice.Najvažnije je ne pretjerivati ​​- maksimalni tekst bi trebao biti 5% podebljanog teksta u oznaci. , i isto toliko kurziva u oznaci .

Ako samo želite istaknuti neki trenutak u tekstu, upotrijebite oznaku ili ... Općenito, mislim da tražilice također smatraju tekst u ovim oznakama važnijim, ali dalje interna optimizacija još uvijek imaju manji utjecaj od i .

Slash tekstualne oznake - , i

Pogledajmo sada nekoliko oznaka koje koriste obilježje u oblikovanju teksta. Najpoznatiji uređivač teksta koji poznajete je označiti ili podcrtajte. Ova oznaka ne utječe na rang (koliko ja znam), ali će pomoći da se istaknu neki tekst i da se usredotočite na njega. Naveo sam primjer korištenja ove oznake malo iznad.

Postoje još dvije oznake koje su slične namjene - i ... Oba imaju funkciju precrtanog teksta. Ovu oznaku možete koristiti u bilo kojoj situaciji: ako ažurirate dokument (ili bolje rečeno njegov dio), možete precrtati stari i dodati novi; ako ćete napisati nešto što odstupa od teme materijala; nešto što ne odgovara moralnim i etičkim standardima.

Razlike između ove dvije oznake su samo u njihovoj pisanje, zbog čega je poželjno koristiti prvi, budući da prvo, prikladnije je pisati, a drugo, bit će manje HTML koda na vašoj stranici, a tražilice to vole.

Označiti i atributi - parametri fonta teksta

Sada razmotrite oznaku koja se ne koristi bez atributa. Pomoću njega možete postaviti parametre za određeni dio teksta. Općenito, sada je poželjno koristiti (kaskadne tablice stilova) jer mogu uvelike skratiti cijeli HTML kod stranice. Dakle, pogledajmo istu oznaku . Za njega postoji sve tri atributa:

  • lice- sam font. Na primjer, Arial, Courier ili Verdana. Možete navesti nekoliko, tk. nemaju svi korisnici opsežan skup fontova, a upisivanjem nekoliko u atribut face, preglednik će moći odabrati koji će koristiti, odnosno koji je prisutan u sustavu;
  • veličina- atribut koji označava veličinu teksta. Može se izraziti i u proizvoljnim jedinicama i u pikselima;
  • boja- boja teksta. Ovaj se atribut može koristiti i u HTML kodovima boja i u riječima. Prvi su u obliku #FFFFFF (gdje je F bilo koji broj ili slovo od A do F), a drugi su napisani jednostavnim riječima (na primjer, crveno je crveno).

Ovako izgleda tekst u oznaci koristeći svaki atribut:

Ovaj tekst ima veličinu 6px


Ovaj tekst je crvene boje

Ovaj tekst je u fontu Arial

Ovaj tekst je crvene boje i veličine 5px

A evo što ćete vidjeti nakon obrade napisanog koda:

Blokovi elementi dizajna teksta - zaglavlja

-

, stavak

Na kraju ćemo pogledati blok elemente koji se koriste u gotovo svakom dokumentu. To su oznake naslova i paragrafa. Razmotrimo prvo. Postoji 6 vrsta naslova i svaki ima svoju oznaku. Svaka vrsta ima samo svoj serijski broj i bilježi se pomoću oznaka

,

,...,

... Ovako izgledaju sva zaglavlja kada se obrađuju:

Broj iza naslova riječi odgovara broju u oznaci ... Zaglavlja imaju veliki utjecaj na internu optimizaciju, stoga uključite oznake ključne riječi. Postoji dosta značajki ovog slučaja, o kojima ću raspravljati u sljedećim člancima.

Sada razgovarajmo o oznaci za isticanje paragrafa.

Funkcija ove oznake je da praznim redkom odvoji tekst od drugog sličnog teksta. Ako pogledate izvorni kod dokumenta, možete vidjeti sljedeće:

Zeleni okviri imaju jedan odlomak, crveni imaju drugi. A ovako izgleda ovaj kod nakon što ga preglednik obradi (strelica pokazuje na prazan red):

Kao rezultat toga, dobivamo prilično uočljivo odvajanje jednog odlomka od drugog, što je korisno - čitanje postaje praktičnije.

Dakle, članak o oznake za formatiranje dokumenta... Ima ih puno više nego što sam opisao u ovom materijalu. Samo o nekima od njih trebate puno reći, zbog čega će im biti posvećeni zasebni članci s punim pregledom.!

U html-u veličina fonta igra važnu ulogu. Omogućuje vam da skrenete pozornost korisnika na važne informacije objavljene na web stranici. Iako nije važna samo veličina slova, već i njihova boja, debljina, pa čak i obitelj.

Oznake i atributi prilikom indeksiranja s html fontovima

Jezik hiperteksta ima veliki skup alata za rad s fontovima. Uostalom, upravo je oblikovanje teksta glavni zadatak html-a.

Razlog za stvaranje HTML jezika bio je problem prikaza pravila oblikovanja teksta u preglednicima.


Razmotrite oznake koje se koriste za rad s fontovima u html-u i njihove atribute. Glavna je oznaka ... Koristeći vrijednosti njegovih atributa, možete postaviti nekoliko karakteristika fonta:

  • boja - postavlja boju teksta;
  • size - veličina fonta u konvencionalnim jedinicama.

Podržane su pozitivne vrijednosti atributa od 1 do 7.

  • lice - koristi se za postavljanje obitelji fontova teksta koji će se koristiti unutar oznake ... Nekoliko vrijednosti je podržano odjednom, odvojeno zarezima.

Formatira se samo tekst između dijelova uparene oznake fonta. Ostatak teksta se prikazuje u zadanom standardnom fontu.

Također u html-u postoji niz uparenih oznaka koje specificiraju samo jedno pravilo oblikovanja. To uključuje:

  • - postavlja podebljani font u html-u. Označiti radnja je slična prethodnoj;
  • - veličina je veća od zadane;
  • - manja veličina slova;
  • - kurziv tekst. Slična oznaka ;
  • - podvučeni tekst;
  • - prekrižen;
  • - prikaz teksta samo malim slovima;
  • - velikim slovima.

Običan tekst

Sličica

Sličica

Više nego inače

Manje nego inače

Kurziv

Kurziv

Podvučeno

Prekrižen

Mogućnosti atributa stila

Osim opisanih oznaka, postoji još nekoliko načina za promjenu fonta u html-u. Jedan od njih je korištenje atributa generičkog stila. Koristeći vrijednosti njegovih svojstava, možete postaviti stil prikaza fonta:

1) font-family - svojstvo postavlja obitelj fontova. Moguće je nabrajanje nekoliko vrijednosti.
Promjena fonta u html-u na sljedeću vrijednost dogodit će se ako prethodna obitelj nije instalirana na korisnikov operativni sustav.

Sintaksa pisanja:

font-family: naziv fonta [, naziv fonta [, ...]]

2) font-size - veličina je postavljena od 1 do 7. Ovo je jedan od glavnih načina na koji možete povećati font u html-u.
Sintaksa pisanja:

veličina fonta: apsolutna veličina | relativna veličina | vrijednost | kamata | naslijediti

Veličina fonta također se može postaviti:

  • U pikselima;
  • U apsolutnoj vrijednosti ( xx-mali, x-mali, mali, srednji, veliki);
  • U postocima;
  • U bodovima (pt).

Veličina fonta: 7

Veličina fonta: 24px

Veličina fonta: x-large

Veličina fonta: 200%

Veličina fonta: 24pt

3) font-style - postavlja stil pisanja fonta. Sintaksa:

stil fonta: normalan | kurziv | koso | naslijediti

vrijednosti:

  • normalan - normalan pravopis;
  • kurziv - kurziv
  • kosi - desno nagnut font;
  • naslijediti - nasljeđuje pravopis nadređenog elementa.

Primjer kako promijeniti font u html-u pomoću ovog svojstva:

font-style: naslijediti

stil fonta: kurziv

stil fonta: normalan

stil fonta: kosi

4) font-varijanta - pretvara sva velika slova u velika slova. Sintaksa:

varijanta fonta: normalna | mala slova | naslijediti

Primjer kako promijeniti font u html-u s ovim svojstvom:

font-varijanta: naslijediti

font-varijanta: normalan

varijanta fonta: mala slova

5) font-weight - omogućuje postavljanje debljine pisanja teksta (zasićenost). Sintaksa:

težina fonta: podebljano | podebljano | svjetlije | normalno | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

vrijednosti:

  • bold - postavlja html podebljani font;
  • hrabriji - deblji u odnosu na normalno;
  • lakši - manje zasićen u odnosu na normalu;
  • normalan - normalan pravopis;
  • 100-900 - postavlja debljinu fonta u numeričkom ekvivalentu.

font-weight: bold

font-weight: podebljano

font-weight: lakši

font-weight: normalan

težina fonta: 900

težina fonta: 100

Svojstvo fonta i boja html fonta

Font je još jedno svojstvo spremnika. Interno je kombinirao vrijednosti nekoliko svojstava dizajniranih za promjenu fontova. Sintaksa fonta je:

font: font-size font-family | naslijediti

Također, vrijednost se može postaviti na fontove koje sustav koristi u natpisima na raznim kontrolama:

  • natpis - za gumbe;
  • ikona - za ikone;
  • jelovnik - jelovnik;
  • message-box - za dijaloške okvire;
  • small-caption - za male kontrole
  • statusna traka - font statusne trake.

font: ikona

font: natpis

font: izbornik

font: okvir za poruke

mali natpis

font: statusna traka

font: kurziv 50px bold "Times New Roman", Times, serif

Da biste postavili boju fonta u html-u, možete koristiti svojstvo boje. Omogućuje vam da postavite boju, bilo pomoću ključne riječi ili u rgb formatu. I također u obliku heksadecimalnog koda.

Vrhunski povezani članci