Glavni HTML oznake za oblikovanje teksta - odabir teksta podebljanim i kurzivom; Parametri veličine, boje i fontovi; Stavak i naslovi za oznake. Debeli tekst CSS HTML font natpis

Danas ću vam reći kako napraviti riječi s hrabrim fontovima na web mjestu koristeći HTML i CSS. Ovaj se dizajn koristi kada trebate istaknuti određene podatke na stranici. Štaviše, ne radi se samo o naslovima, već i o jednostavnim riječima, frazama u tekstu. To se jednostavno dovoljno implementira.

Posebne HTML oznake koriste se za označavanje određenog teksta. i . Na primjer, sljedeći kod:

Normalan tekst.

Thumbnail.

Odvažan.

Normalan tekst.

Thumbnail.

Odvažan.

Na izlazu daje takvu sliku:

Posljednje dvije mogućnosti vizualno izgledaju isto, ali oni se malo razlikuju jedno s drugim. Označiti Određuje jednostavan stilski isticanje riječi s hrabrim font, dok Ovo dodaje neku semantičku "poboljšanu" (važnu) vrijednost. To jest, zadnji redak nije samo hrabar tekst, već neke važne informacije. U principu, za pretraživače preporučuju ga koristeći .

Možete upoznati i masti font propisan u HTML-u sa stilovima:

Primjer podebljanog teksta.

Uzorak teksta S. debeo Ukratko.

Na mjestu se prikazuje ovako:

Uprkos činjenici da podebljani tekstualni kod za HTML ispravno radi, nemojte. Svi stilovi dizajna moraju se izrađivati \u200b\u200bu CSS datoteci. Stoga ste u gornjem primjeru trebali biti za oznake

I Navedite odgovarajuću klasu, a zatim registrirajte njegov dizajn u stilskom listu. Takvo su pravila za registraciju Kodeksa. Stoga, za podebljani font u HTML-u koristite oznaku .

Podebljani tekst na CSS-u

Da bi se napravio čvrst font u CSS-u, koristi se nekretnina za težinu fonta. S njom je naznačeno "zasićeno" fragmenta teksta. Vrijednosti mogu biti od 100 do 900, ali najčešće se koriste:

  • podebljano (masnoća) - 700 prema zadanim postavkama;
  • normalno (normalno) - 400 zadanih.

Postoje i opcije za hrabrine i svjetlije vrijednosti koje mijenjaju font ovisno o roditelju na manje ili više masti, respektivno.

Da biste postavili podebljani tekst u CSS-u, na primer, morate, na primer, potreban neki drugi stil:

Normalni tekst S. izbor masti u centru.

jak (težina fonta: podebljana;)

Ovdje sam želio slaviti jednu malu nijansu, za koju mi \u200b\u200bje rečeno - ako stvorite novu klasu za neki element, poželjno je koristiti manje ili više "razumljivo ime". Na primjer, u primjeru iznad klase stila \u003d "My-Bold-Font" izgleda logičnije od nastave \u003d "New-Font", jer Djelomično možete razumjeti njegovu svrhu. Ovo je plus za one koji će ubuduće izgledati i koristiti svoj raspored.

U sljedećem članku reći ću vam o zanimljivim masnim fontovima koje sam uspio pronaći.

U HTML veličini fonta igra važnu ulogu. Omogućuje vam skretanje pažnje korisnika na važne informacije postavljene na stranici web mjesta. Iako nije samo veličina slova važna, već i njihova boja, debljina, pa čak i porodica.

Oznake i atributi sa robotom sa HTML fontovima

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

Razlog stvaranja HTML jezika postao je problem prikazivanja preglednika pravila za oblikovanje teksta.


Razmislite o oznakama koje se koriste za rad sa fontovima u HTML-u i njihovim atributima. Glavna je oznaka . Koristeći vrijednosti njegovih atributa, možete postaviti nekoliko karakteristika fonta:

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

Vrijednost pozitivne atribute podržana je od 1 do 7.

  • lice - koristi se za instaliranje tekstualnih porodica fontova koji će se koristiti unutar oznake . Nekoliko vrijednosti navedenih putem zareza su odmah podržane.

Samo tekst koji se nalazi između dijela oznake paira fonta formatiran je. Preostali tekst prikazuje se standardnim font instaliranim prema zadanim postavkama.

Također u HTML-u postoji niz oznaka par koji određuju samo jedno pravilo oblikovanja. Oni uključuju:

  • - Određuje hrabar font na HTML. Označiti djelovanjem sličnim prethodnom;
  • - Veličina je veća od zadanog skupa;
  • - manja veličina fonta;
  • - nagnut tekst (kurziv). Slična oznaka ;
  • - tekst s podvlakom;
  • - naglasi;
  • - prikaz teksta samo u malim slovima;
  • - U velikoj futrolu.

Normalan tekst

Thumbnail

Thumbnail

Običniji

Manje uobičajeno

Kurziv

Kurziv

S naglaskom

Srušen

Karakteristike atributa stila

Pored opisanih oznaka, još uvijek postoji nekoliko načina promjene fonta u HTML-u. Jedna od njih je upotreba univerzalnog atributa u stilu. Koristeći vrijednosti njegovih svojstava, možete postaviti stil ekrana fonta:

1) Porodica fonta - nekretnina postavlja porodicu fontova. Možete nabrojati nekoliko vrijednosti.
Promjena fonta u HTML-u na sljedeću vrijednost dogodit će se ako prethodna porodica nije instalirana u korisničkom sistemu korisnika.

Sintaksa pisanja:

porodica fontova: Naziv fonta [, ime fonta [, ...]]

2) Veličina fonta - Veličina je postavljena od 1 do 7. Ovo je jedan od glavnih načina kako u HTML-u možete povećati font.
Sintaksa pisanja:

veličina fonta: apsolutna veličina | Relativna veličina | Vrijednost | kamata | nasljediti.

Veličina fonta može se postaviti i:

  • U pikselima;
  • U apsolutnoj vrijednosti ( xx-mali, x-mali, mali, srednji, veliki);
  • U prožima;
  • Bodovi (pt).

Veličina fonta: 7

Veličina fonta: 24px

Veličina fonta: X-velika

Veličina fonta: 200%

Veličina fonta: 24pt

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

fONT-STIL: Normalno | Italic | Oblique | nasljediti.

Vrijednosti:

  • normalno-nenormalno pisanje;
  • italic - kurziv;
  • kosi - font sa nagibom desno;
  • nasljednost - nasljeđuje pisanje roditeljskog elementa.

Primjer kako promijeniti font u HTML-u koristeći ovu nekretninu:

fONT STIL: INHERIT

stil fonta: Italic

fONT-STIL: NORMAL

fONT-STIL: Oblique

4) Provizija fonta - prevodi sva velika slova na naslov. Sintaksa:

provizija fonta: normalno | Male kape | nasljediti.

Primjer kako promijeniti font u HTML-u ovim nekretninama:

vARANIJA FONT: Nasljeđivanje

vARANIJA FONT: Normalno

vARIJANA FONT: Small-Caps

5) Težina fonta - omogućava vam postavljanje debljine pisanja teksta (zasićenost). Sintaksa:

font-Težina: podebljano | Bolder | Užitak | Normalni | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Vrijednosti:

  • bold - instalira podebljani HTML font;
  • hrabri - masna u odnosu na normalnu;
  • upaljač je zasićen u odnosu na normalno;
  • normalno - normalno pisanje;
  • 100-900 - Debljina fonta postavljena je u numeričkom ekvivalentu.

težina fonta: podebljana

težina fonta: hrabri

težina fonta: upaljač

težina fonta: Normalno

težina fonta: 900

težina fonta: 100

Svojstvo fonta i HTML font boja

Font je još jedna nekretnina kontejnera. Sama unutar sebe kombinirala je vrijednosti nekoliko svojstava dizajniranih za promjenu fontova. Sintaksa font:

font: Porodica fontova veličine fonta | nasljediti.

Također, fontovi koji koriste sustav u natpisima na različitim kontrolama mogu se odrediti kao vrijednost.

  • natpis - za dugme;
  • ikona - za ikone;
  • meni - Meni;
  • poruka - Box - dijaloški okviri;
  • mala slova - za male kontrole;
  • status-bar - STRUČNI STRUČNI FONT.

font: ikona

font: Natpis

font: Meni.

font: Box poruka

mala natpisa.

font: Status-bar

font: Italic 50px Bold "Times New Roman", Times, Serif

Da biste postavili boju fonta u HTML-u, možete koristiti objekt u boji. Omogućuje vam postavljanje boje, koristeći ključnu riječ i u RGB formatu. Kao i u obliku heksadecimalnog koda.

Pozdrav, dragi čitači blogova! Ovaj članak će govoriti o tome oznake oblikovanja teksta. Svijetli primjeri su odabir teksta podebljanim ili kurzivom. Također razmatramo utjecaj nekih oznaka na unutrašnju optimizaciju web mjesta i pravila za njihovo pisanje. O tome možete čitati u gornjem članku. Usput, možete ispuniti slične elemente dizajna teksta u mnogim urednicima teksta, na primjer, u Wordu.

Oznake su podijeljene u 2 vrste: blok i mala slova. Kada koristite prvi, možete promijeniti sadržaj teksta teksta (retka, odvojeni fragmenti ili riječi), a drugi su. Formatiranje oznaka koje smatramo u ovom članku uglavnom su niže od.

Pravila i postupak za pisanje oznaka

Već znate šta otvori i zatvaraju oznake. Ako ne, pročitajte članak na samom početku ovog materijala. Ako kratke, tada su oznake dvije vrste: pojedinačna (na primjer, prijenos na novi niz
) i kontejner (par). Dakle, sve oznake formatiranja teksta su past. To znači da bilo koji element ima otvaranje i zatvaranje oznaka, a razdvojeni fragment mora biti postavljen između njih. Na primjer, pravi bivši odabir fraze izgledat će ovako: Namjenski fragment

Kad pretraživač obradi ovaj fragment, vidjet ćete ovaj tekst: Namjenski fragment.Usput, u RSS vrpci sve oznake nisu prikazane ().

Glavna stvar prilikom pisanja oznaka - ne zaboravite da ih zatvorite. Inače će cijeli tekst na stranici biti označen masnoć (u primjeru sa oznakom ). Ali postoje takvi slučajevi kada trebate istaknuti određeni fragment i podebljano i kurziv istovremeno. Ali oznaka koja obavlja ovu akciju ne postoji. Izađite iz ove situacije jedan: koristite dvije oznake istovremeno. U kojim redoslijedom njihove upotrebe nema. Stoga pisanje teksta sa ovakvim oznakama:

Namjenski fragment

ili ovako:

Namjenski fragment

Još uvijek stižeš Namjenski fragment italic i masti istovremeno. Međutim, poželjno je koristiti prvu opciju jer je izvorno bio jedini i tačan. Također, ne zaboravite da svaki pretraživač može obraditi oznake na različite načine (), ovisno o postavkama. A sada se obratim samim oznakama

Odabir teksta u masnoj i kurzivu - Oznake , , i

Najpopularnije oznake za oblikovanje teksta ističu ga. debeo i italic. Obično se koriste za davanje važnosti za bilo koji fragment. Prvi se slučaj koristi za označavanje fragmenta koji sadrži korisne informacije ili ključne riječi. Italic se primjenjuje za istu svrhu kao masni tekst, ali informacije su manje važne, jer podrazumijeva na pozadini glavnog teksta manje uočljive od masnog teksta.

Razmislite za početak odabir teksta masnog. Za ovu akciju koristi dvije oznake - i . Nema razlike u izgledu. Iako, s obzirom na činjenicu da svaki preglednik može protumačiti svaki element na svoj način, možete vidjeti razlike. Evo što tekst izgleda u oznakama i U već prerađenom obrascu pregledača:

Tekst u jakim oznakama

Tekst u oznakama B

Ali koje su dvije linije na izvornoj stranici stranice izgledaju:

Tekst u jakim oznakama Tekst u oznakama B

Ista situacija koju možemo promatrati u slučaju oznake izbora kurziva i . Pokušajte pronaći razlike između dva primjera:

Tekst u em oznakama

Tekst u oznakama I

Ali izvorni kod:

Tekst u em oznakama Tekst u oznakama I

Dakle, raspravljane oznake pražnjenja podebljanim i tolikački se zapravo ne razlikuju, ali tada mi, na primjer, mi, na primjer, označa ako tamo ? Uostalom, potonje sadrži samo jedan znak (ne brojanje nosača) i, prema tome, lakše je pisati. A stvar je to oznake i Uticaj na. Ako ćete okružiti ove oznake ključne riječi, koristit će se na promociji web mjesta. Ne bi trebalo pretjerati s tim - maksimum u tekstu treba biti 5% FATTE teksta u oznaci , i isto i kurzivno u oznaci .

Ako želite jednostavno istaknuti svaki trenutak u tekstu, a zatim koristite oznaku ili . Općenito, mislim da pretraživači također razmatraju tekst u ovim oznakama kao važniji, ali na interna optimizacijajoš uvijek imaju manji utjecaj nego nego i .

Oznake odabira teksta - , i

Sada razmotrite nekoliko oznaka koje koriste liniju u dizajnu teksta. Najpoznatiji vama iz urednika teksta - označiti ili podvlake. Uticaj na rangiranje ove oznake ne (koliko znam), već da izdvojim bilo koji tekst i fokusirat će na to. Primjer korištenja ove oznake donio sam malo više.

Dvije slične svrhu oznake - i . Oba izvrši funkciju overklokiranja teksta. Možete koristiti ovu oznaku u svim situacijama: Ako ažurirate dokument (ili prilično deo njega), možete preći staru i dodati novi; Ako ćete napisati nešto što ostavlja temu materijala; Nešto što ne odgovara moralnim i etičkim standardima.

Razlike ove dvije oznake su samo u njihovom pisanje, kao rezultat toga, poželjno je koristiti prvo, jer Prvo, prikladnije je za pisanje, i drugo, vaša stranica će biti manja od HTML koda i pretraživača poput toga.

Označiti i atributi - parametri tekstualne fonta

Sada razmotrite oznaku koja se ne koristi bez atributa. S njom možete odrediti parametre za određeni fragment teksta. Općenito, sada je poželjnije koristiti (kaskadne stil limova), jer Uz pomoć od njih možete snažno smanjiti cijelu HTML kod. Zato razmislite o samoj oznaci . Jer postoji samo tri atributa:

  • lice. - Sam font. Na primjer, arial, kurir ili verdana. Možete navesti nekoliko, jer Nisu svi korisnici imali opsežan skup fontova i pišući nekoliko u atributu lica, pretraživač će moći odabrati koji će koristiti ili bolje rečeno - što je prisutno u sustavu;
  • veličina - Atribut koji ukazuje na veličinu teksta. Može se izraziti i u konvencionalnim jedinicama i u pikselima;
  • boja - Boja teksta. Ovaj atribut se može koristiti i u HTML-kodovima boja i u verbalnom. Prvi imaju oblik #fffffffffffffffffffffffffff-a ili slovo od A do F), a drugo je napisano jednostavnim riječima (na primjer, crveno - crveno).

Tako liči na tekst u oznaci Koristeći svaki atribut:

Ovaj tekst ima veličinu 6px


Ovaj tekst je crveni

Ovaj tekst ima arial fonta

Ovaj tekst crvene i veličine 5px

Ali ono što ćete vidjeti, nakon obrade pismenog koda:

Blokirajte elemente dizajna teksta - naslovi

-

, odlomak

Konačno ćemo pogledati blok elemente koji se koriste u gotovo svakom dokumentu. Ovo su naslovi i odlomak oznaka. Razmislite o prvom. Glave su 6 vrsta i svaka ima svoju oznaku. Svaka vrsta nosi samo svoj vlastiti niz i snimljen s oznakama.

,

,...,

. Evo što naglašeni u tretirani obrazac izgledaju:

Cifra nakon što zaglavlje riječi odgovara broju u oznaci . Zaglavlja imaju ogroman utjecaj na unutrašnju optimizaciju, pa zaključite u oznakama Ključne riječi. Značajke ovog slučaja su prilično puno, što ću reći u narednim člancima.

A sada razgovarajmo o oznaci raspodjele odlomaka

Funkcija ove oznake je odvajanje teksta između drugog teksta praznim nizom. Ako pogledate izvorni kod bilo kojeg dokumenta, možete vidjeti sljedeće:

U zelenim pravokutnicima, jedan odlomak, u crvenom - drugom. Ali kako ovaj kôd brine nakon prerade pregledača (strelica označava prazan niz):

Kao rezultat toga, dobivamo prilično uočljivo odvajanje jednog odlomka iz drugog, što je dobro - čitanje postaje prikladnije.

Koja je došla do kraja članka o oznake formatiranja dokumenata. Oni su mnogo više nego, a ne opisani u ovom materijalu. Samo neki trebaju puno toga reći o nekim, kao rezultat toga, oni će biti posvećeni pojedinačnim člancima sa potpunim pregledom!

FATTY FONT se određuje pomoću CSS atributa težina fontovašto može poduzeti sljedeće vrijednosti:

  • upaljač. - Svetlost
  • normalan - normalno
  • bold. - debeo
  • bolder. - više masti
  • 100..900 - 100 odgovara najfinijem font; 900 - Tolstoj

Atribut font-stil (Crtanje fonta) služi za pisanje u kurzivu i može poduzeti sljedeće vrijednosti:

  • italic - Italic, ivice teksta su zaobljeni
  • normalan - normalno
  • kosi. - Italic

Atribut provizija fonta. (Vrsta fonta) služi za pisanje s malim velikim slovima i može poduzeti sljedeće vrijednosti:

  • normalan - normalno
  • sMAOO-CAPS. - mali kapital

Uz masti, kurziv i mali kapital, još uvijek postoje neke popularne vrste crteža: podvlačenje i označavanje.


Atribut dekoracija teksta. (Tekstualni ukras) služi za podvlačenje teksta i može poduzeti sljedeće vrijednosti:

  • treptaj. - svjetlucajući tekst (tj. nije podržan)
  • linije. - prešao tekst
  • nijedan - bez promjena
  • overline - linija preko teksta
  • podvući - podvučeni tekst

Atribut transformacija teksta (Tekstualna transformacija) služi za rad sa malim slovima pacijenta i mogu uzeti sljedeće vrijednosti:

  • kapitalizovati - Sve riječi počinju velikim slovom
  • mala slova - Sav tekst napisan je malim slovima
  • nijedan - bez promjena
  • velika slova. - Sav tekst napisan je velikim slovima

Primjer upotrebe težina fontova, font-stil, dekoracija teksta., transformacija teksta: Primjer broj 9.

HTML stranice kod:

Bez naslova.

"Zlatni prsten Rusije" (u davnim vremenima do kvržice), turistička ruta, uključujući mrežu drevnih ruskih gradova: Sergiev Posad, Pereslavl-Zalessky, Rostov, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Poljski, Uglich. Naziv mjesta je prije svega geografski, podrazumijevao je sve što je "iza šume" u odnosu na Kievan Rus.


Turistička ruta (djela od početka 1970.) položena kroz povijesne gradove prolazi kroz teritoriju pet regija - Moskva, Yaroslavl, Kostroma, Ivanovo, Vladimir. Drevni gradovi ovih zemalja imaju svoju sudbinu, svoju prošlost. Učinili su izazovan put u svom povijesnom razvoju od prvih rođendana do danas. Mnogo nepovratno izgubljeno na ovom dužem putu. Nepažnja i nepažnja dovode do djelomičnog ili potpunog uništavanja jedinstvenih zgrada, primjera grada Kalizena, Moloma, Uglich. Prilikom izgradnje hidroelektrane u zglokovima, manastir Pokrovskog sa jedinstvenim spomenicima od 15-17 vekova pošao je pod vodom. Polovi ugljen u ugljenu srušene su, rastavljane ograde manastira, što je uništilo integritet njihovog ansambla. Napori restauratora uspjeli su se povući iz nužde i spasiti iz smrti desetaka predmeta stare arhitekture, izgledala je neizrešljivo izgubljeno. Vraćao se u svoj originalni oblik: arhitektonski ansambl manastira (1674-77) Uglich, hram Pokrov u Nerley (12. stoljeće), Katedrala Dmitrievsky (12. stoljeće) i Zlatna vrata Vladimir, Katedrala Svetog Georga (12. vek) Jurievski-poljski, spomenici drevnog Suzdala, gdje su integrirani radovi na obnovi povijesnog razvoja u cijelom gradu, grad muzej. Opet, cijeli arhitektonski kompleksi muzeja drvene arhitekture u Kostomi, Suzdal. Sve ovo - kreacije ruku ljudskog jezika, dirnule su zaštićenim teritorijama zemlje ruskog jezika.