Il est possible de demander que tous les titres (par exemple, tous les <H3> soient affichés d'une certaine manière.
<HTML>
<HEAD>
<STYLE type="text/css">
<!-- h3 { font-family: Arial;
font-style: italic;
color: yellow }
-->
</STYLE>
</HEAD>
<BODY>
<H3>Du jaune sans sérif italique</H3>
</BODY>
</HTML>
|
Du jaune sans sérif italique |
Généralement, on met toutes ces commandes dans un fichier séparé, de manière à pouvoir le réutiliser pour les différentes pages HTML d'un même site.
<HEAD>
<LINK rel="stylesheet" type="text/css" href="basic.css" title="style1">
</HEAD>
|
On peut aussi procéder ainsi.
<HEAD>
<STYLE type="text/css">
<!--
@import url("basic.css")
-->
</STYLE>
</HEAD>
|
Il est possible (c'est généralement stupide, mais c'est possible) de préciser cela à chaque fois.
<H3 style="font-family: Arial; font-style: italic; color: yellow"> Du jaune sans sérif italique</H3> |
Du jaune sans sérif italique |
On peut créer des « classes », ie, des « arguments » aux différentes balises.
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
.important { color: yellow }
-->
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="important"><P>Ceci est important</DIV>
</BODY>
</HTML>
|
|
Ceci est important |
On peut préciser que ces arguments ne sont valables que pour certaines balises.
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
TABLE.code { background-color: "#500000"}
TABLE.exemple { background-color: "#000050}
-->
</STYLE>
</HEAD>
<BODY>
<TABLE CLASS="code"><TR><TD><PRE>
<TABLE BORDER=2 CELLPADDING=10 CELLSPACING=2>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TABLE>
</PRE></TD></TR></TABLE>
<TABLE CLASS="exemple"><TR><TD>
<TABLE BORDER=2 CELLPADDING=10 CELLSPACING=2>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TABLE>
</TD></TR></TABLE>
</BODY>
</HTML>
|
|
Il y a aussi des « options » (c'est comme pour les classes, mais on remplace le point par deux points).
A:link {color: red}
A:visited {color: blue}
A:active {color: white}
|
| Voici un lien. (Vous constatez comme moi que si on demance de genre de changement localement, ça ne marche pas.) |
On peut modifier la manière dont les listes apparaissent.
EXEMPLE
On peut aussi jouer avec certaines dimensions.
h1, h2, h3, h4, h5 { color: red }
body { background-color: "#cccccc; }
body { font-family: Arial, Helvetica, sans-serif }
p { line-height: 200% }
ul li { font-size: 70% }
h1 { font-size: 120% }
h1 { text-transform: uppercase }
body { font-size: 10pt }
h1 { font-style: bold }
DIV.warning { margin-left: 0.5in;
margin-right: 0.5in;
color: yellow;
background: red
}
UL { list-style: url(fancybullet.gif) disc }
UL UL { list-style: url(otherbuller.gif) circle }
UL UL UL { list-style: url(yetanother.gif) square }
P { font-size: 14pt; line-height:16pt; font-family: helvetica }
P:first-letter { font-size: 200%; float: left }
H1 { color: blue; font: 18pt Arial bold }
P { font: 12pt Arial; text-indent: 0.5in }
|
| Ces exemples ont tendance à ne pas marcher. |
liste d'options : pour <A> : link, active, visited. plus généralement : first-letter, before.
H1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter; /* Add 1 to chapter */
counter-reset: section; /* Set section to 0 */
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }
|
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }
H1:before { content: counter(chno, upper-latin) ". " }
H2:before { content: counter(section, upper-roman) " - " }
BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }
DIV.note:before { content: counter(notecntr, disc) " " }
P:before { content: counter(p, none) }
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Markers before and after list items</TITLE>
<STYLE type="text/css">
@media screen, print {
LI:before {
display: marker;
content: url("smiley.gif");
LI:after {
display: marker;
content: url("sad.gif");
}
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>first list item comes first
<LI>second list item comes second
</UL>
</BODY>
</HTML>
|
<div STYLE="position: absolute;
top: 100px; left: 300px;
width: 200px; height: 200px;
border: thin solid black;
include-source: url("http://www.example.com/testpage.htm");">text block
</div>
|
P { text-indent: 3em }
code.html { color: "#191970 }
code.css { color: "#4b0082 }
P EM { background: yellow }
H1, H2, H3, H4, H5, H6 {
color: red;
font-family: sans-serif }
P:first-line {
font-variant: small-caps;
font-weight: bold }
P:first-letter { font-size: 300%; float: left }
|