CSSでリンクの背景色を変える
課題
【CSS04】
- 画像のような表示になるよう指定しなさい
- 色・文字サイズは自由設定(バランスは考慮すること)
- 解答は、エンベッド
- DTDは各自選択
<body> <ul> <li><a href="#">LINK-link-coral</a></li> <li><a href="#">LINK-visited-turquoise</a></li> <li><a href="#">LINK-hover-skyblue</a></li> <li><a href="#">LINK-active-lawngreen</a></li> </ul> </body>
解答
リンクの背景色 - jsdo.it - share JavaScript, HTML5 and CSS
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>リンクの背景色(擬似クラス)</title> <style type="text/css"> ul { list-style-type: none; } li a { text-decoration: none; font-size: 2.0em; font-weight: bold; color: #ffffff; margin-bottom: 2px; display: block; width: 350px; } li a:link { background-color: #ff7f50; } li a:visited { background-color: #40e0d0; } li a:hover { background-color: #87ceeb; } li a:active { background-color: #7cfc00; } </style> </head> <body> <ul> <li><a href="#">LINK-link-coral</a></li> <li><a href="#">LINK-visited-turquoise</a></li> <li><a href="#">LINK-hover-skyblue</a></li> <li><a href="#">LINK-active-lawngreen</a></li> </ul> </body> </html>