CSS課題：文字の修飾

自宅課題

【CSS01】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS1</title>
<style Type="text/css"> 
<!--
h1 {
  font-size: 40px;
  color: #009f00;
}
h3 {
  color: #ffffff;
  background-color: #004477;
}
p {
  color: #0000ff;
}
-->
</style>
</head>
<body>
<h1>style要素</h1>
<h3>style element</h3>
<p>HTML文書内にまとめて設定します。</p>
</body>
</html>

【CSS02】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS2</title>
<style type="text/css">
<!--
body {
  background-color: #8fbc8f;
}
h1 {
font-size: 3.0em;  
color: #ffffff;
}
h2 {
  color: white;
  background-color: #885577;
  padding-left: 10px;
}
p {
  font-weight: bold;
  background-color: #eeffcc;
  padding-top: 10px;
  padding-left: 10px;
  line-height: 1.8em;
}
-->
</style>
</head>
<body>
<h1>About wine</h1>
<h2>Chianti Classico Riserva</h2>
<p>1435年創業の由緒あるワイン醸造メーカーの名家マッツェイが所有するぶどう園は、いたるところにローマ時代の遺跡が残る小さな集落にあります。<br>
15世紀から現在に至るまで、キャンティワインの造り手たちの先導者であり続けるマッツェイの歴史は、キャンティワインの歴史といっても過言ではありません。キャンティの最高峰と呼ばれるマッツェイは、もっぱら地元の人のために造られる量り売りを飲んでいたぼくにとって、憧れのワイナリーでした。当時はおじいちゃんになったら飲めるかなと思っていましたが、こうして日本で、ましてや自分の店のリストに加えることができるなんて驚きです。</p>
</body>
</html>

【CSS03】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS3</title>
<style type="text/css">
<!--
li {
  margin-left: 10px;
  font-size: 1.5em;
  list-style: none;
}
a:link {
  color: coral;
}
a:visited {
  color: turquoise;
}
a:hover {
  color: skyblue;
}
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>

【CSS04】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS4</title>
<style type="text/css">
<!--
ul {
  list-style-type: none;
}
li a {
  display: block;
  margin: 2px 0px;
  padding: 2px 10px;
  width : 300px;
  color: white;
  font-size: 1.5em;
  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>
</body>
</html>

【CSS05】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset="UTF-8">
<title>【CSS05】の問題</title>
<style type="text/css">
<!--
h2 {
  color: #ffffff;
  background-color: #0033cc;
  margin: 0;
  padding: 1em;
}
p {
  background-color: #3399ff;
  margin: 0;
  padding: 1em;
}
-->
</style>
</head>
<body>
<h2>background-colorの設定</h2>
<p>見出しには濃いめの色を背景に指定し、文字を白抜きにします。段落には見出しよりも薄い色を指定します。さらに見出しと段落の上下のマージンを0にして、ボックスの上下をくっつけ、パディングを1em指定します。</p>
</body>
</html>

【CSS06】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="ja">
<head>
<title>【CSS06】の問題</title>
<style type="text/css">
<!--
body {
  background-image:url(./img/01.gif);
}
-->
</style>
</head>
<body>
</body>
</html>

【CSS07】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="ja">
<head>
<title>【CSS07】の問題</title>
<style type="text/css">
<!--
body {
  background-image: url(./img/01.jpg);
  background-repeat: repeat-x
}
h1 {
  color: #006699;
  font-family: Times New Roman;
}
-->
</style>
</head>
<body>
<h1>Page Design</h1>
</body>
</html>