Les styles
Le sommaire :
Les styles répondent à une règle appelée CSS.
On peut utiliser les styles directement dans du texte, dans des balises, mais on peut aussi bien, définir les styles dans l’entête d’une page ou encore, dans un fichier séparé dont l’extension est CSS.
Si on définit un style directement dans du texte, on doit encadrer le texte concerné, par la balise de début et de fin du style.
Si on définit un style dans la balise d’un élément, le style sera actif jusqu'au marqueur de fin de balise de l’élément concerné.
Dans le cadre d’une déclaration de styles dans l’entête d’une page ou dans un fichier externe CSS, le style se rattache à un élément HTML précis, par exemple, pour l’élément <P>, ou encore, <H1>.
Mais lorsque vous déclarez des styles dans l’entête d’une page, ces styles ne sont utilisables qu’à partir de la page contenant la déclaration en son entête.
Cependant, dans le cas de l’utilisation d’un fichier de styles CSS externe, les styles sont utilisables à partir de toutes les pages HTML.
Lorsqu’un élément HTML est défini à partir des différents emplacements dont nous venons de présenter, la priorité est la suivante :
Dans un texte, à l’intérieur d’un paragraphe ou d’un titre, vous pouvez assigner un style à une chaîne de caractères précise;
Il vous suffira alors d’employer une balise appropriée.
Dans l’exemple qui suit, le mot, « monde », sera encadré par la balise <B> de façon à le mettre en gras :
<P>Voulez-vous faire le tour du <B>monde</B> avec moi ?</P>
Voici les 3 styles courants :
<B> : Gras.
<I> : Italique.
<U> : Souligné.
Il est possible de définir directement un style à partir d’un élément.
L’exemple qui suit définit le style de couleur « Rouge » pour l’élément « paragraphe » :
<P Style=»color:Red»>Comment allez-vous ?</P>
La déclaration de styles dans l’entête d’une page se réalise dans le bloc entête, entre <HEAD> et </HEAD>.
Dans l’exemple qui suit, nous allons définir des styles pour les éléments H1 et P :
<HEAD>
<TITLE>Ceci est le titre de la page</TITLE>
<STYLE
Type=”text/css”> H1 { COLOR : BLUE }
P {
COLOR:REG }
</STYLE>
</HEAD>
Pour chaque déclaration de style, la syntaxe est la suivante :
Sélecteur { Propriété:Valeur }
Description :
Sélecteur est l’élément pour lequel on définit un style, par exemple, H1 pour titre de niveau 1, ou encore, A pour lien.
Propriétés est la propriété du style qui est définit, par exemple, COLOR pour la couleur, ouText-Style pour le style de caractères.
Valeur est la valeur assignée à la propriétés, par exemple BLUE, GREEN, YELLOW, ou encore, Italic.
Remarque :
La propriété et la valeur sont placées entre accolades. Le bloc Propriété/Valeur est appelé « Déclaration ».
Plusieurs déclarations peuvent être définies dans les mêmes accolades, dans ce cas, il conviendra de séparer chaque déclaration de celle qui la précède par le signe de ponctuation « Point virgule ». Ce signe est appelé le Séparateur.
De même que vous pourrez définir simultanément des déclarations identiques pour plusieurs sélecteurs.
Par exemple, si vous souhaitez définir la couleur « Bleue » et le style italique pour les éléments HTML titre de niveau 1 et paragraphe :
H1, P {
COLOR:BLUE;Text-Style:Italic }
La déclaration du fichier contenant les styles se réalise dans le bloc entête <HEAD>, juste après le titre de la page.
Ci-après, la déclaration du fichier styles.css :
<HEAD>
<TITLE>Ceci est le titre de la page</TITLE>
<LINK rel=STYLESHEET
href="styles.css" type="text/css">
</HEAD>
Dans le fichier externe, dont l’extension est CSS, la syntaxe pour déclarer les styles est la suivante :
Sélecteur { Propriété:Valeur }
Description :
Sélecteur est l’élément pour lequel on définit un style, par exemple, H1 pour titre de niveau 1, ou A pour lien.
Propriétés est la propriété du style qui est définit, par exemple, COLOR pour la couleur, ou encore, Text-Style pour le style de caractères.
Valeur est la valeur assignée à la propriétés, par exemple BLUE, RED, YELLOW, GREEN, ou encore, Italic.
Remarque :
La propriété et la valeur sont placées entre accolades. Le bloc Propriété/Valeur est appelé « Déclaration ».
Plusieurs déclarations peuvent être définies dans les mêmes accolades, dans ce cas, il conviendra de séparer chaque déclaration de celle qui la précède par le signe de ponctuation « Point virgule ». Ce signe est appelé le Séparateur.
De même que vous pourrez définir simultanément des déclarations identiques pour plusieurs sélecteurs.
Par exemple, si vous souhaitez définir la couleur « Bleue » et le style italique pour les éléments HTML titre de niveau 1 et paragraphe :
H1, P {
COLOR:BLUE;Text-Style:Italic }
A partir de votre déclaration de styles, dans l'entête de
votre document HTML ou dans un fichier externe, vous pouvez définir un style
pour une ou plusieurs classes de styles.
C'est à vous de définir le nom de la classe et ainsi, dans votre document, vous pourrez ajouter la classe à un élément, le style définit à cette classe sera combiné avec le style de base de l'élément lui-même.
Lors de la déclaration de la classe, le nom de la classe
doit être précédé d’un point.
Si après, et à titre d’exemple, dans un fichier de styles externe, nous allons définir 2 classes, Rouge et Remarque :
Ensuite, dans le document HTML, nous allons utiliser la
classe Rouge pour l’élément H1, et la classe Remarque pour l’élément P.
Le fichier de style externe :
.rouge {
COLOR:Red }
.remarque {
Color:Blue;Font-style:Italic }
Le document
principal HTML :
<HTML>
<HEAD>
<TITLE>Bienvenue dans le département 17</TITLE>
<LINK
rel=STYLESHEET href="styles.css" type="text/css">
</HEAD>
<BODY>
<H1 classe=rouge>LA CHARENTE-MARITIME</H1>
<P></P>
<P>Le département de LA CHARENTE-MARITIME est un
département de sept cent mille habitants situé dans le sud-ouest de LA
FRANCE<A HRef="#note1" NAME="retour1">(1)</A>.
<P classe=remarque>Vous pouvez visiter le vieux port
de LA ROCHELLE<A HRef="#note2"
NAME="retour2">(2)</A>, n'oubliez pas de rendre visite à son
magnifique aquarium !
<P>Vous en profiterez pour déguster les excellentes
fines de claires<A HRef="#note3"
NAME="retour3">(3)</A> car LA ROCHELLE ne manque pas de
restaurants...
<P>Alors à très bientôt j'espère...
<P></P>
<P><A HRef="#retour1"
NAME="note1">Retour(1)</A> LA FRANCE : Pays de soixante
millions d'habitants de l'EUROPE occidentale.
<P><A HRef="#retour2"
NAME="note2">Retour(2)</A> LA ROCHELLE : Chef lieu du
département. Ville implantée sur le littoral ATLANTIQUE et connue pour son
vieux port.
<P><A HRef="#retour3"
NAME="note3">Retour(3)</A> Fines de claires : Excellentes
huîtres élevées dans le bassin de Marennes oléron. Après avoir poussées dans
l'océan, les huîtres sont déplacées dans des bassins marécageux appelés les
claires.
</BODY>
</HTML>
A partir de la déclaration de styles, soit à partir de
l'entête d'un document HTML, ou soit à partir d'un fichier externe, vous pouvez
associer une propriété à un élément de façon à en déclarer des styles qui
seront actifs, lorsque, élément et propriété seront associés...
Ci-après, un exemple.
Dans un fichier externe, nous allons associer les éléments
H1 et P à la propriété EM.
Ainsi, le texte contenu dans les balise H1 et P, recevra les
styles déclarés dans le fichier externe, et ce, lorsque la propriété EM sera
utilisée.
Le fichier externe :
H1 em {
COLOR:Red;font-style:italic }
P em {
Color:Blue;Font-style:Italic }
Le document
principal HTML :
<HTML>
<HEAD>
<TITLE>Bienvenue dans le département 17</TITLE>
<LINK
rel=STYLESHEET href="styles.css" type="text/css">
</HEAD>
<BODY>
<H1>LA
<em>super</em> CHARENTE-MARITIME</H1>
<P></P>
<P>Le département de LA CHARENTE-MARITIME est un
département de sept cent mille habitants situé dans le sud-ouest de
<em>LA FRANCE</em><A HRef="#note1"
NAME="retour1">(1)</A>.
<P>Vous pouvez visiter le vieux port de LA
ROCHELLE<A HRef="#note2"
NAME="retour2">(2)</A>, n'oubliez pas de rendre visite à son
magnifique aquarium !
<P>Vous en profiterez pour déguster les excellentes
fines de claires<A HRef="#note3"
NAME="retour3">(3)</A> car LA ROCHELLE ne manque pas de
restaurants...
<P>Alors à très bientôt j'espère...
<P></P>
<P><A HRef="#retour1"
NAME="note1">Retour(1)</A> LA FRANCE : Pays de soixante
millions d'habitants de l'EUROPE occidentale.
<P><A HRef="#retour2"
NAME="note2">Retour(2)</A> LA ROCHELLE : Chef lieu du
département. Ville implantée sur le littoral ATLANTIQUE et connue pour son
vieux port.
<P><A HRef="#retour3"
NAME="note3">Retour(3)</A> Fines de claires : Excellentes
huîtres élevées dans le bassin de Marennes oléron. Après avoir poussées dans
l'océan, les huîtres sont déplacées dans des bassins marécageux appelés les
claires.
</BODY>
</HTML>
Pour chaque déclaration de style, la syntaxe est la suivante :
Sélecteur propriété-associée { Propriété:Valeur }
Description :
Sélecteur est l’élément pour lequel on définit un style, par exemple, H1 pour titre de niveau 1, ou encore, A pour lien.
Mais le sélecteur peut être une classe, dans ce cas, il conviendra de précéder le nom de la classe par un point.
Propriété-associée, est placée juste avant les accolades, c’est la propriété qui doit être associée au sélecteur pour que les styles soient appliqués.
Propriétés est la propriété du style qui est définit, par exemple, COLOR pour la couleur, ou encore, Text-Style pour le style de caractères.
Valeur est la valeur assignée à la propriétés, par exemple BLUE, GREEN, YELLOW, ou encore, Italic.
Remarque :
La propriété et la valeur sont placées entre accolades. Le bloc Propriété/Valeur est appelé « Déclaration ».
Plusieurs déclarations peuvent être définies dans les mêmes accolades, dans ce cas, il conviendra de séparer chaque déclaration de celle qui la précède par le signe de ponctuation « Point virgule ». Ce signe est appelé le Séparateur.
De même que vous pourrez simultanément définir des déclarations identiques pour plusieurs sélecteurs.
Par exemple, si vous souhaitez définir la couleur « Bleue » et le style italique pour les éléments HTML titre de niveau 1 et paragraphe :
H1, P {
COLOR:BLUE;Text-Style:Italic }
Lorsque vous appliquerez une classe de styles à un élément, vous devrez les séparer par un point :
Élément.classe
font-family = Nom de la police de
caractères à utiliser.
Par exemple : font-family :
Arial
font-style = Style de la police de caractères. Valeurs possibles : normal, italic, oblique
Par exemple : font-style :
italic;
font-weight = Epaisseur de la
police de caractères. Valeurs possibles normal, bold, bolder,
lighter, 100, 200, 300,... 900.
Par exemple : font-weight : bold;
font-size = taille de la police de caractères. Valeurs possibles xx-small, x-small,
small, medium, large, x-large, xx-large, larger, smaller.
On peut aussi utiliser une taille absolue : 12pt (pour 12 points) ou un pourcentage (par rapport à la taille par défaut).
Voici plusieurs exemples :
font-size : x-small;
font-size : 18pt;
font-size : 150%;
text-align = Alignement du texte. Valeurs possibles :
left, right, center, justify
Par exemple : text-align : center;
text-decoration = Valeurs possibles : none, underline, overline, line-through, blink (Ces valeurs
peuvent être combinées)
Par exemple : text-decoration
: underline line-through;
text-transform = Valeurs possibles : capitalize, uppercase, lowercase, none
Par exemple : text-transform
: uppercase;
color =
Pour indiquer la couleur du texte.
Par exemple : color : red;
color : #fd4a88;
color : rgb(125,32,98);
background-color = Couleur du fond de la page.
Par exemple : background-color : blue;
background-image = Image à utiliser pour le fond. Valeurs possibles : URL d’un fichier JIF, JPG("...") ou none.
P { background-image: none }
margin-top, margin-bottom, margin-left, margin-right = Les
marges (respectivement au dessus, au dessous, à gauche et à droite).
On peut utiliser différentes
unités de mesures :
1em : hauteur d'un caractère dans
la police courante
1ex : hauteur du x dans la police
courante
1px : 1 pixel 1in : 1 inch
1cm : 1 centimètre 1mm : 1 millimètre
1pt : 1 point = 1/72 inch 1pc : 1 pica = 12pt
Voici des exemples :
margin-top: 1em
margin-bottom: 2ex
margin-left: 12px
margin-right: 2cm
border-style = Style de la bordure. Valeurs possibles : none, hidden, dotted,
dashed, solid, double, groove, ridge, inset, outset
Par exemple : border-style : solid;
border-width = Epaisseur de la bordure. Valeurs
possibles : thin, medium, thick
ou bien une longueur.
Par exemple : border-width : thin; border-width
: 3px;
border-color = Couleur de la bordure.
Par exemple : border-color : red;
float = Valeurs possibles : left, center, right
float : right;
Philippe
BOULANGER