Kako podesiti pametne telefone i računare. Informativni portal
  • Dom
  • Windows 7, XP
  • Podebljani tekst koristeći HTML i CSS. Kako napraviti podebljani font u HTML-u bold italic css

Podebljani tekst koristeći HTML i CSS. Kako napraviti podebljani font u HTML-u bold italic css

Jedan od najlakših načina da se istakne riječ ili fraza u tekstu je korištenje drugačijeg slova. Dakle, možete podvući riječ ili frazu, korištenje podebljanih stranica lako vam omogućava da istaknete riječi koristeći različite stilove - kurziv, podvučen, podebljan.

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 zapamtiti poseban HTML-kod. Bold se postavlja pomoću uparene oznake.

Prije riječi ili fraze, 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 je podebljano kada se prikaže u pretraživaču.

Druge opcije izbora

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

Dakle, možete označiti tekst kurzivom koristeći upareni tag , podvuci 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 biste precrtali tekst, dovoljno je koristiti ... Upareni tag će pomoći da tekst bude jednorazredni. ... Ako trebate kreirati superscript koristite , dno - .

U ovom slučaju, kao i ranije, 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 da tekst bude izražajniji, možete koristiti više od samo podebljanog slova. HTML označavanje vam omogućava da istovremeno označite riječ koristeći više lica. Dakle, možete napraviti riječ podebljano, precrtano i kurzivom u isto vrijeme.

Istovremeno, morate imati na umu jednu stvar - sve oznake moraju biti zatvorene uzastopno. Na primjer, ispravan unos može biti:

  • odabrani tekst.

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

  • odabrani tekst.

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

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

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

zaključci

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 nacrta može se lijepo i lako razlikovati jedan ili drugi fragment teksta.

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, podebljani tekst se može napraviti na nekoliko načina. To uključuje:

  • Tag b;
  • Tag jaka;
  • CSS svojstvo font-weight.

Razgovarajmo o svakoj od opcija za odabir teksta po redoslijedu.

Podebljani tekst: oznaka

Tag b HTML se primjenjuje ovako:

Kreator web stranica "Nubex"

Za oznaku mora postojati zatvaranje, a dostupni su mu univerzalni atributi (kao što je klasa, id, naslov itd.)

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

Podebljani tekst: oznaka

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

Ova oznaka igra značajnu ulogu u rangiranju stranica u rezultatima pretrage, stoga se široko koristi u promociji web stranice i SEO optimizaciji. Pretraživači uzimaju u obzir tekst zatvoren u tagove , i označite ga kao važno.

Oznaka korištena jaka isti put:

Kreator web stranica "Nubex"

To možete primijetiti eksterno koristeći oznake i se uopšte ne razlikuje (pošto ih svi moderni pretraživači tumače skoro isto), ali semantičke razlike u kodu za pretraživače postoje. Stoga većina SEO-a preporučuje korištenje oznake jaka.

Podebljani tekst sa CSS-om

Već smo primijetili važnost oznake jaka u promociji na pretraživačima, ali šta učiniti ako treba da podebljate veliku količinu teksta (ali tekst ne mora biti označen kao važan za pretraživače), ili ako treba da kontrolišete stepen "podebljanosti" font? U takvim slučajevima koristi se CSS svojstvo. font-weight... Primjenjuje se na sljedeći način:

Podebljani tekst sa CSS - "Nubex"

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

Radimo stvarno kvaliteta web stranice.

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

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

Postoje tri načina da podebljate tekst na HTML stranici, ali nemojte žuriti da odmah koristite bilo koji koji vam se sviđa, jer takvo isticanje može imati različita značenja i uticati na optimizaciju stranice za pretraživač.

Podebljano sa jakom oznakom

Ova metoda je prikladna ako želite istaknuti važan dio teksta podebljanim slovima. HTML tag je logička oznaka formatiranja i njena suština: "podvlači" važnost odabira.

Postoje i druge logičke oznake za formatiranje u HTML-u. Na primjer, oznaka čini tekst kurzivom i ukazuje na 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.

Bold CSS

Podebljani tekst se može napraviti ne samo sa posebnim HTML oznakama. Možete postići izlaz podebljan na bilo kojoj oznaci tako što ćete joj postaviti svojstvo font-weight: 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:

Bold text.

Bold text.

Tekst je u uobičajenom fontu.

Bold text.

Šta učiniti ako ne možete da podebljate tekst

Ako ne možete da podebljate tekst, najvjerovatnije je da vaša web stranica ima nadjačane 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. Najvjerovatnije, rješavanje ovog problema neće trajati više od 5 minuta rada (iako, naravno, može biti izuzetaka).

Pozdrav dragi čitaoci bloga! Ovaj članak će se fokusirati na oznake za formatiranje teksta... Podebljani ili kurziv tekst je odličan primjer. Takođe ćemo razmotriti uticaj nekih tagova na internu optimizaciju sajta 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 tipa: blok i inline oznake. Kada koristite prvi, možete promijeniti sadržaj dijela teksta (redovi, pojedinačni fragmenti ili riječi), dok drugi mogu. Oznake za formatiranje koje ćemo pogledati u ovom članku uglavnom su mala slova.

Pravila i redosled pisanja oznaka

Već znate šta 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 red
) i kontejner (uparen). Dakle, sve oznake za formatiranje teksta jesu upareno... To znači da svaki element ima početnu i završnu oznaku, a izbor mora biti postavljen između njih. Na primjer, ispravan odabir fraze bi izgledao ovako: Odabrani isječak

Kada pretraživač obradi ovaj fragment, vidjet ćete sljedeći tekst: Odabrani isječak. Usput, sve oznake se ne prikazuju u RSS feedu ().

Glavna stvar kada pišete oznake je da ih držite zatvorenima. 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 bitno kojim redosledom ih koristite. Dakle, pisanjem teksta sa ovakvim oznakama:

Odabrani isječak

ili ovako:

Odabrani isječak

I dalje ćeš 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 pretraživač može različito rukovati oznakama (), ovisno o postavkama. Sada pređimo na same oznake za formatiranje.

Podebljan i kurziv tekst - oznake , , i

Najpopularnije oznake za oblikovanje teksta - naglašavajući to bold i kurzivom... Obično se koriste da daju važnost nekom delu. 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 podebljani tekst, ali je informacija manje važna jer je kurziv manje vidljiv u pozadini osnovnog teksta od podebljanog teksta.

Prvo razmislite podebljan tekst... Za ovu radnju koriste se dvije oznake - i ... Nema razlike u izgledu. Iako, s obzirom na to da svaki pretraživač može različito tumačiti svaki element, možda ćete moći vidjeti bilo kakve razlike. Ovako izgleda tekst u tagovima i u obliku koji je već obrađen od strane pretraživača:

Tekst u jakim oznakama

Tekst u b tagovima

A evo kako izgledaju ove dvije linije u izvornom kodu stranice:

Tekst u jakim oznakama Tekst u b tagovima

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

Tekst u em tagovima

Tekst u tagovima I

A evo i izvornog koda:

Tekst u em tagovima Tekst u tagovima I

Dakle, smatrane podebljane i kurzivne oznake se zapravo 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 pisati. Stvar je u tome što su oznake i utjecati. Ako ključne riječi okružite ovim tagovima, to će imati blagotvoran 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 da istaknete neki trenutak u tekstu, onda koristite oznaku ili ... Generalno, mislim da pretraživači takođe smatraju tekst u ovim tagovima važnijim, ali dalje interna optimizacija i dalje imaju manji uticaj od i .

Slash tekstualne oznake - , i

Pogledajmo sada nekoliko oznaka koje koriste osobinu u stiliziranju teksta. Najpoznatiji uređivač teksta koji poznajete je tag ili podvuci. Ova oznaka ne utiče na rangiranje (koliko ja znam), ali će pomoći da se istakne neki tekst i fokusira na njega. Dao 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, jer prvo, zgodnije je pisati, a drugo, biće manje HTML koda na vašoj stranici, a pretraživači to vole.

Tag 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 oni mogu znatno 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, pretraživač će moći da odabere koji će koristiti, odnosno koji je prisutan u sistemu;
  • veličina- atribut koji označava veličinu teksta. Može se izraziti i u proizvoljnim jedinicama i u pikselima;
  • boja- boja teksta. Ovaj atribut se može koristiti iu 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 tag-u koristeći svaki atribut:

Ovaj tekst ima veličinu od 6px


Ovaj tekst je crvene boje

Ovaj tekst je u fontu Arial

Ovaj tekst je crvene boje i veličine 5px

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

Blokovi elementi dizajna teksta - zaglavlja

-

, stav

Na kraju ćemo pogledati blok elemente koji se koriste u gotovo svakom dokumentu. Ovo 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 ogroman uticaj na internu optimizaciju, pa uključite oznake ključne riječi. Postoji dosta karakteristika ovog slučaja, o kojima ću govoriti u narednim člancima.

Sada razgovarajmo o oznaci za isticanje pasusa.

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

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

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

Dakle, članak o oznake za formatiranje dokumenata... Ima ih mnogo 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ćava vam da skrenete pažnju 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 porodica.

Oznake i atributi prilikom indeksiranja s html fontovima

Jezik hiperteksta ima veliki skup alata za rad sa fontovima. Uostalom, formatiranje teksta je glavni zadatak html-a.

Razlog za stvaranje HTML jezika bio je problem prikazivanja pravila oblikovanja teksta u pretraživačima.


Razmotrite oznake koje se koriste za rad sa 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;
  • veličina - veličina fonta u konvencionalnim jedinicama.

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

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

Samo tekst između dijelova uparene oznake fonta je formatiran. Ostatak teksta se prikazuje u zadanom standardnom fontu.

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

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

Običan tekst

Thumbnail

Thumbnail

Više nego inače

Manje nego inače

Kurziv

Kurziv

Podvučeno

Precrtano

Mogućnosti atributa stila

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

1) font-family - svojstvo postavlja porodicu fontova. Moguće je nabrajanje nekoliko vrijednosti.
Promjena fonta u html-u na sljedeću vrijednost će se dogoditi ako prethodna porodica nije instalirana na korisnikovom operativnom sistemu.

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:

font-size: apsolutna veličina | relativna veličina | vrijednost | interes | nasljediti

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

  • U pikselima;
  • U apsolutnoj vrijednosti ( xx-mali, x-mali, mali, srednji, veliki);
  • U procentima;
  • 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 | nasljediti

vrijednosti:

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

Primjer kako promijeniti font u html-u koristeći ovo svojstvo:

font-style: naslijediti

stil fonta: kurziv

stil fonta: normalan

stil fonta: kosi

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

font-varijanta: normalna | mala slova | nasljediti

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

font-varijanta: naslijediti

font-varijanta: normalan

font-varijanta: mala slova

5) font-weight - omogućava vam da podesite debljinu pisanja teksta (zasićenost). sintaksa:

font-weight: bold | bolder | lighter | normal | 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 normalan;
  • normalan - normalan pravopis;
  • 100-900 - postavlja debljinu fonta u numeričkom ekvivalentu.

font-weight: bold

font-weight: bolder

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 kontejnera. Interno, kombinira vrijednosti nekoliko svojstava dizajniranih za promjenu fontova. Sintaksa fonta je:

font: font-size font-family | nasljediti

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

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

font: ikona

font: natpis

font: meni

font: box-box

mali natpis

font: statusna traka

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

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

Top srodni članci