Terminal-media.fr

SERVICES

Approche avec les
feuilles de styles

Dans un document HTML5, pour faire apparaître la présentation de la balise, il faut la désigner dans le document HTML.

Notre premier travail sera donc de créer un document styles.css avec le bloc-notes avec l'option ANSI, et de coder la première ligne avec :
p { text-align:center; }

Notez que l'on retrouve le sélecteur de base, ici, p et ensuite la propriété et sa valeur.

Il aurait pu s'agir d'un sélecteur de classe un point et de son nom (.presentation) ou d'un sélecteur d'identifiant # et de son nom. #toto, (nous y reviendrons un peu plus tard...)
Enregistrer votre travail

Retournez dans le document HTML5 que vous avez enregistrez précédement:
Qui contient :
<!DOCTYPE html>
<html lang="fr"
<head>
<meta charset="utf-8" />
<title>HTML 5</title>
</head>
<body>
...
</body>
</html>
Entre les balises <body> et </body>

<p> Un îlot de verdure, un jardin des plaisirs, quoi de plus pour vivre une incroyable aventure</p>

Donc, nous avons dans notre fichier index.html :

<!DOCTYPE html>
<html lang="fr>
<head>
<meta charset="utf-8">
<title>HTML 5</title>
</head>
<body>
<p> Un îlot de verdure, un jardin des plaisirs, quoi de plus pour vivre une incroyable aventure</p>
</body>
</html>

Ouvrez la page index.html dans votre navigateur avec un double clic dans l'explorateur de fichiers ou un glissé/déposé dans la fenètre du navigateur. Le résultat dans le navigateur est un texte d'une ligne centré dans la page.

et dans notre fichier styles.css :
p { text-align: center; }

Les propriétés de style

Dans les CSS3, elles se composent de deux éléments: la propriété et sa valeur par exemple :
text-align:center;
Qui pourrait dire en français : alignement de texte: au centre;
Donc :
La propriété="text-align" et la valeur="center"

la propriété est désigné avec ses deux points (:) vers la valeur, et la valeur est fermée par un point virgule (;) si vous ne respectez pas cela, ça ne fonctionne pas.

Les sélecteurs

Il en existe de plusieurs types:

Accroché à une base

Accroché à une balise simple (<p> est une balise de paragraphe). Ici en l'occurence le résultat dans le navigateur, présente l'ensemble des balises <p> dans votre document centrée.

p { text-align: center; }

Notez, que des accolades enferment toujours les propriétés de style et ses valeurs.

Accroché à un sélecteur de classe

.nom_de_classe { text-align: center; }
soulignez le point avant le non de la classe dans notre exemple, cela aurait pu donner: .presentation { text-align : center; } dans le fichier styles.css

et dans le fichier index.html

<p class="presentation">Un îlot de verdure, un jardin des plaisirs, quoi de plus pour vivre une incroyable aventure</p>

Ce qui aurait donné un résultat, similaire.

Accroché à un nom d'identifiant

#nom_de_lidentifiant { text-align: center; } là aussi, il faut préciser le hastag précédent son nom, puis l'accolade ouvertes, la propriété la ponctuation, sa valeur, autre ponctuation, et enfin l'accolade qui se referme.

Donc, ce qui aurait donné avec cet exemple dans le fichier CSS
#présentation { text-align: center; }
et dans le fichier index.html
<p id="presentation">Un îlot de verdure, un jardin des plaisirs, quoi de plus pour vivre une incroyable aventure</p>

Noter que l'on fait représenter, ici id (pour identififiant) puis son nom (presentation)

Reprenons nos fichiers

index.html et styles.css
Rajoutons dans le fichier styles.css

la propriété de style "font-size: 22px;

à la suite de la propriété précédente.
ce qui donne :
.presentation {
text-align:center;
font-size: 22px; }

font-size : 22px;
propriétés ="taille des caractères" a une valeurs="de 22px"; px, étant l'abréviation de pixel.

Avec pour résultat dans le navigateur, non seulement le texte est centré mais la taille des caractères est de 22 pixels.

Donc, ce que l'on observe c'est que:

que l'on peut donner plusieurs propriétés de style à un selecteur, de base, de classe ou d'identifiant et que ces propriétés, ponctuées par des signes qui sont toujours les mêmes, : ; sont, toujours "encapsulés" entre deux accolades une qui ouvre, une qui ferme { }.

Pour finir, lorsque l'on veut intégrer des propriétés CSS dans une page HTML. Il exsite trois solutions.

- l'on déclare le fichier CSS par un lien entre les balises <head> et </head> comme vue précédemement

ce qui donne:

<style rel="stylesheet" href="css/styles.css </style>

- Soit, elle est ajoutée directement dans la balise en stipulant avec la propriétés style ses autres propriétés et valeurs.

Ce qui donne par exemple:

<p style="text-align: center; font size: 22px;">

- Ou soit la déclaraton de style se fait dans l'entête du document HTML5 placée entre les balises <head> et </head>.

<style type="text/css">
.nom_de_class {
text-align: center;
font-size: 22px; }
</style>