Sav tekst zatvoren u oznakama I postaje naglašeno.

Ime došlo je od engleske riječi "podcrtaj". html oznaka smatra novijim.

Na primjer

Običan tekst.

Običan tekst. Podvučeni tekst putem oznake ins

Pretvoreno na stranici u

Običan tekst. Podvučeni tekst putem oznake u

Običan tekst.

Podvučeni tekst putem svojstva CSS text-decoration

CSS ima svojstvo text-decoration, koje je odgovorno za oblikovanje html teksta kako bi se stvorilo podcrtavanje.

CSS sintaksa tekst-dekoracija

tekst-dekoracija: none|podcrtaj|precrtaj|preko redak|nasljedi;

• nijedan - tekst bez ukrasa
• podcrtati - podcrtati
• overline - gornja podcrta
• line-through - precrtavanje teksta
• blink - trepćući tekst (preporuča se ne koristiti ovu vrijednost)

Zanima nas vrijednost podcrtavanja

Na primjer:

Текст со свойством text-decoration: underline

Преобразуется на странице в

Текст со свойством text-decoration: underline

Подчеркнутый текст через свойство CSS border-bottom

Свойство CSS border-bottom создано для создании рамок (границ) объекта снизу. Естественно таким образом можно задавать и подчеркивание тексту.

Рассмотрим пример

Преобразуется на странице в

Подчеркивание для блочных элементов вроде тега

можно проводить двояко. Например, линию под текстом устанавливать на всю ширину блока, независимо от объема текста. А также подчеркивание делать только у текста. Далее рассмотрим оба варианта.

Линия под текстом на всю ширину блока

Чтобы создать линию под текстом, следует добавить к элементу стилевое свойство border-bottom , его значением выступает одновременно толщина линии, ее стиль и цвет (пример 1).

Пример 1. Линия на всю ширину

HTML5 CSS 2.1 IE Cr Op Sa Fx

Primjer teksta

Udaljenost od retka do teksta može se podesiti svojstvom padding-bottom dodavanjem selektoru H1. Rezultat ovog primjera prikazan je na sl. jedan.

Podcrtavanje teksta

Da biste podcrtali samo tekst, trebate upotrijebiti svojstvo dekoracije teksta s vrijednošću podcrtavanja, ponovno ga dodati u birač H1 (primjer 2).

Primjer 2: širina linije do teksta

HTML5 CSS 2.1 IE Cr Op Sa Fx

Primjer teksta

Crni naslov plijeni pozornost unatoč tome što je crn umjesto bijelog.

Rezultat ovog primjera prikazan je na sl. 2.

U slučaju korištenja svojstva text-decoration, linija je čvrsto povezana s tekstom, tako da se njezin položaj i stil ne mogu odrediti.

Pozdrav svima koji su gladni novih znanja i čitajte moj blog. Današnju publikaciju želim posvetiti vrlo jednostavnoj temi, koja ipak redovito postavlja brojna pitanja od početnika: "Kako ukloniti ili dodati donju crtu u html-u."

Kao što već znate, sama donja crta može se postaviti ručno, ali veze ih imaju postavljene prema zadanim postavkama. Zato ću vas u ovom članku podsjetiti kako podcrtati naslove, reći vam kako postaviti donju liniju na cijelu širinu bloka, a također i kako se nositi sa standardnim formatiranjem poveznica. Pa, počnimo!

Istaknimo ovo!

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

Međutim, profesionalni dizajneri izgleda koriste mehanizme stilskih kaskadnih stolova, t.j. css za stiliziranje izgleda cijelog . I to je ispravno. Ovaj pristup odvaja označavanje od stila, čineći oblikovanje fleksibilnim i praktičnim. Osim toga, lakše je uhvatiti bugove (pogreške) u kodu.

Sljedeća svojstva uglavnom se koriste za podvlačenje tekstualnog sadržaja: granica I tekst-ukras.

Element granica odgovoran je za postavljanje okvira oko navedenog bloka, a također vam omogućuje postavljanje debljine i stila linije.

Ova jezična jedinica je prilično fleksibilna, jer možete odrediti formatiranje za pojedine strane obruba. To se postiže korištenjem svojstava:

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

• točka ( točkasta)
• isprekidana ( isprekidana)
• linearni ( čvrsta)
• dvostruko ( dvostruko)
• volumetrijski blokovi za uokvirivanje ( utor,umetak,greben ina početku)

Ne zaboravite da uvijek možete ponoviti postavke stila roditeljskog bloka pomoću ključne riječi naslijediti.

Sada razgovarajmo o svojstvu css jezika tekst-ukras. Ovaj element odgovoran je za dodatni ukras teksta.

To uključuje:

1. treperi ( treptati)
2. redak iznad teksta ( precrtati)
3. precrtani objekti ( linija kroz)
4. stilsko nasljeđivanje ( naslijediti)
5. poništite sve dodatne ukrase ( nijedan)
6. podvlačenje koje nam treba ( naglasiti)

Vrijeme je za praksu

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

Ovaj kod implementira izmijenjeni stil veza, a također postavlja podcrtavanje naslova na punu širinu bloka.

Naslovite tekst podcrtanim naslovom

Na ovoj napomeni završavam tutorial post. Pokriva sve potrebne alate za podvlačenje tekstualnog sadržaja, znajući koje možete kreirati vlastite opcije dizajna za web stranice.

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

S poštovanjem, Roman Chueshov

Postoji mnogo različitih načina za stiliziranje podvlačenja. Možda se sjećate članka Marsina Vicharija “Crafting link underlines” na Mediumu. Srednji programeri ne pokušavaju napraviti nešto ludo, oni samo žele stvoriti lijepu crtu ispod teksta.

Ovo je najjednostavniji podcrtani dio, ali je prave veličine i ne preklapa se s memorandumom. I definitivno je bolji od zadanog podcrtavanja u većini preglednika. Medium se trudio postići svoj stil na webu. Dvije godine kasnije i dalje nam je teško napraviti lijepu podcrtanu liniju.

Ciljevi

Što nije u redu s uobičajenim ukrasom teksta: podcrtajte? U idealnom scenariju, podvlaka bi trebala činiti sljedeće:

• biti postavljen ispod osnovne linije;
• preskočiti oblačiće;
• promijeniti boju, debljinu i stil linije;
• rad s višerednim tekstom;
• rad na bilo kojoj pozadini.

Mislim da su to sve razumni zahtjevi, ali koliko ja znam ne postoji intuitivan način da se to postigne pomoću CSS-a.

Prilazi

Dakle, koji su to različiti načini na koje možemo implementirati podcrtavanje na webu?

Evo onih koje razmatram:

• ukras teksta ;
• rubno dno ;
• kutija-sjena ;
• pozadinska slika ;
• SVG filteri;
• Underline.js (platno);
• tekst-dekoracija-* .

Pogledajmo ove metode jednu po jednu i razgovarajmo o prednostima i nedostacima svake od njih.

tekst-ukras

dekoracija teksta je najočitiji način za podcrtavanje teksta. Primjenite jedno svojstvo i to je dovoljno. Na malim veličinama fonta to bi moglo izgledati sasvim pristojno, ali povećajte veličinu fonta i podvlačenje počinje izgledati nespretno.

Najveći problem kod dekoracije teksta je nedostatak postavki. Ograničeni ste bojom i veličinom fonta teksta i ne postoji način da ga promijenite u različitim preglednicima. O tome ćemo više razgovarati kasnije.

• jednostavan za korištenje;
• pozicioniran ispod osnovne crte;
• preskače descendere prema zadanim postavkama u Safariju i iOS-u;
• podcrtava višeredni tekst;
• radi na bilo kojoj pozadini.

• ne preskače descendere u svim ostalim preglednicima;
• ne dopušta vam promjenu boje, debljine ili stila linije.

granica-dno

border-bottom postiže dobru ravnotežu između jednostavnosti i prilagodljivosti. Ovaj pristup koristi dobro staro CSS svojstvo za obrub, što znači da možete lako promijeniti boju, debljinu i stil.

Ovako obrub-dno izgleda na inline elementima.

Glavni nedostatak je udaljenost podcrtavanja od teksta, potpuno je ispod oblačića. To možete popraviti postavljanjem elemenata na inline-block i smanjenjem line-height , ali tada gubite mogućnost prelamanja teksta. Dobro za pojedinačne linije, ali nije dobro nigdje drugdje.

Dodatno, možemo koristiti sjenku teksta za preklapanje dijela retka pored descendera, simulirajući to istom bojom kao pozadina. Odnosno, ova tehnika radi samo na običnoj, jednobojnoj pozadini, bez nagiba, uzoraka ili slika.

Trenutno već koristimo čak četiri svojstva za dizajn jedne linije. To je puno više posla nego samo dodavanje tekstualnog ukrasa.

• može preskočiti oblačiće s text-shadow ;
• može promijeniti boju, težinu i stil linije;
• omogućuje korištenje prijelaza i animacija boje i težine;
• radi s višerednim tekstom osim ako se ne primjenjuje inline-blok;
• radi na bilo kojoj pozadini sve dok ne koristite text-shadow.

• postavljen prenisko i pomaknut na kompliciran način;
• mnoga dodatna svojstva koriste se za pravilan rad;
• kada koristite text-shadow, odabir teksta izgleda ružno.

kutija sjena

box-shadow crta podcrtu s dvije unutarnje sjene: jedna stvara pravokutnik, a druga skriva dio. To znači da vam je potrebna čvrsta pozadina da bi ovo funkcioniralo.

Možete koristiti isti trik sa sjenom teksta kako biste popunili praznine između podcrtanih i descendera. Ali ako se boja podcrtavanja razlikuje od boje teksta - ili je samo dovoljno tanka - linija se neće sudarati s oblačićima kao što bi bila s dekoracijom teksta.

• omogućuje promjenu boje i debljine linije;
• radi s višerednim tekstom.

• ne dopušta promjenu stila podcrtavanja;
• ne radi ni na jednoj pozadini.

pozadinska slika

Metoda pozadinske slike najbliža je onome što želimo i ima najmanje nedostataka. Ideja je koristiti linearni gradijent i položaj pozadine za stvaranje slike koja se ponavlja ispod redaka teksta.

Da bi ovaj pristup funkcionirao, tekst mora biti u standardnom načinu prikaza: inline; .

Sljedeća opcija ne radi bez linearnog gradijenta, možete dodati vlastitu pozadinu za efekte.

• može se postaviti ispod osnovne crte;
• može preskočiti oblačiće s text-shadow ;
• radi s prilagođenim slikama;
• prelama više redaka teksta;
• radi na bilo kojoj pozadini sve dok nije primijenjena sjena teksta.

• Veličina slike može varirati ovisno o razlučivosti zaslona, ​​pregledniku i povećanju.

SVG filteri

Igrao sam se dosta s ovom metodom. Možete stvoriti SVG inline filtar koji crta crtu, a zatim proširuje tekst kako bi maskirao dio linije koji želimo učiniti transparentnim. Zatim filteru možete dati id i referirati se na njega u CSS-u poput filtera: url('#svg-underline') .

Prednost ovog pristupa je što se transparentnost postiže bez primjene sjene teksta, što znači da preskačemo oblačiće na bilo kojoj pozadini, uključujući gradijente i pozadinske slike! Ovo radi samo na jednom retku teksta, imajte to na umu.

Evo kako to izgleda u Chromeu i Firefoxu:

Podrška u IE, Edge i Safari je problematična. Teško je testirati podršku za SVG filter u CSS-u. Možete koristiti direktivu @supports s filterom, ali to samo provjerava radi li veza na filtar, a ne sam filtar. Moji su pokušaji završili s turobnom definicijom mogućnosti preglednika, što je opipljiv nedostatak metode.

• može se postaviti ispod osnovne crte;
• može preskočiti oblačiće;
• omogućuje promjenu boje, debljine i stila linije;
• radi na bilo kojoj pozadini.

• ne radi s višerednim tekstom;
• ne radi u IE, Edge i Safari, ali možete koristiti tekstualni ukras kao zamjenu, izgleda pristojno u Safariju.

Underline.js (platno)

Underline.js je nevjerojatan. Smatram da je impresivno što je Venting Zhang učinila sa svojim JavaScript vještinama i pažnjom na detalje. Ako niste vidjeli tehničku demonstraciju Underline.js, prestanite čitati i ostavite trenutak. Tu je i njezin devetominutni govor o tome kako to funkcionira, ali ću ukratko opisati: podcrtavanje je nacrtano pomoću elemenata . Ovo je novi pristup koji djeluje iznenađujuće dobro.

Unatoč privlačnom nazivu, Underline.js je samo tehnički demo. To znači da ga ne možete jednostavno uzeti i priključiti u svoj projekt bez promjene koda.

Odlučio sam to spomenuti kao dokaz koncepta da ima potencijal za stvaranje prekrasnih interaktivnih podcrtavanja, ali morate napisati svoj vlastiti JavaScript da bi funkcionirao.

Nova svojstva dekoracije teksta

Sjećate se da sam obećao više govoriti o dekoraciji teksta. Došlo je vrijeme.

Samo po sebi, ovo svojstvo radi izvrsno, ali možete dodati nekoliko eksperimentalnih svojstava kako biste prilagodili izgled podcrtanog.

• tekst-dekoracija-boja
• tekst-ukras-skip
• tekst-ukras-stil

Ali nemojte se previše uzbuđivati... Podrška za preglednik kao i uvijek. Tako to ide.

tekst-dekoracija-boja

Svojstvo text-decoration-color omogućuje vam da promijenite boju podcrtavanja odvojeno od boje teksta. Podrška za ovo svojstvo bolja je nego što biste očekivali - radi u Firefoxu i ima prefiks u Safariju. Evo kvake: ako imate oblačiće, Safari će staviti podcrtano na vrh teksta.

tekst-ukras-skip

Svojstvo text-decoration-skip omogućuje preskakanje oblačića u podvučenom tekstu.

Ovo svojstvo je nestandardno i trenutno radi samo u Safariju, s prefiksom -webkit-. Safari omogućuje ovo svojstvo prema zadanim postavkama, tako da oblačići nisu uvijek precrtani.

Ako koristite Normalize, imajte na umu da najnovije verzije onemogućuju ovo svojstvo radi dosljednog ponašanja preglednika. A ako želite da podcrtavanje ne utječe na oblačiće, morate ga ručno aktivirati.

tekst-ukras-stil

Svojstvo u stilu dekoracije teksta nudi iste mogućnosti ukrašavanja kao svojstvo u stilu obruba, uz dodatak valovitog stila.

Ovdje je popis dostupnih vrijednosti:

• isprekidana
• točkasta
• dvostruko
• čvrsta

Trenutačno svojstvo text-decoration-style radi samo u Firefoxu, evo snimka zaslona:

Što nedostaje

Serija svojstava text-decoration-* mnogo je intuitivnija za korištenje od ostalih CSS svojstava za podcrtavanje ukrasa. Ali ako bolje pogledate, nema dovoljno načina za postavljanje debljine ili položaja linije kako bi se zadovoljili naši zahtjevi.

Nakon malog istraživanja, pronašao sam još nekoliko svojstava:

• tekst-podvučena-širina
• tekst-podvučena-pozicija

Čini se da su to rani nacrti CSS-a, ali nikada nisu implementirani u preglednike zbog nedostatka interesa.

zaključke

Dakle, koji je najbolji način za podcrtavanje?

Za mali tekst preporučam korištenje text-decoration s optimističnim dodatkom text-decoration-skip . U većini preglednika izgleda pomalo šaljivo, ali podcrtavanje je uvijek bilo u preglednicima i ljudi to jednostavno neće primijetiti. Osim toga, uvijek postoji šansa da će, ako ste strpljivi, ta podvlaka jednog dana izgledati dobro, a da ne morate ništa mijenjati, kao što to rade preglednici.

Za osnovni tekst ima smisla koristiti pozadinsku sliku. Ovaj pristup radi, izgleda sjajno i ima Sass miksine za to. U načelu možete preskočiti sjenku teksta ako je podcrtavanje tanko ili je boje drugačije od teksta.

Za pojedinačne retke teksta koristite obrub-dno zajedno sa svim dodatnim svojstvima.

A ako želite da oblačići preskaču gradijent ili pozadinu slike, pokušajte koristiti SVG filtre. Ili jednostavno izbjegavajte korištenje podvlaka.

U budućnosti, kako se podrška preglednika bude poboljšavala, jedini odgovor bit će set svojstava text-decoration-*.

Također preporučujem da pogledate članak Benjamina Woodroffea CSS Underlines Suck, koji se bavi istim problemima.