body {background-color: rgb(240,240,255);}
background-color: s'utilise avec presque toutes les
balises. On peut mettre un fond coloré aux titres <h1>
à <h6>, à <p>, <ul,
ol, li > et à tous les éléments html
La couleur s'exprime en noms (aqua,
black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple,
red, silver, teal, white, yellow) pour les 16 couleurs simples et
"garanties grand teint"
ou en notation hexadécimale ou RGB pour les nuances plus complexes.
p { color: green;} permet de régler la couleur du texte.
La couleur du texte se formule color: green; ou color: #009900;
ou encore color: rgb(0,200,0); dans toutes
les balises.
Les balises suivantes vont permettre de
régler la police de caractère et la taille, :
font-family: verdana;
L'instruction "appelle" une police qui doit être présente dans l'ordinateur .
Attention donc aux polices fantaisistes qui vous pourriez avoir rajouté dans votre système :
si l'ordinateur de la personne qui consulte votre site ne trouve pas cette police dans son dossier "polices" ("fonts"), il la remplacera par la "Times" par défaut...
et votre choix de police ne pourra être exécuté. Mieux vaut donc choisir dans les polices les plus répandues, présentes dans tous les systèmes.
Les plus répandues : grasses : Arial Black, Impact ; Sans-serif (sans patins) : Arial, Helvetica, Geneva, Verdana, Trebuchet ; Serif (avec patins) : Times New Roman, Georgia, Courrier, Courrier New ; cursives : Brush Script MT, Comic Sans MS ; chasse fixe : Monaco, Andale Mono .
font-size: 12px ou 1em ou 90% ;
La taille se formule en toutes sortes d'unités; les plus pertinentes sont : em (element), %, px (pixels).
em : l'intérêt de em (element) est d'être
une mesure relative.
Em est la taille du M de la police à
cet endroit, telle qu'affichée par le navigateur si l'on ne spécifiait pas d'instruction de style;
0.8 em fera 0,8x la taille courante à cet endroit,
(+ petit),
2 em fera le double de la taille courante à cet
endroit.
L'intérêt d'une mesure relative est qu'elle n'empêche pas
l'utilisateur de redimensionner l'affichage de la page en consultation
ATTENTION: à l'inverse, une taille de police formulée en px (pixels) ou en pt (points) voire en pc(pica) cher aux typographes, risque de "bloquer" la mise en page à une taille objective. L'impression première sera meilleure (contrôle de la mise en page) mais le passage dans différents navigateurs, puis systèmes qui ont des modalités d'affichage divergentes, donnera des différences parfois importantes, sans possibilité de réglage. NB: par exemple, l'affichage sur mac est 1,3 x plus grand que sur PC.
les alignements de texte sont formulés text-align: left, right, center, justify . L'instruction text-align: justify; n'est pas exécutée par tous les navigateurs. Par défaut, l'alignement est left;
width: 500px; height: 400px; . Largeur et Hauteur peuvent aussi être formulées en em ou % pour des constructions élastiques qui suivent le redimensionnement de la fenêtre selon la taille d'écran de l'utilisateur.
Les hauteurs de lignes peuvent être ajustées par
line-height: 1.8em;
Exemple :
Annos undeviginti natus exercitum privato consilio et privata impensa comparavi, per quem rem publicam a dominatione factionis oppressam in libertatem vindicavi.
letter-spacing: 10px;
Annos undeviginti natus exercitum privato consilio et privata impensa comparavi, per quem rem publicam a dominatione factionis oppressam in libertatem vindicavi.
word-spacing: 2em;Annos undeviginti natus exercitum privato consilio et privata impensa comparavi, per quem rem publicam a dominatione factionis oppressam in libertatem vindicavi.
on peut mettre des bordures, varier la
couleur et l'épaisseur :
border : solid
2px maroon; border s'applique à tous les
éléments.
On peut aussi ne mettre qu'une bordure de largeur et
style réglable :
à
gauche,
en haut,
à droite ou
en bas (soulignement)
border-left, border-top, border-right,
border-bottom;
ou varier les genres de bordures : dotted;solid; dashed; groove;inset; outset; ridge.
Formule groupée : border: dotted 4px red;
2 notions :
padding : espace intérieur aux limites du bloc
Donc écartement du texte à l'intérieur par rapport au bord
margin : espace extérieur aux limites du bloc
écartement d'un bloc par rapport à un autre, ou par rapport aux bords de la fenêtre.
padding :
espace intérieur au paragraphe, au bloc ; comme pour les bordures on peut formuler le padding en px, pt, em...
et ne mettre qu'un padding à gauche ou en bas, ou des padding différents sur tous les côtés :
padding : 1em 2em 3em 4em;
Voici un exemple de padding: 3em; à l'intérieur de border: dotted 1px red; :
Il se colle à ce paragraphe parce qu'il n'a pas de margin:
Annos undeviginti natus exercitum privato consilio et privata impensa comparavi, per quem rem publicam a dominatione factionis oppressam in libertatem vindicavi.
margin :
espace extérieur au paragraphe, au bloc. Mêmes spécifications que pour padding.
Voici un exemple de margin à l'extérieur de la bordure pointillée rouge
Il ne se colle pas au paragraphe comme le précédent, car la margin l'éloigne de 2 em de tous les côtés:
Annos undeviginti natus exercitum privato consilio et privata impensa comparavi, per quem rem publicam a dominatione factionis oppressam in libertatem vindicavi.
Nous pouvons attribuer à un paragraphe une largeur et une
hauteur, relatives ou absolues : width: 50%; ou width :500px; height:250px;
Nous pouvons l'aligner en milieu de page avec margin-left: auto; margin-right: auto;
Il faudra parfois (surtout sur pc avec IE) pour parvenir à cet alignement, installer notre(nos) élément(s)<p> dans un div large de 100% :
Annos undeviginti natus exercitum privato consilio et privata impensa comparavi, per quem rem publicam a dominatione factionis oppressam in libertatem vindicavi.
NB: Cette question du centrage est un peu difficile au début. Une logique "parent/enfant" s'applique ; dans une structure <div><p>blablabla</p></div>, <p> est l'enfant de <div>, et "blablabla" l'enfant de <p>. L'instruction text-align: center; donnée dans le div va être suivie par son enfant, p, et le suivant,le contenu,"blablabla". Il faut un peu de tâtonnement au début.
Une image en background : background-image: url(imgs/fond.gif); [exemple]
Sans autre précision, une petite image sera répétée sur l'écran et le remplira, [exemple] [ exemple]
Mais on peut aussi lui commander de ne se multiplier que dans une direction (axe x ou y);
background-image: url(imgs/fond.gif); background-repeat: repeat-x; [exemple]
...ou de ne pas se multiplier et de se centrer. Formulation groupée :
background:
#00ff00 url('img2/006bl.JPG') no-repeat center; [exemple]
NB: si l'image en fond de page n'est pas grande, ou a un niveau de transparence (gif89a), elle peut se combiner avec une couleur de fond de page, d'où la possibilité de formulation groupée.
Les images de fond s'appliquent aussi aux paragraphes et à tous les éléments, comme le titre <h3> ci-dessous par exemple:
[ Rappel ] Les balises suivantes sont réservés à une mise en relief ponctuelle d'un mot ou d'une expression
dans le flux du texte et PAS à LA MISE EN PAGE DE PARAGRAPHES !
<code>code</code>
<em> emphasis
<strong>strong
<cit>
<tt>télétexte
<b>gras</b>,(obsolète, remplacer par<strong>)
<i> italique</i>,(obsolète, remplacer par<em>)
<u> underlined</u> (obsolète, préférez text-decoration: underline;)
On pourra attribuer une fois pour toutes des caractères visuels
à une de ces balises, comme dans ce TD où le code est toujours sur fond vert .
Il me suffit de taper <code> contenu</code> pour que la feuille de style liée envoie automatiquement l'instruction suivante:
code { background-color: rgb( 210,255,210); line-height: 2em; font-size: 1.2em;}
Piège des vieux logiciels propriétaires: L'html évolue vite et les versions anciennes de logiciels wysiwyg vous feront un site dans un langage
de l'époque de leur sortie; Le vieux Dreamwaver de votre cousin quadragénaire fera de l'Html 4 avec une mise en page par tableaux, toutes choses affreusement dépassées. Ce n'est pas qu'une question de mode: la séparation de la structure et du style obéit à une nécessité: dans un code qui ressemblait à la jungle, il devenait impossible de mettre à jour les sites. les versions récentes produiront un langage plus ou moins actuel, qui sera vite dépassé, vous incitant à acheter les dernières versions.
Il existe maintenant aussi des logiciels gratuits, par exemple Komposer, dont on peut charger les versions successives. Amha le mieux c'est de savoir écrire soi-même et de s'en passer.
Rappel : la tendance des sites les mieux
développés est au html le plus simple et structurel
possible (à la limite, consultable en "brut" avec un navigateur
ancien) ; avec une mise en forme CSS bien séparée, proposant plusieurs options de présentation :
l'accessibilité du site aux handicaps divers (présentation vocale, commandes au clavier...) mais aussi
aux instruments légers (tablettes ou téléphones portables) est un objectif majeur qui suit l'explosion des
modèles.
Néanmoins du fait de l'interaction
des instructions (cascading), obtenir la stabilité de
mise en page sur différentes plateformes et navigateurs
représente pas mal de travail.
C'est pourquoi sont apparus des "frameworks" comme twitter bootstrap qui sont des feuilles de style préfabriquées, extrêmement élaborées, qui permettent de ne pas réinventer la roue à chaque développement. Les plus avancés d'entre vous pourront sans doute s'y frotter.
La même chose sur le site W3C : débuter avec html+css de Bert Bos qui vous apprend à mettre les instructions de style dans le head. C'est possible (on peut même en mettre "à la volée" dans des balises, je le fais dans cette page pour les exemples) mais à mon avis, vous gagnerez à laisser bien séparés les deux contextes, et je noterai donc une feuille de style unique pour le site. Après, ce sera comme vous voudrez ;-)