Jak používat CSS ke stylu hypertextových odkazů na webových stránkách

Duben 26, 2024

Pokud jste obeznámeni s HTML, víte, že můžete ovládat barvu textu a hypertextové odkazy na webové stránce. Ale s kaskádovými styly můžete udělat mnohem víc. Některé značky, jako je například kotevní značka hyperlink, mají tzv. Pseudotřídy spojené s různými stavy značky. Například značka hypertextového odkazu má čtyři stavy; odkaz, navštívil, vznášel se a aktivní.

Pokud se odkaz nepoužívá (není vybrán), jedná se o odkaz pseudotřída nebo stát. navštívil stav je po použití odkazu. vznášet se stav je, když myš přejde přes odkaz a aktivní stav je, když kliknete na odkaz. Kouzlo CSS spočívá v tom, že každý stav odkazu je řízen nezávisle prostřednictvím pseudotříd. Můžete tedy nastavit různé vlastnosti pro každý stav. V CSS můžete použít libovolnou vlastnost přidruženou ke značce ukotvení hypertextového odkazu.

V níže uvedeném příkladu nastavíme stav odkazu na červený, navštívený stav na fialový (# 400040), kurzor a aktivní stavy na červený, podtržený a kurzíva.

Poznámka--Šíp

označuje, že kód je zalomen na druhý řádek a měl by být skutečně na jednom řádku.

Jak vidíte, nastavili jsme vlastnost color na červenou pro všechny stavy kromě navštíveného stavu, který jsme nastavili na fialovou. Protože chceme, aby byl hypertextový odkaz podtržen pouze u aktivního a aktivního stavu, u ostatních dvou stavů jsme nastavili vlastnost textové dekorace na žádnou. Nakonec jsme nastavili styl písma na kurzívu pro vznášení a aktivní stavy, které způsobí, že se text stane kurzívou, když přejdete přes nebo kliknete na odkaz, a textovou výzdobu jsme nastavili zpět na podtržení. Toto je pouze jednoduchý příklad. Můžete si vytvořit své styly tak jednoduché nebo fantastické, jak si přejete. Je však třeba si pamatovat několik věcí.

Webové prohlížeče se liší v tom, jak to zvládají. Obvykle, pokud nastavíte vlastnost na určitou hodnotu, bude zděděna (předána) všem stavům uvedeným za ní. V našem příkladu výše byl prvním stavem uvedeným v našem kódu stav propojení a vlastnost color jsme nastavili na červenou. Většinou by to bylo předáno dalším třem státům, pokud jej nezměníme kódem, jako jsme to udělali pro navštívený stát. Také, pokud bychom textovou výzdobu nenastavili zpět na podtržení, text pro vznášející se a aktivní stavy by nebyl podtržen, protože jsme jej v prvním stavu vypnuli. Nemůžete se však spolehnout na všechny prohlížeče. Proto je nejlepší nastavit všechny vlastnosti pro každý stát samostatně.

Při navrhování efektních odkazů neprovádějte mezi stavy velké změny, jako například dramaticky zvýšíte velikost textu. To způsobí, že webový prohlížeč načte stránku znovu a vaši návštěvníci se s vámi velmi rozruší.

Pořadí, ve kterém uvedete kód pro tyto pseudotřídy, je ovlivněno kaskádovým uspořádáním. Kaskádové pořadí probereme v pozdějším tutoriálu. Prozatím si pamatujte, že aby se předešlo konfliktům, kódujte stavy v pořadí, které jsme použili výše; odkaz, navštívil, vznášel se a aktivní.

Video Návody: Úprava rozměru loga při přechodu na responzivní šablonu - Rychlý tip pro e shop rychle (Duben 2024).

Jak používat styl CSS pro hypertextové odkazy Na webových stránkách, HTML, pseudotřídy spojené s různými stavy značky, pseudotřída, hypertextový odkaz, kódování hypertextových odkazů v CSS, pseudotřída CSS, stavy CSS, stav tagu, ozdobné odkazy na webové stránce s CSS, efektními odkazy

Předchozí Článek

Následující Článek

Související Články

počítače

Syntaxe příkazu SQL Select

Duben 2024

Nejběžnější věcí, která se týká ASP, jsou informace uložené v databázi. Zde jsou základy příkazu SQL Select pro získání těchto informací. VÝBĚR pole1, pole2 Z tablename KDE podmínka To je základní...

počítače

Pozice nebo pozice - malý žargon

Duben 2024

Únos (únos)Obecně, únos se vztahuje na pohyb nebo polohu od středu těla. Únos obvykle se odkazuje na velké klouby těla - rameno a bok. To je občas používáno se odkazovat na menší pohyb kloubu. V...