mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-07 12:15:51 +00:00
211 lines
5.6 KiB
HTML
211 lines
5.6 KiB
HTML
<html>
|
|
<head>
|
|
<title>Example 0</title>
|
|
<style>
|
|
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; }
|
|
:first-letter { color: green; }
|
|
#line:first-line { font-size: 200%; letter-spacing: -.25em; }
|
|
#letter:first-letter { font-size: 48pt; font-weight: bold; float: left; }
|
|
</style>
|
|
<meta name="crc" content=3268488385">
|
|
</head>
|
|
|
|
<body bgcolor="#FFFFFF" text="#000000">
|
|
|
|
<!-- GOOFY Comment tests... -->
|
|
<!-- xx -- yy -- zz -->
|
|
<!-- also interesting --!>
|
|
<!--------------------->
|
|
<!-- ####################################################################
|
|
# #
|
|
# * Here's another interesting comment problem we encountered #
|
|
# this came from mozilla.org of all places! "!-- * --" #
|
|
####################################################################
|
|
-->
|
|
|
|
|
|
|
|
<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><b>bold</b></i><b><i>-italic </i></b>
|
|
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>
|
|
Text decoration color test:
|
|
<span style="color: red">
|
|
red
|
|
<span style="text-decoration: underline">
|
|
underline
|
|
<span style="color: cyan">
|
|
cyan
|
|
<span style="text-decoration: line-through">
|
|
line-through
|
|
<span style="color: blue">
|
|
blue
|
|
<span style="text-decoration: overline">
|
|
overline
|
|
<span style="color: black">
|
|
black
|
|
</span>
|
|
overline
|
|
</span>
|
|
blue
|
|
</span>
|
|
line-through
|
|
</span>
|
|
cyan
|
|
</span>
|
|
underline
|
|
</span>
|
|
red
|
|
</span>
|
|
</p>
|
|
|
|
<p>This is a paragraph with font variations: <b><font face="Arial, Helvetica, sans-serif">Bold Arial,</font></b><font face="Arial, Helvetica, sans-serif">
|
|
<i><font face="Verdana, Arial, Helvetica, sans-serif">Italic Verdana</font>,</i> <font face="courier">COURIER,
|
|
<font face="Times New Roman, Times, serif">Times New Roman.</font></font></font></p>
|
|
<p><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><BR>
|
|
<SPAN style="font-family: Verdana Bold, Times; font-weight: bold; font-size: 18pt; font-variant: small-caps;">This Text Is Small-caps</SPAN>
|
|
</P>
|
|
|
|
<h2>Text styles</h2>
|
|
|
|
<P>
|
|
<SPAN style="text-transform: capitalize;">
|
|
this text was capitalized å è
|
|
</SPAN>
|
|
<BR>
|
|
<SPAN style="text-transform: lowercase;">
|
|
THIS TEXT WAS LOWERCASED Å È
|
|
</SPAN>
|
|
<BR>
|
|
<SPAN style="text-transform: uppercase;">
|
|
this text was uppercased å è
|
|
</SPAN>
|
|
<BR>
|
|
<SPAN style="letter-spacing: 2em;">
|
|
Letter spacing set to 2em's.
|
|
</SPAN>
|
|
<BR>
|
|
<SPAN style="word-spacing: 2em;">
|
|
Word spacing set to 2em's.
|
|
</SPAN>
|
|
<BR>
|
|
<SPAN style="text-transform: capitalize; letter-spacing: 1em; word-spacing: 5em; font-variant: small-caps;">
|
|
this text is capitalized small-caps with letter spacing set to 1em and
|
|
the word spacing set to 5em's. enjoy!
|
|
</SPAN>
|
|
</P>
|
|
|
|
<H2>Pseudo-element tests</H2>
|
|
|
|
<P ID=line>
|
|
This paragraph demonstrates the :first-line pseudo
|
|
element. The first line of text should use a font twice the size and
|
|
have the letter spacing set so that the text is jammed together in an
|
|
unpleasant fashion.
|
|
</P>
|
|
|
|
<P ID=letter>
|
|
First letter style is really cool. The facility is very powerful because it
|
|
takes an innocuous looking content model and spices it up dramatically while
|
|
allowing a backwards compatible answer for older browsers.
|
|
</P>
|
|
|
|
<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 align=left>
|
|
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=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>.
|
|
</p>
|
|
|
|
<p align=right>
|
|
This paragraph is aligned <b>right</b>.
|
|
This paragraph is aligned <b>right</b>.
|
|
This paragraph is aligned <b>right</b>.
|
|
This paragraph is aligned <b>right</b>.
|
|
This paragraph is aligned <b>right</b>.
|
|
This paragraph is aligned <b>right</b>.
|
|
This paragraph is aligned <b>right</b>.
|
|
</p>
|
|
|
|
<p align=justify>
|
|
This paragraph is <B>justified</B>.
|
|
This paragraph is <B>justified</B>.
|
|
This paragraph is <B>justified</B>.
|
|
This paragraph is <B>justified</B>.
|
|
This paragraph is <B>justified</B>.
|
|
This paragraph is <B>justified</B>.
|
|
This paragraph is <B>justified</B>.
|
|
</p>
|
|
|
|
</body>
|
|
</html>
|