tailieunhanh - html xhtml and css for dummies 7th edition phần 8

Các văn bản liên kết vẫn còn hiện lên trên màn hình bất kể cho dù bạn truy cập các trang liên kết. Hình 16-3 cho thấy cách trang xuất hiện sau khi bạn truy cập vào trang chủ của trang web này. Mặc dù văn bản được chuyển sang màu xám, nó vẫn còn một liên kết | Chapter 16 Fun with Client-Side Scripts 267 Figure 16-2 Moving the cursor over the link text changes the text and background colors. The link text still shows up onscreen regardless of whether you visited the linked page. Figure 16-3 shows how the page appears after you visit this site s home page. Although that text is grayed out it s still a link so rolling over it still produces the same effect shown in Figure 16-2. Listing 16-1 A Text Rollover with CSS DOCTYPE html PUBLIC - W3C DTD XHTML Transitional EN http TR xhtml1 DTD html xmlns http 1999 xhtml head title CSS Text Rollover title meta http-equiv Content-Type content text html charset ISO-8859-1 style type text css h4 font 18pt geneva sans-serif margin 0 color teal background white a text-decoration none div navbar width 200px div navbar a display block margin 0 padding div navbar a link color 008080 background-color transparent div navbar a visited color C0C0C0 background-color transparent div navbar a hover background black color white style head body div id navbar h4 a href Home a h4 h4 a href About Me a h4 div body html In this example we change the text from teal-on-white to white-on-black when the cursor hovers over the link that way it s easy for you to see what s going on in the screenshots. You may want to use a different approach on your site or a different color scheme . The link goes gray after being visited. 268 Part IV Scripting and X HTML Figure 16-3 After you visit a page the link text color shows that the page was visited. Adding this type of navigation to your site couldn t be simpler 1. Within the head tags add the preceding code from Listing 16-1 inside and including the style and style tags. 2. Add links inside individual h4 tags. 3. Make sure that the entire menu is inside a div tag with an id attribute of navbar. If you add the CSS to your site via a link to a site-wide external style sheet see Chapters 9 .