Sav tekst zatvoren u tagovima i postaje podvučeno.

Ime dolazi od engleske riječi "podvlači". Html oznaka smatra se novijim.

na primjer

Običan tekst.

Običan tekst. Podvučeni tekst kroz ins tag

Konvertovano na stranici u

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

Običan tekst.

Podvučeni tekst preko svojstva CSS text-decoration

CSS ima svojstvo zvano text-decoration, koje je odgovorno za formatiranje html teksta za kreiranje podvlačenja.

CSS sintaksa text-decoration

dekoracija teksta: ništa | podcrtaj | precrtaj | precrtano | naslijediti;

• nema - tekst bez ukrasa
• podvuci - podvuci
• precrtana - podcrtana
• line-through - precrtani tekst
• blink - trepćući tekst (preporučljivo je ne koristiti ovu vrijednost)

Zanima nas podvučena vrijednost

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

Primer teksta

Udaljenost od reda do teksta može se podesiti pomoću svojstva padding-bottom dodavanjem u H1 selektor. Rezultat ovog primjera prikazan je na sl. jedan.

Podvuci tekst

Da biste podvukli samo tekst, morate koristiti svojstvo dekoracije teksta postavljeno za podvlačenje, ponovo dodavanjem selektoru H1 (primjer 2).

Primjer 2. Širina od linije do teksta

HTML5 CSS 2.1 IE Cr Op Sa Fx

Primer teksta

Crni naslov privlači pažnju iako je crn, a ne bijeli.

Rezultat ovog primjera prikazan je na sl. 2.

Kada se koristi svojstvo text-decoration, linija je tvrdo kodirana za tekst, tako da se njen položaj i stil ne mogu odrediti.

Pozdrav svima koji su žedni novih znanja i čitaju moj blog. Današnju publikaciju želim posvetiti vrlo laganoj temi, koja ipak redovito postavlja brojna pitanja od početnika: "Kako ukloniti ili dodati html donje crte".

Koliko znate, sama donja crta se može postaviti ručno, ali su veze postavljene po defaultu. Zato ću vas u ovom članku podsjetiti kako podesiti podvlačenje za naslove, reći ću vam kako postaviti donju liniju na punu širinu bloka, kao i kako se nositi sa standardnim formatiranjem veza. Pa, počnimo!

Naglasimo ovo!

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

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

Sljedeća svojstva se uglavnom koriste za podvlačenje 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 dovoljno 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(dolje)

• tačka ( tačkasta)
• tačkasti ( isprekidano)
• linearni ( solidan)
• duplo ( duplo)
• volumetrijski blokovi za uokvirivanje ( utor,umetak,greben 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 dodatnu dekoraciju teksta.

To uključuje:

1. treperi ( blink)
2. linija iznad teksta ( overline)
3. precrtani objekti ( line-through)
4. stilsko naslijeđe ( nasljediti)
5. otkazivanje svih dodatnih dekoracija ( nijedan)
6. podvlačenje koje nam treba ( 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 od pomoći. Kao što svi znamo: "Ponavljanje je majka učenja!"

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

Zaglavimo tekst podvučenim naslovom

Na toj napomeni zaključujem tutorial post. Pokriva sve potrebne alate za podvlačenje tekstualnog sadržaja, znajući koje možete kreirati vlastite opcije za dizajn web stranica.

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

Srdačan pozdrav, Roman Chueshov

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

Ovo je najjednostavnija podvlaka, ali je ispravne veličine i ne preklapa se s nizom slova. I definitivno je bolja od zadane donje crte u većini pretraživača. Medium se borio da postigne svoj stil na webu. Dvije godine kasnije, još uvijek nam je teško doći do lijepog podvlačenja.

Ciljevi

Šta nije u redu sa poznatim ukrasom teksta: podvlačenje? Za idealan scenario, podvučeno bi trebalo da uradi sledeće:

• pozicioniran ispod osnovne linije;
• preskočiti udaljene elemente;
• promijeniti boju, debljinu i stil linije;
• rad sa višelinijskim tekstom;
• raditi na bilo kojoj pozadini.

Vjerujem da su sve ovo 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 podvlačenje na webu?

Evo onih koje razmatram:

• tekst-dekoracija;
• border-bottom;
• box-shadow;
• pozadinska slika;
• SVG filteri;
• Underline.js (platno);
• text-decoration- *.

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

tekst-dekoracija

dekoracija teksta je najočitiji način da se podvuče tekst. Primjenite jedno svojstvo i to je dovoljno. Moglo bi izgledati prilično pristojno pri malim veličinama fonta, ali povećajte veličinu fonta i ovo podvlačenje počinje izgledati nezgodno.

Najveći problem sa dekoracijom teksta je nedostatak prilagođavanja. Ograničeni ste na boju i veličinu fonta teksta i nemate načina da to promijenite na više pretraživača. O tome ćemo razgovarati detaljnije.

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

• ne preskače descendere u svim drugim pretraživačima;
• ne dozvoljava promjenu boje, težine ili stila linije.

border-bottom

border-bottom nudi dobar balans između jednostavnosti i prilagođavanja. Ovaj pristup koristi dobro staro svojstvo CSS granica, što znači da možete lako promijeniti boju, težinu i stil.

Ovako izgleda dno ruba na inline elementima.

Glavni nedostatak je udaljenost podvučene linije od teksta, ona je u potpunosti ispod descendera. Ovo možete popraviti postavljanjem elemenata na inline-block i smanjenjem visine reda, ali tada ćete izgubiti mogućnost prelamanja teksta. Dobro za pojedinačne šavove, ali nije korisno nigdje drugdje.

Osim toga, možete koristiti sjenku teksta da preklapate neke od linija pored descendera, oponašajući ovo istom bojom kao pozadina. Odnosno, ova tehnika radi samo na jednostavnoj jednobojnoj pozadini, bez preliva, uzoraka ili slika.

Trenutno već koristimo čak četiri svojstva za stiliziranje jedne linije. Ovo je puno više posla nego samo dodavanje tekstualne dekoracije.

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

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

box-shadow

box-shadow crta descender sa dvije unutrašnje sjene: jedna stvara pravougaonik, a druga skriva dio. To znači da vam je potrebna jednobojna pozadina da bi ovo funkcioniralo.

Možete koristiti isti trik sa sjenom teksta kako biste popunili praznine između podcrtanih i descendera. Ali ako je boja podvučene linije drugačija od boje teksta - ili je samo dovoljno tanka, linija se neće sudariti sa descenderima kao što je slučaj sa dekoracijom teksta.

• omogućava vam promjenu boje i debljine linije;
• radi sa tekstom u više redova.

• ne dozvoljava promjenu stila podvlačenja;
• ne radi ni na jednoj pozadini.

pozadinska slika

Metoda pozadinske slike najbliža je našoj želji i ima najmanje nedostataka. Ideja je koristiti linearni gradijent i pozadinu za kreiranje slike koja se ponavlja ispod redova teksta.

Da bi ovaj pristup funkcionirao, tekst mora biti u standardnom prikazu: inline mod; ...

Sljedeća opcija ne koristi linearni gradijent, za efekte možete dodati vlastitu pozadinu.

• može se postaviti ispod osnovne linije;
• može preskočiti oblačiće zbog sjene teksta;
• radi sa prilagođenim slikama;
• prelama nekoliko redova teksta;
• radi na bilo kojoj pozadini, sve dok ne primijenite text-shadow.

• Veličina slike može varirati u zavisnosti od rezolucije ekrana, pretraživača i uvećanja.

SVG filteri

Mnogo sam se igrao sa ovom metodom. Možete kreirati SVG inline filter koji crta liniju, a zatim proširuje tekst da maskira dio linije koji želimo učiniti transparentnim. Zatim filteru možete dati id i povezati se s njim u CSS kao filter: url (‘# svg-underline’).

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

Ovako to izgleda u Chromeu i Firefoxu:

Podrška za IE, Edge i Safari je problematična. Teško je testirati podršku za SVG filter u CSS-u. Možete koristiti direktivu @supports sa filterom, ali ovo će samo provjeriti radi li referenca filtera, ali ne i sam filter. Moji pokušaji su se završili turobnim određivanjem mogućnosti pretraživača, to je primetan nedostatak metode.

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

• ne radi sa višelinijskim tekstom;
• ne radi u IE, Edge i Safariju, ali možete koristiti tekstualnu dekoraciju kao zamjenu, izgleda pristojno u Safariju.

Underline.js (Canvas)

Underline.js je očaravajući. Smatram da je impresivno šta je Wentin Zhang uradila sa svojim JavaScript vještinama i pažnjom na detalje. Ako niste vidjeli tehničku demonstraciju Underline.js, prestanite čitati i odvojite minut svog vremena. Tu je i njen devetominutni govor o tome kako to funkcionira, ali ću ukratko opisati: podvučena crta je nacrtana pomoću elemenata ... Ovo je novi pristup koji radi iznenađujuće dobro.

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

Odlučio sam to spomenuti kao dokaz koncepta koji ima potencijal za stvaranje prekrasnih interaktivnih podvlačenja, ali da bi ovo funkcioniralo, morate napisati svoj JavaScript.

Nova svojstva dekoracije teksta

Sjećate se da sam obećao da ću više pričati o dekoraciji teksta. Došlo je vrijeme.

Ovo svojstvo samo po sebi odlično funkcionira, ali možete dodati neka eksperimentalna svojstva kako biste prilagodili izgled podvlačenja.

• tekst-dekoracija-boja
• text-decoration-skip
• text-decoration-style

Ali nemojte biti previše sretni... Podrška pretraživača - kao i uvijek. Tako to ide.

tekst-dekoracija-boja

Svojstvo text-decoration-color vam omogućava da promijenite boju podvlačenja odvojeno od boje teksta. Podrška za ovo svojstvo je bolja nego što biste očekivali - radi u Firefoxu i ima prefiks u Safariju. Evo kvake: ako imate oblačiće, Safari će staviti podvučenu crtu preko teksta.

text-decoration-skip

Svojstvo text-decoration-skip omogućava preskakanje descendera u podvučenom tekstu.

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

Ako koristite Normalize, imajte na umu da najnovije verzije onemogućavaju ovo svojstvo radi dosljednog ponašanja pretraživača. A ako želite da podvlačenje ne utiče na descendere, morate ga ručno aktivirati.

text-decoration-style

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

Evo liste dostupnih vrijednosti:

• isprekidano
• tačkasta
• duplo
• solidan

Trenutno svojstvo text-decoration-style radi samo u Firefoxu, evo snimka ekrana iz njega:

Šta nedostaje

Text-decoration- * serija svojstava je mnogo intuitivnija za upotrebu od ostalih CSS svojstava za podvlačenje stila. Ali ako bolje pogledate, nema dovoljno načina da se podesi debljina ili položaj linije kako bi se zadovoljile naše potrebe.

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

• text-underline-width
• tekst-podvučena-pozicija

Čini se da su to rani nacrti CSS-a, ali nikada nisu implementirani u pretraživače zbog nedostatka interesa.

zaključci

Dakle, koji je najbolji način da se podvuče?

Za mali tekst preporučujem korištenje text-decoration sa optimističnim dodatkom text-decoration-skip. U većini pretraživača izgleda malo neukusno, ali pretraživači su oduvijek imali podvučene crte i ljudi jednostavno neće obraćati pažnju. Osim toga, uvijek postoji šansa da će uz strpljenje ovo podvlačenje jednog dana izgledati dobro, a da ne morate ništa mijenjati, kao što će to činiti pretraživači.

Za osnovni tekst, ima smisla koristiti pozadinsku sliku. Ovaj pristup radi, izgleda sjajno, a za to postoje Sass mixini. Možete, u principu, izostaviti sjenku teksta ako je podvučena linija tanka ili se razlikuje po boji od teksta.

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

A ako trebate preskočiti descendere u odnosu na gradijent ili sliku, pokušajte koristiti SVG filtere. Ili jednostavno izbjegavajte korištenje donjih crta.

U budućnosti, kako se podrška pretraživača bude poboljšala, jedini odgovor će biti set svojstava text-decoration- *.

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