EXERSICE CSS09/背景画像と枠線

課題 CSS 

<body>
<h1>Page Design</h1>
<p>背景に色数を減らした画像を用意します。背景画像は、縦方向び繰り返しを指定しています。<br>
また、見出しの文字は、大きく、インパクトの強い色を指定し、目を引くようにしています。<br>
このように、やり方次第でデザインの幅が広がります。いろいろ試してみましょう。</p>
</body>

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>背景画像と枠線[CSS09]</title>
<style type="text/css">
<!--
body {
	margin: 0;
	background-color: #FFF;
	font-family: sans-serif;
	background-image: url("20120415210237-1.jpg");
	background-repeat: repeat-y;
	width: 520px;
}
h1 {
	color: darkred;
	border-bottom: dashed 4px #999;
}
p {
	color: #000;
}
h1,p { 
 　 padding: 5px 20px;
　　margin-left: 70px;
}
-->
</style>
</head>
<body>
<h1>Page Design</h1>
<p>背景に色数を減らした画像を用意します。背景画像は、縦方向び繰り返しを指定しています。<br>
また、見出しの文字は、大きく、インパクトの強い色を指定し、目を引くようにしています。<br>
このように、やり方次第でデザインの幅が広がります。いろいろ試してみましょう。</p>
</body>
</html>


border-bottom
下ボーダーのスタイル・太さ・色を指定する

  • border-bottom: dashed; 破線で表示

参考→　CSSまとめ 01