Datasheet
You can find the images and source code for the following example at www.wrox.com. While you can
obtain the source code from
www.wrox.com, I recommend that you type out the example so that you
can get used to writing the syntax, and take in the different bits that come together in the example.
Try It Out Creating a CSS-Enabled Document
Example 1-1. To write your first CSS-enabled document, follow these steps.
1. In your text editor of choice, enter the following markup:
<!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’>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” />
<title>The Gas Giants</title>
<link rel=’stylesheet’ type=’text/css’ href=’solar_system.css’ />
<script type=’text/javascript’>
var fixpng = function($img) {};
</script>
<!--[if lt IE 7]>
<link rel=’stylesheet’ type=’text/css’ href=’solar_system.ie.css’ />
<script type=’text/javascript’>
// This fixes PNG transparency in IE
var fixpng = function($img)
{
var $html =
‘<span ‘ +
(($img.id)? “id=’” + $img.id + “‘ “ : ‘’) +
(($img.className)? “class=’” + $img.className + “‘ “ : ‘’) +
(($img.title)? “title=’” + $img.title + “‘ “ : ‘’) +
‘style=”’ +
‘display: inline-block;’ +
‘width: ‘ + $img.width + ‘px;’ +
‘height: ‘ + $img.height + ‘px;’ +
“filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(“ +
“src=’” + $img.src + “‘, sizingMethod=’scale’); “ +
$img.style.cssText + ‘“ ‘;
if ($img.getAttribute(‘mouseoversrc’))
{
$html += “mouseoversrc=’” + $img.getAttribute(‘mouseoversrc’) + “‘ “;
}
if ($img.getAttribute(‘mouseoutsrc’))
{
$html += “mouseoutsrc=’” + $img.getAttribute(‘mouseoutsrc’) + “‘ “;
}
$html += ‘></span>’;
$img.outerHTML = $html;
16
Part I: The Basics
05_096970 ch01.qxp 4/20/07 11:27 PM Page 16