I gjithë teksti i mbyllur në etiketa dhe bëhet e nënvizuar.

Emri vjen nga fjala angleze "nënvizoj". Etiketa HTML konsiderohet më i ri.

për shembull

Teksti i thjeshtë.

Teksti i thjeshtë. Teksti i nënvizuar përmes etiketës ins

Konvertuar në faqe në

Teksti i thjeshtë. Teksti i nënvizuar nëpërmjet etiketës u

Teksti i thjeshtë.

Teksti i nënvizuar përmes vetive CSS text-decoration

CSS ka një veti të quajtur text-decoration, e cila është përgjegjëse për formatimin e tekstit html për të krijuar një nënvizim.

Dekorimi i tekstit të sintaksës CSS

dekorimi i tekstit: asnjë | nënvizoj | mbinvizoj | vijë përmes | trashëgoj;

• asnjë - tekst pa dekorim
• nënvizoj - nënvizoj
• mbinvizoj - nënvizoj
• teksti line-through - linethrough
• blink - tekst që pulson (rekomandohet të mos përdoret kjo vlerë)

Ne jemi të interesuar për vlerën e nënvizuar

Për shembull:

Текст со свойством 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

Shembull teksti

Distanca nga rreshti në tekst mund të rregullohet me veçorinë padding-bottom duke e shtuar atë në përzgjedhësin H1. Rezultati i këtij shembulli është paraqitur në Fig. një.

Nënvizoni tekstin

Për të nënvizuar vetëm tekstin, duhet të përdorni veçorinë e dekorimit të tekstit të vendosur për të nënvizuar, përsëri duke e shtuar në përzgjedhësin H1 (shembulli 2).

Shembulli 2. Gjerësia nga rreshti në tekst

HTML5 CSS 2.1 IE Cr Op Sa Fx

Shembull teksti

Titulli i zi tërheq vëmendjen edhe pse është i zi, jo i bardhë.

Rezultati i këtij shembulli është paraqitur në Fig. 2.

Kur përdorni veçorinë e dekorimit të tekstit, rreshti është i koduar me tekst, kështu që pozicioni dhe stili i tij nuk mund të përcaktohen.

Përshëndetje për të gjithë ata që janë të etur për njohuri të reja dhe që lexojnë blogun tim. Publikimin e sotëm dua t'i kushtoj një teme shumë të lehtë, e cila megjithatë rregullisht ngre një sërë pyetjesh nga fillestarët: "Si të hiqni ose shtoni nënvizimin html".

Me sa dini, vetë nënvizimi mund të vendoset manualisht, por lidhjet vendosen si parazgjedhje. Kjo është arsyeja pse në këtë artikull do t'ju kujtoj se si të vendosni nënvizimin për titujt, do t'ju tregoj se si të vendosni vijën fundore në gjerësinë e plotë të bllokut, si dhe si të merreni me formatimin standard të lidhjeve. Epo, le të fillojmë!

Le ta theksojmë këtë!

Ekziston një etiketë e veçantë çiftimi për nënvizimin e tekstit: fjalë.

Sidoqoftë, dizajnerët profesionistë të paraqitjes përdorin mekanizmat e tabelave të kaskadës së stilit, d.m.th. css për të stiluar pamjen e gjithçkaje. Dhe është e drejtë. Kjo qasje ndan shënimin nga stilimi dhe e bën formatimin fleksibël dhe të përshtatshëm. Përveç kësaj, është më e lehtë për të kapur gabimet (gabimet) në kod në këtë mënyrë.

Karakteristikat e mëposhtme përdoren kryesisht për të nënvizuar përmbajtjen e tekstit: kufiri dhe tekst-dekorim.

Elementi kufiriështë përgjegjës për vendosjen e kornizës rreth bllokut të specifikuar, dhe gjithashtu ju lejon të vendosni trashësinë e linjës dhe stilin e saj.

Kjo njësi gjuhësore është mjaft fleksibël, pasi mund të specifikoni formatimin për anët individuale të kufirit. Kjo arrihet duke përdorur vetitë:

1. kufiri-drejtë(në të djathtë)
2. kufiri-krye(siper)
3. kufiri-majtas(majtas)
4. kufiri-fund(poshtë)

• pika ( me pika)
• me pika ( i thyer)
• lineare ( të ngurta)
• dyfish ( dyfishtë)
• blloqe vëllimore të kornizës ( brazdë,futur,kurriz dhefillimi)

Mos harroni se gjithmonë mund të përsërisni cilësimet e stilit të bllokut prind duke përdorur fjalën kyçe trashëgojnë.

Tani le të diskutojmë veçorinë e gjuhës css tekst-dekorim... Ky element është përgjegjës për dekorimin shtesë të tekstit.

Kjo perfshin:

1. ndezje ( pulsoj)
2. rreshti sipër tekstit ( mbivendosja)
3. objekte goditëse ( linjë-përmes)
4. trashëgimia e stilimit ( trashëgojnë)
5. anulimi i të gjitha dekorimeve shtesë ( asnje)
6. nënvizimi që na nevojitet ( nënvizojnë)

Është koha për të praktikuar

Tani dua që ju të konsolidoni njohuritë e marra dhe të provoni praktikisht shembullin e kodit të programit që kam dhënë. Për ata që e njohin këtë temë, kjo do të jetë gjithashtu e dobishme. Siç e dimë të gjithë: "Përsëritja është nëna e të mësuarit!"

Ky kod zbaton stilin e modifikuar të lidhjes, dhe gjithashtu vendos nënvizimin e kokës në gjerësinë e plotë të bllokut.

Le ta kryejmë tekstin me një titull të nënvizuar

Në këtë shënim, unë përfundoj postimin tutorial. Ai mbulon të gjitha mjetet e nevojshme për nënvizimin e përmbajtjes së tekstit, duke ditur të cilat mund të krijoni opsionet tuaja për hartimin e faqeve të faqeve të internetit.

Mos harroni të bashkoheni në radhët e pajtimtarëve të mi, sepse ka ende shumë tema interesante dhe të dobishme përpara, dhe gjithashtu ndani lidhjen e blogut me miqtë tuaj. Mirupafshim!

Përshëndetje, Roman Chueshov

Ka shumë mënyra të ndryshme për të stiluar një nënvizim. Ju mund të kujtoni artikullin e Marcin Vichari "Nënvizon lidhjen e krijimit" në Medium. Zhvilluesit e mesëm nuk po përpiqen të bëjnë diçka të çmendur, ata thjesht duan të krijojnë një rresht të bukur nën tekst.

Ky është nënvizimi më i thjeshtë, por ka përmasa të sakta dhe nuk përputhet me zbritësit e shkronjave. Dhe është padyshim më i mirë se nënvizimi i paracaktuar në shumicën e shfletuesve. Medium luftoi për të arritur stilin e tij në ueb. Dy vjet më vonë, ne ende e kemi të vështirë të marrim një nënvizim të bukur.

Golat

Çfarë nuk shkon me dekorimin e njohur të tekstit: nënvizo? Për një skenar ideal, nënvizimi duhet të bëjë si më poshtë:

• pozicionuar nën vijën bazë;
• kapërceni elementët në distancë;
• ndryshoni ngjyrën, trashësinë dhe stilin e linjës;
• punë me tekst me shumë rreshta;
• punoni në çdo sfond.

Unë besoj se këto janë të gjitha kërkesa të arsyeshme, por me sa di unë nuk ka asnjë mënyrë intuitive për ta arritur këtë me CSS.

Qasjet

Pra, cilat janë këto mënyra të ndryshme që ne mund të zbatojmë nënvizimin në ueb?

Këtu janë ato që po shqyrtoj:

• tekst-dekorim;
• kufiri-fund;
• kuti-hije;
• sfond-imazh;
• filtra SVG;
• Nënvizoni.js (kanavacë);
• tekst-dekorim- *.

Le t'i analizojmë këto metoda një nga një dhe të flasim për të mirat dhe të këqijat e secilës prej tyre.

tekst-dekorim

dekorimi i tekstit është mënyra më e dukshme për të nënvizuar tekstin. Ju aplikoni një pronë dhe mjafton. Mund të duket mjaft e mirë në madhësi të vogla të shkronjave, por rrisni madhësinë e shkronjave dhe kjo nënvizim fillon të duket e vështirë.

Problemi më i madh me dekorimin e tekstit është mungesa e personalizimit. Ju jeni të kufizuar në ngjyrën dhe madhësinë e shkronjave të tekstit dhe nuk keni asnjë mënyrë ndër-shfletuesi për ta ndryshuar këtë. Ne do të flasim për këtë në më shumë detaje.

• i lehtë për t'u përdorur;
• pozicionuar nën vijën bazë;
• kalon descenders si parazgjedhje në Safari dhe iOS;
• nënvizon tekstin me shumë rreshta;
• punon në çdo sfond.

• nuk kapërcen zbritjet në të gjithë shfletuesit e tjerë;
• nuk lejon ndryshimin e ngjyrës, peshës apo stilit të linjës.

kufiri-fund

kufiri-fund ofron një ekuilibër të mirë midis thjeshtësisë dhe personalizimit. Kjo qasje përdor veçorinë e mirë të vjetër të kufirit CSS, që do të thotë se mund të ndryshoni lehtësisht ngjyrën, peshën dhe stilin.

Kështu duket fundi i kufirit në elementët inline.

E meta kryesore është distanca e vijës së nënvizuar nga teksti, ajo është tërësisht nën zbritësit. Ju mund ta rregulloni këtë duke vendosur elementët në "inline-block" dhe duke ulur lartësinë e rreshtit, por më pas do të humbni aftësinë për të mbështjellë tekstin. E mirë për qepje të vetme, por jo e dobishme askund tjetër.

Për më tepër, mund të përdorni hijen e tekstit për të mbivendosur disa nga rreshtat pranë zbritësve, duke imituar këtë me të njëjtën ngjyrë si sfondi. Kjo do të thotë, kjo teknikë funksionon vetëm në një sfond të thjeshtë pikturë njëngjyrëshe, pa gradient, modele ose imazhe.

Për momentin, ne tashmë po përdorim deri në katër veti për të stiluar një rresht. Kjo është shumë më tepër punë sesa thjesht shtimi i dekorimit të tekstit.

• mund të kapërcejë thirrjet duke përdorur text-shadow;
• mund të ndryshojë ngjyrën, peshën dhe stilin e linjës;
• ju lejon të përdorni tranzicione dhe animacione të ngjyrës dhe peshës;
• punon me tekst me shumë rreshta nëse nuk aplikohet blloku inline;
• funksionon në çdo sfond për sa kohë që nuk përdorni text-hije.

• pozicionuar shumë poshtë dhe lëvizur në një mënyrë të vështirë;
• shumë prona shtesë përdoren për të punuar siç duhet;
• kur përdorni text-hije, theksimi i tekstit duket i shëmtuar.

kuti-hije

box-shadow vizaton një zbritës me dy hije të brendshme: njëra krijon një drejtkëndësh dhe tjetra fsheh një pjesë të tij. Kjo do të thotë që ju duhet një sfond me ngjyra të forta që kjo të funksionojë.

Ju mund të përdorni të njëjtin truk me hije teksti për të mbushur boshllëqet midis nënvizimit dhe zbritjes. Por nëse ngjyra e nënvizimit është e ndryshme nga ngjyra e tekstit - ose është mjaft e hollë, vija nuk do të përplaset me descenders siç ndodh me dekorimin e tekstit.

• ju lejon të ndryshoni ngjyrën dhe trashësinë e vijës;
• punon me tekst me shumë rreshta.

• nuk lejon ndryshimin e stilit të nënvizuar;
• nuk funksionon në asnjë sfond.

sfond-imazh

Metoda e imazhit të sfondit është më afër dëshirës sonë dhe ka më pak të meta. Ideja është të përdoret gradienti linear dhe pozicioni i sfondit për të krijuar një imazh që përsëritet poshtë rreshtave të tekstit.

Që kjo qasje të funksionojë, teksti duhet të jetë në ekran standard: modaliteti inline; ...

Opsioni tjetër nuk ka gradient linear, për efekte mund të shtoni imazhin tuaj të sfondit.

• mund të pozicionohet nën vijën bazë;
• mund të kapërcejë thirrjet për shkak të hijes së tekstit;
• punon me imazhe të personalizuara;
• mbështjell disa rreshta teksti;
• funksionon në çdo sfond, për sa kohë që nuk aplikoni text-hije.

• madhësia e imazhit mund të ndryshojë në varësi të rezolucionit të ekranit, shfletuesit dhe zmadhimit.

Filtrat SVG

Kam luajtur shumë me këtë metodë. Mund të krijoni një filtër inline SVG që vizaton një vijë dhe më pas zgjeron tekstin për të maskuar pjesën e vijës që duam ta bëjmë transparente. Pastaj mund t'i jepni filtrit një ID dhe të lidheni me të në CSS si filtri: url ('# svg-nënvizoni').

Avantazhi i kësaj qasjeje është se transparenca arrihet pa aplikuar hije teksti, domethënë, ne i anashkalojmë thirrjet në çdo sfond, duke përfshirë gradientët dhe imazhet e sfondit! Kjo funksionon vetëm në një rresht të vetëm teksti, ju lutemi mbani në mend këtë.

Kështu duket në Chrome dhe Firefox:

Mbështetja e IE, Edge dhe Safari është problematike. Është e vështirë të testosh mbështetjen e filtrit SVG në CSS. Ju mund të përdorni direktivën @supports me filtër, por kjo do të kontrollojë vetëm nëse funksionon referenca e filtrit, por jo vetë filtri. Përpjekjet e mia përfunduan në një përcaktim të zymtë të aftësive të shfletuesit, kjo është një mangësi e dukshme e metodës.

• mund të pozicionohet nën vijën bazë;
• mund të kapërcejë elementët në distancë;
• lejon ndryshimin e ngjyrës, trashësisë dhe stilit të linjës;
• punon në çdo sfond.

• nuk punon me tekst me shumë rreshta;
• nuk funksionon në IE, Edge dhe Safari, por mund të përdorni dekorimin e tekstit si një kthim prapa, duket mirë në Safari.

Underline.js (kanavacë)

Underline.js është magjepsëse. Më duket mbresëlënëse ajo që ka bërë Wentin Zhang me aftësitë e saj në JavaScript dhe vëmendjen ndaj detajeve. Nëse nuk e keni parë demonstrimin teknik të Underline.js, ndaloni së lexuari dhe merrni një minutë nga koha juaj. Ka edhe bisedën e saj nëntë minutëshe se si funksionon, por unë do ta përshkruaj shkurtimisht: nënvizimi vizatohet duke përdorur elementë ... Kjo është një qasje e re që funksionon çuditërisht mirë.

Pavarësisht emrit tërheqës, Underline.js është vetëm një demonstrim teknik. Kjo do të thotë që ju nuk mund ta merrni këtë dhe ta lidhni atë në projektin tuaj pa ndryshuar kodin.

Vendosa ta përmend këtë si një dëshmi të konceptit që ka potencialin për të krijuar nënvizime të bukura ndërvepruese, por që kjo të funksionojë, duhet të shkruani JavaScript-in tuaj.

Karakteristikat e reja të dekorimit të tekstit

Ju do të mbani mend që unë premtova të flas më shumë për dekorimin e tekstit. Ka ardhur koha.

Vetë kjo veti funksionon shkëlqyeshëm, por mund të shtoni disa veti eksperimentale për të personalizuar pamjen e nënvizimit.

• tekst-zbukurim-ngjyrë
• tekst-dekorim-kapërcej
• tekst-dekorim-stili

Por mos jini shumë të lumtur ... Mbështetja e shfletuesit - si gjithmonë. Keshtu shkon.

tekst-zbukurim-ngjyrë

Vetia text-decoration-color ju lejon të ndryshoni ngjyrën e nënvizimit veçmas nga ngjyra e tekstit. Mbështetja për këtë veçori është më e mirë nga sa mund të prisni - funksionon në Firefox dhe parashtesohet në Safari. Këtu është kapja: nëse keni thirrje, Safari do të vendosë një nënvizim mbi tekst.

tekst-dekorim-kapërcej

Vetia text-decoration-skip mundëson kapërcimin e zbritjeve në tekstin e nënvizuar.

Kjo pronë është jo standarde dhe aktualisht funksionon vetëm në Safari, me prefiksin -webkit-. Safari e aktivizon këtë veçori si parazgjedhje, kështu që thirrjet nuk janë gjithmonë gërmuese.

Nëse jeni duke përdorur Normalize, ju lutemi vini re se versionet e fundit e çaktivizojnë këtë veçori për hir të sjelljes së qëndrueshme të shfletuesit. Dhe nëse dëshironi që nënvizimi të mos ndikojë tek zbritësit, duhet ta aktivizoni manualisht.

tekst-dekorim-stili

Vetia në stilin e dekorimit të tekstit ofron të njëjtat aftësi stilimi si vetia e stilit kufitar, me shtimin e stilit të valëzuar.

Këtu është një listë e vlerave të disponueshme:

• i thyer
• me pika
• dyfishtë
• të ngurta

Aktualisht, vetia e stilit të dekorimit të tekstit funksionon vetëm në Firefox, këtu është një pamje nga ekrani:

Çfarë mungon

Seria e veçorive text-decoration- * janë shumë më intuitive për t'u përdorur sesa pjesa tjetër e veçorive CSS për stilimin e nënvizimit. Por nëse shikoni më nga afër, nuk ka mënyra të mjaftueshme për të vendosur trashësinë ose pozicionin e linjës për të kënaqur nevojat tona.

Pas një kërkimi të vogël, gjeta disa prona të tjera:

• tekst-nënvizim-gjerësi
• tekst-nënvizoj-pozicion

Duket se janë drafte të hershme të CSS, por nuk u zbatuan kurrë në shfletues për shkak të mungesës së interesit.

konkluzionet

Pra, cila është mënyra më e mirë për të nënvizuar?

Për tekst të vogël, unë rekomandoj përdorimin e dekorimit të tekstit me shtimin optimist të tekstit-dekorim-kaloni. Duket pak pa shije në shumicën e shfletuesve, por shfletuesit kanë pasur gjithmonë nënvizime dhe njerëzit thjesht nuk do t'i kushtojnë vëmendje. Plus, ka gjithmonë një shans që me durim, kjo nënvizim të duket mirë një ditë pa pasur nevojë të ndryshoni asgjë, siç do të bëjnë shfletuesit.

Për tekstin e trupit, ka kuptim të përdoret imazhi i sfondit. Kjo qasje funksionon, duket e mrekullueshme dhe ka përzierje Sass për të. Në parim, mund të hiqni hijen e tekstit nëse nënvizimi është i hollë ose me ngjyrë të ndryshme nga teksti.

Për rreshta të vetëm teksti, përdorni kufirin-fund së bashku me çdo veçori shtesë.

Dhe nëse duhet të kapërceni zbritjet kundrejt një gradienti ose imazhi, provoni të përdorni filtrat SVG. Ose, thjesht shmangni përdorimin e nënvizave.

Në të ardhmen, me përmirësimin e mbështetjes së shfletuesit, e vetmja përgjigje do të jetë grupi i veçorive text-decoration- *.

Unë rekomandoj gjithashtu të shikoni artikullin e Benjamin Woodruff CSS Underlines Suck, i cili trajton të njëjtat çështje.