Hur man använder CSS för att utforma hyperlänkar på webbsidor
Om du känner till HTML vet du att du kan kontrollera färgen på texten och hyperlänkar på en webbsida. Men med Cascading Style Sheets kan du göra mycket mer. Vissa taggar, såsom hyperlänkarförankringstaggen, har vad som kallas pseudoklasser associerade med taggens olika tillstånd. Exempelvis har hyperlänk-taggen fyra tillstånd; länk, besök, sväv och aktiv.

När en länk inte används (inte vald) är det länk pseudoklass eller stat. De besökt tillstånd är efter att länken har använts. De sväva tillstånd är när musen passerar över länken och aktiva status är när du klickar på länken. Magin med CSS är att varje tillstånd i länken styrs oberoende via pseudoklasser. Så du kan ställa in olika egenskaper för varje tillstånd. Du kan använda valfri egendom som är associerad med hyperlänkarförankringstaggen i CSS.

I exemplet nedan sätter vi länktillståndet till rött, det besökta tillståndet till lila (# 400040), svävaren och de aktiva tillstånden till rött, understruket och kursiv.



Notera--Pilen indikerar att koden är lindad till en andra rad och borde verkligen ligga på en rad.

Som ni ser har vi satt färgegenskapen till röd för alla stater utom för det besökta tillståndet, som vi har satt till lila. Eftersom vi bara vill att hyperlänken ska betonas för muspekaren och aktiva tillstånd har vi ställt in textdekorationsegenskapen till ingen för de andra två tillstånden. Slutligen har vi ställt in teckensnittet på kursiv för muspekaren och aktiva tillstånd, vilket får texten att bli kursiv när du passerar eller klickar på länken, och vi har satt textdekorationen tillbaka till att understryka. Detta är bara ett enkelt exempel. Du kan göra dina stilar så enkla eller så snygga som du vill. Det finns dock några saker att komma ihåg.

Webbläsare skiljer sig åt hur de hanterar detta. Vanligtvis, om du ställer in en egenskap till ett visst värde, kommer den att ärvas av (vidarebefordras till) alla stater som listas efter den. I vårt exempel ovan var det första tillståndet i vår kod länkstillståndet och vi ställde in färgegenskapen till röd. Det mesta av tiden skulle detta överföras till de andra tre staterna såvida vi inte ändrar det med kod, som vi gjorde för den besökta staten. Om vi ​​inte hade satt textdekorationen tillbaka till att understryka, skulle texten för svävaren och aktiva tillstånd inte ha betonats eftersom vi stängde av den i första tillståndet. Men du kan inte räkna med att alla webbläsare gör det. Därför är det bäst att ställa in alla egenskaper för varje tillstånd individuellt.

När du utformar snygga länkar, gör inte stora förändringar mellan stater som att göra att textstorleken ökar dramatiskt. Detta kommer att göra att webbläsaren laddar om sidan och dina besökare blir mycket upprörda över dig.

Ordningen i vilken du anger koden för dessa pseudoklasser påverkas av kaskadordningen. Vi kommer att diskutera kaskadordningen i en senare handledning. För nu ska du bara komma ihåg att för att förhindra konflikter kodar du staterna i den ordning vi använde ovan. länk, besök, sväv och aktiv.





Video Instruktioner: CSS - Ändra stil på hela sidan i sidhuvudet (Mars 2024).