|
1 <html> |
|
2 <head> |
|
3 <title>Example 0</title> |
|
4 <style title="hello" media="screen, print"> |
|
5 :first-letter { color: green; } |
|
6 a#id.foo:visited:first-line { color: red; } |
|
7 a#id.foo:first-line { color: red; } |
|
8 a#id.foo:visited { color: red; } |
|
9 a#id:first-line { color: red; } |
|
10 a#id:visited { color: red; } |
|
11 a:first-line { color: red; } |
|
12 a:visited { color: red; } |
|
13 a:visited:first-line { color: red; } |
|
14 a:visited:visited { color: red; } |
|
15 a:first-line:visited { color: red; } |
|
16 :active { color: blue; } |
|
17 P.first:first-line { color: blue; } |
|
18 P.first:first-letter { color: yellow; } |
|
19 </style> |
|
20 </head> |
|
21 |
|
22 <body bgcolor="#FFFFFF" text="#000000"> |
|
23 <h1>Example 0: Basic HTML Text Styles</h1> |
|
24 <p><br></p> |
|
25 <h2>Formatted Text</h2> |
|
26 <p>This is a basic paragraph with <b>bold</b>, <i>italic</i> and <i>bold-italic |
|
27 </i> text. It also includes <font color="#FF0000">red</font>, <font color="#00FF00">green</font> |
|
28 and <font color="#0000FF">blue</font> text. It has <s>strikethru</s> and <u>underline</u>. |
|
29 <u> </u></p> |
|
30 <p>This is a paragraph with font variations: <b><font face="Arial, Helvetica, sans-serif">Arial,</font></b><font face="Arial, Helvetica, sans-serif"> |
|
31 <i><font face="Verdana, Arial, Helvetica, sans-serif">Verdana</font>,</i> <font face="co">COURIER, |
|
32 <font face="Times New Roman, Times, serif">Times New Roman.</font></font></font></p> |
|
33 <p class="first"><font size=7>Font size=7, </font><font size=6>Font size=6, </font><font size=5>Font |
|
34 size=5, </font><font size=4>Font size=4, </font><font size=3>Font size=3, </font><font size=2>Font |
|
35 size=2, </font><font size=1>Font size=1, </font><font point-size=24 font-weight=700>Font |
|
36 point-size=24 font-weight=700</font></p> |
|
37 <p><THREED>3D Text. 3D Text. 3D Text. 3D Text. 3D Text. </THREED><br> |
|
38 <h2><br> |
|
39 </h2> |
|
40 <h2>Listings</h2> |
|
41 <h3>Bulleted List </h3> |
|
42 <ul> |
|
43 <li>One</li> |
|
44 <li>Two |
|
45 <ul> |
|
46 <li>Apples</li> |
|
47 <li>Oranges</li> |
|
48 <li>Bananas</li> |
|
49 </ul> |
|
50 </li> |
|
51 <li>Three</li> |
|
52 </ul> |
|
53 <br> |
|
54 <h3>Numbered List </h3> |
|
55 <ol> |
|
56 <li>One</li> |
|
57 <li>Two |
|
58 <ol> |
|
59 <li>Apples</li> |
|
60 <li>Oranges</li> |
|
61 <li>Bananas</li> |
|
62 </ol> |
|
63 </li> |
|
64 <li>Three</li> |
|
65 </ol> |
|
66 <h2>Justified Text</h2> |
|
67 <p>This paragraph is aligned <b>left</b>. This paragraph is aligned <b>left</b>. |
|
68 This paragraph is aligned <b>left</b>. This paragraph is aligned <b>left</b>. |
|
69 This paragraph is aligned <b>left</b>. This paragraph is aligned <b>left</b>. |
|
70 This paragraph is aligned <b>left</b>. </p> |
|
71 <p align="RIGHT">This paragarph is aligned <b>right. </b>This paragarph is aligned |
|
72 <b>right. </b>This paragarph is aligned <b>right. </b>This paragarph is aligned |
|
73 <b>right. </b>This paragarph is aligned <b>right. </b>This paragarph is aligned |
|
74 <b>right. </b>This paragarph is aligned <b>right. </b><b> </b>This paragarph |
|
75 is aligned <b>right. </b></p> |
|
76 <p align="CENTER">This paragraph is aligned <b>center</b>. This paragraph is aligned |
|
77 <b>center</b>.This paragraph is aligned <b>center</b>.This paragraph is aligned |
|
78 <b>center</b>.This paragraph is aligned <b>center</b>.This paragraph is aligned |
|
79 <b>center</b>.This paragraph is aligned <b>center</b>.This paragraph is aligned |
|
80 <b>center</b>.This paragraph is aligned <b>center</b>.This paragraph is aligned |
|
81 <b>center</b>.</p> |
|
82 <p></p> |
|
83 <p> </p> |
|
84 <script> |
|
85 var r = 0, g = 0, b = 0; |
|
86 var h = document.documentElement.childNodes[1].childNodes[1]; |
|
87 var sheet = document.styleSheets[0]; |
|
88 var rule = sheet.cssRules[0]; |
|
89 var size = 10; |
|
90 |
|
91 function changeColor() { |
|
92 r += 5; |
|
93 g += 2; |
|
94 b += 3; |
|
95 r %= 255; |
|
96 g %= 255; |
|
97 b %= 255; |
|
98 size += 1; |
|
99 if (size > 48) { |
|
100 size = 10; |
|
101 } |
|
102 |
|
103 h.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")"; |
|
104 rule.style.color = "rgb(" + r + "," + g + "," + b + ")"; |
|
105 rule.style.fontSize = size + "pt"; |
|
106 } |
|
107 |
|
108 setInterval(changeColor, 40); |
|
109 </script> |
|
110 </body> |
|
111 </html> |