Detyrë
Zgjidhje
Nënvizimi me pika në lidhje është bërë kohët e fundit një standard për hartimin e lidhjeve, klikimi mbi të cilin nuk hapet lidhja, por kryen disa veprime në dokumentin aktual. Përdorimi aktiv i teknologjisë AJAX, kur faqja përditësohet pa e ringarkuar atë, ka çuar në një lloj të ri lidhjesh që ndryshojnë nga lidhjet e zakonshme me një vijë me pika.
Për të krijuar një rresht, përdorni veçorinë kufi-fund me një vlerë të ndërprerë dhe shtojeni atë në përzgjedhësin A. Për të siguruar që nënvizimi të mos zbatohet në të gjitha lidhjet, duhet të specifikoni një klasë unike, le ta quajmë, për shembull, pikë. Ju gjithashtu duhet të hiqni nënvizimin origjinal nga lidhjet duke përdorur veçorinë e dekorimit të tekstit me vlerën asnjë (shembulli 1).
Shembulli 1: Nënvizim me pika
HTML5 CSS 2.1 IE Cr Op Sa Fx
Rezultati i shembullit është paraqitur në Fig. 1.
Trashësia e linjës dhe ngjyra e nënvizimit të lidhjeve vendosen gjithashtu nëpërmjet veçorisë së kufirit-fund.
Unë paraqes fragmente të shkurtra të kodit CSS (snippet) për të zbatuar theksimin e ankorave të lidhjeve me nënvizim të qetë në hover.
Pse ju duhet të ndani tekstin nga rrëmuja e përgjithshme është një gjë pa mend. Ekziston një larmi e madhe mënyrash dhe llojesh të dizajnit të lidhjeve, gjithçka është e kufizuar vetëm nga imagjinata e mjeshtrit.
Me ndihmën e pseudo-klasës:hover dhe magjisë, ju mund t'i bashkëngjitni pothuajse çdo efekt lidhjeve cianotike standarde, të dizajnuara në mënyrë të mërzitshme.
Zgjidhjet që do të diskutohen sot nuk janë ndonjë gjë veçanërisht e mahnitshme apo e pazakontë. Gjithçka është e thjeshtë, pa ndonjë zile dhe bilbil të veçantë, vetëm duke theksuar lidhjen me ngjyra dhe animacion të lehtë të nënvizimit.
Unë do të përshkruaj në detaje vetëm kodin CSS, pasi nuk ka nevojë të ndryshoni ose shtoni asgjë në anën Html.
CSS
Së pari, duke përdorur veçorinë line-height: vendosni ndarjen e rreshtave në varësi të vijës bazë të fontit; vlera juaj mund të jetë e ndryshme. Le ta bëjmë lidhjen një lidhje bllok-line, të ngulitur në strukturën e tekstit, duke vendosur vetinë e saj të shfaqjes në inline-block . Le të heqim qafe nënvizimin standard duke shkruar tekst-dekorim:asnjë; dhe mbushim lidhjen me ngjyrën që na nevojitet.
| a (lartësia e rreshtit: 1; ekrani: blloku i linjës; ngjyra: #ffeb3b; dekorimi i tekstit: asnjë; kursori: treguesi; ) |
a (lartësia e rreshtit: 1; ekrani: blloku i linjës; ngjyra:#ffeb3b; dekorimi i tekstit: asnjë; kursori: treguesi; )
Më pas përdorim pseudoelementin:after në mënyrë që të shtojmë një element shtesë, në rastin tonë një linjë, dhe të përcaktojmë një efekt të thjeshtë tranzicioni në tranzicion: veti. Gjerësia e linjës fillimisht do të vendoset në gjerësi zero: 0%; , lartësia përcaktohet në 2 px. Ngjyra e linjës mund të jetë çdo; në shembull nuk u bëra shumë krijues dhe vendosa ngjyrat e tekstit të lidhjes që të përputheshin.
| a: pas (ekrani: bllok; përmbajtja: "" ; lartësia: 2 px; gjerësia: 0%; ngjyra e sfondit: #ffeb3b; tranzicioni: gjerësia . 3s lehtësi-në-jashtë; ) |
a:after (ekrani: bllok; përmbajtja: ""; lartësia: 2 px; gjerësia: 0%; ngjyra e sfondit: #ffeb3b; tranzicioni: gjerësia 0.3s lehtësi në dalje; )
Mbetet vetëm të shtojmë pak lëvizje në lidhjen tonë. Për ta bërë këtë, ne përdorim disa pseudo-klasa: hover dhe: fokus . E para do të përcaktojë stilin e lidhjes kur qëndron pezull, e dyta do të funksionojë kur kursori vendoset "fort" në lidhje. Këtu do të ndryshojmë vlerën e gjerësisë dhe do ta vendosim në 100%.
Tani, kur rri pezull ose fokusohet në një lidhje, një nënvizim i stilizuar do t'i shfaqet përdoruesit, pa probleme me një vonesë mezi të dukshme, kohën e së cilës, e përcaktuam me kujdes më herët në vetinë e tranzicionit: .
| a: rri pezull: pas, a: fokusi: pas ( gjerësia: 100 %; ) |
a:hover:pas, a:fokus:pas (gjerësia: 100%; )
Si rezultat, marrim foton e mëposhtme:
I gjithë kodi i mbledhur do të duket kështu:
| a (ekrani: inline-block; ngjyra: #ffeb3b; lartësia e rreshtit: 1; teksti-dekorimi: asnjë; kursori: treguesi;) a: pas (ngjyra e sfondit: #ffeb3b; ekrani: blloku; përmbajtja: "" ; lartësia: 2 px; gjerësia: 0%; -kit-ueb-tranzicioni: gjerësia .3 s lehtësi në dalje; -moz--tranzicioni: gjerësi .3s lehtësi në dalje; tranzicion: gjerësi .3s lehtësi në dalje; ) a: rri pezull: pas, a: fokusi: pas (gjerësia: 100%; ) |
a ( shfaqja: blloku i brendshëm; ngjyra:#ffeb3b; lartësia e rreshtit: 1; dekorimi i tekstit: asnjë; kursori: treguesi; ) a:after (ngjyra e sfondit: #ffeb3b; shfaqja: blloku; përmbajtja: ""; lartësia: 2 px; gjerësia: 0%; -kit-ueb-tranzicioni: gjerësia 0,3 sekonda lehtësi në dalje; -moz--tranzicioni: gjerësi 0,3s lehtësi në dalje; tranzicion: gjerësi 0,3s lehtësi në dalje; ) a:hover:pas, a:fokus:pas (gjerësia: 100%; )
Sigurisht, kjo është vetëm një nga opsionet më të thjeshta dhe modeste për hartimin e lidhjeve. Eksperimentoni më shumë, shtoni ngjyra, përdorni animacion, lëvizni djathtas ose majtas, bëni lidhje me kokë poshtë, për shembull, etj., etj., gjëja kryesore është të mos e teproni, gjithçka duhet të jetë me ndjenjë, sens dhe rregullim. .
Përditësim dhe shtesa nga 22.10.2017
Në komente kishte pyetje se si të bëni një nënvizim nga qendra e tekstit të lidhjes, me një shtrirje të qetë në anët. Nëse ka kërkesë, atëherë do të ketë furnizim))).
Gjithçka është mjaft e thjeshtë, ju vetëm duhet të shtoni disa veti të reja, domethënë, për elementin kryesor a, përcaktoni pozicionimin si pozicion relativ: relative; , dhe për pseudoelementin a:pas pozicionit absolut:absolut; me distancë nga skaji i majtë i elementit prind majtas:50%; , dhe gjithashtu duke përdorur vetinë e transformimit për të përcaktuar zhvendosjen horizontale të elementit me vlerën e specifikuar transform:translateX(-50%).
Në dalje marrim këtë rezultat:
Kur mblidhet, i gjithë kodi css, për të nënvizuar pa probleme lidhjen nga qendra, duhet të duket diçka si kjo:
| a (ekrani: inline-block; ngjyra: #ffeb3b; lartësia e rreshtit: 1; teksti-dekorimi: asnjë; kursori: treguesi; pozicioni: relative;) a: pas (ngjyra e sfondit: #ffeb3b; ekrani: blloku; përmbajtja : "" ; lartësi : 2 px ; gjerësi : 0% ; majtas : 50% ; pozicioni : absolut ; -webkit-tranzicion: gjerësia .3s lehtësi në dalje; -moz--transition : gjerësi .3s lehtësi në dalje ; tranzicion : gjerësi .3s lehtësi në dalje; -webkit-transform: translateX(-50%) ; -moz-transform: translateX(-50%) ; transformim: translateX(-50%) ;) a: hover: pas, a: fokusi: pas (gjerësia: 100%;) |
a ( ekran: blloku i brendshëm; ngjyra:#ffeb3b; lartësia e rreshtit: 1; dekorimi i tekstit: asnjë; kursori: treguesi; pozicioni: relativ; ) a:pas (ngjyra e sfondit: #ffeb3b; shfaqja: blloku; përmbajtja : ""; lartësia: 2 px; gjerësia: 0%; majtas: 50%; pozicioni: absolut; -kit-ueb-tranzicioni: gjerësia .3s lehtësi në dalje; -moz--tranzicioni: gjerësi .3s lehtësi në dalje ; tranzicioni: gjerësia .3s lehtësi në dalje; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%); ) a:hover: pas, a:fokus:pas (gjerësia: 100%; )
Sot, duke pasur parasysh që të gjithë shfletuesit modernë mbështesin gjithnjë e më shumë vetitë nga klipi CSS3, praktikisht nuk ka kufizime për dizajnin origjinal të lidhjeve, në përgjithësi, gjithçka varet nga imagjinata juaj, dhe ka shumë zgjidhje të gatshme në internet, nëse dëshironi, do të ketë, siç thonë ata, diçka për çdo shije dhe ngjyrë.
Me gjithë respekt, Andrew
ose studioni etiketat që formatojnë tekstin HTML
Ne paraqesim në vëmendjen tuaj një nga mësimet kryesore dhe më të thjeshta të tutorialit.
- Teksti HTMLështë komponenti kryesor i shumicës së faqeve të internetit.
- Nga frazat kryesore në tekstin e faqes HTML përdoruesit mund të gjejnë faqen tuaj.
- Teksti HTML Mund të jetë çdo madhësi dhe ngjyrë sipas gjykimit tuaj. Ju gjithashtu mund të përcaktoni llojin e fontit dhe vëllimin e tij.
- Madhësia e shkronjave HTML zakonisht vendoset në pixel.
- Formatimi i tekstit HTML përdoren gjerësisht, përdoren etiketat e formatimit.
Shikoni më poshtë etiketat që formatojnë tekstin HTML:
- Etiketa → e theksuar Teksti HTML(font të theksuar).
- Etiketa → bold Teksti HTML(font të theksuar).
- Etiketa → monohapësirë Teksti HTML(font monospace).
- Etiketa
- Etiketa → monohapësirë Teksti HTML(font monospace).
- Etiketa → Teksti HTML, madhësia më e madhe se zakonisht (font i madh).
- Etiketa → Teksti HTML, madhësia është më e vogël se zakonisht (font i vogël).
- Etiketa → i zhdrejtë Teksti HTML(Font italik).
- Etiketa → i zhdrejtë Teksti HTML(Font italik).
- Etiketa → i zhdrejtë Teksti HTML(Font italik).
- Etiketa → nënvizuar Teksti HTML(font i nënvizuar).
- Etiketa
- Etiketa → Teksti HTML(font) në nënshkrim.
- Etiketa → Teksti HTML(font) në mbishkrim.
Formatimi i tekstit HTML: tekst i theksuar, i nënvizuar
Rezultati: ... font monospace
Rezultati: ...madhësia e shkronjave është më e madhe se normalja
Rezultati: ... font italic
Rezultati: teksti me gërmim (font strikt)
Rezultati: mbishkrimi
Teknikat e formatimit të paraqitura më sipër duhet të përdoren vetëm për pjesë të vogla të tekstit. Perdore CSS nëse dëshironi të vendosni një font specifik për të gjithë faqen, ose për disa rreshta, për shembull.
Le të shohim të gjitha mënyrat se si mund të krijoni tekst të nënvizuar duke përdorur html dhe CSS. Ekzistojnë tre opsione në total:
- Përmes etiketës html Dhe
- Nëpërmjet vetive CSS text-decoration
- Nëpërmjet pronës së kufirit CSS-fund
Teksti i nënvizuar nëpërmjet etiketës html Dhe
I gjithë teksti është i mbyllur në etiketa Dhe bëhet e theksuar.
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 nëpërmjet etiketës ins
Konvertohet 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 të dekorimit të tekstit CSS
CSS ka një veçori të dekorimit të tekstit që është përgjegjëse për formatimin e tekstit html për të krijuar nënvizim.
Sintaksa e dekorimit të tekstit CSS
dekorimi i tekstit: asnjë|nënvizojë|mbivijë|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 kuptimin e nënvizimit
Për shembull:
Teksti me tekst-zbukurim: nënvizoni vetinë
Konvertohet në faqe në
Teksti me tekst-zbukurim: nënvizoni vetinë
Teksti i nënvizuar nëpërmjet pronës së kufirit CSS-fund
Vetia CSS border-bottom është projektuar për të krijuar një kufi në fund të një objekti. Natyrisht, në këtë mënyrë mund t'i caktoni edhe nënvizimet tekstit.
Le të shohim një shembull
Konvertohet në faqe në
Teksti me veçorinë e poshtme të kufirit (nënvizuar me ngjyrë të kuqe)Teksti me veçorinë e poshtme të kufirit (nënvizuar me pika)
Ju lejon të krijoni nënvizime të ndryshme në HTML: nënvizoni, mbinvizoni, teksti përmes rreshtit, etj. Le ta kombinojmë këtë veçori me atë të mëparshmen dhe të marrim:
Rreshti i dytë tregon se si çdo gjë është shkruar në një rresht me tekst-dekorim.
text-decoration-style — stili i nënvizimit të tekstit
Opsioni specifikon pamjen e vijës dekorative për lidhjen /. Udhëzimet e reja CSS kanë shtuar vlera të valëzuara dhe të dyfishta, kështu që tani ka 5 prej tyre:
- vijë e fortë - e fortë;
- dyfish - dyfish (nga shembulli i parë i mësipërm);
- me pika - përbëhet nga një sekuencë pikash;
- me pika - ju lejon të krijoni një nënvizim të ndërprerë CSS;
- me onde - një linjë spektakolare me onde.
text-underline-position - pozicionimi i nënvizuar CSS
Duke përdorur këtë veti, ju mund të kontrolloni pozicionin e rreshtit në lidhje me glyphin e shkronjave.
Gjithsej 4 opsione janë në dispozicion:
- auto — ndodhet sa më afër vijës bazë të tekstit;
- nën - nën kufirin më të ulët të fontit;
- majtas dhe djathtas - majtas/djathtas për postimet e shfaqura vertikalisht.
Këtu është një ndryshim vizual midis nënvizimit të tekstit duke përdorur nën dhe automatik:
Dallimi, mendoj, është mjaft i dukshëm.
tekst-dekorim-kaloni - hiqni nënvizimin për elementet
Duke përdorur opsionin, mund të anuloni (kapërceni) dekorimin e disa elementeve në rreshtin HTML. Për të kuptuar më mirë vlerat e pranueshme të hapësirave, objekteve, dekorimit të kutisë, skajeve, bojës, do të kopjoj figurën nga shënimi i mëparshëm:
Kjo do të thotë, për shembull, duke përdorur bojë mund të bëni një nënvizim në CSS që nuk do të kryqëzohej me karakteret. Objektet e vlerës ju lejojnë të kapërceni elementët e linjës (blloku inline) - futni një hapësirë dhe vija e fortë do të prishet në vendin e duhur:
Parametrat e dekorimit të kutisë, hapësirave, skajeve mbështeten shumë më pak mirë nga shfletuesit, kështu që rezultatet e tyre ndonjëherë ndryshojnë nga ato të pritura. Këtu është statusi i përputhshmërisë/mbështetjes së dekorimit të tekstit në kohën e shkrimit:
Truke shtesë për nënvizimin e lidhjeve
Përdoruesit fillestar shpesh bëjnë disa pyetje tipike për këtë temë, kështu që ne gjithashtu vendosëm t'i shqyrtojmë ato. Një shembull i përgjithshëm është në fund pas shpjegimeve.
Si të hiqni nënvizimin e lidhjes
a:hover (dekorimi i tekstit: nënvizoni;)
Të dy shembujt e mëposhtëm ju lejojnë të kuptoni logjikën se si funksionon hover: ose fillimisht specifikoni nënvizimin e lidhjes në CSS, dhe pastaj hiqni atë në hover, ose anasjelltas.
Nëse keni ndonjë pyetje tjetër në lidhje me temën, pyesni ato në komente. Ne do të përpiqemi ta shqyrtojmë më vonë ose do t'ju japim disa sugjerime në përgjigjet. Gjëja kryesore në këtë çështje është praktika - provoni të shtoni veti të ndryshme për opsionin e dekorimit të tekstit direkt në shembuj ose krijoni skedarin tuaj të provës. Shpresojmë që gjithçka të jetë bërë e qartë në temën e nënvizimit të tekstit dhe lidhjeve në CSS / HTML.
