Skip to content

Commit

Permalink
First commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Apress committed Oct 11, 2016
0 parents commit 8971958
Show file tree
Hide file tree
Showing 415 changed files with 4,779 additions and 0 deletions.
Binary file added 159059732X-1/.DS_Store
Binary file not shown.
Binary file added 159059732X-1/Chapter03/.DS_Store
Binary file not shown.
67 changes: 67 additions & 0 deletions 159059732X-1/Chapter03/ch3_example_2columnlayout.html
@@ -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>
39 changes: 39 additions & 0 deletions 159059732X-1/Chapter03/ch3_example_firstletter.html
@@ -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>
48 changes: 48 additions & 0 deletions 159059732X-1/Chapter03/ch3_example_generatedcontent.html
@@ -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>
94 changes: 94 additions & 0 deletions 159059732X-1/Chapter03/ch3_specificity_basic.html
@@ -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 added 159059732X-1/Chapter06/.DS_Store
Binary file not shown.
Binary file added 159059732X-1/Chapter06/bg_gradient.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 33 additions & 0 deletions 159059732X-1/Chapter06/ch6_example_centering.html
@@ -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>
63 changes: 63 additions & 0 deletions 159059732X-1/Chapter06/ch6_example_easyclearing.html
@@ -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>
27 changes: 27 additions & 0 deletions 159059732X-1/Chapter06/ch6_example_starhtml.html
@@ -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>

0 comments on commit 8971958

Please sign in to comment.