Notice: Undefined variable: this in /home/dimarini/public_html/libraries/src/Application/CMSApplication.php on line 441

CSS Линкове

Линковете или връзките могат да се форматират по отношение на всяко CSS свойство - например color, font-family, background-color и т.н. Може да се задава различно форматиране в зависимост от състоянието. Четирите състояния са показани по-долу в реда, в който трябва да се появяват когато са няколко:


  • a:link - непосетена връзка
  • a:visited - посетена връзка
  • a:hover - връзка върху която е поставен курсора
  • a:active - връзката в момента на кликване

След като връзката веднъж е посетена ще са в сила свойствата зададени за a:visited. Не трябва да се очудвате защо не се показват свойствата зададени за a:link. В последният пример с клас ".block" е показана комбинация от няколко CSS свойства за показване на връзката като правоътгълник с определени цветове. В секцията "head" е зададен основния адрес на връзката <base href="http://dimarini.net/" /> и показването в нов прозорец <base target="_blanck" /> (виж примера в браузъра)


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>CSS линкове</title>
  <base href="http://dimarini.net/" />
  <base target="_blanck" />
   <style type="text/css">
    aa.one:link {color:#0013EF;}
    a.one:visited {color:#C10029;}
    a.one:hover {color:#ffcc00;}
    a.two:link {color:#176600;}
    a.two:visited{color:#39662B;}
    a.two:hover {font-size:150%;}
    a.three:link {color:#601D00;}
    a.three:visited {color:#008EED;}
    a.three:hover {background:#66ff66;}
    a.four:link {color:#03CE00;}
    a.four:visited {color:#F254A6;}
    a.four:hover {font-family:arial;}
    a.five:link {color:#126E99;text-decoration:none;}
    a.five:visited {color:#0000ff;text-decoration:none;}
    a.five:hover {text-decoration:underline;}
    a.block:link,a.block:visited
      {display:block;
       font-weight:bold;
       color:#2E45DD;
       background-color:#F9F377;
       width:360px;
       text-align:center;
       padding:4px;
       text-decoration:none;}
    a.block:hover
      {color:#ffffff;
       background-color:#2E45DD;
       text-decoration:underline;}
   </style>
 </head>
 <body>
    <p>Поставете курсора върху връзката за да видите промяната.</p>
    <p><strong><a class="one" href="/">Тази връзка променя цвета</a></strong></p>
    <p><strong><a class="two" href="/">Тази връзка променя размера на символите</a></strong></p>
    <p><strong><a class="three" href="/">Тази връзка променя цвета на фона</a></strong></p>
    <p><strong><a class="four" href="/">Тази връзка променя шрифта</a></strong></p>
    <p><strong><a class="five" href="/">Тази връзка променя декорацията</a></strong></p></body>
    <a class="block" href="/" target="_blank">Показване на връзката като правоъгълник</a>
 </body>
</html>