HTML/CSS/CSS Controls/Logic section
Содержание
CSS Positioning
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CSS Positioning</title>
<style rel="stylesheet" type="text/css">
body {
background-color: #ccc;
}
div.header {
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 14%;
background-color: #f2f2f2;
border-style: solid;
border-width: 1px;
border-color: #000000;
}
div.nav {
position: absolute;
left: 5%;
top: 20%;
width: 15%;
font-weight: bold;
background-color: #ffffff;
padding-top: 25px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
border-style: solid;
border-width: 1px;
border-color: #000000;
}
div.page {
position: absolute;
left: 25%;
top: 20%;
width: 70%;
height: 60%;
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-color: #000000;
z-index: 5;
}
h2 {
position: relative;
top: 10px;
left: 10px;
}
span.pullQuote {
float: right;
width: 100px;
padding: 10px;
margin: 6px;
font-size: 11px;
font-weight: bold;
border-style: solid;
border-width: 1px;
border-color: #000000;
background-color: #efefef;
}
div.bottom {
position: absolute;
bottom: 3%;
width: 90%;
height: 8%;
margin-left: 5%;
margin-right: 5%;
text-align: right;
padding-right: 5px;
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-color: #000000;
}
</style>
</head>
<body>
<div class="header"><h1>CSS Demonstration</h1></div>
<div class="nav">
CSS Resources<br />
<a href="">W3C</a><br />
<a href="">G</a><br />
<a href="">N</a><br />
</div>
<div class="page">
<h2>Here is a Heading</h2>
<p class="Article">
<span class="pullQuote">a<BR/>s<BR/>d<BR/>f<BR/></span>
</p>
</div>
<div class="bottom"><a href="">Next Page</a></div>
</body>
</html>
Header block border
<!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" />
<title></title>
<style type="text/css" title="text/css">
p {
font-size: 80%;
line-height: 1.4em;
padding-left: 2.5em;
margin-top: 0;
margin-bottom: 1em;
}
h1,h2 {
color: #666666;
margin: 0 0 10px 0;
border-left: 1.2em solid #cccccc;
padding: 0 0 0 10px;
}
h1 {
font-size: 120%;
}
h2 {
font-size: 120%;
}
h3 {
margin: 0 0 5px 0;
font-size: 90%;
color: #555555;
font-weight: bold;
padding-left: 2.25em;
}
</style>
</head>
<body>
<h1>Article heading</h1>
<p>this is a test. this is a test. this is a test. </p>
<h2>this is header 2</h2>
<p>this is a test. this is a test. this is a test. </p>
<h3>Header 3</h3>
<p>this is a test. this is a test. this is a test. </p>
<h3>Header 3</h3>
<p>this is a test. this is a test. </p>
</body>
</html>
Header style
<!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" />
<title></title>
<style type="text/css" title="text/css">
p {
line-height: 1.4em;
padding-left: 1.4em;
margin-top: 0;
margin-bottom: 1em;
}
h1, h2 {
color: #555555;
margin: 0 0 10px 0;
border-bottom: 1px dotted #555555;
padding: 0 0 2px 0;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
}
h3 {
margin: 0 0 5px 0;
font-size: 90%;
color: #444444;
font-weight: bold;
padding-left: 1.35em;
}
</style>
</head>
<body>
<h1>Article heading</h1>
<p>this is a test. this is a test. this is a test. this is a test. </p>
<h2>Header 2</h2>
<p>this is a test. this is a test. this is a test. this is a test. </p>
<h3>Header 3</h3>
<p>this is a test. this is a test. this is a test. this is a test. </p>
<h3>Header 3</h3>
<p>this is a test. this is a test. this is a test. this is a test. </p>
</body>
</html>
Section header
<!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=ISO-8859-1" />
<title></title>
<style type="text/css">
h1 {
color:red;
font-size:2em;
margin: 0;
border-bottom:2px dashed black;
}
p {
color:#036;
font-size:.9em;
line-height:150%;
margin-top:0;
margin-left: 25px;
}
h2 {
color: #FFC;
margin-bottom: 0;
padding: 5px 0px 3px 25px;
background-color:#999;
}
</style>
</head>
<body>
<h1>Header 1</h1>
<h3>header 3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim</p>
<h2>Header 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim</p>
<h2>Header 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim</p>
<h2>Header 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim</p>
<address>Copyright 2006</address>
</body>
</html>
Separate the style by logic
<!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>
<title></title>
<style type="text/css">
div {
top: 126px;
z-index: 1;
position: absolute;
width: 161px;
}
p {
padding: 0;
margin: 0;
}
#layer1 {
left: 21px;
top: 126px;
font-size: 3em;
line-height: 10px;
}
#layer2 {
height: 168px;
left: 199px;
font-size: 2em;
line-height: 10px;
}
#layer3 {
left: 377px;
top: 127px;
font-size: 1em;
line-height: 20px;
}
#layer4 {
height: 168px;
left: 554px;
font-size: .7em;
line-height: 20px;
}
</style>
</head>
<body>
<div id="layer1">
<p>layer1</p>
</div>
<div id="layer2">
<p>layer2. </p>
</div>
<div id="layer3">
<p>layer3. </p>
</div>
<div id="layer4">
<p>layer4. </p>
</div>
</body>
</html>
Space between text and heading
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/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>Space between text and heading</title>
<style type="text/css">
body {
font: 12px/1.5em Georgia, serif;
}
h1 {
font: bold 1.25em/1.5em Georgia, serif;
margin: 0.8em 0 0 0;
}
h2 {
font: bold 1em/1.5em Georgia, serif;
margin: 0.75em 0 0 0;
}
p {
margin: 0 0 0.75em 0;
width: 33em;
}
h2.post-h1 {
margin: 0.25em 0 0 0;
}
</style>
</head>
<body>
<div>
<h1>A very important heading</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.
this is a test. this is a test. this is a test.
this is a test. </p>
<h2>A less important heading</h2>
<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. </p>
</div>
<div>
<h1>Another important heading</h1>
<h2>Immediately followed by another heading</h2>
<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. </p>
</div>
<div>
<h1>Another important heading</h1>
<h2 class="post-h1">Immediately followed by another heading</h2>
<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. </p>
</div>
</body>
</html>
Style for Logic Section
<!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" />
<title></title>
<style type="text/css" media="Screen">
* .section {
padding: 10px;
margin: 10px 0;
background-color: pink;
}
* .section p {
margin: 0;
margin-top: 5px;
}
* .section h2 {
margin: 0;
margin-bottom: 10px;
}
* .section h3 {
margin: 0;
margin-bottom: 10px;
}
* .section.example {
background-color: #aaa;
}
* .section * .section {
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="section introduction">
<h2>Header 1</h2>
<p>this is a test. this is a test. </p>
</div>
<div class="section content">
<h2>Content</h2>
<p>this is a test. this is a test. this is a test. </p>
<div class="section example">
<h3>Subsection</h3>
<ul>
<li>this is a test.</li>
<li>this is a test. </li>
</ul>
</div>
</div>
</body>
</html>
Use class name more than once to format the same logic block
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/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">
body {
margin: 0px;
padding: 0px;
color: black;
background-color: #ccc;
}
.content {
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: auto;
margin-left: auto;
background-color: #fff;
border: 1px solid #000;
width: 70%;
}
</style>
</head>
<body>
<div class="content">
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. 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.
</div>
<div class="content">
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. 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.
</div>
</body>
</html>
Using Headings to Structure Text
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Using Headings to Structure Text</title>
</head>
<body>
<h1>Basic Text Formatting</h1>
<p> this is a test. this is a test. </p>
<h2>White Space and Flow</h2>
<p> this is a test. this is a test. </p>
<h2>Creating Headings</h2>
<p> this is a test. this is a test. </p>
</body>
</html>