Pseudo-clase și selectori
Pseudo-clasele pentru link-uri există în CSS de mulți ani și în cea mai mare parte ei fac doar o resetare, astfel încât toate acestea să devină aceeași culoare și cu un singur design textual. Utilizarea lor este complet distrusă, iar funcționalitatea potențială este ascunsă.
Prin adăugarea câtorva clase în CSS, puteți crea un meniu sau un formular mult mai profesionist și mai ușor de utilizat. Pseudo-clasele pe care le considerăm astăzi sunt:
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
De asemenea, vă voi arăta cum să combinați selectorii de clasă pentru a crea cazuri speciale de utilizare.
Primul lucru pe care trebuie să-l faceți este să atribuiți stilurile de bază listă de link-uri. M-am limitat la un simplu text albastru pe un fundal gri deschis. De asemenea, am șters în timp ce decorațiunile de text, dar mai târziu le vom adăuga înapoi. Pentru a face legăturile să arate ca butoane, am schimbat ecranul pentru a bloca și a adăugat o frontieră solidă.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
interacțiune
Primul stil pe care îl vom adăuga este când utilizatorul efectuează o operație asupra elementului. Pentru a face acest lucru, aplicăm clasa: hover, aici se schimbă culoarea și culoarea de fundal pentru a arăta utilizatorului ce posedă într-adevăr mouse-ul peste element.
Acum că este clar că suntem deasupra elementului, putem aplica clasa: activă pentru a schimba culoarea culorii, culoarea de fundal a culorii de fundal și decorarea textului pentru decorarea textului cu un clic virtual sau clic pe un element
În exemplul meu HTML, fiecare hyperlink are un atribut ID. Aceasta face posibilă utilizarea clasei țintă pentru a adăuga stiluri suplimentare elementului selectat în mod curent.
În plus, pentru a obține un efect suplimentar, adăugăm o clasă rar utilizată: prima literă. Funcționează numai cu elemente de bloc (pe care le-am aplicat mai devreme) și ne permite să atribuim stiluri primei litere a elementului. Aici aplică o culoare neagră, dar puteți lua un font diferit.
După cum puteți vedea, am combinat și clasele: prima literă și: activă pentru a aplica o culoare diferită atunci când elementul este activ sau mouse-ul este plutind peste el.
Să facem o sută la sută
Pentru ca toate aceste schimbări să coincidă cu adevărat, trebuie să le faceți mai fluide și mai exacte. Pentru a face acest lucru, vom aplica proprietatea de tranziție de tranziție, astfel încât schimbările de culoare să apară treptat în timp. Am determinat durata lor în 0,5 secunde. deoarece tranziția nu ar trebui să fie prea rapidă, dar dacă este prea lentă, nu va arăta atât de eficientă.
Ediție: Comanda webformself.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
