Zadatak
Rješenje
Isprekidano podvlačenje na linkovima je nedavno postalo standard za dizajn linkova, klikom na koje se ne otvara link, već se obavlja neka radnja u trenutnom dokumentu. Aktivna upotreba AJAX tehnologije, kada se stranica ažurira bez ponovnog učitavanja, dovela je do nove vrste linkova koji se razlikuju od običnih linkova isprekidanom linijom.
Da biste kreirali liniju, koristite svojstvo border-bottom sa vrijednošću isprekidanom i dodajte ga A selektoru. Kako biste osigurali da se podvlačenje ne primjenjuje na sve veze, trebali biste navesti jedinstvenu klasu, nazovimo je, na primjer, tačka. Također morate ukloniti originalno podvučeno iz veza koristeći svojstvo text-decoration sa vrijednošću none (primjer 1).
Primjer 1: Isprekidana podvlaka
HTML5 CSS 2.1 IE Cr Op Sa Fx
Rezultat primjera prikazan je na sl. 1.
Debljina linije i boja podvlačenja veza se takođe postavljaju preko svojstva border-bottom.
Predstavljam kratke fragmente CSS koda (isječak) za implementaciju isticanja sidrišta linkova sa glatkim podvlačenjem pri lebdenju.
Zašto trebate odvojiti tekst od općeg nereda nije nimalo. Postoji veliki izbor načina i vrsta dizajna linkova, sve je ograničeno samo maštom majstora.
Uz pomoć pseudo-class:hover i magije, možete dodati gotovo bilo koji efekat standardnim, dosadno dizajniranim cijanotičnim vezama.
Rješenja o kojima će danas biti riječi nisu ništa posebno zadivljujuće ili neobično. Sve je jednostavno, bez ikakvih posebnih zvona i zvižduka, samo isticanje veze u boji i svjetlosna animacija podcrta.
Detaljno ću opisati samo CSS kod, budući da nema potrebe ništa mijenjati ili dodavati na HTML strani.
CSS
Prvo, koristeći svojstvo line-height: postavite razmak između redova ovisno o osnovnoj liniji fonta; vaša vrijednost može biti drugačija. Napravimo vezu kao blok-liniju, ugrađenu u strukturu teksta, tako što ćemo njeno svojstvo prikaza postaviti na inline-block . Oslobodimo se standardnog podvlačenja pisanjem text-decoration:none; i ispunimo vezu bojom koja nam je potrebna.
| a ( visina reda: 1; prikaz: inline blok; boja: #ffeb3b; dekoracija teksta: nema; kursor: pokazivač; ) |
a (visina linije: 1; prikaz: inline-block; boja:#ffeb3b; text-decoration:none; kursor: pokazivač; )
Zatim koristimo pseudo-element:after da bismo mogli dodati dodatni element, u našem slučaju liniju, i definirati jednostavan prijelazni efekat u svojstvu tranzicije:. Širina linije će u početku biti postavljena na nultu širinu: 0%; , visina je određena u 2px. Boja linije može biti bilo koja; u primjeru nisam bio previše kreativan i postavio sam boje teksta linka da odgovaraju.
| a: nakon (prikaz: blok; sadržaj: "" ; visina: 2px; širina: 0%; boja pozadine: #ffeb3b; prijelaz: širina . 3s lakoća ulaska; ) |
a:poslije (prikaz: blok; sadržaj: ""; visina: 2px; širina: 0%; boja pozadine: #ffeb3b; prijelaz: širina .3s lakoća ulaska; )
Ostaje samo da dodamo malo kretanja našoj vezi. Da bismo to učinili, koristimo nekoliko pseudo-klasa: hover i: focus . Prvi će odrediti stil veze kada se lebdi, drugi će raditi kada se kursor "čvrsto" postavi na vezu. Ovdje ćemo promijeniti vrijednost širine i postaviti je na 100%.
Sada, kada se lebdi ili fokusira na vezu, korisniku će se pojaviti stilizirana podvučena linija, glatko sa jedva primjetnim zakašnjenjem, čije vrijeme smo razborito definirali ranije u svojstvu tranzicije: .
| a: hover: nakon, a: fokus: poslije ( širina: 100 %; ) |
a:hover:after, a:focus:after (širina: 100%; )
Kao rezultat, dobijamo sljedeću sliku:
Cijeli sastavljeni kod će izgledati ovako:
| a (prikaz: inline-block; boja: #ffeb3b; visina reda: 1; dekoracija teksta: nema; kursor: pokazivač;) a: poslije (boja pozadine: #ffeb3b; prikaz: blok; sadržaj: "" ; visina : 2px ; širina : 0% ; -webkit-transition: širina .3s lakoća izlaska; -moz--transition : širina .3s lakoća ulaska; prijelaz: širina .3s lakoća ulaska; ) a: lebdjeti : poslije , a: fokus : poslije ( širina : 100% ; ) |
a ( display: inline-block; boja:#ffeb3b; visina linije: 1; text-decoration:none; kursor: pokazivač; ) a:after ( boja pozadine: #ffeb3b; display: block; sadržaj: ""; visina: 2px; širina: 0%; -webkit-transition: širina .3s lakoća ulaska; -moz--transition: širina .3s jednostavnog ulaska; prijelaz: širina .3s jednostavnog ulaska; ) a:hover:after, a:focus:after (širina: 100%; )
Naravno, ovo je samo jedna od najjednostavnijih i najskromnijih opcija za dizajn linkova. Eksperimentirajte više, dodajte boje, koristite animaciju, pomičite se udesno ili ulijevo, pravite naopačke linkove, na primjer, itd itd., Glavno je ne pretjerati, sve treba biti s osjećajem, smislom i rasporedom .
Ažuriranje i dopune od 22.10.2017
U komentarima je bilo pitanja o tome kako napraviti podvlačenje od sredine teksta linka, sa glatkim rastezanjem sa strane. Ako postoji potražnja, onda će biti i ponuda))).
Sve je prilično jednostavno, samo treba dodati par novih svojstava, odnosno za glavni element a definirati pozicioniranje kao relativni položaj: relativan; , a za pseudoelement a:poslije apsolutnog položaja:apsolutno; sa udaljenosti od lijeve ivice roditeljskog elementa lijevo:50%; , kao i korištenje svojstva transform za određivanje horizontalnog pomaka elementa za navedenu vrijednost transform:translateX(-50%).
Na izlazu dobijamo ovaj rezultat:
Kada se sklopi, sav css kod, da bi glatko podvukao vezu od centra, trebao bi izgledati otprilike ovako:
| a ( display : inline-block ; boja : #ffeb3b ; visina linije : 1 ; text-decoration : nema ; kursor : pokazivač ; položaj : relativan ; ) a: poslije ( boja pozadine : #ffeb3b ; prikaz : blok ; sadržaj : "" ; visina : 2px ; širina : 0% ; lijevo : 50% ; pozicija : apsolutna ; -webkit-transition: širina .3s lakoća ulaska; -moz--transition : širina .3s lakoća izlaska ; tranzicija : širina .3s jednostavnog ulaska; -webkit-transform: translateX(-50% ) ; -moz-transform: translateX(-50% ) ; transform : translateX(-50% ) ; ) a: lebdenje mišem : poslije , a: fokus : poslije ( širina : 100% ;) |
a ( display: inline-block; boja:#ffeb3b; visina linije: 1; text-decoration:nema; kursor: pokazivač; položaj:relativna; ) a:after (boja pozadine: #ffeb3b; prikaz: blok; sadržaj : ""; visina: 2px; širina: 0%; lijevo:50%; pozicija:apsolutna; -webkit-transition: širina .3s lakoća ulaska; -moz--prijelaz: širina .3s lakoća izlaska ; prijelaz: širina .3s jednostavnog ulaska; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%); ) a:hover: poslije, a:focus:after (širina: 100%; )
Danas, s obzirom na to da svi moderni pretraživači sve pouzdanije podržavaju svojstva iz CSS3 isječka, praktički nema ograničenja za originalni dizajn veza, uglavnom, sve ovisi o vašoj mašti, a postoji i dosta gotovih rješenja na internetu, ako želite, naći će se, kako kažu, ponešto za svaki ukus i boju.
Uz svo poštovanje, Andrew
ili studijske oznake koje formatiraju HTML tekst
Predstavljamo vam jednu od ključnih i najjednostavnijih lekcija tutorijala.
- HTML tekst je glavna komponenta većine Internet stranica.
- Po ključnim frazama u tekstu HTML stranice korisnici mogu pronaći vašu stranicu.
- HTML tekst Može biti bilo koje veličine i boje po Vašem nahođenju. Također možete odrediti vrstu fonta i njegovu jačinu.
- Veličina HTML fonta obično se postavlja u pikselima.
- HTML formatiranje teksta U širokoj upotrebi, koriste se oznake za formatiranje.
Vidi ispod oznake koje formatiraju HTML tekst:
- Oznake → podebljano HTML tekst(podebljani font).
- Oznake → podebljano HTML tekst(podebljani font).
- Oznake → monospace HTML tekst(jednorazredni font).
- Oznake
- Oznake → monospace HTML tekst(jednorazredni font).
- Oznake → HTML tekst, veća od uobičajene veličine (veliki font).
- Oznake → HTML tekst, veličina je manja od uobičajene (mali font).
- Oznake → kosi HTML tekst(Italic font).
- Oznake → kosi HTML tekst(Italic font).
- Oznake → kosi HTML tekst(Italic font).
- Oznake → podvučeno HTML tekst(podvučen font).
- Oznake
- Oznake → HTML tekst(font) u indeksu.
- Oznake → HTML tekst(font) u superkriptu.
HTML formatiranje teksta: precrtani, podvučeni tekst
Rezultat: ... jednorazredni font
Rezultat: ...veličina fonta je veća od normalne
rezultat: ... kurziv font
Rezultat: precrtani tekst (precrtani font)
Rezultat: superscript
Gore predstavljene tehnike oblikovanja trebale bi se koristiti samo za male dijelove teksta. Iskoristi ga CSS ako želite postaviti određeni font za cijelu stranicu ili za nekoliko redova, na primjer.
Pogledajmo sve načine na koje možete napraviti podvučeni tekst koristeći html i CSS. Ukupno postoje tri opcije:
- Preko html oznake I
- Preko svojstva CSS text-decoration
- Preko svojstva CSS border-bottom
Podvučeni tekst preko html oznake I
Sav tekst je zatvoren u tagovima I postaje naglaš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 preko ins oznake
Konvertuje 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 dekoracije teksta koje je odgovorno za formatiranje html teksta za stvaranje podvlačenja.
CSS sintaksa dekoracije teksta
dekoracija teksta: none|podcrtaj|precrtaj|preko linije|naslijediti;
- nema - tekst bez ukrasa
- underline - underscore
- precrtavanje - donja crta
- line-through - precrtani tekst
- blink - trepćući tekst (preporučljivo je ne koristiti ovu vrijednost)
Zanima nas značenje podvlačenja
Na primjer:
Tekst sa svojstvom text-decoration: podcrtavanje
Konvertuje na stranici u
Tekst sa svojstvom text-decoration: podcrtavanje
Podvučeni tekst preko svojstva CSS border-bottom
Svojstvo CSS border-bottom dizajnirano je da kreira obrub na dnu objekta. Naravno, na ovaj način možete dodijeliti i podvlačenje tekstu.
Pogledajmo primjer
Konvertuje na stranici u
Tekst sa svojstvom dna ivice (crveno podvučeno)Tekst sa svojstvom dna obruba (podvučena tačka)
Omogućava vam da kreirate različita podvlačenja u HTML-u: podcrtavanje, precrtavanje, tekst kroz liniju itd. Hajde da kombinujemo ovu funkciju sa prethodnom i dobijemo:
Drugi red pokazuje kako je sve napisano u jednom redu sa tekstualnim ukrasom.
text-decoration-style — stil podvlačenja teksta
Opcija specificira izgled ukrasne linije za / vezu. Nove CSS smjernice su dodale valovite i dvostruke vrijednosti, tako da ih sada ima 5:
- puna - puna linija;
- double - duplo (iz prvog primjera iznad);
- tačkasta - sastoji se od niza tačaka;
- isprekidano - omogućava vam da kreirate isprekidano CSS podvlačenje;
- valovita - spektakularna valovita linija.
text-underline-position - CSS pozicioniranje podvlačenja
Koristeći ovo svojstvo, možete kontrolirati položaj linije u odnosu na glif fonta.
Dostupne su ukupno 4 opcije:
- auto — nalazi se što bliže osnovnoj liniji teksta;
- ispod - ispod najniže ivice fonta;
- lijevo i desno - lijevo/desno za postove prikazane okomito.
Evo vizualne razlike između podvlačenja teksta korištenjem under i auto:
Mislim da je razlika prilično očigledna.
text-decoration-skip - ukloniti podvlačenje za elemente
Koristeći opciju, možete otkazati (preskočiti) dekoraciju nekih elemenata u HTML liniji. Da bolje razumijem prihvatljive vrijednosti prostora, objekata, kutija-dekoracija, rubova, mastila, duplirat ću sliku iz prethodne napomene:
To jest, na primjer, pomoću tinte možete napraviti donju crtu u CSS-u koja se ne bi ukrštala sa znakovima. Objekti vrijednosti vam omogućavaju da preskočite inline elemente (inline-block) - umetnite raspon, a puna linija će se prekinuti na odgovarajućem mjestu:
Parametri box-decoration, spaces, edges su mnogo slabije podržani od strane pretraživača, pa se njihovi rezultati ponekad razlikuju od očekivanih. Evo statusa kompatibilnosti/podrške za dekoraciju teksta u vrijeme pisanja:
Dodatni trikovi za podvlačenje veza
Korisnici početnici često postavljaju neka tipična pitanja na tu temu, pa smo i mi odlučili da ih razmotrimo. Opšti primjer je na samom dnu nakon objašnjenja.
Kako ukloniti podvučenu vezu
a:hover (tekst-dekoracija: podvlačenje; )
Oba primjera u nastavku vam omogućavaju da shvatite logiku rada lebdenja: ili prvo navedete podvlačenje veze u CSS-u, a zatim ga uklonite u lebdenju, ili obrnuto.
Ako imate još pitanja o ovoj temi, postavite ih u komentarima. Pokušat ćemo to kasnije razmotriti ili vam dati neke savjete u odgovorima. Glavna stvar u ovom pitanju je praksa - pokušajte dodati različita svojstva za opciju dekoracije teksta direktno u primjere ili kreirajte vlastiti testni fajl. Nadamo se da je sve postalo jasno na temu podvlačenja teksta i linkova u CSS/HTML-u.
