Médiaforma

All posts in html5-css3-javascript

CSS Cheat Sheet Introduction

Vous utilisez CSS3 pour mettre en forme vos pages Web ?

Matt Banner donne librement accès à un résumé des commandes CSS3 sous la forme d’un document PDF. Vous pouvez le télécharger à cette adresse : https://www.onblastblog.com/wp-content/uploads/2017/01/CSS3-Cheat-Sheet.pdf

Vous voulez en savoir plus ? Allez sur cette page.


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 vu que les styles pouvaient être définis dans une feuille de styles, à l’intérieur du document HTML, entre les balises <style> et </style>. Dans cette rubrique, je vais vous montrer comment regrouper les styles dans un fichier annexe.

A titre d’exemple, nous allons redéfinir le style de titre H2. Pour cela, nous créons un nouveau fichier dans Notepad++. Pour modifier le style h2, nous écrivons h2, suivi d’une accolade ouvrante puis d’une accolade fermante. A l’intérieur des accolades, nous définissons les propriétés à modifier :

  • la couleur du texte sera rouge ;
  • la taille des caractères est fixée à 50 pixels ;
  • les caractères seront affichés en italique.

Cette feuille de styles est sauvegardée dans le fichier styles.css.

Pour faire référence à la feuille de styles que nous venons de définir, nous utiliserons la balise <link>, en précisant que :

  • le document référencé est une feuille de styles ;
  • la feuille de styles contient du texte ;
  • le fichier à utiliser est styles.css.

Cette simple balise suffit pour donner accès à tous les styles qui ont été redéfinis dans la feuille de styles.

Le document est affiché dans Internet Explorer avec la commande Launch in IE dans le menu Exécution. Le résultat est bien conforme à ce qui était attendu : les deux balises <h2> ont les caractéristiques définies dans la feuille de styles externe.


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.


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

Pour insérer un style dans une balise, vous utiliserez l’attribut style :

<balise style=”propriété1: valeur1; propriété2: valeur2; etc.”>

A titre d’exemple, nous allons utiliser une propriété CSS pour modifier la couleur d’une balise de titre <h2>, puis la couleur et la taille des caractères d’une autre balise <h2>.

La ligne 5 affiche un titre <h2>.

La ligne 6 affiche un titre <h2> en modifiant sa couleur. Ici, nous avons choisi d’utiliser la couleur prédéfinie red, mais nous aurions tout aussi bien pu utiliser une couleur RVB.

La ligne 7 affiche un titre <h2> en modifiant sa couleur et sa taille. La propriété font-size définit la taille de la balise, en pixels. Comme vous le voyez, chaque propriété est suivie d’une valeur et d’un point-virgule. Cette remarque s’étend à toutes les propriétés RSS que vous manipulerez.

Une autre remarque : un style défini à l’intérieur d’une balise ne concerne que cette balise. Il ne s’étend absolument pas aux balises de même type qui figurent dans le document. Dans cet exemple, les styles définis dans chacune des balises <h2> n’entrent jamais en conflit.


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

La maîtrise du langage CSS est un vrai plus pour les concepteurs de pages HTML. Par son intermédiaire, il est possible de décorréler la mise en page du contenu. Ainsi, vous utilisez un document HTML pour définir le contenu (textes, images, vidéos) et une feuille de styles pour définir la mise en forme et la mise en page de tous les éléments contenus dans le document HTML. Il est même possible d’utiliser une même feuille de styles pour mettre en forme plusieurs documents HTML. C’est d’ailleurs ce qui assure l’uniformité des pages d’un site Web.

Un style CSS peut être défini à trois emplacements :

  • Dans un document HTML, à l’intérieur d’une balise.
  • Dans l’en-tête d’un document HTML.
  • Dans un fichier spécifique d’extension CSS.

Dans les rubriques suivantes, vous allez découvrir chacune de ces possibilités et comprendre quand vous devez les utiliser.


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

Que diriez-vous d’utiliser une image en arrière-plan des cellules d’un tableau ?

Il n’y a rien de compliqué là-dedans : utilisez simplement l’attribut background à la place de l’attribut bgcolor et indiquez le nom de l’image GIF, JPG ou PNG à utiliser. Ici par exemple, nous utilisons l’image miniature.jpg, qui se trouve dans le même dossier que le code HTML.

Afin de mettre en évidence la répétition de l’arrière-plan, la première cellule a été redimensionnée à 300×200 pixels. La cellule suivante aura la même hauteur. Sur la deuxième ligne du tableau, la hauteur de la première cellule a été fixée à 200 pixels. Cette hauteur sera également celle de la deuxième cellule.

L’image utilisée en arrière-plan est de petites dimensions : 100 x 75 pixels. Comme vous le voyez, elle se duplique autant de fois que nécessaire pour couvrir toute la surface du tableau.