Postoji mnogo oznaka za oblikovanje teksta. Neki od njih se često koriste (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. Oni. Svaki naslov počinje u novom retku, podebljan je i ima svoju veličinu (naslov prve razine je najveći, šesta razina je najmanji).

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

• lijevo- lijevo,
• pravo- desno,
• centar- u središtu,
• opravdati- u širinu.

Primjer koda:

Oznake za prijelom odlomka i retka

Označiti
- oznaka prisilnog uvlačenja retka. Tekst nakon ove oznake počinje u novom retku.
Oznake podijeliti tekst na odlomke. Prije početka svakog odlomka trebate staviti oznaku

, završna oznaka nije obavezna. Za razliku od oznake
Odlomci su međusobno odvojeni praznim redom.

Na oznaci

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

• lijevo- lijevo,
• pravo- desno,
• centar- u središtu,
• opravdati- u širinu.

Primjer koda:

HTML oblikovanje

Ovo je odlomak, odvojen je od ostatka teksta praznim redovima na vrhu i dnu i poravnat ulijevo.

Ovo je odlomak, odvojen je od ostatka teksta praznim redovima na vrhu i dnu i poravnat je udesno.

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

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

U prozoru preglednika izgledat će ovako:

Oznake koje tekst čine kurzivom

Ove oznake označavaju tekst kurzivom, ali to čine 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. Potonji se ne preporučuje za korištenje.

Primjer koda:

HTML formatiranje Ovaj tekst je u cite oznakama
Ovaj tekst je u dfn oznakama
Ovaj tekst je u em oznakama
Ovaj tekst je u i tagovima

U prozoru preglednika izgledat će ovako:

Oznake koje podebljavaju tekst

Oba se koriste za isticanje važnih dijelova teksta, ali prvi je poželjniji.

Primjer koda:

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

U prozoru preglednika izgledat će ovako:

Oznake koje ističu tekst podcrtavanjem

Oba se koriste za podcrtavanje važnih odlomaka teksta, ali prvom se daje prednost.

Primjer koda:

HTML oblikovanje Samo tekst

Ovaj tekst je u u oznakama

U prozoru preglednika izgledat će ovako:

Oznake koje prikazuju tekst monospace fontom

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

Primjer koda:

HTML oblikovanje Samo tekst
Ovaj tekst je u kbd oznakama
Ovaj tekst je u samp oznakama
Ovaj tekst je u tt tagovima

U prozoru preglednika izgledat će ovako:

Oznake koje prikazuju tekst u superskriptu i inskriptu

Oznake prikazati tekst ispod razine retka u manjoj veličini slova.
Oznake prikazati tekst iznad razine retka u manjoj veličini slova.
Pogodan za izvođenje matematičkih i kemijskih formula.

Primjer koda:

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

H 2 O je formula vode.

U prozoru preglednika izgledat će 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 računalu korisnika), preglednik će koristiti sljedeći na popisu.

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

boja- boja teksta (zadana - crna).

Postoje dva načina za određivanje boje: imenom i određivanjem heksadecimalnog koda boje.

S personaliziranim bojama (ima ih 156) sve je jednostavno, pogledajte odgovarajuću tablicu, odaberite boju koja vam se sviđa i upišite njezin naziv u vrijednost parametra (npr. color="blue").

Ali druga metoda pruža mnogo više izbora. Ovdje možemo birati između milijun boja navodeći njen heksadecimalni kod. Ovaj kod ima 6 znamenki i počinje znakom "#". Nećemo ulaziti u detalje o tome kako nastaje kod boje, samo ćemo istaknuti da se on može dobiti, primjerice, u Photoshopu. Pročitajte kako to učiniti na stranici
Bit će jasnije na primjeru:

Označimo riječ "tekst" crvenom bojom:

Tekst

Dodajmo sada kurzivne oznake (otvaranje lijevo, zatvaranje desno):

Tekst

A sada - podebljane oznake:

Tekst

Svaki put postavljamo sve prethodne oznake u nove. To se zove redoslijed ugniježđivanja. Možete koristiti različite oznake za oblikovanje teksta, glavna stvar je ne kršiti redoslijed gniježđenja.

Ovime završavamo treću lekciju, pogledali smo glavne načine oblikovanja teksta, u sljedećoj lekciji ćemo pogledati manje primjenjive oznake za oblikovanje. Ipak, neće biti loše upoznati se s njima.

Izgled bilo kojeg informativnog teksta podrazumijeva uključivanje semantičkih hiperveza ili sidara. Ovi se elementi dodaju pomoću oznake "a" (sidro). Moderni preglednici prema zadanim postavkama prikazuju sličan element s. Često dizajneri izgleda ili web dizajneri radije mijenjaju ovaj stil ili ga u potpunosti uklanjaju.

U nekim slučajevima to je stvarno potrebno. 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 je slučajevima prikladno održavati razliku između teksta i poveznica. Ako dizajn web mjesta u potpunosti isključuje takvo oblikovanje, onda je vrijedno koristiti bilo koju drugu vrstu isticanja takvih elemenata. Najčešća vrsta razlikovanja danas je kontrast boja sidra u tekstu. Djelotvorno je. Jedini mali nedostatak ove opcije bit će problem isticanja teksta od strane ljudi koji ne mogu percipirati različite boje (sljepoća za boje). Ali to je tako nizak postotak korisnika da se može zanemariti.

Ako je ipak odlučeno ukloniti podcrtavanje poveznica, tada će vam trebati malo znanja o strukturi internetske stranice, odnosno CSS-u.

Uklonite podcrtane veze s cijele stranice

Za osobu koja je dobro upućena u web dizajn, a posebno u CSS, uklanjanje podcrtanih poveznica neće biti teško. Da biste to učinili, samo trebate pronaći i otvoriti datoteku u datotekama web mjesta koja je odgovorna za stiliziranje. Obično se nalazi u korijenskom direktoriju i ima ekstenziju .css. Možete ukloniti podcrtavanje s veza pomoću ovog jednostavnog koda:

tekst-ukras: nema;

Ova mala linija u potpunosti će ukloniti podcrtavanje svih elemenata napisanih s oznakom "a" na cijeloj web stranici.

Ali što ako nemate pristup CSS datoteci?

U ovom slučaju, preporučljivo je koristiti oznaku Style na početku dokumenta. Radi isto kao i CSS datoteka. Kako biste primijenili stilove, potrebno je na samom početku dokumenta (ili HTML stranice) dodati konstrukciju u kojoj vrijede uobičajena pravila CSS stilova.

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

Ukloni podcrtavanje veze pri prelasku

Ali što ako trebate ukloniti podcrtavanje veze dok lebdite? CSS nam može pomoći iu ovom slučaju. Kod će izgledati ovako:

tekst-ukras: nema;

To je pseudoklasa “:hover” koja je odgovorna za ukrašavanje elemenata kada lebdite iznad njih.

Kombinacijom ove dvije opcije, možemo učiniti da se podcrtana poveznica pojavljuje samo dok lebdi, inače će izgledati kao običan tekst:

tekst-ukras: nema;

tekst-ukras: podcrtano;

Korištenje identifikatora i klasa

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

Postoji nekoliko opcija za rješavanje ovog problema.

Možete ukloniti podcrtavanje veza u tekstu. Iako se to strogo ne preporučuje sa stajališta optimizacije stranice.

Da biste to učinili, morate navesti parametar Style izravno 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 s točkom ispred svog naziva:

Ništa_ukras(

tekst-ukras: nema;

Identifikator je označen znakom #:

#bez_ukrasa(

tekst-ukras: nema;

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

Promjena stila prikaza poveznica u tekstu

Osim mogućnosti, omogućuje vam primjenu drugih vrsta stilizacije. Web dizajneri ili dizajneri izgleda često koriste za isticanje teksta veze promjenom njegove boje u odnosu na glavni tekst.

Ovo je također vrlo jednostavno učiniti:

boja :*navedite ž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 podcrtavanja veze. CSS pravila u ovom slučaju su identična. Promjena boje veze i uklanjanje podcrtavanja može se primijeniti kao zasebni stil (tada će veza ostati podcrtana, ali će promijeniti boju iz standardne plave u boju koju želite).

Zamjena standardnog stila

Još jedna posljednja napomena. Umjesto depodcrtavanja veze, CSS vam daje mogućnost nadjačavanja zadanih vrijednosti stila. Da biste to učinili, samo zamijenite sljedeće vrijednosti u konstrukciji ukrasa teksta:

text-decoration-style:

• Ako trebate punu liniju, navedite vrijednost puna.
• Za valovitu liniju - valovita.
• Dvostruka linija - odnosno dvostruko.
• Linija se može zamijeniti nizom točaka - točkasto.
• Podcrtajte riječ isprekidanom crtom

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

Konstrukcija line-text-decoration-line može uzeti sljedeće vrijednosti:

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

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

Radi praktičnosti, sva tri položaja mogu se napisati zajedno u konstrukciji:

tekst-ukras: crvena, provučena, valovita.

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

Kao što već znate, sama podvlaka se može postaviti ručno, ali za veze su postavljene prema zadanim postavkama. Zato ću vas u ovom članku podsjetiti kako postaviti podcrtavanje naslova, reći vam kako postaviti donji redak na cijelu širinu bloka, kao i kako se nositi sa standardnim oblikovanjem veze. Pa, počnimo!

Naglasimo ovo!

Postoji posebna uparena oznaka za podcrtavanje teksta: riječ.

Međutim, profesionalni dizajneri izgleda koriste mehanizme stilskih kaskadnih stolova, tj. css, za dizajn izgleda svega. I to je ispravno. Ovaj pristup odvaja označavanje od stiliziranja i čini formatiranje fleksibilnim i praktičnim. Osim toga, lakše je uhvatiti bugove (greške) u kodu.

Sljedeća svojstva se uglavnom koriste za naglašavanje sadržaja teksta: granica I tekst-ukras.

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

Ova je jezična jedinica prilično fleksibilna, budući da možete odrediti oblikovanje za pojedinačne strane obruba. To se postiže pomoću svojstava:

1. granica-pravo(desno)
2. granica-vrh(iznad)
3. granica-lijevo(lijevo)
4. granica-dno(dno)

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

• točka ( točkasta)
• točkasto ( isprekidano)
• linearno ( čvrsta)
• dvostruko ( dvostruko)
• volumetrijsko uokvirivanje blokova ( utorumetnutigreben ipočetak)

Ne zaboravite da uvijek možete ponoviti postavke stila nadređenog bloka koristeći ključnu riječ naslijediti.

Sada raspravimo svojstvo CSS jezika tekst-ukras. Ovaj element je odgovoran za dodatne ukrase teksta.

To uključuje:

1. treperi ( treptati)
2. linija iznad teksta ( nadcrtati)
3. prekriženi predmeti ( line-through)
4. nasljedstvo stila ( naslijediti)
5. otkazivanje svih dodatnih dekoracija ( nikakav)
6. podcrtavanje koje trebamo ( naglasiti)

Vrijeme je za vježbu

Sada želim da učvrstite stečeno znanje i praktično isprobate primjer programskog koda koji sam dao. Za poznavatelje ove teme, 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 podcrtavanje naslova na punu širinu bloka.

Naslovimo tekst podcrtanim naslovom.

Ovime završavam ovu obrazovnu publikaciju. Pokriva sve potrebne alate za naglašavanje tekstualnog sadržaja, znajući koje možete kreirati vlastite mogućnosti dizajna za web stranice.

Ne zaboravite se pridružiti redovima mojih pretplatnika, jer pred vama je još mnogo zanimljivih i korisnih tema, a također podijelite vezu na blog sa svojim prijateljima. Doviđenja!

Srdačan pozdrav, Roman Chueshov

Koristeći html, tekstu možete dati lijep dizajn. Element podcrtavanja vrlo je popularan, ali ne znaju ga svi obični korisnici koristiti.

Podcrtano u HTML-u

Dakle, kako podcrtati? u html je formatiran pomoću oznake . Koristi se u svim html i xhtml specifikacijama, ali samo pod uvjetom prijelaza , budući da se mora navesti verzija oznake preglednika. U tom slučaju dokument uspješno prolazi provjeru valjanosti. Element mora biti označen kao standardni, odnosno na samom vrhu stranice.

Označiti zatvaranje, mora biti popraćeno. Morate ga dodati u oznake ovako:

1. Naslov broj jedan

Naše tekst u paragrafu

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

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

1. Naslov broj dva

Naših Do st. u paragrafu

Tradicionalno, u HTML označavanju, veze se prikazuju s podcrtavanjem kada lebde mišem ili čak stacionarno, a to se događa prema zadanim postavkama u svim preglednicima. Stoga, stavite oznaku na trajnoj osnovi se izrazito ne preporučuje.

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

Dizajneri izgleda najčešće primjenjuju stilove dodavanjem obruba ili podcrtavanja u html ili stavljanjem u zasebnu css datoteku.

Podcrtano u CSS-u

Ukrašavanje teksta pomoću css-a zgodan je i praktičan način. Najjednostavniji načini da to istaknete je korištenje tekstualnog ukrasa ili obruba na dnu.

Da biste istaknuli tekst ukrasom teksta, svojstvo se mora dodati željenoj klasi.

• željena klasa (
• tekst-ukras: podcrtano;

Treba imati na umu da se nazivi klasa uvijek pišu na latinici.

Dekoracija se također može izvesti pomoću granica. Obrubi vam omogućuju da napravite i pravilnu (punu) podcrtanu i točkastu crtu. Da biste to učinili, navedena su potrebna svojstva obruba, ali je svojstvo ukrašavanja teksta uklonjeno.

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

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

• .željena klasa (
• tekst-ukras: nema;
• rub-bottom: 2px isprekidana crna;

Ovako izgleda ukras: Da bi bio čvrst, umjesto "isprekidano" koristi se "čvrsti". Za one koji vole ukrašavati tekst točkastim podvlačenjem, možete pokušati koristiti "točkasto".

Stilovi okvira napisani su u jednom retku. Osim vrste podcrtavanja potrebno je odrediti i debljinu i boju podcrtavanja. Možete eksperimentirati s veličinom, ali obično je dovoljan 1 ili 2 piksela. Boja teksta također se može postaviti na boju podcrtavanja:

• željena klasa (
• tekst-ukras: nema;
• border-bottom: 1px isprekidana plava;
• boja:plava;

Ovo će stvoriti plavi tekst s plavim ukrasom. Da biste priložili stil html-u, morate dodati klasu u oznake.

• Treći naslov

Naš tekst u paragrafu

To je to, to su osnove podcrtavanja u html-u.

Omogućuje stvaranje različitih podcrtavanja u HTML-u: podcrtavanje, prekocrtavanje, tekst kroz liniju itd. Kombinirajmo ovu značajku s prethodnom i dobijemo:

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

text-decoration-style — stil podvlačenja teksta

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

• solid - puna linija;
• dvostruko - dvostruko (iz prvog primjera gore);
• točkasto - sastoji se od niza točaka;
• isprekidano - omogućuje vam stvaranje crtkane CSS podvlake;
• valovita - spektakularna valovita linija.

text-underline-position - CSS pozicioniranje podcrtavanja

Pomoću ovog svojstva 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 granice fonta;
• lijevo i desno - lijevo/desno za postove prikazane okomito.

Ovdje je vizualna razlika između podcrtavanja teksta korištenjem Under i Auto:

Razlika je, mislim, sasvim očita.

text-decoration-skip - uklonite podcrtavanje za elemente

Pomoću opcije možete poništiti (preskočiti) ukrašavanje nekih elemenata u HTML retku. Kako bismo bolje razumjeli prihvatljive vrijednosti razmaka, objekata, ukrasa kutije, rubova, tinte, duplicirat ću sliku iz prethodne bilješke:

To jest, na primjer, pomoću tinte možete napraviti podvlaku u CSS-u koja se ne bi križala sa znakovima. Objekti vrijednosti omogućuju vam preskakanje umetnutih elemenata (inline-block) - umetnite raspon i puna linija će se prekinuti na odgovarajućem mjestu:

Parametre box-decoration, spaces, edges mnogo slabije podržavaju preglednici, pa se njihovi rezultati ponekad razlikuju od očekivanih. Evo statusa kompatibilnosti/podrške za ukrašavanje teksta u vrijeme pisanja:

Dodatni trikovi za podcrtavanje poveznica

Korisnici početnici često postavljaju tipična pitanja o ovoj temi, pa smo ih i mi odlučili razmotriti. Opći primjer nalazi se na samom dnu nakon objašnjenja.

Kako ukloniti link underline

a:hover (tekst-ukras: podcrtano; )

Oba primjera u nastavku omogućuju vam da razumijete logiku funkcioniranja lebdenja: ili prvo navedete podcrtavanje 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 kasnije to istražiti ili ćemo vam dati neke savjete u odgovorima. Glavna stvar u ovom pitanju je praksa - pokušajte dodati različita svojstva za opciju ukrašavanja teksta izravno u primjerima ili izradite vlastitu testnu datoteku. Nadamo se da je sve postalo jasno na temu podcrtavanja teksta i veza u CSS / HTML.