Maison >interface Web >tutoriel HTML >L'organisation w3c donne des suggestions de style pour la production de pages html4_HTML/Xhtml_web
Il s'agit de la suggestion de style HTML4 de l'organisation w3c Malheureusement, les navigateurs ont ajouté leurs propres attributs privés, laissant la norme dans le flou. Mais il revêt toujours pour nous une grande importance de référence.
Annexe D. Feuille de style par défaut pour HTML 4
Cette annexe est informative et non normative.
Cette feuille de style décrit le formatage typique de tous les éléments HTML 4 ([HTML4]) basés sur des recherches approfondies sur les pratiques actuelles de l'UA. Les développeurs sont encouragés à l'utiliser comme feuille de style par défaut dans leurs implémentations
La présentation complète de certains éléments HTML ne peut pas être exprimée en CSS 2.1, y compris les éléments remplacés ("img", "objet"), éléments de script ("script", "applet"), éléments de contrôle de formulaire et éléments de cadre
Pour les autres éléments, la présentation héritée peut être décrite en CSS mais la solution supprime l'élément. Par exemple, l'élément FONT peut être remplacé en attachant des déclarations CSS à d'autres éléments (par exemple, DIV). De même, la présentation héritée des attributs de présentation (par exemple, l'attribut « border » sur TABLE) peut être décrite en CSS, mais le balisage en CSS. le document source doit être modifié
.
<code class="css">html, address, <br>blockquote, <br>body, dd, div, <br>dl, dt, fieldset, form, <br>frame, frameset, <br>h1, h2, h3, h4, <br>h5, h6, noframes, <br>ol, p, ul, <span class="value"><font color="#0000ff">center</font></span>, <br>dir, hr, menu, <span class="value"><font color="#0000ff">pre</font></span> { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">block</font></span> } <br>li { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">list-item</font></span> } <br>head { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">none</font></span> } <br>table { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: table } <br>tr { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">table-row</font></span> } <br>thead { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">table-header-group</font></span> } <br>tbody { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">table-row-group</font></span> } <br>tfoot { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">table-footer-group</font></span> } <br>col { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">table-column</font></span> } <br>colgroup { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">table-column-group</font></span> } <br>td, th { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">table-cell</font></span> } <br><span class="value"><font color="#0000ff">caption</font></span> { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">table-caption</font></span> } <br>th { <span class="attrib"><strong><font color="#000080">font-weight</font></strong></span>: <span class="value"><font color="#0000ff">bolder</font></span>; <span class="attrib"><strong><font color="#000080">text-align</font></strong></span>: <span class="value"><font color="#0000ff">center</font></span> } <br><span class="value"><font color="#0000ff">caption</font></span> { <span class="attrib"><strong><font color="#000080">text-align</font></strong></span>: <span class="value"><font color="#0000ff">center</font></span> } <br>body { <span class="attrib"><strong><font color="#000080">margin</font></strong></span>: <span class="number"><font color="#ff0000">8px</font></span> } <br>h1 { <span class="attrib"><strong><font color="#000080">font-size</font></strong></span>: <span class="number"><font color="#ff0000">2em</font></span>; <span class="attrib"><strong><font color="#000080">margin</font></strong></span>: .<span class="number"><font color="#ff0000">67em</font></span> <span class="number"><font color="#ff0000">0</font></span> } <br>h2 { <span class="attrib"><strong><font color="#000080">font-size</font></strong></span>: <span class="number"><font color="#ff0000">1.5em</font></span>; <span class="attrib"><strong><font color="#000080">margin</font></strong></span>: .<span class="number"><font color="#ff0000">75em</font></span> <span class="number"><font color="#ff0000">0</font></span> } <br>h3 { <span class="attrib"><strong><font color="#000080">font-size</font></strong></span>: <span class="number"><font color="#ff0000">1.17em</font></span>; <span class="attrib"><strong><font color="#000080">margin</font></strong></span>: .<span class="number"><font color="#ff0000">83em</font></span> <span class="number"><font color="#ff0000">0</font></span> } <br>h4, p, <br>blockquote, ul, <br>fieldset, form, <br>ol, dl, dir, <br>menu { <span class="attrib"><strong><font color="#000080">margin</font></strong></span>: <span class="number"><font color="#ff0000">1.12em</font></span> <span class="number"><font color="#ff0000">0</font></span> } <br>h5 { <span class="attrib"><strong><font color="#000080">font-size</font></strong></span>: .<span class="number"><font color="#ff0000">83em</font></span>; <span class="attrib"><strong><font color="#000080">margin</font></strong></span>: <span class="number"><font color="#ff0000">1.5em</font></span> <span class="number"><font color="#ff0000">0</font></span> } <br>h6 { <span class="attrib"><strong><font color="#000080">font-size</font></strong></span>: .<span class="number"><font color="#ff0000">75em</font></span>; <span class="attrib"><strong><font color="#000080">margin</font></strong></span>: <span class="number"><font color="#ff0000">1.67em</font></span> <span class="number"><font color="#ff0000">0</font></span> } <br>h1, h2, h3, h4, <br>h5, h6, b, <br>strong { <span class="attrib"><strong><font color="#000080">font-weight</font></strong></span>: <span class="value"><font color="#0000ff">bolder</font></span> } <br>blockquote { <span class="attrib"><strong><font color="#000080">margin-left</font></strong></span>: <span class="number"><font color="#ff0000">40px</font></span>; <span class="attrib"><strong><font color="#000080">margin-right</font></strong></span>: <span class="number"><font color="#ff0000">40px</font></span> } <br>i, cite, em, <br>var, address { <span class="attrib"><strong><font color="#000080">font-style</font></strong></span>: <span class="value"><font color="#0000ff">italic</font></span> } <br><span class="value"><font color="#0000ff">pre</font></span>, tt, <span class="value"><font color="#0000ff">code</font></span>, <br>kbd, samp { <span class="attrib"><strong><font color="#000080">font-family</font></strong></span>: monospace } <br><span class="value"><font color="#0000ff">pre</font></span> { <span class="attrib"><strong><font color="#000080">white-space</font></strong></span>: <span class="value"><font color="#0000ff">pre</font></span> } <br>button, textarea, <br>input, select { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">inline</font></span>-<span class="value"><font color="#0000ff">block</font></span> } <br>big { <span class="attrib"><strong><font color="#000080">font-size</font></strong></span>: <span class="number"><font color="#ff0000">1.17em</font></span> } <br><span class="value"><font color="#0000ff">small</font></span>, <span class="value"><font color="#0000ff">sub</font></span>, sup { <span class="attrib"><strong><font color="#000080">font-size</font></strong></span>: .<span class="number"><font color="#ff0000">83em</font></span> } <br><span class="value"><font color="#0000ff">sub</font></span> { <span class="attrib"><strong><font color="#000080">vertical-align</font></strong></span>: <span class="value"><font color="#0000ff">sub</font></span> } <br>sup { <span class="attrib"><strong><font color="#000080">vertical-align</font></strong></span>: <span class="value"><font color="#0000ff">super</font></span> } <br>table { <span class="attrib"><strong><font color="#000080">border-spacing</font></strong></span>: <span class="number"><font color="#ff0000">2px</font></span>; } <br>thead, tbody, <br>tfoot { <span class="attrib"><strong><font color="#000080">vertical-align</font></strong></span>: <span class="value"><font color="#0000ff">middle</font></span> } <br>td, th, tr { <span class="attrib"><strong><font color="#000080">vertical-align</font></strong></span>: inherit } <br>s, strike, del { <span class="attrib"><strong><font color="#000080">text-decoration</font></strong></span>: <span class="value"><font color="#0000ff">line-through</font></span> } <br>hr { <span class="attrib"><strong><font color="#000080">border</font></strong></span>: <span class="number"><font color="#ff0000">1px</font></span> <span class="value"><font color="#0000ff">inset</font></span> } <br>ol, ul, dir, <br>menu, dd { <span class="attrib"><strong><font color="#000080">margin-left</font></strong></span>: <span class="number"><font color="#ff0000">40px</font></span> } <br>ol { <span class="attrib"><strong><font color="#000080">list-style-type</font></strong></span>: <span class="value"><font color="#0000ff">decimal</font></span> } <br>ol ul, ul ol, <br>ul ul, ol ol { <span class="attrib"><strong><font color="#000080">margin-top</font></strong></span>: <span class="number"><font color="#ff0000">0</font></span>; <span class="attrib"><strong><font color="#000080">margin-bottom</font></strong></span>: <span class="number"><font color="#ff0000">0</font></span> } <br>u, ins { <span class="attrib"><strong><font color="#000080">text-decoration</font></strong></span>: <span class="value"><font color="#0000ff">underline</font></span> } <br>br:before { <span class="attrib"><strong><font color="#000080">content</font></strong></span>: <span class="string"><font color="#008080">"\A"</font></span>; <span class="attrib"><strong><font color="#000080">white-space</font></strong></span>: <span class="value"><font color="#0000ff">pre</font></span>-line } <br><span class="value"><font color="#0000ff">center</font></span> { <span class="attrib"><strong><font color="#000080">text-align</font></strong></span>: <span class="value"><font color="#0000ff">center</font></span> } <br>:link, :visited { <span class="attrib"><strong><font color="#000080">text-decoration</font></strong></span>: <span class="value"><font color="#0000ff">underline</font></span> } <br>:focus { <span class="attrib"><strong><font color="#000080">outline</font></strong></span>: <span class="value"><font color="#0000ff">thin</font></span> <span class="value"><font color="#0000ff">dotted</font></span> <span class="value"><font color="#0000ff">invert</font></span> } <br> <br><span class="mlcom"><font color="#4040c2">/* Begin bidirectionality settings (do not change) */</font></span> <br>BDO[DIR=<span class="string"><font color="#008080">"ltr"</font></span>] { <span class="attrib"><strong><font color="#000080">direction</font></strong></span>: <span class="value"><font color="#0000ff">ltr</font></span>; <span class="attrib"><strong><font color="#000080">unicode-bidi</font></strong></span>: <span class="value"><font color="#0000ff">bidi-override</font></span> } <br>BDO[DIR=<span class="string"><font color="#008080">"rtl"</font></span>] { <span class="attrib"><strong><font color="#000080">direction</font></strong></span>: <span class="value"><font color="#0000ff">rtl</font></span>; <span class="attrib"><strong><font color="#000080">unicode-bidi</font></strong></span>: <span class="value"><font color="#0000ff">bidi-override</font></span> } <br> <br>*[DIR=<span class="string"><font color="#008080">"ltr"</font></span>] { <span class="attrib"><strong><font color="#000080">direction</font></strong></span>: <span class="value"><font color="#0000ff">ltr</font></span>; <span class="attrib"><strong><font color="#000080">unicode-bidi</font></strong></span>: <span class="value"><font color="#0000ff">embed</font></span> } <br>*[DIR=<span class="string"><font color="#008080">"rtl"</font></span>] { <span class="attrib"><strong><font color="#000080">direction</font></strong></span>: <span class="value"><font color="#0000ff">rtl</font></span>; <span class="attrib"><strong><font color="#000080">unicode-bidi</font></strong></span>: <span class="value"><font color="#0000ff">embed</font></span> } <br> <br>@media <span class="value"><font color="#0000ff">print</font></span> { <br> h1 { <span class="attrib"><strong><font color="#000080">page-break-before</font></strong></span>: <span class="value"><font color="#0000ff">always</font></span> } <br> h1, h2, h3, <br> h4, h5, h6 { <span class="attrib"><strong><font color="#000080">page-break-after</font></strong></span>: <span class="value"><font color="#0000ff">avoid</font></span> } <br> ul, ol, dl { <span class="attrib"><strong><font color="#000080">page-break-before</font></strong></span>: <span class="value"><font color="#0000ff">avoid</font></span> } <br>}</code>Annexe D. Feuille de style par défaut pour HTML 4