A CSS stílusának linkjei

Styling Links

Linkek lehet stílusú bármely CSS tulajdonság, például color, font-family, font-sizeés padding. Itt van egy egyszerű példa:

a { color: hotpink; }

Ezenkívül a linkek különböző stílusúak lehetnek attól függően, hogy milyen állapotban vannak.

A linkeknek szintén 4 állapota van, és sok programozó az egyes állapotokat másként stílusozza. A négy állapot:

  • a:link: nem látogatott, nem kattintott link
  • a:visited: egy meglátogatott, kattintott link
  • a:hover: egy link, amikor a felhasználó egere fölött van
  • a:active: egy link, amikor rákattintanak

A tulajdonság felelős az URL-ek létrehozásáért, és számos CSS-stílus tulajdonság segítségével módosítható, bár alapértelmezés szerint kevéssel rendelkezik:

  1. Aláhúzás
  2. Kék szín

Ezeket a colorés a text-decorationtulajdonságok módosításával adhatja meg .

 color: black; text-decoration: none;

A linket interakció alapján is stílusozhatja a következő tulajdonságokkal, más néven link állapotokkal:

  • a: link - normál, nem látogatott link
  • a: meglátogatott - egy link, amelyet a felhasználó meglátogatott
  • a: hover - egy hivatkozás, amikor a felhasználó fölé húz
  • a: aktív - egy link a kattintás pillanatában

Itt van néhány minta CSS a 4 állapot felhasználásával:

a:link { color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: blue; }

Vegye figyelembe , hogya hivatkozási állapotok stílusának beállításakorvannak bizonyos sorrendszabályok .

  • a:hoverGYERE után a:linkésa:visited

a:active KELL jönni a:hover

a: link - normál, nem látogatott link a: meglátogatott - egy link, amelyet a felhasználó meglátogatott: hover - egy link, amikor a felhasználó fölé húzza a: aktív - egy link, amikor rákattintanak

/* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; } 

További információ a CSS stílusáról:

  • HTML-címke stílusának megadása közvetlenül a CSS-ben
  • Hogyan lehet listákat stílusozni CSS-sel
  • A gombok stílusának megadása CSS-sel