Cum să utilizați CSS pentru a crea legături hiperlink pe paginile Web

Aprilie 28, 2024

Dacă sunteți familiarizat cu HTML, știți că puteți controla culoarea textului și hyperlinkurile de pe o pagină web. Însă, cu foi de tip Cascading, puteți face mult mai multe. Anumite etichete, cum ar fi eticheta de legătură de tip hyperlink au ceea ce se numește pseudo-clase asociate cu diferitele stări ale etichetei. De exemplu, eticheta hyperlink are patru stări; conectați, vizitați, treceți la pas și activ.

Atunci când o legătură nu este utilizată (nu este selectată), aceasta este legătură pseudo-clasă sau stare. vizitat starea este după ce link-ul a fost utilizat. planare starea este când mouse-ul trece peste link și activ starea este când faceți clic pe link. Magia CSS este că fiecare stare a legăturii este controlată independent prin pseudo-clase. Deci, puteți seta diferite proprietăți pentru fiecare stat. Puteți utiliza orice proprietate asociată cu eticheta de ancorizare a hyperlinkului în CSS.

În exemplul de mai jos, vom seta starea legăturii la roșu, starea vizitată la violet (# 400040), cursorul și stările active la roșu, subliniat și italic.

Notă--Sageata

indică faptul că codul este înfășurat într-o a doua linie și ar trebui să fie într-adevăr toate pe o singură linie.

După cum vedeți, am setat proprietatea de culoare pe roșu pentru toate stările, cu excepția stării vizitate, pe care le-am setat pe violet. Deoarece dorim ca hyperlinkul să fie subliniat doar pentru stările pasive și active, am setat proprietatea de decorare text la niciuna pentru celelalte două stări. În cele din urmă, am setat stilul fontului pe italic pentru starea pasivă și activă, ceea ce va face ca textul să devină italic atunci când treceți sau faceți clic pe link și am setat din nou decorarea textului la subliniere. Acesta este doar un exemplu simplu. Puteți face stilurile dvs. la fel de simple sau la fel de fanteziste pe care doriți. Cu toate acestea, există câteva lucruri de reținut.

Navigatoarele web diferă în ceea ce privește modul în care acestea se ocupă. De obicei, dacă setați o proprietate la o anumită valoare, aceasta va fi moștenită de (transmise către) oricărei state enumerate după aceasta. În exemplul nostru de mai sus, prima stare listată în codul nostru a fost starea legăturii și am setat proprietatea de culoare pe roșu. De cele mai multe ori, acest lucru ar fi trecut în celelalte trei state decât dacă îl schimbăm cu cod, așa cum am făcut-o pentru statul vizitat. De asemenea, dacă nu am fi pus din nou sublinierea decorului textului, textul pentru stările pasive și active nu ar fi fost subliniat, deoarece l-am oprit în prima stare. Dar nu poți conta pe toate browserele pentru a face acest lucru. Prin urmare, este mai bine să setați individual toate proprietățile pentru fiecare stat.

Când proiectați link-uri fanteziste, nu faceți schimbări mari între state, cum ar fi creșterea dramatică a dimensiunii textului. Acest lucru va determina browser-ul web să reîncarce pagina, iar vizitatorii dvs. se vor supăra foarte mult cu dvs.

Ordinea în care enumerați codul pentru aceste pseudo-clase este influențată de ordinea în cascadă. Vom discuta despre ordinea cascadei într-un tutorial ulterior. Deocamdată amintiți-vă că pentru a preveni conflictele, codați statele în ordinea în care am folosit mai sus; conectați, vizitați, treceți la pas și activ.

Instrucțiuni Video,: Cum sa faci o Pagina web prin HTML (Aprilie 2024).

Cum se utilizează CSS pentru stilarea hiperlink-urilor pe paginile Web, HTML, pseudo-clase asociate cu diferitele stări ale etichetei, pseudo-clasă, hyperlink, hiperlinkuri de codare în CSS, pseudo-clasă CSS, stări CSS, starea unei etichete, legături fanteziste pe o pagină web cu CSS, link-uri de lux

Articolul Precedent

Articolul Următor

Articole Similare

calculatoare

Probleme de iluminare XBox Kinect

Aprilie 2024

XBox Kinect ne-a luat dreptul când tehnologia a apărut. Ne place - dar poate fi dificil uneori să se aprindă camera corect. Iată câteva sfaturi. Primul lucru pe care trebuie să-l conștientizăm este...

calculatoare

Camera PlayStation 2 Eye Toy

Aprilie 2024

Am fost la o lovitură de gadget săptămâna trecută și mi-am cumpărat o cameră PlayStation 2 Eye Toy. Recunosc că am crezut că ar fi o prostie - dar s-a dovedit a fi uimitor de amuzant! Avem EyeToy...