Skip to content

Commit 49117cc

Browse files
tabatkinstabatkins
committed
Tweaked the informative HTML stylesheet
1 parent 2c4f57b commit 49117cc

2 files changed

Lines changed: 133 additions & 107 deletions

File tree

‎css3-lists/Overview.html‎

Lines changed: 67 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,7 @@ <h2 class="no-num no-toc" id=contents> Table of contents</h2>
226226
<li><a href="#profiles"><span class=secno>11. </span> Profiles</a>
227227

228228
<li><a href="#html4"><span class=secno>12. </span> Sample style sheet for
229-
HTML 4.0</a>
229+
HTML</a>
230230

231231
<li><a href="#ua-stylesheet"><span class=secno>13. </span> Appendix A:
232232
Required Predefined Counter Styles</a>
@@ -2185,64 +2185,77 @@ <h2 id=profiles><span class=secno>11. </span> Profiles</h2>
21852185
<p>The Full profile contains everything.</p>
21862186
<!-- ====================================================================== -->
21872187

2188-
<h2 id=html4><span class=secno>12. </span> Sample style sheet for HTML 4.0</h2>
2188+
<h2 id=html4><span class=secno>12. </span> Sample style sheet for HTML</h2>
21892189

2190-
<p>This section is informative, nor normative.
2190+
<p>This section is informative, nor normative. HTML itself defines the
2191+
actual default properties that apply to HTML lists.
21912192

21922193
<pre>
2193-
/* Set up list items */
2194-
li { display: list-item; /* counter-increment: list-item; (implied by display: list-item) */ }
2195-
2196-
/* Set up ol and ul so that they reset the list-item counter */
2197-
ol, ul { counter-reset: list-item; }
2198-
2199-
/* Default list style types for ordered lists */
2200-
ol { list-style-type: decimal; }
2201-
2202-
/* Default list style types for unordered lists up to 3<!-- 8 --> deep */
2203-
ul { list-style-type: disc; }
2204-
ul ul { list-style-type: square; }
2205-
ul ul ul { list-style-type: circle; }
2206-
<!-- and so on ad nauseum:
2207-
ul ul ul ul { list-style-type: box; }
2208-
ul ul ul ul ul { list-style-type: disc; }
2209-
ul ul ul ul ul ul { list-style-type: square; }
2210-
ul ul ul ul ul ul ul { list-style-type: circle; }
2211-
ul ul ul ul ul ul ul ul { list-style-type: box; }
2212-
-->
2213-
/* The type attribute on ol and ul elements */
2214-
ul[type="disc"] { list-style-type: disc; }
2215-
ul[type="circle"] { list-style-type: circle; }
2216-
ul[type="square"] { list-style-type: square; }
2217-
ol[type="1"] { list-style-type: decimal; }
2218-
ol[type="a"] { list-style-type: lower-alpha; }
2219-
ol[type="A"] { list-style-type: upper-alpha; }
2220-
ol[type="i"] { list-style-type: lower-roman; }
2221-
ol[type="I"] { list-style-type: upper-roman; }
2222-
2223-
/* The start attribute on ol elements */
2224-
ol[start] { counter-reset: list-item attr(start, integer, 1); counter-increment: list-item -1; }
2225-
2226-
/* The value attribute on li elements */
2227-
li[value] { counter-reset: list-item attr(value, integer, 1); counter-increment: none;<!-- XXX interaction with default increase --> }
2228-
2229-
/* The above rules don't fully describe HTML4 lists, since they do not cover
2230-
behaviors such as margins and the like. The following rules could be used
2231-
for this purpose:
2232-
2233-
ol, ul { display: block; margin: 1em 0; padding-left: 2.5em; }
2234-
ol ol, ol ul, ul ul, ul ol { margin-top: 0; margin-bottom: 0; }
2235-
li::marker { margin-right: 1em; text-align: right; }
2236-
2237-
*/
2238-
</pre>
2194+
/* Set up list items */
2195+
li {
2196+
display: list-item;
2197+
/* counter-increment: list-item; (implied by display: list-item) */
2198+
}
2199+
2200+
/* Set up ol and ul so that they reset the list-item counter */
2201+
ol, ul {
2202+
counter-reset: list-item;
2203+
}
2204+
2205+
/* Default list style types for ordered lists */
2206+
ol {
2207+
list-style-type: decimal;
2208+
}
2209+
2210+
/* Default list style types for unordered lists up to 3 deep */
2211+
ul { list-style-type: disc; }
2212+
ul ul { list-style-type: square; }
2213+
ul ul ul { list-style-type: circle; }
2214+
2215+
/* The type attribute on ol and ul elements */
2216+
ul[type="disc"] { list-style-type: disc; }
2217+
ul[type="circle"] { list-style-type: circle; }
2218+
ul[type="square"] { list-style-type: square; }
2219+
ol[type="1"] { list-style-type: decimal; }
2220+
ol[type="a"] { list-style-type: lower-alpha; }
2221+
ol[type="A"] { list-style-type: upper-alpha; }
2222+
ol[type="i"] { list-style-type: lower-roman; }
2223+
ol[type="I"] { list-style-type: upper-roman; }
2224+
2225+
/* The start attribute on ol elements */
2226+
ol[start] {
2227+
counter-reset: list-item attr(start, integer, 1);
2228+
counter-increment: list-item -1;
2229+
}
22392230

2240-
<p class=issue>Another example is required here.</p>
2241-
<!--
2242-
<pre>
2243-
h1-h6 numbering
2231+
/* The value attribute on li elements */
2232+
li[value] {
2233+
counter-reset: list-item attr(value, integer, 1);
2234+
counter-increment: none;<!-- XXX interaction with default increase -->
2235+
}
2236+
2237+
/* Box Model Rules */
2238+
ol, ul {
2239+
display: block;
2240+
margin: 1em 0;
2241+
padding-left: 2.5em;
2242+
}
2243+
2244+
ol ol, ol ul, ul ul, ul ol {
2245+
margin-top: 0;
2246+
margin-bottom: 0;
2247+
}
2248+
2249+
li {
2250+
text-align: match-parent;
2251+
}
2252+
2253+
li::marker {
2254+
margin-right: 1em;
2255+
text-align: right;
2256+
/* 'display', 'position', and 'text-align' implied by list-style-position */
2257+
}
22442258
</pre>
2245-
-->
22462259
<!-- ====================================================================== -->
22472260

22482261
<h2 id=ua-stylesheet><span class=secno>13. </span> Appendix A: Required

‎css3-lists/Overview.src.html‎

Lines changed: 66 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1570,64 +1570,77 @@ <h2 id="profiles">
15701570
<!-- ====================================================================== -->
15711571

15721572
<h2 id="html4">
1573-
Sample style sheet for HTML 4.0</h2>
1573+
Sample style sheet for HTML</h2>
15741574

1575-
<p>This section is informative, nor normative.</p>
1575+
<p>This section is informative, nor normative. HTML itself defines the
1576+
actual default properties that apply to HTML lists.</p>
15761577

15771578
<pre>
1578-
/* Set up list items */
1579-
li { display: list-item; /* counter-increment: list-item; (implied by display: list-item) */ }
1580-
1581-
/* Set up ol and ul so that they reset the list-item counter */
1582-
ol, ul { counter-reset: list-item; }
1583-
1584-
/* Default list style types for ordered lists */
1585-
ol { list-style-type: decimal; }
1586-
1587-
/* Default list style types for unordered lists up to 3<!-- 8 --> deep */
1588-
ul { list-style-type: disc; }
1589-
ul ul { list-style-type: square; }
1590-
ul ul ul { list-style-type: circle; }
1591-
<!-- and so on ad nauseum:
1592-
ul ul ul ul { list-style-type: box; }
1593-
ul ul ul ul ul { list-style-type: disc; }
1594-
ul ul ul ul ul ul { list-style-type: square; }
1595-
ul ul ul ul ul ul ul { list-style-type: circle; }
1596-
ul ul ul ul ul ul ul ul { list-style-type: box; }
1597-
-->
1598-
/* The type attribute on ol and ul elements */
1599-
ul[type="disc"] { list-style-type: disc; }
1600-
ul[type="circle"] { list-style-type: circle; }
1601-
ul[type="square"] { list-style-type: square; }
1602-
ol[type="1"] { list-style-type: decimal; }
1603-
ol[type="a"] { list-style-type: lower-alpha; }
1604-
ol[type="A"] { list-style-type: upper-alpha; }
1605-
ol[type="i"] { list-style-type: lower-roman; }
1606-
ol[type="I"] { list-style-type: upper-roman; }
1607-
1608-
/* The start attribute on ol elements */
1609-
ol[start] { counter-reset: list-item attr(start, integer, 1); counter-increment: list-item -1; }
1610-
1611-
/* The value attribute on li elements */
1612-
li[value] { counter-reset: list-item attr(value, integer, 1); counter-increment: none;<!-- XXX interaction with default increase --> }
1613-
1614-
/* The above rules don't fully describe HTML4 lists, since they do not cover
1615-
behaviors such as margins and the like. The following rules could be used
1616-
for this purpose:
1617-
1618-
ol, ul { display: block; margin: 1em 0; padding-left: 2.5em; }
1619-
ol ol, ol ul, ul ul, ul ol { margin-top: 0; margin-bottom: 0; }
1620-
li::marker { margin-right: 1em; text-align: right; }
1621-
1622-
*/
1623-
</pre>
1579+
/* Set up list items */
1580+
li {
1581+
display: list-item;
1582+
/* counter-increment: list-item; (implied by display: list-item) */
1583+
}
16241584

1625-
<p class="issue">Another example is required here.</p>
1626-
<!--
1627-
<pre>
1628-
h1-h6 numbering
1585+
/* Set up ol and ul so that they reset the list-item counter */
1586+
ol, ul {
1587+
counter-reset: list-item;
1588+
}
1589+
1590+
/* Default list style types for ordered lists */
1591+
ol {
1592+
list-style-type: decimal;
1593+
}
1594+
1595+
/* Default list style types for unordered lists up to 3 deep */
1596+
ul { list-style-type: disc; }
1597+
ul ul { list-style-type: square; }
1598+
ul ul ul { list-style-type: circle; }
1599+
1600+
/* The type attribute on ol and ul elements */
1601+
ul[type="disc"] { list-style-type: disc; }
1602+
ul[type="circle"] { list-style-type: circle; }
1603+
ul[type="square"] { list-style-type: square; }
1604+
ol[type="1"] { list-style-type: decimal; }
1605+
ol[type="a"] { list-style-type: lower-alpha; }
1606+
ol[type="A"] { list-style-type: upper-alpha; }
1607+
ol[type="i"] { list-style-type: lower-roman; }
1608+
ol[type="I"] { list-style-type: upper-roman; }
1609+
1610+
/* The start attribute on ol elements */
1611+
ol[start] {
1612+
counter-reset: list-item attr(start, integer, 1);
1613+
counter-increment: list-item -1;
1614+
}
1615+
1616+
/* The value attribute on li elements */
1617+
li[value] {
1618+
counter-reset: list-item attr(value, integer, 1);
1619+
counter-increment: none;<!-- XXX interaction with default increase -->
1620+
}
1621+
1622+
/* Box Model Rules */
1623+
ol, ul {
1624+
display: block;
1625+
margin: 1em 0;
1626+
padding-left: 2.5em;
1627+
}
1628+
1629+
ol ol, ol ul, ul ul, ul ol {
1630+
margin-top: 0;
1631+
margin-bottom: 0;
1632+
}
1633+
1634+
li {
1635+
text-align: match-parent;
1636+
}
1637+
1638+
li::marker {
1639+
margin-right: 1em;
1640+
text-align: right;
1641+
/* 'display', 'position', and 'text-align' implied by list-style-position */
1642+
}
16291643
</pre>
1630-
-->
16311644

16321645
<!-- ====================================================================== -->
16331646

0 commit comments

Comments
 (0)