APPRENDRE LE
LANGAGE HTML
(Hyper Text Markup Language)
2EME PARTIE
Feuilles de style
Introduit en 1997 par
Microsoft avec son
Feuilles de style Internet Explorer 3.0
Dans un document d'une
certaine importance, il
Concept arrive fréquemment que
l'on attribue à certains
éléments des
caractéristiques de mise
en forme identiques.
Par exemple, les noms de
chapitres seront mis en
police Arial, en gras et en
couleur bleue.
On peut imaginer que l'on
puisse donner à cette
Concept définition de mise en forme
un nom soit "titre" et qu'à
chaque nouveau chapitre,
plutôt que d'écrire chaque
fois le nom du titre et puis
de devoir le mettre en Arial,
gras, bleu, l'on puisse dire à
l'ordinateur, nom du chapitre
mais dans la mise en forme
que j'ai défini sous le nom de
"titre". Cette définition de
mise en forme particulière,
on va l'appeler feuille de
style.
Séparation du contenu et de
Utilité et la mise en forme.
avantages Cohésion de la présentation
tout au long du site avec les
feuilles de style externes.
Modifier l'aspect d'un page
ou d'un site sans en
modifier le contenu et cela
en quelques lignes plutôt
que de devoir changer un
grand nombre de balises.
Un "langage" neuf,
compréhensible, simple et
logique par rapport au Html
et à ses différentes versions.
Une façon d'écriture
Utilité et concise et nette par
avantages rapport au Html
Réduire le temps de
chargement des pages.
(contrôle des polices,
contrôle de la distance
entre les lignes, contrôle
des marges et des
indentations
Permettre le
positionnement au pixel
près du texte et/ou des
images
La définition de base d'un
Définition d'un style est simple :
style
balise { propriété de style: valeur; propriété de
style: valeur }
Exemple :
H3 { font-family: Arial; font-style:
italic }
Donc ici, la balise H3 sera
en Arial et en italique. Et
dans votre document,
toutes les balises <H3>
auront comme style Arial
et italique.
Les feuilles de style
Définition d'un portent sur des balises
style principalement et
quelques autres éléments
comme par exemple
A:link pour un lien non-
visité et A:visited pour un
lien visité. Comme balises
souvent utilisées avec des
feuilles de style, on peut
citer les en-têtes Hn, P,
BODY...
Les propriétés de style
Définition d'un sont entourées par des
style "{«
Pour la lisibilité Le couple "propriété de
toujours vous pouvez
écrire vos styles sur
style/valeur" est séparé
plusieurs lignes : par un double-point (:).
Chaque couple "propriété
H3 {font-family: de style/valeur" est
Arial; séparé par un point-
font-style: italic; virgule (;).
font-color: green} Il n'y a pas de limite pour
le nombre de couples
"propriétés de
style/valeur".
Cette façon de procéder
est de loin la plus
Styles internes commune et la plus
Il faut maintenant logique. D'abord parce que
incorporer les styles les balises HEAD
dans le document contiennent des
Html.
informations pour le
A l'intérieur des browser et les feuilles de
balises style appartiennent à
<HEAD></HEAD>
<HTML> celles-ci. Ensuite parce que
<HEAD> l'on rejoint ainsi l'essence
<STYLE
type="text/css">
même des feuilles de style
<!-- qui est de séparer les
La ou les feuille(s) de éléments de mise en forme
style du contenu.
-->
</STYLE>
</HEAD>
La balise <STYLE> avertit le
navigateur que l'on va utiliser
Styles internes des feuilles de style.
L'attribut type="text/css"
informe que ce qui suit est du
texte et qu'il s'agit de
cascading style sheets (css).
La balise Html de
commentaires <!-- ... -->
empêche que les browsers qui
ne connaissent pas les feuilles
de style, tentent d'interpréter
ces instructions. Les
informations à l'intérieur des
tags de commentaires seront
ignorées par ces browsers.
Définir une présentation
de style valable pour
Styles externes plusieurs pages et même
pour toutes les pages
d'un site. Ce qui est
possible, en créant une
page externe qui
<!-- regroupera toutes les
H3 {
feuilles de style, et en
font-family: Arial; reliant chaque page à
font-style: italic; cette page de style.
font-color: #CC0080;
font-ize: 40pt}
On crée d'abord, dans le
répertoire du site, un
BODY { fichier avec
background-color: #A0A0C0}
l'extension .css soit
--> [Link] qui contiendra
Ensuite, on crée une page
normale soit [Link]
Styles externes (bien entendu dans le
même répertoire que le
fichier [Link]).
<HTML>
<HEAD>
<LINK rel=stylesheet type="text/css"
href="[Link]">
<HEAD>
La balise <LINK> avertit le
browser qu'il faudra réaliser
Styles externes un lien.
L'attribut rel=stylesheet
(sans s et sans guillemets)
précise qu'il y trouvera une
feuille de style externe.
L'attribut type="text/css"
précise que l'information est
du texte et du genre
cascading style sheets (css).
L'attribut classique de lien
href=" ... " donne le chemin
d'accès et le nom du fichier
à lier.
on désire parfois affecter
des styles différents à une
Les classes même balise
.nom_de_classe { propriété de style:
valeur }
Attention! L'emploi du
point (.) devant le nom de
classe est indispensable
Pour appeler l'effet de
style dans le document,
on ajoute le nom de la
classe à la balise.
<balise class="nom_de-classe"> ....
</balise>
Un exemple ?
Je souhaite mettre ce qui
Les classes
est essentiel dans le texte
en gras et en bleu. Je crée
la classe .essentiel :
.essentiel { font-weight: bold; font-color:
#000080 }
Et dans le document
Html, il suffit d'appeler la
classe .essentiel
<P class=".essentiel"> ... blabla ... </P>
<H1 class=".essentiel">Titre 1</H1>
<TABLE><TR><TD
Pour "déconnecter" certains
<SPAN> et morceaux de paragraphe ou
<DIV> plusieurs paragraphes de
cette logique d'écriture avec
des feuilles de style.
Ce sont respectivement les
balises SPAN et DIV qui
créaient ainsi des petits
blocs particuliers dans le
document sans devoir
repasser par les éléments
structurels du Html
classique.
Notons que SPAN et DIV
s'utilisent toujours avec les
classes
La balise
<SPAN> ... </SPAN>
SPAN
permet d'appliquer des
styles à des éléments de
texte d'un paragraphe ou
si vous préférez à un
morceau de paragraphe.
<HTML>
<HEAD>
<STYLE type="text/css">
.element{font-size: x-large; color: navy}
</STYLE>
</HEAD>
<BODY>
<P>Un monde de <SPAN
class=element>géants</SPAN>.</P>
</BODY>
La balise <DIV> ...
</DIV> permet de
DIV regrouper plusieurs
paragraphes ou si vous
préférez, de délimiter une
zone comportant
<HTML>
<HEAD> plusieurs paragraphes.
<STYLE type="text/css">
.zone{font-size: x-small}
</STYLE>
</HEAD>
<BODY>
La balise <DIV>
<DIV class=zone>
<P>Commentaire :</P>
<P>N'oubliez pas l'attribut class!
</P>
</DIV>
</BODY>
La position absolue
Positionner avec {position: absolute} se
CSS
détermine par rapport au
Position absolue coin supérieur gauche de
la fenêtre du browser.
Les coordonnées de ce
point sont top = 0 et left
= 0. Les coordonnées
d'un point s'expriment en
pixels, de haut en bas
pour top et de gauche à
droite pour left.
La position relative
{position: relative} se
Position relative
détermine par rapport à
d'autres éléments de la
page, par exemple un
élément du code Html.
Précisons que l'on
utilisera presque toujours
le positionnement absolu
car plus facile et plus sûr.
Plaçons en position
Positionner du absolue le texte
texte "Publication Html"
<HTML> à 50 pixels du haut de la
<HEAD>
<STYLE type="text/css"> fenêtre (top) et à 150
.pub{ pixels à gauche (left).
position: absolute;
top: 100px;
left: 100px;
color: red;
font-size: x-large;
font-weight: bold;
}
</STYLE>
</HEAD>
<BODY>
<DIV class=pub> Publication Html
</DIV>
</BODY>
Plaçons l'image
Positionner une [Link] en position
image absolue à 50 pixels de
haut de la fenêtre (top) et
à 100 pixels à gauche
(left). Les dimensions de
l'image sont width=242
et height=84.
<HTML>
<BODY>
<span style="position:
absolute;
top: 50px;
left: 100px;
width: 242px;
heigth: 84px;">
<IMG src="[Link]">
</span>
</BODY>
Superposer du Reprenons l'image
texte sur une [Link] et on y
image superposera un nom, au
<HTML> pixel près dans la barre
<BODY>
<span style="position: absolute; qui souligne le terme
top: 50px; Html.
left: 100px;
width: 242px;
heigth: 84px;">
<IMG src="[Link]">
</span>
<span style="position: absolute;
top: 150px;
left: 160px;
color: yellow;
font-size: x-small;
font-weight: bold;">
Van Lancker Luc
</span>
</BODY>
</HTML>
