WEB DESIGN GARAGE [Electronic resources] نسخه متنی

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی

Chapter 59. Applying Styles to Hyperlinks

HTML provides a basic set of attributes for controlling the appearance of hyperlinks on your page. These attributes appear in the body tag:


<body link="#0000FF" vlink="#FF00FF" alink="#FF0000">

GEEKSPEAK

An unvisited link is a link to a page that the browser doesn't remember visiting. A visited link is a link to a page that the browser does remember visiting. An active link is a link that the visitor is currently clicking or highlighting.

unvisited link is a link to a page that the browser doesn't remember visiting. The default color of unvisited links is blue. A visited link is a link to a page that the browser does remember visiting. The default color is purple or magenta. Finally, an active link is a link that the visitor is currently clicking. In Internet Explorer, the active-link color also appears when the visitor highlights a link.

pseudo-class is a special addition to the anchor tag that tells the browser to which link state the style rule applies. In Topic 57, you looked at the pseudo-elements first-line and first-letter. Pseudo-classes are similar, but they apply only to the anchor tag at present.

GEEKSPEAK

A pseudo-class is a special addition to the anchor-tag selector that tells the browser to which link state the style rule applies.

The following block of CSS code has the same effect as the attributes in the body tag at the beginning of this topic:


a:link {
color: #0000FF;
}
a:visited {
color: #FF00FF;
}
a:active {
color: #FF0000;
}

Those style rules are just begging to be elaborated. How about setting unvisited links and active links in boldface but leaving visited links in normal type?


a:link {
color: #0000FF;
font-weight: bold;
}
a:visited {
color: #FF00FF;
font-weight: normal;
}
a:active {
color: #FF0000;
font-weight: bold;
}

Figure 59.1 demonstrates these styles. Notice how the boldface helps unvisited links to jump off the page, while visited links seem less important.

Figure 59.1. Use CSS to change more than just the color of the various link states.

[View full size image]

Some sites add a subtle background color around hyperlinks, creating a box effect, as in Figure 59.2

Listing 59.1. View Source for Figure 59.2.


a {
font-weight: bold;
}
/* Each link state has a different background color in these style rules. */
a:link {
color: #0000FF;
background-color: #CCFFFF;
}
a:visited {
color: #FF00FF;
font-weight: normal;
background-color: #CCCCFF;
}
a:active {
color: #FF0000;
background-color: #FFCCCC;
}

Figure 59.2. Add a background-color attribute to the style rule for a link or link state to create a box effect.

[View full size image]

You can also turn off the default underline, as in Figure 59.3.

Listing 59.2. View Source for Figure 59.3.

[View full width]


a {
font-weight: bold;
text-decoration: none;
}
/* You need some sort of visual cue other than just color to designate a hyperlink, so
 these style rules allow boldface for all three states in absence of a hyperlink. */
a:link {
color: #0000FF;
background-color: #CCFFFF;
}
a:visited {
color: #FF00FF;
background-color: #CCCCFF;
}
a:active {
color: #FF0000;
background-color: #FFCCCC;
}

Figure 59.3. Turn off the hyperlink's underline.

[View full size image]

WEB DESIGN GARAGE [Electronic resources] نسخه متنی

فارسی

کردی

العربیه

اردو

Türkçe

Русский

English

Français

کانال فیلم من

تبیان من

فایلهای من

کتابخانه من

پنل پیامکی

وبلاگ من

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی