Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Apress
committed
Oct 11, 2016
0 parents
commit 8971958
Showing
415 changed files
with
4,779 additions
and
0 deletions.
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
<!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" xml:lang="en" lang="en"> | ||
<head> | ||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | ||
|
||
<title>untitled</title> | ||
<style type="text/css" media="screen"> | ||
#content { | ||
float:left; | ||
width:74%; | ||
margin-bottom:1%; | ||
background-color:#999; | ||
} | ||
|
||
#sidebar { | ||
float:right; | ||
width:25%; | ||
margin-bottom:1%; | ||
background-color:#666; | ||
} | ||
|
||
#footer { | ||
clear:both; | ||
background-color:#333; | ||
} | ||
|
||
body#homepage #content { | ||
float:right; | ||
} | ||
|
||
body#homepage #sidebar { | ||
float:left; | ||
} | ||
|
||
body#contact #content { | ||
width:100%; | ||
} | ||
|
||
body#contact #sidebar { | ||
display:none; | ||
} | ||
|
||
h1 { | ||
padding:.5em; | ||
text-align:center; | ||
color:#fff; | ||
} | ||
</style> | ||
|
||
</head> | ||
|
||
<body id="contact"> | ||
<div id="content"> | ||
<h1>Content</h1> | ||
</div> | ||
|
||
<div id="sidebar"> | ||
<h1>Sidebar</h1> | ||
</div> | ||
|
||
<div id="footer"> | ||
<h1>Footer</h1> | ||
</div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
<!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" xml:lang="en" lang="en"> | ||
<head> | ||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | ||
|
||
<title>Chapter 3 Example: First-letter Pseudo-element</title> | ||
<style type="text/css" media="screen"> | ||
body { | ||
padding:.5em; | ||
font-family:"lucida grande", sans-serif; | ||
} | ||
|
||
p { | ||
font-size:100%; | ||
} | ||
|
||
p#dropcap:first-letter { | ||
font-size:300%; | ||
font-weight:bold; | ||
float:left; | ||
} | ||
|
||
p#initialcap:first-letter { | ||
font-size:400%; | ||
font-weight:bold; | ||
} | ||
|
||
</style> | ||
|
||
</head> | ||
|
||
<body> | ||
<p id="dropcap">Gorillas don’t always eat bananas, all cows eat grass, good boys do fine always, and fat cops get donuts after every bust.</p> | ||
|
||
<p id="initialcap">Gorillas don’t always eat bananas, all cows eat grass, good boys do fine always, and fat cops get donuts after every bust.</p> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
<!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" xml:lang="en" lang="en"> | ||
<head> | ||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | ||
|
||
<title>Chapter 3 Example: :before and :after Pseudo-elements</title> | ||
<style type="text/css" media="screen"> | ||
body { | ||
padding:.5em; | ||
font-family:"lucida grande"; | ||
} | ||
|
||
p.note { | ||
font-size:85%; | ||
color:#666; | ||
} | ||
|
||
p.note:before { | ||
content:"["; | ||
} | ||
p.note:after { | ||
content:"]"; | ||
} | ||
|
||
a[href^='http://']:after { content:" [" attr(href) "]";font-size:90%;font-style:italic;color:#999; } | ||
|
||
ul li { list-style:none;margin:0;text-indent:-1em; } | ||
ul li:before { content:"\2192 \0020"; } | ||
|
||
</style> | ||
|
||
</head> | ||
|
||
<body> | ||
<p class="note">Gorillas don’t always eat bananas, all cows eat grass, good boys do fine always, and fat cops get donuts after every bust.</p> | ||
|
||
<p>Please visit <a href="http://superfluousbanter.org/">my site</a> whenever you get a chance.</p> | ||
|
||
<ul> | ||
<li>List item 1</li> | ||
<li>List item 2</li> | ||
<li>List item 3</li> | ||
<li>List item 4</li> | ||
</ul> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,94 @@ | ||
<!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" xml:lang="en" lang="en"> | ||
<head> | ||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | ||
|
||
<title>Chapter 3 Example: Specificity</title> | ||
<style type="text/css" media="screen"> | ||
body { | ||
font-family: 'lucida grande', sans-serif; | ||
} | ||
|
||
/* score: 0,0,0,1 */ | ||
h1 { | ||
color:#000; | ||
} | ||
p { | ||
color:#000; | ||
} | ||
|
||
/* score: 0,0,0,2 */ | ||
div h1 { | ||
color:#333; | ||
} | ||
div p { | ||
color:#333; | ||
} | ||
|
||
/* score: 0,0,1,2 */ | ||
div.module h1 { | ||
color:#666; | ||
} | ||
div.module p { | ||
color:#666; | ||
} | ||
|
||
/* score: 0,0,1,1 - this comes later in the stylesheet, but the selector above is more specific; since the 3rd columns are the same, the calculation is based on the 4th column */ | ||
.module h1 { | ||
color:#000; | ||
} | ||
.module p { | ||
color:#000; | ||
} | ||
|
||
/* score: 0,1,0,1 - the same process applies to this as to the Classed <div>s above: removing the 'div' from the selectors below will make them less-specific than another identical rule *with* the 'div' */ | ||
div#content h1 { | ||
color:#999; | ||
} | ||
div#content p { | ||
color:#999; | ||
} | ||
|
||
/* score: 0,0,0,1 - but !important overrides all, including inline styles - uncomment to see the effects */ | ||
/* | ||
h1 { | ||
color:#ccc !important; | ||
} | ||
p { | ||
color:#ccc !important; | ||
} | ||
*/ | ||
</style> | ||
|
||
</head> | ||
|
||
<body> | ||
<h1>Page Title</h1> | ||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | ||
|
||
<div> | ||
<h1>Page Title</h1> | ||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | ||
</div> | ||
|
||
<!-- CLASS overrules ELEMENT --> | ||
<div class="module"> | ||
<h1>Page Title</h1> | ||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | ||
</div> | ||
|
||
<!-- ID overrules CLASS --> | ||
<div id="content" class="module"> | ||
<h1>Page Title</h1> | ||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | ||
</div> | ||
|
||
<!-- inline styles overrule everything except !important - these inline styles have a score of 1,0,0,0 --> | ||
<div id="content" class="module"> | ||
<h1 style="color:#ccc;">Page Title</h1> | ||
<p style="color:#ccc;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | ||
</div> | ||
</body> | ||
</html> |
Binary file not shown.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
<!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" xml:lang="en" lang="en"> | ||
<head> | ||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | ||
|
||
<title>Chapter 6 Example: centering a layout horizontally</title> | ||
<style type="text/css" media="screen"> | ||
body { | ||
text-align:center; | ||
min-width:600px; | ||
} | ||
|
||
#wrapper { | ||
margin:0 auto; | ||
width:600px; | ||
text-align:left; | ||
background-color:#eee; | ||
border:3px solid #ddd; | ||
} | ||
|
||
p { padding:0 1em; } | ||
</style> | ||
|
||
</head> | ||
|
||
<body> | ||
<div id="wrapper"> | ||
<p>content</p> | ||
</div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
<!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" xml:lang="en" lang="en"> | ||
<head> | ||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | ||
|
||
<title>Chapter 6 Example: Easy Float Clearing</title> | ||
<style type="text/css" media="screen"> | ||
body { | ||
padding:.5em; | ||
} | ||
.container { | ||
margin-bottom:75px; | ||
padding:1em; | ||
background-color:#eee; | ||
border:3px solid #ddd; | ||
} | ||
.floatedbox { | ||
float:left; | ||
width:125px; | ||
height:145px; | ||
margin-right:1em; | ||
padding:0 10px; | ||
background-color:#fff; | ||
border:3px solid #bbb; | ||
} | ||
|
||
.clearfix:after { | ||
content: "."; | ||
display: block; | ||
height: 0; | ||
clear: both; | ||
visibility: hidden; | ||
} | ||
|
||
/* Hides from IE-mac \*/ | ||
* html .clearfix {height: 1%;} | ||
/* End hide from IE-mac */ | ||
</style> | ||
|
||
</head> | ||
|
||
<body> | ||
|
||
<div class="container"> | ||
<div class="floatedbox"> | ||
<p>floated box</p> | ||
</div> | ||
<h3>Container 1</h3> | ||
<p>(<em>without</em> easy clearing)</p> | ||
</div> | ||
|
||
<div class="clearfix container"> | ||
<div class="floatedbox"> | ||
<p>floated box</p> | ||
</div> | ||
<h3>Container 2</h3> | ||
<p>(<em>with</em> easy clearing)</p> | ||
</div> | ||
|
||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
<!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" xml:lang="en" lang="en"> | ||
<head> | ||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | ||
|
||
<title>Chapter 6 Example: Star HTML</title> | ||
<style type="text/css" media="screen"> | ||
body { | ||
background:#f90 url(bg_gradient.png) repeat-x; | ||
} | ||
|
||
/* Star HTML hack only recognized by IE */ | ||
* html body { | ||
background-image:none; | ||
} | ||
</style> | ||
|
||
</head> | ||
|
||
<body> | ||
|
||
<!-- no content needed for this example --> | ||
|
||
</body> | ||
</html> |
Oops, something went wrong.