Médiaforma

All posts tagged feuille de styles

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Pour mettre en évidence le surclassement des styles, j’ai redéfini les styles h1, h2 et h3 dans une feuille de styles externe nommée styles.css. Comme vous pouvez le voir, le style h1 aura une couleur rouge, une taille de 50 pixels et des caractères gras. Le style h2 aura une couleur bleue, une taille de 35 pixels et des caractères italiques. Enfin, le style h3 aura une couleur verte et une taille de 25 pixels.

Nous allons utiliser un document HTML élémentaire qui utilise la feuille de styles styles.css et se contente d’afficher un titre de niveau 1, un titre de niveau 2, un titre de niveau 3 et un simple texte.

Affichons ce document dans Internet Explorer. Le résultat est bien conforme à ce qui était attendu :

Nous allons maintenant surclasser le style h2 en définissant une feuille de styles interne. Pour cela, nous ajoutons une balise <style> dans l’en-tête du document et nous modifions la couleur du style h2 :

Affichons ce document dans Internet Explorer. Comme vous le voyez, la couleur du titre h2 est modifiée par le style interne. Par contre, la taille des caractères est inchangée et les caractères apparaissent en italique. Il y a donc eu un surclassement partiel du style h2.

Nous allons maintenant ajouter un attribut style dans la balise <h2>. Ici, nous demandons que les textes de style h2 soient affichés en caractères noirs :

Affichons le document ainsi modifié dans Internet Explorer. Comme vous le voyez, la couleur du titre h2 est modifiée par le style de la balise h2. Il y a donc eu un premier surclassement via la feuille de styles interne et un deuxième via l’attribut style de la balise <h2> :


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Avant d’aller plus loin dans l’utilisation du langage CSS, nous allons marquer une pause pour définir ou rappeler quelques termes techniques qui seront utilisés tout au long de cette formation.

Une balise HTML est encadrée par les caractères “<” et “>“. Elle peut comporter un ou plusieurs attributs auxquels on affecte une valeur, généralement spécifiée entre guillemets. Par exemple, cette balise <a> contient deux attributs : href et target. Le premier précise l’adresse URL du lien et le deuxième indique que la page correspondante devra s’ouvrir dans une fenêtre secondaire :

<a href="https://www.mediaforma.com" target="_blank">Mediaforma</a>

Dans une feuille de styles (interne ou externe), on redéfinit une ou plusieurs propriétés en leur affectant des valeurs. Ici par exemple, trois propriétés sont redéfinies dans la balise h1 :

  • la valeur red est affectée à la propriété color ;
  • la valeur 50px est affectée à la propriété font-size ;
  • la valeur bold est affectée à la propriété font-style :
h1
 {
 color: red;
  font-size: 50px;
  font-style: bold;
 }

Pour faciliter la lisibilité du code, chaque couple propriété/valeur est généralement placé sur une ligne qui lui est propre. Mais si vous le souhaitez, il est possible de tout rassembler sur une seule ligne :

h1 {color: red; font-size: 50px; font-style: bold; }

Lorsqu’un style est redéfini à l’intérieur d’une balise HTML, on utilise l’attribut style suivi du signe “=“. Les couples propriété/valeur sont placés entre guillemets et séparés entre eux par des “;” :

<h1 style="color: red; font-size: 50px; font-style: bold; ">Texte</h1>


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans les trois rubriques précédentes, vous avez vu qu’il était possible de définir un style CSS dans une balise HTML, dans une feuille de styles intégrée au document HTML ou dans une feuille de style externe, stockée dans un fichier d’extension .css.

La troisième technique est celle qui donne les meilleurs résultats en termes de réutilisation. En effet, la feuille de styles externe peut être utilisée par toutes les pages d’un site, ce qui assure leur uniformité et soulage l’écriture. Il suffit pour cela d’insérer une balise <link> dans chaque page concernée.

L’utilisation d’une feuille de styles interne est intéressante lorsque le nombre de pages est très limité.

Quant à la modification des styles dans les balises, elle est marginale et ne sert qu’à “surclasser” un style, c’est à dire à modifier les caractéristiques d’un style qui a été défini dans une feuille de styles externe ou interne.

De la même manière, les styles définis dans une feuille de styles interne surclassent ceux définis dans une feuille de style externe.

Il y a donc deux niveaux de surclassement possibles : les styles définis dans une feuille de styles externe sont surclassés par ceux définis dans une feuille de styles interne qui sont eux-mêmes surclassés par ceux définis dans les balises HTML.

Lorsque vous définissez un site Web, la démarche consiste à créer une feuille de styles externe dans laquelle vous définissez les styles généraux à utiliser dans vos pages. Si une page doit utiliser un ou plusieurs styles spécifiques, il vous suffit de les redéfinir dans une feuille de styles interne. Enfin, si une balise doit utiliser un style particulier, il vous suffit de le définir dans la balise en utilisant un attribut style.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans la rubrique précédente, vous avez appris à insérer l’attribut style dans une balise quelconque pour modifier ses caractéristiques. Dans cette rubrique, je vais vous montrer comment définir une feuille de styles interne, entre les balises <head> et </head> de la feuille. Pour cela, vous devez insérer une balise <style type=”text/css”> et terminer cette balise avec une balise </style>. Les styles seront redéfinis entre ces deux balises.

A titre d’exemple, nous allons redéfinir les caractéristiques de la balise <h2>. Pour cela, nous précisons le nom de la balise, sans l’encadrer par les caractères “<” et “>”, puis nous insérons des accolades ouvrante et fermante à sa suite. Les propriétés modifiées seront insérées entre les deux accolades. Ici, nous redéfinissons la couleur et la taille des balises <h2>.

Comme vous pouvez le voir, le simple fait d’insérer une balise <h2> dans le document lui fait adopter la couleur et la taille définie dans la feuille de styles.

SI vous insérez une autre balise <h2>, elle adopte également les caractéristiques redéfinies dans la feuille de styles interne. Tout le document est donc concerné par la feuille de styles.