в 09:21, 26 мая 2010

2010-05-26T09:21:00Z

Admin: 1 версия

2010-05-26T08:16:52Z

1 версия

Новая страница

==Add background image to title text==



<source lang="html4strict">

<!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="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Headings</title>
<style type="text/css" media="screen">
body{
font-size: 12px;
}

#divID h1 {
font-size: 24px;
color: #369;
padding-bottom: 14px;
background: url(gradient.gif) repeat-x bottom;
}

</style>
</head>
<body>
<div id="divID">
<h1>This is the Title of this page.</h1>
</div>
</body>
</html>
</source>

==Add border line to title text==



<source lang="html4strict">

<!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="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Headings</title>
<style type="text/css" media="screen">
#divID h1 {
color: #369;
padding-bottom: 4px;
border-bottom: 1px solid #999;
}
</style>
</head>
<body>
<div id="divID">
<h1>This is the Title of this page.</h1>
</div>
</body>
</html>
</source>

==Add no repeat icon to title text==



<source lang="html4strict">

<!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="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Headings</title>
<style type="text/css" media="screen">
body{
font-size: 12px;
}

#divID h1 {
font-size: 24px;
color: #369;
padding-left: 30px;
background: url(icon.gif) no-repeat 0 50%;
}

</style>
</head>
<body>
<div id="divID">
<h1>This is the Title of this page.</h1>
</div>
</body>
</html>
</source>

==Align title to the center==



<source lang="html4strict">

<!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="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="screen">
div {
margin: 30px;
padding: 30px;
border: 1px solid #ccc;
font-size: small;
}
#divID {
line-height: 1.5em;
text-align: justify;
}

#divID h1 {
letter-spacing: 4px;
font-style: italic;
text-align: center;
}

#divID .drop {
float: left;
font-size: 400%;
line-height: 1em;
margin: 4px 10px 10px 0;
padding: 4px 10px;
border: 2px solid #ccc;
background: #eee;
}

</style>
</head>
<body>
<div id="divID">
<h1>This is the header</h1>
<p><span class="drop">T</span>his is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
</p>
<p>This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
</p>
</div>
</body>
</html>
</source>

==Change title font style for titled section==



<source lang="html4strict">

<!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="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="screen">

div {
margin: 30px;
padding: 30px;
border: 1px solid #ccc;
font-size: small;
}
#divID {
font-family: Georgia, Times, serif;
line-height: 1.5em;
}

#divID h1 {
letter-spacing: -2px;
font-style: italic;
}
</style>
</head>
<body>
<div id="divID">
<h1>This is the header</h1>
<p>This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
</p>
<p>This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
</p>
</div>
</body>
</html>
</source>

==Letter drop for titled section==



<source lang="html4strict">

<!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="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="screen">

div {
margin: 30px;
padding: 30px;
border: 1px solid #ccc;
font-size: small;
}
#divID {
line-height: 1.5em;
}

#divID h1 {
letter-spacing: -2px;
font-style: italic;
}
#divID .drop {
float: left;
font-size: 400%;
line-height: 1em;
margin: 4px 10px 10px 0;
padding: 4px 10px;
border: 2px solid #ccc;
background: #eee;
}

</style>
</head>
<body>
<div id="divID">
<h1>This is the header</h1>
<p><span class="drop">T</span>his is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
</p>
<p>This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
</p>
</div>
</body>
</html>
</source>

==Paragraph indent for titled section==



<source lang="html4strict">

<!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="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="screen">

div {
margin: 30px;
padding: 30px;
border: 1px solid #ccc;
font-size: small;
}
#divID {
line-height: 1.5em;
text-align: justify;
}

#divID h1 {
letter-spacing: 4px;
font-style: italic;
text-align: center;
font-variant: small-caps;
}

#divID p {
text-indent: 3em;
}

</style>
</head>
<body>
<div id="divID">
<h1>This is the header</h1>
<p>This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
</p>
<p>This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
</p>
</div>
</body>
</html>
</source>

==Set font family for titled section==



<source lang="html4strict">

<!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="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="screen">

div {
margin: 30px;
padding: 30px;
border: 1px solid #ccc;
font-size: small;
}
#divID {
line-height: 1.5em;
}

</style>
</head>
<body>
<div id="divID">
<h1>This is the header</h1>
<p>This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
</p>
<p>This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
</p>
</div>
</body>
</html>
</source>

==Set line height for titled section==



<source lang="html4strict">

<!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="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="screen">

div {
margin: 30px;
padding: 30px;
border: 1px solid #ccc;
font-size: small;
}
#divID {
line-height: 1.5em;
}

</style>
</head>
<body>
<div id="divID">
<h1>This is the header</h1>
<p>This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
</p>
<p>This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
</p>
</div>
</body>
</html>
</source>

==Set title letter space for titled section==



<source lang="html4strict">

<!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="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="screen">

div {
margin: 30px;
padding: 30px;
border: 1px solid #ccc;
font-size: small;
}
#divID {
font-family: Georgia, Times, serif;
line-height: 1.5em;
}

#divID h1 {
letter-spacing: -2px;
}

</style>
</head>
<body>
<div id="divID">
<h1>This is the header</h1>
<p>This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
</p>
<p>This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
</p>
</div>
</body>
</html>
</source>

==Set title size to small-caps==



<source lang="html4strict">

<!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="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="screen">
div {
margin: 30px;
padding: 30px;
border: 1px solid #ccc;
font-size: small;
}

#divID {
line-height: 1.5em;
text-align: justify;
}

#divID h1 {
letter-spacing: 4px;
font-style: italic;
text-align: center;
font-variant: small-caps;
}

#divID .drop {
float: left;
font-size: 400%;
line-height: 1em;
margin: 4px 10px 10px 0;
padding: 4px 10px;
border: 2px solid #ccc;
background: #eee;
}

</style>
</head>
<body>
<div id="divID">
<h1>This is the header</h1>
<p><span class="drop">T</span>his is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
</p>
<p>This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
</p>
</div>
</body>
</html>
</source>

==Text transformation for title==



<source lang="html4strict">

<!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="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="screen">
div {
margin: 30px;
padding: 30px;
border: 1px solid #ccc;
font-size: small;
}
#divID {
line-height: 1.5em;
text-align: justify;
}

#divID h1 {
letter-spacing: 4px;
font-style: italic;
text-align: center;
text-transform: uppercase;
}

#divID .drop {
float: left;
font-size: 400%;
line-height: 1em;
margin: 4px 10px 10px 0;
padding: 4px 10px;
border: 2px solid #ccc;
background: #eee;
}

</style>
</head>
<body>
<div id="divID">
<h1>This is the header</h1>
<p><span class="drop">T</span>his is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
</p>
<p>This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
</p>
</div>
</body>
</html>
</source>

==Titled section with justified alignment==



<source lang="html4strict">

<!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="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="screen">
div {
margin: 30px;
padding: 30px;
border: 1px solid #ccc;
font-size: small;
}
#divID {
line-height: 1.5em;
text-align: justify;
}

#divID h1 {
letter-spacing: 4px;
font-style: italic;
}

#divID .drop {
float: left;
font-size: 400%;
line-height: 1em;
margin: 4px 10px 10px 0;
padding: 4px 10px;
border: 2px solid #ccc;
background: #eee;
}
</style>
</head>
<body>
<div id="divID">
<h1>This is the header</h1>
<p><span class="drop">T</span>his is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
</p>
<p>This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
</p>
</div>
</body>
</html>
</source>

==Title format: font-family: Arial, sans-serif;color: #369;==



<source lang="html4strict">

<!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="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Headings</title>
<style type="text/css" media="screen">
body{
font-family: verdana, sans-serif;
font-size: 12px;
}

#divID h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
}

</style>
</head>
<body>
<div id="divID">
<h1>This is the Title of this page.</h1>
</div>
</body>
</html>
</source>

==Title section==



<source lang="html4strict">

<!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="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="screen">

div {
margin: 30px;
padding: 30px;
border: 1px solid #ccc;
font-size: small;
}
</style>
</head>
<body>
<div id="divID">
<h1>This is the header</h1>
<p>This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
</p>
<p>This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
</p>
</div>
</body>
</html>
</source>

==Underlined title==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-/pp/W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body {
width: 200px;
}
h1::first-letter, p::first-letter {
text-transform: capitalize;
}
h1 {
text-align: center;
text-decoration: underline;
}
p {
text-indent: 25px;
text-align: justify;
letter-spacing: 1px;
word-spacing: 5px;
}

</style>
</head>
<body>
<h1>This is the title.</h1>
<p>This is a test. This is a test. This is a test. </p>
<p>This is a test. This is a test. </p>
<p>This is a test. </p>
</body>
</html>
</source>

==Use background to highlight title text==



<source lang="html4strict">

<!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="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Headings</title>
<style type="text/css" media="screen">
#divID h1 {
font-size: 24px;
color: #fff;
padding: 4px;
background: #696;
}
</style>
</head>
<body>
<div id="divID">
<h1>This is the Title of this page.</h1>
</div>
</body>
</html>
</source>

← Предыдущая	Версия 09:21, 26 мая 2010
(нет различий)

HTML/CSS/CSS Controls/Title section - История изменений

в 09:21, 26 мая 2010

Admin: 1 версия