CSS
リンクの文字色(擬似クラス)
【以下のような表示を作りなさい】
<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>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>:link, :visited, :hover, :active</title> <style> ul { list-style-type: none; } li a { font-size: 1.6em; font-weight: bold; } li a:link { color: coral; } li a:visited { color: turquoise; } li a:hover { color: skyblue; } li a:active { color: lawngreen; } </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>
リンクの背景色(擬似クラス)
【以下のような表示を作りなさい】
<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>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>:link, :visited, :hover, :active</title> <style> ul { list-style-type: none; } li a { display: block; color: white; font-size: 1.5em; font-weight: bold; width: 300px; padding: 2px 10px; margin: 2px 0px; text-decoration: none; } li a:link { background-color: coral; } li a:visited { background-color: turquoise; } li a:hover { background-color: skyblue; } li a:active { background-color: lawngreen; } </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> </html>
背景色と余白
【以下のような表示を作りなさい】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>background-color</title> <style> * { margin: 0; padding: 0; } h2 { color: #FFF; font-size: 1.0em; background-color: #1565b5; } p { font-size: 0.875em; line-height: 1.2; background-color: #bdd4eb; } h2,p { padding: 1.0em; } </style> </head> <body> <h2>background-colorの設定</h2> <p>見出しには濃いめの色を背景に指定し、文字を白抜きにします。段落には見出しよりも薄い色を指定します。さらに見出しと段落の上下のマージンを0にして、ボックスの上下をくっつけ、パディングを1em指定します。</p> </body> </html>
背景画像を設定
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>background-repeat</title> <style> body { background-image: url("img/bee.gif"); } </style> </head> <body> <p>背景画像がタイル状に表示されます。</p> </body> </html>
背景画像を設定(水平方向に繰り返し)
↓↓↓
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>background-repeat</title> <style> body { background-image:url("img/line1.jpg"); background-repeat:repeat-x; } h1 { color: #30647A; font-family:serif; } </style> </head> <body> <h1>Page Design</h1> </body> </html>
【background-repeat:repeat-x;】を【repeat-y】にすると、縦にリピート。