Postoji mnogo oznaka za formatiranje teksta. Neki od njih se koriste često (i brzo ćete ih zapamtiti), drugi - rijetko (ne morate ih pamtiti).

Ovdje ćemo pogledati one koji se često koriste.

Oznake koje čine naslove teksta

Ove oznake ističu tekst kao naslove. One. Svaki naslov počinje u novom redu, označen je podebljanim slovima i ima svoju veličinu (naslov prvog nivoa je najveći, šesti nivo je najmanji).

Ove oznake se mogu koristiti s opcijom horizontalnog poravnanja poravnati. Moguće vrijednosti za ovaj parametar:

• lijevo- lijevo,
• u pravu- desno,
• centar- u centru,
• opravdati- po širini.

Primjer koda:

Prijelom pasusa i oznake prijeloma reda

Tag
- oznaka za prinudni pomak. Tekst nakon ove oznake počinje u novom redu.
Oznake podijeliti tekst na pasuse. Prije početka svakog pasusa treba postaviti oznaku

, oznaka za zatvaranje nije obavezna. Za razliku od oznake
Paragrafi su odvojeni jedan od drugog praznim redom.

Na oznaci

postoji parametar poravnati, koji određuje kako je tekst unutar pasusa poravnat. Moguće vrijednosti za ovaj parametar:

• lijevo- lijevo,
• u pravu- desno,
• centar- u centru,
• opravdati- po širini.

Primjer koda:

HTML formatiranje

Ovo je pasus, odvojen je od ostatka teksta praznim linijama na vrhu i dnu i poravnat lijevo.

Ovo je pasus, odvojen je od ostatka teksta praznim linijama na vrhu i dnu i poravnat je udesno.

Ovo je pasus, odvojen je od ostatka teksta praznim linijama na vrhu i dnu i poravnat prema sredini.

To je samo tekst.
Ovo je tekst na novom redu.

U prozoru pretraživača to će izgledati ovako:

Oznake koje čine tekst kurzivom

Ove oznake ispisuju tekst u kurzivu, ali to rade iz različitih razloga.
Oznake koristi se za logično isticanje naslova knjiga, članaka i citata.
Oznake koriste se za isticanje definicija.
Oznake I istaknuti važne dijelove teksta. Potonje se ne preporučuje za upotrebu.

Primjer koda:

HTML formatiranje Ovaj tekst se nalazi u oznakama citiranja
Ovaj tekst je u dfn oznakama
Ovaj tekst je u em tagovima
Ovaj tekst je u i tagovima

U prozoru pretraživača to će izgledati ovako:

Oznake koje čine tekst podebljanim

Oba se koriste za isticanje važnih dijelova teksta, ali prvo je poželjnije.

Primjer koda:

Ovaj tekst u oznakama je jak
Ovaj tekst je u b tagovima

U prozoru pretraživača to će izgledati ovako:

Oznake koje ističu tekst podvlačenjem

Oba se koriste za podvlačenje važnih pasusa teksta, ali se prednost daje prvom.

Primjer koda:

HTML formatiranje Samo tekst

Ovaj tekst je u u tagovima

U prozoru pretraživača to će izgledati ovako:

Oznake koje prikazuju tekst u monospace fontu

Tekst se prikazuje u monospace fontu, ali je poželjno koristiti prvi.

Primjer koda:

HTML formatiranje Samo tekst
Ovaj tekst je u kbd oznakama
Ovaj tekst je u samp oznakama
Ovaj tekst je u tt oznakama

U prozoru pretraživača to će izgledati ovako:

Oznake koje prikazuju tekst u superscript i subscript

Oznake prikazati tekst ispod nivoa reda u manjoj veličini fonta.
Oznake prikazati tekst iznad nivoa reda u manjoj veličini fonta.
Pogodan za izvođenje matematičkih i hemijskih formula.

Primjer koda:

HTML formatiranje y=x 2 - jednadžba parabole.

H 2 O je formula vode.

U prozoru pretraživača to će izgledati ovako:

Oznaka fonta i njeni parametri

Oznake navedite parametre fonta teksta:

lice- naziv fonta. Možete navesti nekoliko naziva fontova, odvojenih zarezima. U tom slučaju, ako prvi navedeni font nije pronađen (ne znate koji su fontovi instalirani na korisnikovom računalu), pretraživač će koristiti sljedeći na listi.

veličina- veličina fonta u proizvoljnim jedinicama od 1 do 7. Zadana veličina fonta je 3.

boja- boja teksta (podrazumevano - crna).

Postoje dva načina da se odredi boja: po imenu i navođenjem heksadecimalnog koda boje.

Sa personalizovanim bojama (ima ih 156) sve je jednostavno, pogledajte odgovarajuću tabelu, izaberite boju koja vam se sviđa i upišite njen naziv u vrednost parametra (na primer, color="blue").

Ali druga metoda pruža mnogo veći izbor. Ovdje možemo birati između milion boja navodeći njegov heksadecimalni kod. Ovaj kod ima 6 cifara i počinje znakom "#". Nećemo ulaziti u detalje kako se formira kod boja, samo ćemo istaći da se može dobiti, na primjer, u Photoshopu. Pročitajte kako to učiniti na stranici
Na primjeru će biti jasnije:

Istaknimo riječ "tekst" crvenom bojom:

Tekst

Sada dodajmo kurzivne oznake (otvaraju se lijevo, zatvaraju desno):

Tekst

A sada - podebljane oznake:

Tekst

Svaki put stavljamo sve prethodne oznake u nove. Ovo se zove red ugniježđenja. Za formatiranje teksta možete koristiti različite oznake, glavna stvar je da ne kršite redoslijed gniježđenja.

Ovim je završena treća lekcija, pogledali smo glavne načine oblikovanja teksta, u sljedećoj lekciji ćemo pogledati manje primjenjive oznake za formatiranje. Ipak, neće biti loše upoznati se s njima.

Izgled bilo kojeg informativnog teksta podrazumijeva uključivanje semantičkih hiperveza ili sidra. Ovi elementi se dodaju pomoću oznake “a” (sidro). Moderni pretraživači podrazumevano prikazuju sličan element sa. Često dizajneri izgleda ili veb dizajneri više vole da ili promene ovaj stil ili da ga potpuno uklone.

U nekim slučajevima to je zaista neophodno. Na primjer, u gustom bloku veza, gdje će nepotreban dizajn samo preopteretiti percepciju i učiniti dokument teškim za čitanje. Međutim, u nekim slučajevima je prikladno održavati razliku između teksta i veza. Ako dizajn stranice u potpunosti isključuje takvo formatiranje, vrijedi koristiti bilo koju drugu vrstu isticanja takvih elemenata. Najčešći tip diferencijacije danas je kontrast boja sidra u tekstu. Efikasno je. Jedini manji nedostatak ove opcije bit će problem isticanja teksta od strane ljudi koji ne percipiraju različite boje (sljepilo za boje). Ali ovo je toliko nizak postotak korisnika da se može zanemariti.

Ako je ipak odlučeno da se ukloni podvlačenje veza, tada će vam trebati neko znanje o strukturi internet stranice, odnosno CSS-u.

Uklonite podvlačenje linka sa cijele stranice

Za osobu koja je dobro upućena u web dizajn i CSS posebno, uklanjanje podvlačenja linkova neće biti teško. Da biste to učinili, samo trebate pronaći i otvoriti datoteku u datotekama stranice koja je odgovorna za stil. Obično se nalazi u korijenskom direktoriju i ima ekstenziju .css. Možete ukloniti podvlačenje sa linkova pomoću ovog jednostavnog koda:

tekst-dekoracija: nema;

Ova mala linija će u potpunosti ukloniti podvlačenje svih elemenata napisanih pomoću oznake "a" na cijeloj web lokaciji.

Ali šta ako nemate pristup CSS datoteci?

U ovom slučaju, preporučljivo je koristiti oznaku Style na početku dokumenta. Radi isto kao i CSS fajl. Da biste primenili stilove, potrebno je da na samom početku dokumenta (ili HTML stranice) dodate konstrukciju u kojoj se primenjuju uobičajena pravila CSS stilova.

Ovi stilovi se primjenjuju samo na određenu stranicu. Neće se primjenjivati ​​na druge dijelove ili dokumente stranice.

Uklonite podvučenu vezu kada lebdite

Ali šta ako trebate ukloniti podvučenu vezu pri lebdenju? CSS nam može pomoći iu ovom slučaju. Kod će izgledati ovako:

tekst-dekoracija: nema;

To je pseudo-klasa “:hover” koja je odgovorna za ukrašavanje elemenata kada se lebdi iznad njih.

Kombinacijom ove dvije opcije možemo učiniti da se podvučena veza pojavljuje samo pri lebdenju, inače će izgledati kao običan tekst:

tekst-dekoracija: nema;

dekoracija teksta: podvlačenje;

Korištenje identifikatora i klasa

Kao što možete vidjeti iz gore navedenog, promjena stila elementa na web stranici ili HTML dokumentu je prilično jednostavna. Nedostaci takvih opcija su nemogućnost selektivne primjene stilova: ne na cijelu stranicu ili dokument, već na određenu vezu.

Postoji nekoliko opcija za rješavanje ovog problema.

Možete ukloniti podvlačenje veza u liniji. Iako se to strogo ne preporučuje sa stanovišta optimizacije stranice.

Da biste to učinili, morate navesti parametar Style direktno u oznaci veze:

Druga opcija je prihvatljivija.

Uvodimo dodatnu klasu ili id ​​u element i dodjeljujemo stilove koji su nam potrebni ovim selektorima:

Klasa se piše sa tačkom ispred njenog imena:

None_decoration(

tekst-dekoracija: nema;

Identifikator je označen znakom #:

#none_decoration(

tekst-dekoracija: nema;

Ovo pravilo se primjenjuje i na CSS datoteku i na oznaku Style

Promjena stila prikaza linkova u tekstu

Osim mogućnosti, omogućava primjenu drugih vrsta stilizacija. Često web dizajneri ili dizajneri izgleda koriste da istaknu tekst veze mijenjajući njegovu boju u odnosu na glavni tekst.

Ovo je također prilično jednostavno za napraviti:

boja :*odredite željenu boju u bilo kojem formatu (*crvena, #c2c2c2, rgb (132, 33, 65)*)*;

Sličan stil se primjenjuje prema istim pravilima kao što je opisano za uklanjanje podvlačenja veze. CSS pravila u ovom slučaju su identična. Promjena boje veze i uklanjanje podvlačenja može se primijeniti kao poseban stil (tada će veza ostati podvučena, ali će promijeniti boju iz standardne plave u boju koju želite).

Zamjena standardnog stila

Još jedna napomena. Umjesto de-podvlačenja veze, CSS vam daje mogućnost da poništite zadane vrijednosti stila. Da biste to učinili, samo zamijenite sljedeće vrijednosti u konstrukciju za dekoraciju teksta:

text-decoration-style:

• Ako vam je potrebna puna linija, navedite vrijednost puna.
• Za valovitu liniju - valovito.
• Dvostruka linija - odnosno dvostruka.
• Linija se može zamijeniti nizom tačaka - isprekidanim.
• Podvuci riječ isprekidanom linijom - isprekidanom

Također možete promijeniti položaj linije u odnosu na tekst:

Konstrukt line-text-decoration-line može imati sljedeće vrijednosti:

I boja (ne treba je brkati sa bojom teksta!):

text-decoration-line: (bilo koja boja u bilo kojem formatu * crvena, #c2c2c2, rgb (132, 33, 65)*).

Radi praktičnosti, sve tri pozicije se mogu napisati zajedno u konstrukciji:

dekoracija teksta: crvena, provučena, valovita.

Pozdrav svima koji su žedni novih znanja i čitaju moj blog. Današnju publikaciju želim posvetiti jednoj vrlo jednostavnoj temi, koja ipak redovito postavlja brojna pitanja među početnicima: “Kako ukloniti ili dodati donju crtu u html-u.”

Kao što već znate, sama donja crta se može postaviti ručno, ali za linkove je postavljena po defaultu. Zato ću vas u ovom članku podsjetiti kako postaviti podvučene naslove, reći vam kako postaviti donju liniju na cijelu širinu bloka, kao i kako se nositi sa standardnim formatiranjem linkova. Pa, počnimo!

Istaknimo ovo!

Postoji posebna uparena oznaka za podvlačenje teksta: riječ.

Međutim, profesionalni dizajneri rasporeda koriste mehanizme stilskih kaskadnih stolova, tj. css, da dizajnira izgled svega. I to je tačno. Ovaj pristup odvaja označavanje od stila i čini formatiranje fleksibilnim i praktičnim. Osim toga, lakše je uhvatiti greške (greške) u kodu.

Sljedeća svojstva se uglavnom koriste za isticanje tekstualnog sadržaja: granica I tekst-dekoracija.

Element granica je odgovoran za postavljanje okvira oko navedenog bloka, a također vam omogućava da postavite debljinu linije i njen stil.

Ova jezička jedinica je prilično fleksibilna, jer možete odrediti formatiranje za pojedinačne strane ivice. To se postiže korištenjem svojstava:

1. granica-u pravu(desno)
2. granica-top(iznad)
3. granica-lijevo(lijevo)
4. granica-dnu(dole)

Takođe koristeći granica možete postaviti:

• tačka ( tačkasta)
• tačkasti ( isprekidano)
• linearni ( solidan)
• duplo ( duplo)
• volumetrijsko uokvirivanje blokova ( grooveumetnutigreben ipočetak)

Ne zaboravite da uvijek možete ponoviti postavke stila roditeljskog bloka koristeći ključnu riječ nasljediti.

Hajde sada da razgovaramo o svojstvu CSS jezika tekst-dekoracija. Ovaj element je odgovoran za dodatne ukrase teksta.

To uključuje:

1. treperi ( blink)
2. red iznad teksta ( overline)
3. precrtani objekti ( line-through)
4. stilsko naslijeđe ( nasljediti)
5. otkazivanje svih dodatnih dekoracija ( nijedan)
6. podvlačenje koje nam je potrebno ( podvući)

Vrijeme je za vježbanje

Sada želim da učvrstite stečeno znanje i praktično isprobate primjer programskog koda koji sam dao. Za one koji su upoznati sa ovom temom, ovo će također biti korisno. Kao što svi znamo: "Ponavljanje je majka učenja!"

Ovaj kod implementira modificiranu stilizaciju veza, a također postavlja podvlaku naslova na punu širinu bloka.

Naslovimo tekst podvučenim naslovom.

Ovim putem završavam ovu edukativnu publikaciju. Pokriva sve potrebne alate za isticanje tekstualnog sadržaja, znajući koje možete kreirati vlastite opcije dizajna za web stranice.

Ne zaboravite da se pridružite redovima mojih pretplatnika, jer je pred nama još mnogo zanimljivih i korisnih tema, a također podijelite link na blog sa svojim prijateljima. Ćao ćao!

Srdačan pozdrav, Roman Chueshov

Koristeći html, tekstu možete dati lijep dizajn. Element podvlačenja je vrlo popularan, ali ne znaju svi redovni korisnici kako ga koristiti.

Podcrtajte u HTML-u

Pa kako se izvodi podvlačenje? u html-u se formatira pomoću oznake . Koristi se u svim html i xhtml specifikacijama, ali samo pod uslovom prijelaza , budući da se mora navesti verzija oznake pretraživača. U ovom slučaju, dokument uspješno prolazi validaciju. Element mora biti naznačen kao standardni, odnosno na samom vrhu stranice.

Tag zatvaranje, mora biti popraćeno. Morate ga dodati u oznake na sljedeći način:

1. Naslov broj jedan

Naš tekst u paragrafu

Riječ "tekst" će biti podvučena.

Također možete naglasiti jedno slovo u riječi:

1. Naslov broj dva

Naše To st u paragrafu

Tradicionalno, u HTML markupu, veze se prikazuju sa podvlačenjem kada se lebde mišem ili čak stacionarno, a to se podrazumevano dešava u svim pretraživačima. Stoga, stavite oznaku na stalnoj osnovi se ne preporučuje.

Osim toga, pisanje stilova u css čini kod kompaktnijim, što znači da će se stranica brže učitavati.

Dizajneri izgleda najčešće primjenjuju stilove dodavanjem ivica ili podvlačenja html-u ili postavljanjem u zasebnu css datoteku.

Podcrtajte u CSS-u

Dekoracija teksta pomoću css-a je zgodan i praktičan način. Najjednostavniji načini da se to istakne je korištenje teksta-decoration ili border-bottom.

Da biste istakli tekst sa tekstualnim ukrasom, svojstvo se mora dodati u željenu klasu.

• željena klasa (
• dekoracija teksta: podvlačenje;

Treba imati na umu da se imena klasa uvijek pišu latinicom.

Dekoracija se može izvesti i bordurama. Ivice vam omogućavaju da napravite i redovnu (punu) podcrtanu i isprekidanu. Da biste to učinili, specificiraju se potrebna svojstva obruba, ali se uklanja svojstvo dekoracije teksta.

• željena klasa (
• tekst-dekoracija: nema;

Tekst se zatim ukrašava pomoću sljedećeg svojstva:

• .desired-class (
• tekst-dekoracija: nema;
• ivica-dno: 2px isprekidana crna;

Ovako ispada dekoracija: da bi bila čvrsta, umjesto "isprekidanog", koristi se "puna". Za one koji vole da ukrašavaju tekst tačkastim podvlačenjem, možete pokušati koristiti "tačkasto".

Stilovi okvira su ispisani u jednoj liniji. Pored tipa podvlačenja, potrebno je navesti i debljinu i boju podvlačenja. Možete eksperimentirati s veličinom, ali obično je dovoljno 1 ili 2 piksela. Boja teksta se također može postaviti na boju podvlačenja:

• željena klasa (
• tekst-dekoracija: nema;
• border-bottom: 1px tačkasto plava;
• boja:plava;

Ovo će stvoriti plavi tekst s plavim ukrasom. Da biste dodali stil html-u, morate dodati klasu u oznaku.

• Treći naslov

Naš tekst u pasusu

To je to, to su osnove podvlačenja u html-u.

Omogućava vam da kreirate različita podvlačenja u HTML-u: podcrtavanje, precrtavanje, tekst kroz liniju itd. Hajde da kombinujemo ovu funkciju sa prethodnom i dobijemo:

Drugi red pokazuje kako je sve napisano u jednom redu sa tekstualnim ukrasom.

text-decoration-style — stil podvlačenja teksta

Opcija specificira izgled ukrasne linije za / vezu. Nove CSS smjernice su dodale valovite i dvostruke vrijednosti, tako da ih sada ima 5:

• puna - puna linija;
• double - duplo (iz prvog primjera iznad);
• tačkasta - sastoji se od niza tačaka;
• isprekidano - omogućava vam da kreirate isprekidano CSS podvlačenje;
• valovita - spektakularna valovita linija.

text-underline-position - CSS pozicioniranje podvlačenja

Koristeći ovo svojstvo, možete kontrolirati položaj linije u odnosu na glif fonta.
Dostupne su ukupno 4 opcije:

• auto — nalazi se što bliže osnovnoj liniji teksta;
• ispod - ispod najniže ivice fonta;
• lijevo i desno - lijevo/desno za postove prikazane okomito.

Evo vizualne razlike između podvlačenja teksta korištenjem under i auto:

Mislim da je razlika prilično očigledna.

text-decoration-skip - ukloniti podvlačenje za elemente

Koristeći opciju, možete otkazati (preskočiti) dekoraciju nekih elemenata u HTML liniji. Da bolje razumijem prihvatljive vrijednosti prostora, objekata, kutija-dekoracija, rubova, mastila, duplirat ću sliku iz prethodne napomene:

To jest, na primjer, pomoću tinte možete napraviti donju crtu u CSS-u koja se ne bi ukrštala sa znakovima. Objekti vrijednosti vam omogućavaju da preskočite inline elemente (inline-block) - umetnite raspon, a puna linija će se prekinuti na odgovarajućem mjestu:

Parametri box-decoration, spaces, edges su mnogo slabije podržani od strane pretraživača, pa se njihovi rezultati ponekad razlikuju od očekivanih. Evo statusa kompatibilnosti/podrške za dekoraciju teksta u vrijeme pisanja:

Dodatni trikovi za podvlačenje veza

Korisnici početnici često postavljaju neka tipična pitanja na tu temu, pa smo i mi odlučili da ih razmotrimo. Opšti primjer je na samom dnu nakon objašnjenja.

Kako ukloniti podvučenu vezu

a:hover (tekst-dekoracija: podvlačenje; )

Oba primjera u nastavku vam omogućavaju da shvatite logiku rada lebdenja: ili prvo navedete podvlačenje veze u CSS-u, a zatim ga uklonite u lebdenju, ili obrnuto.

Ako imate još pitanja o ovoj temi, postavite ih u komentarima. Pokušat ćemo to kasnije razmotriti ili vam dati neke savjete u odgovorima. Glavna stvar u ovom pitanju je praksa - pokušajte dodati različita svojstva za opciju dekoracije teksta direktno u primjere ili kreirajte vlastiti testni fajl. Nadamo se da je sve postalo jasno na temu podvlačenja teksta i linkova u CSS/HTML-u.