RevenueHits

събота, 2 април 2022 г.

Управление на хипервръзки в CSS3






  1. Премахване на подчертаването на хипервръзките
  2. Задаване на цвят на хипервръзката
  3. Промяна на поведението на курсора














    Ще разгледаме създаването на хипервръзки с помощта на HTML тага <A>. Тагът <A> е типичен представител на inline групата (тези тагове, които заемат толкова място, колкото е необходимо за показване на тяхното съдържание, като след това не се прави преход на нов ред). В тази глава ще разгледаме Псевдокласовете към хипервръзките (:link, :visited и :active), а също и Псевдокласа :hover, явяващ се основа на голяма част от интерактивните ефекти, постигани със CSS.


Премахване на подчертаването на хипервръзките


    Някои от уебдизайнерите умишлено премахват подчертаването на текста, който е и хипервръзка, обикновено от гледна точка на дизайна на страницата. От друга страна, подобна промяна на външния вид обърква потребителя, тъй като той очаква хипервръзката да бъде подчертана и в син цвят.
    Един от най- често използваните начини за премахване на подчертаването на хипервръзките е чрез прилагането на CSS свойството text-decoration със стойност none. Много често едновременно с премахване на подчертаването дизайнерите удебеляват текста. Това от своя страна се реализира с прилагането на CSS свойството text-weight със стойност bold.

Премахване на подчертаването на хипервръзките


<HTML>
<HEAD>
<TITLE>Link decoration</TITLE>
<STYLE type="text/css">
<!--
.modernLink {
text-decoration: none;
text-weight: bold;
}
//-->
</STYLE>
</HEAD>
<BODY>
<A href="http://www.google.ru" class="modernLink">GOOGLE.RU</A>
</BODY>
</HTML>




Задаване на цвят на хипервръзката


    Задаването на цвета на хипервръзката не е никак сложно: с помощта на CSS свойството color можете да зададете цвят на текста (т.е. за HTML тага <A>) или избирателно с помощта на CSS клас, или чрез използване на вътрешни стилови набори (на основа на атрибута style). Последното е най- лесно. CSS предлага псевдокласове, с помощта на които може да прилагате класове в зависимост от това, дали дадената връзка е била посетена:
  • :link- цвят на хипервръзката, ако тя все още не е посетена;
  • :visited- цвят на хипервръзката, ако тя вече е посетена;
  • :active- цвят при активиране на хипервръзката (когато тя се посочи с курсора).
    Алтернатива на тези псевдокласове са атрибутите от HTML- link, vlink, alink на тага <BODY>, позволяващи да се зададе цвят за непосетена, активна и вече посетена хипервръзка.

Задаване на цвят на хипервръзка


<HTML>
    <HEAD>
        <TITLE>Link color</TITLE>
        <STYLE type="text/css">
        <!--
A:link { color: blue; }
A:visited { color: green; }
A:active { color: red; }
-->
</STYLE> </HEAD> <BODY> <A href="http://www.netscape.com/">Netscape</A><BR> <A href="http://www.microsoft.com/">Microsoft</A><BR> </BODY> </HTML>




Промяна на поведението на курсора


    Псевдокласът :hover обикновено се използва за създаване на различни интерактивни ефекти, базирани на промяната на външния вид на елемента, тогава когато курсорът на мишката се намира отгоре.

Нестандартно подчертаване на хипервръзката


<HTML>
    <HEAD>
        <TITLE>Link decoration</TITLE>
        <STYLE type="text/css">
        <!--
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
//-->
</STYLE> </HEAD> <BODY> <A href="http://www.tut.by">TUT.BY</A><BR> <A href="http://www.oz.by">OZ.BY</A> </BODY> </HTML>