Html

var styleScripts=new Array;
function addStyleAnimation(idstyle,idtext,arrStyles) {
//assert("element(idstyle) != null");
//assert("element(idtext) != null");
var i=styleScripts.length;
styleScripts[i]=new Object;
styleScripts[i].idstyle=idstyle;
styleScripts[i].idtext=idtext;
styleScripts[i].arrStyles=arrStyles;
}
addStyleAnimation('posrel','posrel_txt',new Array(
'position:relative;top:0px;left:0px;',
'position:relative;top:0px;left:1px;',
'position:relative;top:0px;left:2px;',
'position:relative;top:1px;left:2px;',
'position:relative;top:2px;left:2px;',
'position:relative;top:2px;left:1px;',
'position:relative;top:2px;left:0px;',
'position:relative;top:1px;left:0px;'
));
//addStyleAnimation('lstyle','lstyle_txt',new Array(
// 'list-style:decimal;',
// 'list-style:decimal;',
// 'list-style:lower-alpha;',
// 'list-style:lower-alpha;',
// 'list-style:upper-alpha;',
// 'list-style:upper-alpha;',
// 'list-style:lower-roman;',
// 'list-style:lower-roman;',
// 'list-style:upper-roman;',
// 'list-style:upper-roman;'
//));
addStyleAnimation('posabstl', 'posabstl_txt', new Array(
'position:absolute;top:0px;left:0px;',
'position:absolute;top:0px;left:1px;',
'position:absolute;top:0px;left:2px;',
'position:absolute;top:1px;left:2px;',
'position:absolute;top:2px;left:2px;',
'position:absolute;top:2px;left:1px;',
'position:absolute;top:2px;left:0px;',
'position:absolute;top:1px;left:0px;'
));
addStyleAnimation('posabstr', 'posabstr_txt', new Array(
'position:absolute;top:0px;right:0px;',
'position:absolute;top:0px;right:1px;',
'position:absolute;top:0px;right:2px;',
'position:absolute;top:1px;right:2px;',
'position:absolute;top:2px;right:2px;',
'position:absolute;top:2px;right:1px;',
'position:absolute;top:2px;right:0px;',
'position:absolute;top:1px;right:0px;'
));
if (0) { // how the heck can I measure the *document* height.
addStyleAnimation('posabsbl', 'posabsbl_txt', new Array( // see cycle() for significance of double-"s here
'position:absolute;top:" + (window.innerHeight - 20) + "px;left:0px;',
'position:absolute;top:" + (window.innerHeight - 21) + "px;left:1px;',
'position:absolute;top:" + (window.innerHeight - 22) + "px;left:2px;',
'position:absolute;top:" + (window.innerHeight - 22) + "px;left:2px;',
'position:absolute;top:" + (window.innerHeight - 22) + "px;left:2px;',
'position:absolute;top:" + (window.innerHeight - 21) + "px;left:1px;',
'position:absolute;top:" + (window.innerHeight - 20) + "px;left:0px;',
'position:absolute;top:" + (window.innerHeight - 20) + "px;left:0px;'
));
addStyleAnimation('posabsbr', 'posabsbr_txt', new Array(
'position:absolute;top:" + (document.body.clientHeight - 20) + "px;right:0px;',
'position:absolute;top:" + (document.body.offsetHeight - 20) + "px;right:1px;',
'position:absolute;top:" + (document.body.offsetHeight - 20) + "px;right:2px;',
'position:absolute;top:" + (document.body.offsetHeight - 21) + "px;right:2px;',
'position:absolute;top:" + (document.body.offsetHeight - 22) + "px;right:2px;',
'position:absolute;top:" + (document.body.offsetHeight - 22) + "px;right:1px;',
'position:absolute;top:" + (document.body.offsetHeight - 22) + "px;right:0px;',
'position:absolute;top:" + (document.body.offsetHeight - 21) + "px;right:0px;'
));
}
addStyleAnimation('ltrspac', 'ltrspac_txt', new Array(
'letter-spacing:3px;',
'letter-spacing:2px;',
'letter-spacing:1px;',
'letter-spacing:0px;',
'letter-spacing:-1px;',
'letter-spacing:-2px;',
'letter-spacing:-2px;',
'letter-spacing:-1px;',
'letter-spacing:0px;',
'letter-spacing:1px;',
'letter-spacing:2px;',
'letter-spacing:3px;'
));
addStyleAnimation('linehgt', 'linehgt_txt', new Array(
'line-height:22px;',
'line-height:23px;',
'line-height:24px;',
'line-height:25px;',
'line-height:25px;',
'line-height:24px;',
'line-height:23px;',
'line-height:22px;',
'line-height:21px;',
'line-height:20px;',
'line-height:19px;',
'line-height:18px;',
'line-height:17px;',
'line-height:16px;',
'line-height:16px;',
'line-height:17px;',
'line-height:18px;',
'line-height:19px;',
'line-height:20px;',
'line-height:21px;'
));
addStyleAnimation('valign', 'valign_txt', new Array(
'vertical-align:sub;',
'vertical-align:sub;',
'vertical-align:sub;',
'vertical-align:text-bottom;',
'vertical-align:text-bottom;',
'vertical-align:text-bottom;',
'vertical-align:super;',
'vertical-align:super;',
'vertical-align:super;',
'vertical-align:text-bottom;',
'vertical-align:text-bottom;',
'vertical-align:text-bottom;'
));
addStyleAnimation('talign', 'talign_txt', new Array(
' text-align : left;',
' text-align : left;',
' text-align : center;',
' text-align : center;',
' text-align : center;',
' text-align : right;',
' text-align : right;',
' text-align : right;',
' text-align : justify;',
' text-align : justify;',
' text-align : justify;',
' text-align : left;'
));

var index=0;
function cycle(idstyle,idhtml,arrStyles) {
var elemStyle=element(idstyle);
var elemHtml=element(idhtml);

if (elemStyle != null
&& elemHtml != null
&& elemStyle.style != null
&& elemStyle.style.cssText != null
&& typeof(elemStyle.style.cssText) == "string") {
var j=index % arrStyles.length;
elemStyle.style.cssText = eval('"' + arrStyles[j] + '"'); // embedded code in double-"s
elemHtml.innerHTML = eval('"' + arrStyles[j] + '"');
}
}

function shuffle() {
if (!running) return;
index++;
var i;
for (i=0 ; i < styleScripts.length ; i++) {
cycle(styleScripts[i].idstyle,
styleScripts[i].idtext,
styleScripts[i].arrStyles);
}
}

function bodyload() {
var i;
for (i=0 ; i < styleScripts.length ; i++) {
assert("element('"+styleScripts[i].idstyle+"') != null");
assert("element('"+styleScripts[i].idtext+"') != null");
}
setInterval(shuffle,500);
}
var running=true;
function buttonclick(btn) {
running=!running;
if (running) {
btn.value="Hold still";
}
else {
btn.value="Animate";
}
}
</script>
<style>
.ambient {
font:14px monospace;
line-height:18px;
margin-left:15px;
}
.notate {
font:normal 12px sans-serif;
color:#BBBBBB;
}
</style>
</head>
<body bgcolor="#FFFFFF" onload="bodyload();">
<br><h2 style="font-family:Arial,sans-serif;text-decoration:underline">Style Sheet Examples</h2>

<img src="StylesFoldout.jpg" height="559" width="165" align="right" usemap="#fldad" border=0 hspace="6" vspace="2" />
<map name="fldad"><area title="What's so new about it?" shape="rect" coords="33,513,130,555" href="http://www.visibone.com/html/edition3.html" alt="What's so new about it?"><area shape="rect" coords="9,61,154,446"
href="http://www.visibone.com/html/foldouts.html"
title="Click for a closer look"
alt="Click for a closer look"><area shape="rect" coords="49,466,117,482"
href="http://www.visibone.com/html/foldouts.html"
title="Click for details on the HTML Foldouts"
alt="Details and discounts on the HTML Foldouts"><area shape="rect" coords="33,483,130,500"
href="http://www.visibone.com/html/foldouts.html"
title="Buy the HTML Foldouts"
alt="Buy the HTML Foldouts"></map>

<span style="font:11pt Arial,sans-serif">

A free public service by <a href="http://www.visibone.com">VisiBone</a>. Here are some cascading style sheet examples. See the start tag that makes it happen decorated in its own style.&nbsp; </span><span class="ambient" style="margin-left:0px">&lt;span ...&gt;</span><span style="font:11pt Arial,sans-serif">&nbsp; To use it, just cut and paste the start tag. Don't forget the end-tag.&nbsp; </span><span class="ambient" style="margin-left:0px">&lt;/span&gt;&nbsp;</span><span style="font:11pt Arial,sans-serif"> For example:</span>
<blockquote>
<span class="ambient" style="margin-left:0px"><font size="4">&lt;span style="color:red"&gt;cherry&lt;/span&gt;</font></span></blockquote>

<span style="font:11pt Arial,sans-serif">

looks like this:

</span>
<blockquote>
<span style="color:red"><font size="4">cherry</font></span></blockquote>
<span style="font:11pt Arial,sans-serif">

See the VisiBone <a href="http://www.visibone.com/html/foldouts.html">Styles Foldout</a> up close for a complete CSS Cascading Style Sheets reference.

<br>
</span><br>

<div class="ambient">
<input type="button" value="Hold still" onclick="buttonclick(this)" />

<br><span style="background-color:#FFCCCC;" id="bgcolor">&lt;span style="<span id="bgcolor_txt">background-color:#FFCCCC;</span>"&gt;</span>
<script><!--
addStyleAnimation('bgcolor', 'bgcolor_txt', new Array(
'background-color:#FFCCCC;',
'background-color:#FFDDDD;',
'background-color:#FFDDDD;',
'background-color:#FFEEEE;',
'background-color:#FFEEEE;',
'background-color:#FFFFFF;',
'background-color:#FFFFFF;',
'background-color:#FFFFFF;',
'background-color:#FFEEEE;',
'background-color:#FFDDDD;',
'background-color:#FFCCCC;'
));
// --></script>
<br><span style="background-image:url('grid.gif')" >&lt;span style="background-image:url('grid.gif')" &gt;</span>
<span style="line-height:24px">
<br><span style="border:black solid 1px;" id="bder" >&lt;span style="<span id="bder_txt">border:black solid 1px;</span>"&gt;</span>

</span>
<script><!--
addStyleAnimation('bder', 'bder_txt', new Array(
'border:black solid 1px;',
'border:black solid 1px;',
'border:red solid 1px;',
'border:red solid 1px;',
'border:red solid 2px;',
'border:red solid 3px;',
'border:red solid 4px;',
'border:red solid 5px;',
'border:red solid 5px;',
'border:red solid 5px;',
'border:red dashed 5px;',
'border:red dotted 5px;',
'border:red double 5px;',
'border:red groove 5px;',
'border:red ridge 5px;',
'border:red inset 5px;',
'border:red outset 5px;',
'border:red solid 5px;',
'border:red solid 5px;',
'border:red solid 5px;',
'border:black solid 5px;',
'border:black solid 5px;',
'border:black solid 4px;',
'border:black solid 3px;',
'border:black solid 2px;',
'border:black solid 1px;',
'border:black solid 1px;'
));
// --></script>
<br><span style="color:red;" id="colour">&lt;span style="<span id="colour_txt">color:red;</span>"&gt;</span>
<script><!--
addStyleAnimation('colour', 'colour_txt', new Array(
'color:red;',
'color:red;',
'color:#FF0000;',
'color:#FF0000;',
'color:rgb(255,0,0);',
'color:rgb(255,0,0);'
));
// --></script>
<br><span style="cursor:wait;" >&lt;span style="cursor:wait;" &gt;</span> <span class="notate">(hover cursor to see the hourglass)</span></span>
<br><span style="font:bold italic 16px serif;" >&lt;span style="font:bold italic 16px serif;" &gt;</span>
<br><span style="font-size:17px;" >&lt;span style="font-size:17px;" &gt;</span>

<br><span style="font-family:Arial,Helvetica,sans-serif;" >&lt;span style="font-family:Arial,Helvetica,sans-serif;" &gt;</span>
<br><span style="font-style:italic;" >&lt;span style="font-style:italic;" &gt;</span>
<br><span style="font-variant:small-caps;" >&lt;span style="font-variant:small-caps;" &gt;</span>
<br><span style="font-weight:bold;" >&lt;span style="font-weight:bold;" &gt;</span>
<br><span style="text-decoration:underline;" id="txtdec">&lt;span style="<span id="txtdec_txt">text-decoration:underline;</span>"&gt;</span>
<script><!--
addStyleAnimation('txtdec', 'txtdec_txt', new Array(
'text-decoration:underline;',
'text-decoration:underline;',
'text-decoration:line-through;',
'text-decoration:line-through;',
'text-decoration:overline;',
'text-decoration:overline;',
'text-decoration:line-through;',
'text-decoration:line-through;'
));
// --></script>
<br><span style="letter-spacing:3px" id="ltrspac" >&lt;span style="<span id="ltrspac_txt">letter-spacing:3px</span>"&gt;</span>

<!-- br>
<br>
<span class="notate">list items:</span -->
<ul style="margin-top:2px">
<li style="list-style:upper-alpha" id="lstyle" >&lt;li style="<span id="lstyle_txt">list-style:upper-alpha</span>" &gt;</li>
<li style="list-style:lower-alpha" >&lt;li style="list-style:lower-alpha" &gt;</li>
<li style="list-style:upper-roman" >&lt;li style="list-style:upper-roman" &gt;</li>
<li style="list-style:decimal" >&lt;li style="list-style:decimal" &gt;</li>
<li style="list-style:disc" >&lt;li style="list-style:disc" &gt;</li>

<li style="list-style:circle inside" >&lt;li style="list-style:circle inside" &gt;</li>
<li style="list-style:square outside" >&lt;li style="list-style:square outside" &gt;</li>
<li style="list-style:url('bullet.jpg') inside" >&lt;li style="list-style:url('bullet.jpg') inside" &gt;</li>
</ul>

<table border=0 cellspacing=0 cellpadding=0 width=120>
<tr><td>
<span class="notate">horizontal alignment:</span>

</td></tr>
<tr><td>
<table border=0 cellspacing=0 cellpadding=3>
<tr><td bgcolor=#EEEEEE>
<table border=0 cellspacing=0 cellpadding=0 width=120><tr><td bgcolor=#FFFFFF>
<tr><td class="ambient" bgcolor="#FFFFFF"><div
Style= "text-align: left;" id="talign"
>&lt;div style= &quot;<span id="talign_txt">text-align: left;</span>&quot;&gt;
</div></td></tr>
</table>

</td></tr>
</table>
</td></tr>
<tr><td>
<span class="notate">(for paragraphs and table cells)</span>
</td></tr>
</table>

<br><span class="notate">positioning offset:&nbsp;</span><span
style="position:relative;top:0px;left:0px;" id="posrel">&lt;span
style="<span id="posrel_txt">position:relative;top:0px;left:0px;</span>"&gt;</span>

<span style="position:absolute;top:0px;left:0px;" id="posabstl">&lt;span style="<span id="posabstl_txt">position:absolute;top:0px;left:0px;</span>"&gt;</span>
<span style="position:absolute;top:0px;right:0px;" id="posabstr">&lt;span style="<span id="posabstr_txt">position:absolute;top:0px;right:0px;</span>"&gt;</span>
<!-- span style="position:absolute;top:0px;right:0px;" id="posabsbl">&lt;span style="<span id="posabsbl_txt">position:absolute;top:0px;right:0px;</span>"&gt;</span -->
<!-- span style="position:absolute;top:0px;right:0px;" id="posabsbr">&lt;span style="<span id="posabsbr_txt">position:absolute;top:0px;right:0px;</span>"&gt;</span -->

<br><span class="notate">superscripting and subscripting:<img
src="http://www.visibone.com/pixel.gif" height=35 width=1 align=top><img
src="http://www.visibone.com/pixel.gif" height=25 width=1 align=bottom></span><span
style="vertical-align:super;" id="valign"
>&lt;span style="<span id="valign_txt">vertical-align:super;</span>"&gt;</span>&nbsp;

<br>--------------------------------
<br><span style="line-height:22px;" id="linehgt">&lt;span style="<span id="linehgt_txt">line-height:22px;</span>"&gt;</span>
<br>--------------------------------

</div>

<!-- p>Notes:</p>

<blockquote>
Positioning at the bottom corners with <tt>position:absolute;bottom=npx</tt> is buggy in both IE6 and N7 —
scrolling reveals that the browser is confused as to whether "absolute" positioning means document-absolute or view-absolute.
On the other hand <tt>postion:absolute;top=npx</tt> is consistently document-absolute.
</blockquote>

<blockquote>
Other style sheet attributes:

<tt>border-collapse</tt>,
<tt>clear</tt>,
<tt>clip</tt>,
<tt>cursor</tt>,
<tt>display</tt>,
<tt>float</tt>,
<tt>height</tt>,
<tt>width</tt>

</blockquote>

<blockquote>
Opera 7 seems to behave as if .style.cssText were read-only.
</blockquote>

-->
<br>
<!--
<script src="https://www.ssl.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-1024074-1";
_udn="none";
_ulink=1;
urchinTracker();
</script>
-->