Sarcină
Soluţie
Sublinierea punctată pe link-uri a devenit recent un standard pentru proiectarea link-urilor, făcând clic pe care nu deschide link-ul, dar efectuează o anumită acțiune în documentul curent. Utilizarea activă a tehnologiei AJAX, atunci când pagina este actualizată fără a o reîncărca, a dus la un nou tip de link-uri care diferă de link-urile obișnuite cu o linie punctată.
Pentru a crea o linie, utilizați proprietatea chenar-bottom cu o valoare întreruptă și adăugați-o la selectorul A. Pentru a vă asigura că sublinierea nu este aplicată tuturor legăturilor, ar trebui să specificați o clasă unică, să o numim, de exemplu, punct . De asemenea, trebuie să eliminați sublinierea originală din linkuri folosind proprietatea text-decoration cu valoarea none (exemplul 1).
Exemplul 1: subliniere punctată
HTML5 CSS 2.1 IE Cr Op Sa Fx
Rezultatul exemplului este prezentat în Fig. 1.
Grosimea liniei și culoarea sublinierii legăturilor sunt, de asemenea, setate prin proprietatea chenar-bottom.
Vă prezint fragmente scurte de cod CSS (fragment) pentru a implementa evidențierea ancorelor de link cu subliniere lină la hover.
De ce trebuie să separați textul de mizeria generală nu este o idee. Există o mare varietate de moduri și tipuri de design de legături, totul este limitat doar de imaginația maestrului.
Cu ajutorul pseudo-clasei:hover și magic, puteți atașa aproape orice efect la legăturile cianotice standard, proiectate plictisitor.
Soluțiile care vor fi discutate astăzi nu sunt nimic deosebit de uimitor sau neobișnuit. Totul este simplu, fără clopoței și fluiere speciale, doar evidențiind legătura în culoare și animație ușoară a sublinierii.
Voi descrie în detaliu doar codul CSS, deoarece nu este nevoie să schimbați sau să adăugați nimic pe partea Html.
CSS
În primul rând, folosind proprietatea line-height: setați distanța dintre linii în funcție de linia de bază a fontului; valoarea dvs. poate fi diferită. Să transformăm linkul într-o linie de blocare, încorporată în structura textului, setând proprietatea de afișare la inline-block . Să scăpăm de sublinierea standard scriind text-decoration:none; și completați linkul cu culoarea de care avem nevoie.
| a ( înălțime de linie: 1; afișare: bloc în linie; culoare: #ffeb3b; decor text: niciunul; cursor: indicator; ) |
a ( înălțimea liniei: 1; afișaj: bloc în linie; culoare: #ffeb3b; decor text: niciunul; cursor: indicator; )
Apoi folosim pseudo-elementul:after astfel încât să putem adăuga un element suplimentar, în cazul nostru o linie, și să definim un efect de tranziție simplu în tranziția: proprietate. Lățimea liniei va fi setată inițial la lățimea zero: 0%; , înălțimea este determinată în 2px. Culoarea liniei poate fi orice; în exemplu, nu am fost prea creativ și am setat culorile textului linkului să se potrivească.
| a: după (afișare: bloc; conținut: "" ; înălțime: 2px; lățime: 0%; culoare de fundal: #ffeb3b; tranziție: lățime . 3s ease-in-out; ) |
a:după (afișare: bloc; conținut: ""; înălțime: 2px; lățime: 0%; culoare de fundal: #ffeb3b; tranziție: lățime .3s ease-in-out; )
Tot ce rămâne este să adăugăm puțină mișcare link-ului nostru. Pentru a face acest lucru, folosim câteva pseudo-clase: hover și: focus . Primul va determina stilul linkului atunci când trece cu mouse-ul, al doilea va funcționa când cursorul este plasat „strâns” pe link. Aici vom schimba valoarea lățimii și o vom seta la 100%.
Acum, când treceți cu mouse-ul sau vă concentrați asupra unui link, utilizatorului îi va apărea o subliniere stilizată, fără probleme, cu o întârziere abia vizibilă, al cărei timp, am definit-o cu prudență mai devreme în proprietatea de tranziție: .
| a: hover: după, a: focalizare: după ( lățime: 100 %; ) |
a:hover:după, a:focus:după ( lățime: 100%; )
Drept urmare, obținem următoarea imagine:
Întregul cod asamblat va arăta astfel:
| a ( afișare : bloc inline ; culoare : #ffeb3b ; înălțime linie : 1 ; decor text : niciuna ; cursor : indicator ; ) a: după ( culoarea fundalului : #ffeb3b ; afișare : bloc ; conținut : "" ; înălțime: 2px; lățime: 0%; -webkit-transition: lățime .3s ease-in-out; -moz--transition: width .3s ease-in-out; tranziție: lățime .3s ease-in-out; ) a: hover: după , a: focalizare: după ( lățime: 100% ; ) |
a ( display: inline-block; color:#ffeb3b; line-height: 1; text-decoration:none; cursor: pointer; ) a:after (culoare fundal: #ffeb3b; display: block; continut: ""; înălțime: 2px; lățime: 0%; -webkit-tranziție: lățime .3s ease-in-out; -moz--tranziție: lățime .3s ease-in-out; tranziție: lățime .3s ease-in-out; ) a:hover:după, a:focus:după ( lățime: 100%; )
Desigur, aceasta este doar una dintre cele mai simple și mai modeste opțiuni pentru proiectarea link-urilor. Experimentați mai mult, adăugați culori, folosiți animația, deplasați-vă la dreapta sau la stânga, faceți legături cu susul în jos, de exemplu, etc., etc., principalul lucru este să nu exagerați, totul ar trebui să fie cu sentiment, simț și aranjament .
Actualizare și completări din 22.10.2017
În comentarii au existat întrebări despre cum să faci o subliniere din centrul textului linkului, cu o întindere lină în lateral. Dacă există cerere, atunci va exista ofertă))).
Totul este destul de simplu, trebuie doar să adăugați câteva proprietăți noi, adică pentru elementul principal a, definiți poziționarea ca poziție relativă: relativă; , iar pentru pseudo-elementul a:după poziție absolută:absolut; cu distanța de la marginea stângă a elementului părinte stânga:50%; și, de asemenea, folosind proprietatea transform pentru a determina deplasarea orizontală a elementului cu valoarea specificată transform:translateX(-50%) .
La ieșire obținem acest rezultat:
Când este asamblat, tot codul CSS, pentru a sublinia lin linkul din centru, ar trebui să arate cam așa:
| a ( afișare : bloc inline ; culoare : #ffeb3b ; înălțime linie : 1 ; decor text : niciunul ; cursor : indicator ; poziție : relativă ; ) a: după ( culoarea fundalului : #ffeb3b ; afișare : bloc ; conținut : "" ; înălțime : 2 px ; lățime : 0 % ; stânga : 50 % ; poziție : absolut ; -webkit-tranziție: lățime .3s ease-in-out; -moz--tranziție: lățime .3s ease-in-out ; tranziție: lățime .3s ease-in-out; -webkit-transform: translateX(-50% ) ; -moz-transform: translateX(-50% ) ; transform: translateX(-50% ) ; ) a: hover : după , a: focalizare : după ( lățime : 100% ; ) |
a ( afișare: bloc în linie; culoare: #ffeb3b; înălțime linie: 1; decor text: niciunul; cursor: indicator; poziție: relativă; ) a: după (culoare fundal: #ffeb3b; afișare: bloc; conținut : ""; înălțime: 2px; lățime: 0%; stânga:50%; poziție: absolut; -webkit-tranziție: lățime .3s ease-in-out; -moz--tranziție: lățime .3s ease-in-out ; tranziție: lățime .3s ease-in-out; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%); ) a:hover: după, a:focus:după ( lățime: 100%; )
Astăzi, având în vedere că toate browserele moderne acceptă din ce în ce mai multă încredere proprietățile clipului CSS3, practic nu există restricții pentru designul original al legăturilor, în mare, totul depinde de imaginația ta și există o mulțime de soluții gata făcute pe internet, dacă doriți, va fi, după cum se spune, ceva pentru orice gust și culoare.
Cu tot respectul, Andrew
sau studiați etichetele care formatează textul HTML
Vă prezentăm atenției una dintre lecțiile cheie și cele mai simple ale tutorialului.
- text HTML este componenta principală a majorității paginilor de internet.
- Prin fraze cheie în textul paginii HTML utilizatorii vă pot găsi site-ul.
- text HTML Poate avea orice dimensiune și culoare, la discreția dvs. De asemenea, puteți determina tipul de font și volumul acestuia.
- Dimensiunea fontului HTML de obicei setat în pixeli.
- Formatarea textului HTML utilizate pe scară largă, se folosesc etichete de formatare.
Vezi mai jos etichete care formatează textul HTML:
- Etichete → îndrăzneț text HTML(font aldine).
- Etichete → bold text HTML(font aldine).
- Etichete → monospațiu text HTML(font monospațial).
- Etichete
- Etichete → monospațiu text HTML(font monospațial).
- Etichete → text HTML, dimensiune mai mare decât de obicei (font mare).
- Etichete → text HTML, dimensiunea este mai mică decât de obicei (font mic).
- Etichete → oblic text HTML(font italic).
- Etichete → oblic text HTML(font italic).
- Etichete → oblic text HTML(font italic).
- Etichete → subliniat text HTML(font subliniat).
- Etichete
- Etichete → text HTML(font) în indice.
- Etichete → text HTML(font) în superscript.
Formatarea textului HTML: text barat, subliniat
Rezultat: ... font monospațiu
Rezultat: ...dimensiunea fontului este mai mare decât în mod normal
Rezultat: ... font italic
Rezultat: text barat (font barat)
Rezultat: superscript
Tehnicile de formatare prezentate mai sus ar trebui utilizate numai pentru secțiuni mici de text. Foloseste-l CSS dacă doriți să setați un anumit font pentru întreaga pagină sau pentru mai multe rânduri, de exemplu.
Să ne uităm la toate modalitățile prin care puteți face text subliniat folosind html și CSS. Există trei opțiuni în total:
- Prin eticheta html Și
- Prin proprietatea CSS text-decoration
- Prin proprietatea CSS border-bottom
Text subliniat prin etichetă html Și
Tot textul este inclus în etichete Și devine accentuat.
Nume provine din cuvântul englezesc „subliniere”. Etichetă HTML considerat mai nou.
De exemplu
Text simplu.
Text simplu. Text subliniat prin eticheta ins
Se convertește pe pagină în
Text simplu. Text subliniat prin eticheta u
Text simplu.
Text subliniat prin proprietatea text-decor CSS
CSS are o proprietate de decorare a textului care este responsabilă pentru formatarea textului html pentru a crea subliniere.
Sintaxa text-decor CSS
text-decor: niciunul|subliniat|supraliniere|linie prin linie|moştenire;
- niciunul - text fără decor
- subliniere - subliniere
- overline - subliniere
- line-through - text barat
- clipește - text intermitent (se recomandă să nu folosiți această valoare)
Ne interesează semnificația sublinierii
De exemplu:
Text cu text-decor: proprietate de subliniere
Se convertește pe pagină în
Text cu text-decor: proprietate de subliniere
Text subliniat prin proprietatea CSS margine-bottom
Proprietatea CSS border-bottom este concepută pentru a crea o chenar pe partea de jos a unui obiect. Desigur, puteți atribui textului subliniere în acest fel.
Să ne uităm la un exemplu
Se convertește pe pagină în
Text cu proprietate în partea de jos a marginii (subliniere roșie)Text cu proprietatea marginii de jos (subliniere punctată)
Vă permite să creați diferite subliniere în HTML: subliniere, supraliniere, text prin linie etc. Să combinăm această caracteristică cu cea anterioară și să obținem:
A doua linie arată cum totul este scris într-un rând cu decor text.
text-decoration-style — stil de subliniere a textului
Opțiunea specifică aspectul liniei decorative pentru link-ul /. Noile linii directoare CSS au adăugat valori ondulate și duble, așa că acum există 5 dintre ele:
- solid - linie continuă;
- dublu - dublu (din primul exemplu de mai sus);
- punctat - constă dintr-o succesiune de puncte;
- dashed - vă permite să creați o subliniere CSS întreruptă;
- ondulat - o linie ondulată spectaculoasă.
text-underline-position - poziționarea sublinierii CSS
Folosind această proprietate, puteți controla poziția liniei în raport cu gliful fontului.
Sunt disponibile în total 4 opțiuni:
- auto — este situat cât mai aproape de linia de bază a textului;
- sub - sub marginea cea mai de jos a fontului;
- stânga și dreapta - stânga/dreapta pentru postările afișate vertical.
Iată o diferență vizuală între sublinierea textului folosind under și auto:
Diferența, cred, este destul de evidentă.
text-decoration-skip - eliminați sublinierea pentru elemente
Folosind opțiunea, puteți anula (sări) decorarea unor elemente din linia HTML. Pentru a înțelege mai bine valorile acceptabile ale spațiilor, obiectelor, cutie-decor, margini, cerneală, voi duplica imaginea din nota anterioară:
Adică, de exemplu, folosind cerneală, puteți face un caracter de subliniere în CSS care nu s-ar intersecta cu caracterele. Obiectele de valoare vă permit să săriți peste elementele inline (inline-block) - introduceți un interval, iar linia continuă se va rupe în locul potrivit:
Parametrii cutie-decor, spații, margini sunt mult mai puțin acceptați de browsere, astfel încât rezultatele acestora diferă uneori de cele așteptate. Iată starea compatibilității/suportului pentru decorarea textului la momentul scrierii:
Trucuri suplimentare pentru sublinierea linkurilor
Utilizatorii începători pun adesea câteva întrebări tipice pe această temă, așa că am decis să le luăm în considerare. Un exemplu general este în partea de jos după explicații.
Cum să eliminați sublinierea linkului
a:hover ( text-decor: subliniat; )
Ambele exemple de mai jos vă permit să înțelegeți logica modului în care funcționează trecerea cu mouse-ul: fie specificați inițial sublinierea linkului în CSS, apoi o eliminați în trecerea cu mouse-ul, sau invers.
Dacă aveți alte întrebări pe această temă, adresați-le în comentarii. Vom încerca să o analizăm mai târziu sau să vă oferim câteva indicii în răspunsuri. Principalul lucru în această chestiune este practica - încercați să adăugați diferite proprietăți pentru opțiunea de decor text direct în exemple sau creați-vă propriul fișier de testare. Sperăm că totul a devenit clar pe tema sublinierii textului și a linkurilor în CSS / HTML.
