<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体选用</title>
<style type="text/css">
body{
font-family: Georgia,Times,Serif;}
h1,h2{
font-family: Arial,Verdana,sans-serif;}
.credits{
font-family: "Courier New", Courier,monospace;}
</style>
</head>
<body>
<h1>Briards</h1>
<p class="credits">by Ivy Duckett</p>
<p class="intro">The<a class="breed" href="http://en.wikipedia.org/wiki/Briard">
briard</a>, or berger de brie, is a large breed of dog
traditionally used as a herder and guardian of sheep.</p>
<h2>Breed History</h2>
<p>The briard, which is believed to have originated in France,
has been bred for centuries to herd and to protect sheep.
The breed was used by the French Army as sentries,
messengers and to search for wounded soldiers because of its fine sense of hearing.
Briards were used in the First World War almost to the point of extinction.
Currently the population of briards is slowly recovering.
Charlemagne, Napoleon, Thomas Jefferson and Lafayette all owned briards.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体大小</title>
<style type="text/css">
body{
font-family: Arial, Verdana, sans-serif;
font-size: 12px;}
h1{
font-size: 200%;}
h2{
font-size: 1.3em;}
</style>
</head>
<body>
<h1>Briards</h1>
<p class="credits">by Ivy Duckett</p>
<p class="intro">The <a class="breed" href="http://en.wikipedia.org/wiki/Briard">briard</a>, or berger de brie,
is a large breed of dog traditionally used as a herder and guardian of sheep.</p>
<h2>Breed History</h2>
<p>The briard, which is believed to have originated in France,
has been bred for centuries to herd and to protect sheep.
The breed was used by the French Army as sentries,
messengers and to search for wounded soldiers because of its fine sense of hearing.
Briards were used in the First World War almost to the point of extinction.
Currently the population of briards is slowly recovering. Charlemagne,
Napoleon, Thomas Jefferson and Lafayette all owned briards.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择更多字体</title>
<style type="text/css">
@font-face {
font-family: ‘ChunkFiveRegular‘;
src: url(‘fonts/chunkfive.eot‘);}
h1,h2{
font-family: ChunkFiveRegular, Georgia, serif;}
</style>
</head>
<body>
<h1>Briards</h1>
<p class="credits">by Ivy Duckett</p>
<p class="intro">The <a class="breed" href="http://en.wikipedia.org/wiki/Briard">briard</a>,
or berger de brie, is a large breed of dog traditionally used as a herder and guardian of sheep.</p>
<h2>Breed History</h2>
<p>The briard, which is believed to have originated in France,
has been bred for centuries to herd and to protect sheep.
The breed was used by the French Army as sentries, messengers
and to search for wounded soldiers because of its fine sense
of hearing. Briards were used in the First World War almost to the point of extinction
. Currently the population of briards is slowly recovering.
Charlemagne, Napoleon, Thomas Jefferson and Lafayette all owned briards.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体格式</title>
<style type="text/css">
@font-face {
font-family: ‘ChunkFiveRegular‘;
src: url(‘fonts/chunkfive.eot‘);
src: url(‘fonts/chunkfive.eot?#iefix‘) format(‘embedded-opentype‘),
url(‘fonts/chunkfive.woff‘) format(‘woff‘),
url(‘fonts/chunkfive.ttf‘) format(‘truetype‘),
url(‘fonts/chunkfive.svg#ChunkFiveRegular‘) format(‘svg‘);}
h1,h2{font-family: ChunkFiveRegular, Georgia, Serif;}
</style>
</head>
<body>
<h1>Briards</h1>
<p class="credits">by Ivy Duckett</p>
<p class="intro">The <a class="breed" href="http://en.wikipedia.org/wiki/Briard">briard</a>,
or berger de brie, is a large breed of dog traditionally used as a herder and guardian of sheep.</p>
<h2>Breed History</h2>
<p>The briard, which is believed to have originated in France,
has been bred for centuries to herd and to protect sheep.
The breed was used by the French Army as sentries,
messengers and to search for wounded soldiers because of its fine sense of hearing.
Briards were used in the First World War almost to the point of extinction.
Currently the population of briards is slowly recovering. Charlemagne,
Napoleon, Thomas Jefferson and Lafayette all owned briards.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>粗体</title>
<style type="text/css">
.credits{
font-weight: bold;}
</style>
</head>
<body>
<h1>Briards</h1>
<p class="credits">by Ivy Duckett</p>
<p class="intro">The <a class="breed" href="http://en.wikipedia.org/wiki/Briard">briard</a>,
or berger de brie, is a large breed of dog traditionally used as a herder and guardian of sheep.</p>
<h2>Breed History</h2>
<p>The briard, which is believed to have originated in France,
has been bred for centuries to herd and to protect sheep.
The breed was used by the French Army as sentries,
messengers and to search for wounded soldiers because of its fine sense of hearing.
Briards were used in the First World War almost to the point of extinction.
Currently the population of briards is slowly recovering. Charlemagne,
Napoleon, Thomas Jefferson and Lafayette all owned briards.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>斜体</title>
<style type="text/css">
.credits{
font-style: italic;}
</style>
</head>
<body>
<h1>Briards</h1>
<p class="credits">by Ivy Duckett</p>
<p class="intro">The <a class="breed" href="http://en.wikipedia.org/wiki/Briard">briard</a>,
or berger de brie, is a large breed of dog traditionally used as a herder and guardian of sheep.</p>
<h2>Breed History</h2>
<p>The briard, which is believed to have originated in France,
has been bred for centuries to herd and to protect sheep.
The breed was used by the French Army as sentries,
messengers and to search for wounded soldiers because of its fine sense of hearing.
Briards were used in the First World War almost to the point of extinction.
Currently the population of briards is slowly recovering. Charlemagne,
Napoleon, Thomas Jefferson and Lafayette all owned briards.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大写和小写</title>
<style type="text/css">
h1{
text-transform: uppercase;}
h2{
text-transform: lowercase;}
.credits{
text-transform: capitalize;}
</style>
</head>
<body>
<h1>Briards</h1>
<p class="credits">by Ivy Duckett</p>
<p class="intro">The <a class="breed" href="http://en.wikipedia.org/wiki/Briard">briard</a>,
or berger de brie, is a large breed of dog traditionally used as a herder and guardian of sheep.</p>
<h2>Breed History</h2>
<p>The briard, which is believed to have originated in France,
has been bred for centuries to herd and to protect sheep.
The breed was used by the French Army as sentries,
messengers and to search for wounded soldiers because of its fine sense of hearing.
Briards were used in the First World War almost to the point of extinction.
Currently the population of briards is slowly recovering. Charlemagne,
Napoleon, Thomas Jefferson and Lafayette all owned briards.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下划线和删除线</title>
<style type="text/css">
.credits{
text-decoration: underline;}
a{
text-decoration: none;}
h2{
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>Briards</h1>
<p class="credits">by Ivy Duckett</p>
<p class="intro">The <a class="breed" href="http://en.wikipedia.org/wiki/Briard">briard</a>,
or berger de brie, is a large breed of dog traditionally used as a herder and guardian of sheep.</p>
<h2>Breed History</h2>
<p>The briard, which is believed to have originated in France,
has been bred for centuries to herd and to protect sheep.
The breed was used by the French Army as sentries,
messengers and to search for wounded soldiers because of its fine sense of hearing.
Briards were used in the First World War almost to the point of extinction.
Currently the population of briards is slowly recovering. Charlemagne,
Napoleon, Thomas Jefferson and Lafayette all owned briards.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行间距</title>
<style type="text/css">
p{
line-height: 1.4em;}
</style>
</head>
<body>
<h1>Briards</h1>
<p class="credits">by Ivy Duckett</p>
<p class="intro">The <a class="breed" href="http://en.wikipedia.org/wiki/Briard">briard</a>,
or berger de brie, is a large breed of dog traditionally used as a herder and guardian of sheep.</p>
<h2>Breed History</h2>
<p>The briard, which is believed to have originated in France,
has been bred for centuries to herd and to protect sheep.
The breed was used by the French Army as sentries,
messengers and to search for wounded soldiers because of its fine sense of hearing.
Briards were used in the First World War almost to the point of extinction.
Currently the population of briards is slowly recovering. Charlemagne,
Napoleon, Thomas Jefferson and Lafayette all owned briards.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字母间距和单词间距</title>
<style type="text/css">
h1,h2{
text-transform: uppercase;
letter-spacing: 0.2em;}
.credits{
font-weight: bold;
word-spacing: 1em;}
</style>
</head>
<body>
<h1>Briards</h1>
<p class="credits">by Ivy Duckett</p>
<p class="intro">The <a class="breed" href="http://en.wikipedia.org/wiki/Briard">briard</a>,
or berger de brie, is a large breed of dog traditionally used as a herder and guardian of sheep.</p>
<h2>Breed History</h2>
<p>The briard, which is believed to have originated in France,
has been bred for centuries to herd and to protect sheep.
The breed was used by the French Army as sentries,
messengers and to search for wounded soldiers because of its fine sense of hearing.
Briards were used in the First World War almost to the point of extinction.
Currently the population of briards is slowly recovering. Charlemagne,
Napoleon, Thomas Jefferson and Lafayette all owned briards.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对齐方式</title>
<style type="text/css">
h1{
text-align: left;}
p{
text-align: justify}
.credits{
text-align: right;}
</style>
</head>
<body>
<h1>Briards</h1>
<p class="credits">by Ivy Duckett</p>
<p class="intro">The <a class="breed" href="http://en.wikipedia.org/wiki/Briard">briard</a>,
or berger de brie, is a large breed of dog traditionally used as a herder and guardian of sheep.</p>
<h2>Breed History</h2>
<p>The briard, which is believed to have originated in France,
has been bred for centuries to herd and to protect sheep.
The breed was used by the French Army as sentries,
messengers and to search for wounded soldiers because of its fine sense of hearing.
Briards were used in the First World War almost to the point of extinction.
Currently the population of briards is slowly recovering. Charlemagne,
Napoleon, Thomas Jefferson and Lafayette all owned briards.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直对齐</title>
<style type="text/css">
#six-months{
vertical-align: text-top;}
#one-year{
vertical-align: baseline;}
#two-years{
vertical-align: text-bottom;}
</style>
</head>
<body>
<h1>Briard Life stages</h1>
<p><img src="images/six-months.gif" width="50" height="50" alt="Six months"
id="six-months"/>Six months </p>
<p><img src="images/one-year.gif" width="50" height="50" alt="One year"
id="one-year"/>One year</p>
<p><img src="images/two-years.gif" width="50" height="50" alt="Two years"
id="two-years">Two years</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本缩进</title>
<style type="text/css">
h1{
background-image: url("images/logo.gif");
background-repeat: no-repeat;
text-indent: -9999px;
width: 165px;
height: 100px}
.credits{
text-indent: 20px;}
</style>
</head>
<body>
<h1>Briards</h1>
<p class="credits">by Ivy Duckett</p>
<p class="intro">The <a class="breed" href="http://en.wikipedia.org/wiki/Briard">briard</a>, or berger de brie,
is a large breed of dog traditionally used as a herder and guardian of sheep.</p>
<h2>Breed History</h2>
<p>The briard, which is believed to have originated in France,
has been bred for centuries to herd and to protect sheep.
The breed was used by the French Army as sentries,
messengers and to search for wounded soldiers because of its fine sense of hearing.
Briards were used in the First World War almost to the point of extinction.
Currently the population of briards is slowly recovering. Charlemagne,
Napoleon, Thomas Jefferson and Lafayette all owned briards.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3：投影</title>
<style type="text/css">
p{
font-size: 200%;
padding: 20px;
text-align: center;}
p.one{
background-color: #eeeeee;
color: #666666;
text-shadow: 1px 1px 0px #000000;}
p.two{
background-color: #dddddd;
color: #666666;
text-shadow: 1px 1px 3px #666666;}
p.three{
background-color: #cccccc;
color: #ffffff;
text-shadow: 2px 2px 7px #111111;}
p.four{
background-color: #bbbbbb;
color: #cccccc;
text-shadow: -1px -2px #666666;}
p.five{
background-color: #aaaaaa;
color: #ffffff;
text-shadow: -1px -1px #666666;}
</style>
</head>
<body>
<p class="one">The briard is known as a heart wrapped in fur.</p>
<p class="two">The briard is known as a heart wrapped in fur.</p>
<p class="three">The briard is known as a heart wrapped in fur.</p>
<p class="four">The briard is known as a heart wrapped in fur.</p>
<p class="five">The briard is known as a heart wrapped in fur.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首字母或首行文本</title>
<style type="text/css">
p.intro:first-letter{
font-size: 200%;}
p.intro:first-line{
font-weight: bold;}
</style>
</head>
<body>
<h1>Briards</h1>
<p class="credits">by Ivy Duckett</p>
<p class="intro">The <a class="breed" href="http://en.wikipedia.org/wiki/Briard">briard</a>,
or berger de brie, is a large breed of dog traditionally used as a herder and guardian of sheep.</p>
<h2>Breed History</h2>
<p>The briard, which is believed to have originated in France,
has been bred for centuries to herd and to protect sheep.
The breed was used by the French Army as sentries,
messengers and to search for wounded soldiers because of its fine sense of hearing.
Briards were used in the First World War almost to the point of extinction.
Currently the population of briards is slowly recovering. Charlemagne,
Napoleon, Thomas Jefferson and Lafayette all owned briards.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接样式</title>
<style type="text/css">
a:link{
color: deeppink;
text-decoration: none;}
a;visited{
color: black;}
a:hover{
color: deeppink;
text-decoration: underline;}
a:active{
color: darkcyan;}
</style>
</head>
<body>
<h1>Dog Breeds: <span style="color: deeppink;">B</span></h1>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Basset_Hound">Basset Hound</a></li>
<li><a href="http://en.wikipedia.org/wiki/Beagle">Beagle</a></li>
<li><a href="http://en.wikipedia.org/wiki/Bearded_Collie">Bearded Collie</a></li>
<li><a href="http://en.wikipedia.org/wiki/Beauceron">Beauceron</a></li>
<li><a href="http://en.wikipedia.org/wiki/Bedlington_Terrier">Bedlington Terrier</a></li>
<li><a href="http://en.wikipedia.org/wiki/Belgian_Shepherd_Dog_(Groenendael)">Belgian Shepherd</a></li>
<li><a href="http://en.wikipedia.org/wiki/Bergamasco_Shepherd">Bergamasco</a></li>
<li><a href="http://en.wikipedia.org/wiki/Bichon_Fris?>Bichon Frise</a></li>
<li><a href="http://en.wikipedia.org/wiki/Bloodhound">Bloodhound</a></li>
<li><a href="http://en.wikipedia.org/wiki/Bolognese_(dog)">Bolognese</a></li>
<li><a href="http://en.wikipedia.org/wiki/Border_Collie">Border Collie</a></li>
<li><a href="http://en.wikipedia.org/wiki/Border_Terrier">Border Terrier</a></li>
<li><a href="http://en.wikipedia.org/wiki/Borzoi">Borzoi</a></li>
<li><a href="http://en.wikipedia.org/wiki/Bouvier_des_Flandres">Bouvier des Flandres</a></li>
<li><a href="http://en.wikipedia.org/wiki/Briard">Briard</a></li>
<li><a href="http://en.wikipedia.org/wiki/Bull_Terrier">Bull Terrier</a></li>
<li><a href="http://en.wikipedia.org/wiki/Bulldog">Bulldog</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应用户</title>
<style type="text/css">
input{
padding: 6px 12px 6px 12px;
border: 1px solid #665544;
color: #ffffff;}
input.submit:hover{
background-color: #665544;}
input.submit:active{
background-color: chocolate;}
input.text{
color: #cccccc;}
inout.text:focus{
color:#665544;}
</style>
</head>
<body>
<form>
<input type="text" class="text" value="Enter email address..." />
<input type="submit" class="submit" />
</form>
</body>
</html>
