http://www.yoyodesign.org/doc/w3c/css1/ *********** memo css ***********

+l'incorporation dans htm________________________________________________ les 4 m�thode possibles: <style type="text/css"> @import url(http://style.com/basic); h1 { color: blue }

ce titre est en bleu

et le paragraphe est en vert. <style type="text/css"> +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 */

beaucoup trop vert

+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 }

texte espac�

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 .reddish h1 #x78y code div.sidenote h1

{ { { {

font: small sans-serif } color: red } background: blue } 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 } a:visited { color: blue } a:active { color: lime }

/* lien non-visit� */ /* lien visit� */ /* lien activ� */

+les pseudo-�l�ments typographiques________________________________________________

1)first-line <style type="text/css"> p:first-line { font-variant: small-caps }

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 <style type="text/css"> p { font-size: 12pt; line-height: 12pt } p:first-letter { font-size: 200%; float: left } span { text-transform: uppercase }

<span>les premiers mots d'un article de journal.

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

|