112 lines
3.7 KiB
HTML
112 lines
3.7 KiB
HTML
<html>
|
|
<head>
|
|
<title>Example 0</title>
|
|
<style title="hello" media="screen, print">
|
|
:first-letter { color: green; }
|
|
a#id.foo:visited:first-line { color: red; }
|
|
a#id.foo:first-line { color: red; }
|
|
a#id.foo:visited { color: red; }
|
|
a#id:first-line { color: red; }
|
|
a#id:visited { color: red; }
|
|
a:first-line { color: red; }
|
|
a:visited { color: red; }
|
|
a:visited:first-line { color: red; }
|
|
a:visited:visited { color: red; }
|
|
a:first-line:visited { color: red; }
|
|
:active { color: blue; }
|
|
P.first:first-line { color: blue; }
|
|
P.first:first-letter { color: yellow; }
|
|
</style>
|
|
</head>
|
|
|
|
<body bgcolor="#FFFFFF" text="#000000">
|
|
<h1>Example 0: Basic HTML Text Styles</h1>
|
|
<p><br></p>
|
|
<h2>Formatted Text</h2>
|
|
<p>This is a basic paragraph with <b>bold</b>, <i>italic</i> and <i>bold-italic
|
|
</i> text. It also includes <font color="#FF0000">red</font>, <font color="#00FF00">green</font>
|
|
and <font color="#0000FF">blue</font> text. It has <s>strikethru</s> and <u>underline</u>.
|
|
<u> </u></p>
|
|
<p>This is a paragraph with font variations: <b><font face="Arial, Helvetica, sans-serif">Arial,</font></b><font face="Arial, Helvetica, sans-serif">
|
|
<i><font face="Verdana, Arial, Helvetica, sans-serif">Verdana</font>,</i> <font face="co">COURIER,
|
|
<font face="Times New Roman, Times, serif">Times New Roman.</font></font></font></p>
|
|
<p class="first"><font size=7>Font size=7, </font><font size=6>Font size=6, </font><font size=5>Font
|
|
size=5, </font><font size=4>Font size=4, </font><font size=3>Font size=3, </font><font size=2>Font
|
|
size=2, </font><font size=1>Font size=1, </font><font point-size=24 font-weight=700>Font
|
|
point-size=24 font-weight=700</font></p>
|
|
<p><THREED>3D Text. 3D Text. 3D Text. 3D Text. 3D Text. </THREED><br>
|
|
<h2><br>
|
|
</h2>
|
|
<h2>Listings</h2>
|
|
<h3>Bulleted List </h3>
|
|
<ul>
|
|
<li>One</li>
|
|
<li>Two
|
|
<ul>
|
|
<li>Apples</li>
|
|
<li>Oranges</li>
|
|
<li>Bananas</li>
|
|
</ul>
|
|
</li>
|
|
<li>Three</li>
|
|
</ul>
|
|
<br>
|
|
<h3>Numbered List </h3>
|
|
<ol>
|
|
<li>One</li>
|
|
<li>Two
|
|
<ol>
|
|
<li>Apples</li>
|
|
<li>Oranges</li>
|
|
<li>Bananas</li>
|
|
</ol>
|
|
</li>
|
|
<li>Three</li>
|
|
</ol>
|
|
<h2>Justified Text</h2>
|
|
<p>This paragraph is aligned <b>left</b>. This paragraph is aligned <b>left</b>.
|
|
This paragraph is aligned <b>left</b>. This paragraph is aligned <b>left</b>.
|
|
This paragraph is aligned <b>left</b>. This paragraph is aligned <b>left</b>.
|
|
This paragraph is aligned <b>left</b>. </p>
|
|
<p align="RIGHT">This paragarph is aligned <b>right. </b>This paragarph is aligned
|
|
<b>right. </b>This paragarph is aligned <b>right. </b>This paragarph is aligned
|
|
<b>right. </b>This paragarph is aligned <b>right. </b>This paragarph is aligned
|
|
<b>right. </b>This paragarph is aligned <b>right. </b><b> </b>This paragarph
|
|
is aligned <b>right. </b></p>
|
|
<p align="CENTER">This paragraph is aligned <b>center</b>. This paragraph is aligned
|
|
<b>center</b>.This paragraph is aligned <b>center</b>.This paragraph is aligned
|
|
<b>center</b>.This paragraph is aligned <b>center</b>.This paragraph is aligned
|
|
<b>center</b>.This paragraph is aligned <b>center</b>.This paragraph is aligned
|
|
<b>center</b>.This paragraph is aligned <b>center</b>.This paragraph is aligned
|
|
<b>center</b>.</p>
|
|
<p></p>
|
|
<p> </p>
|
|
<script>
|
|
var r = 0, g = 0, b = 0;
|
|
var h = document.documentElement.childNodes[1].childNodes[1];
|
|
var sheet = document.styleSheets[0];
|
|
var rule = sheet.cssRules[0];
|
|
var size = 10;
|
|
|
|
function changeColor() {
|
|
r += 5;
|
|
g += 2;
|
|
b += 3;
|
|
r %= 255;
|
|
g %= 255;
|
|
b %= 255;
|
|
size += 1;
|
|
if (size > 48) {
|
|
size = 10;
|
|
}
|
|
|
|
h.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
|
|
rule.style.color = "rgb(" + r + "," + g + "," + b + ")";
|
|
rule.style.fontSize = size + "pt";
|
|
}
|
|
|
|
setInterval(changeColor, 40);
|
|
</script>
|
|
</body>
|
|
</html>
|