Css

http://www.yoyodesign.
org/doc/w3c/css1/
***********
memo css
***********
+l'incorporation dans htm________________________________________________
les 4 m�thode possibles:

<html>
<head>
<title>titre</title>
<link rel=stylesheet type="text/css"
href="http://style.com/cool" title="cool">
<style type="text/css">
@import url(http://style.com/basic);
h1 { color: blue }
</style>
</head>
<body>
<h1>ce titre est en bleu</h1>
<p style="color: green">et le paragraphe est en vert.
</body>
</html>
<style type="text/css"></style>
+le regroupement__________________________________________________________
h1, h2, h3 { font-family: helvetica } // des s�lecteur
h1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
} //eq �:
h1 { font: bold 12pt/14pt helvetica }
+h�ritage :________________________________________________________________
pour donner une propri�t� de style par "d�faut" � un document

body {
color: black;
background: url(texture.gif) white;
}
l'exemple ci-dessus donne un rendu du texte en noir et une image de fond.

le fond sera blanc si l'image n'est pas disponible
souvent, la valeur d'une propri�t� est un pourcentage de celle d'une autre
propri�t� :
p { font-size: 10pt }
p { line-height: 120% } /* relatif � 'font-size', c-�-d 12pt */
+une classe comme s�lecteur__________________________________________________
pour accro�tre la granularit� de l'action sur les �l�ments

.pastoral { color: green } /* tous les �l�ments de la classe pastoral */
<h1 class=pastoral>beaucoup trop vert</h1>
+un id comme s�lecteur________________________________________________________

garantit le caract�re d'unicit� d'un objet dans un document.
#z98y { letter-spacing: 0.3em }

h1#z98y { letter-spacing: 0.5em }
<p id=z98y>texte espac�</p>
dans l'exemple ci-dessus, le premier s�lecteur vise l'�l�ment 'p' en raison de la

valeur de l'attribut 'id'.
le second s�lecteur sp�cifie � la fois un type d'�l�ment ('h1') et une valeur
d'id, il ne concernera donc pas l'�l�ment 'p'.
+les commentaires_______________________________________________________________
em { color: red } /* rouge, vraiment rouge ! */

les commentaires ne peuvent pas �tre imbriqu�s. un interpr�teur css1 consid�re un
commentaire comme un blanc.
+les s�lecteurs contextuels______________________________________________________
seuls les �l�ments 'em' dans 'h1' soient rouge:

h1 em { color: red }
div p { font: small sans-serif }

.reddish h1 { color: red }
#x78y code { background: blue }
div.sidenote h1 { font-size: large }
on peut regrouper plusieurs s�lecteurs contextuels :

h1 b, h2 b, h1 em, h2 em { color: red }
+les pseudo-classes d'ancre

__________________________________________________________________________________
habituellement, les agents utilisateurs diff�rencient � l'affichage les liens

visit�s des liens non-visit�s. en css1, cela est fait par des pseudo-classes sur
l'�l�ment 'a' :
a:link { color: red } /* lien non-visit� */

a:visited { color: blue } /* lien visit� */
a:active { color: lime } /* lien activ� */
+les pseudo-�l�ments
typographiques________________________________________________
1)first-line
p:first-line { font-variant: small-caps }
</style>
<p>la premi�re ligne d'un article dans un journal.
un agent utilisateur en mode texte donnerait :
la premi�Re ligne d'un article

dans un journal.
2)first-letter
<html>
<head>
<title>titre</title>
p { font-size: 12pt; line-height: 12pt }
p:first-letter { font-size: 200%; float: left }
span { text-transform: uppercase }
</style>
</head>
<body>
<p><span>les premiers</span> mots d'un article de journal.</p>
</body>
</html>
une repr�sentation (improbable) par un agent utilisateur en mode texte g�rant le

pseudo-�l�ment 'first-letter' donnerait :
| es premiers
|_ mots d'un
article de journal.
dans un s�lecteur contextuel, on ne peut mettre les pseudo-�l�ments qu'� la fin du

s�lecteur :
body p:first-letter { color: purple }
+cascade_________________________________________________________
@import url(http://www.style.org/roux);
@import url(http://www.style.org/marine);
h1 { color: red } /* annule le style import� */
important
l'auteur peut accro�tre le poids des r�gles de sa feuille de style :
h1 { color: black ! important; background: white ! important }
+le mod�le de mise en forme_______________________________________

les �l�ments ayant une valeur 'none' pour la propri�t� 'display' n'ont pas de
format et ne sont donc pas inscrits dans une telle bo�te.
_______________________________________
| |
| marge [margin] (transparent) |
| _________________________________ |
| | | |
| | bordure [border] | |
| | ___________________________ | |
| | | | | |
| | | espacement [padding] | | |
| | | _____________________ | | |
| | | | | | | |
| | | | contenu | | | |
| | | |_____________________| | | |
| | |___________________________| | |
| |_________________________________| |
|_______________________________________|
|largeur de l'�l�ment |
| largeur de la bo�te |

Css

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Css

Transféré par

Droits d'auteur :

Formats disponibles

http://www.yoyodesign.

+l'incorporation dans htm________________________________________________

les 4 m�thode possibles:

h1, h2, h3 { font-family: helvetica } // des s�lecteur

pour donner une propri�t� de style par "d�faut" � un document

l'exemple ci-dessus donne un rendu du texte en noir et une image de fond.

+une classe comme s�lecteur__________________________________________________

pour accro�tre la granularit� de l'action sur les �l�ments

+un id comme s�lecteur________________________________________________________

#z98y { letter-spacing: 0.3em }

<p id=z98y>texte espac�</p>

dans l'exemple ci-dessus, le premier s�lecteur vise l'�l�ment 'p' en raison de la

em { color: red } /* rouge, vraiment rouge ! */

+les s�lecteurs contextuels______________________________________________________

seuls les �l�ments 'em' dans 'h1' soient rouge:

div p { font: small sans-serif }

on peut regrouper plusieurs s�lecteurs contextuels :

+les pseudo-classes d'ancre

habituellement, les agents utilisateurs diff�rencient � l'affichage les liens

a:link { color: red } /* lien non-visit� */

<p>la premi�re ligne d'un article dans un journal.

un agent utilisateur en mode texte donnerait :

la premi�Re ligne d'un article

une repr�sentation (improbable) par un agent utilisateur en mode texte g�rant le

dans un s�lecteur contextuel, on ne peut mettre les pseudo-�l�ments qu'� la fin du

+le mod�le de mise en forme_______________________________________

Vous aimerez peut-être aussi