Médiaforma

All posts tagged css3

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

Le langage CSS peut être utilisé pour réagir à certains événements. Par exemple, une action peut être effectuée  au survol d’un élément HTML par le pointeur de la souris. Cette prouesse réside dans l’utilisation de la pseudo-classe :hover. Les pseudo-classes sont faciles à repérer : elles commencent toujours par le sélecteur :. A titre d’exemple, je vais vous montrer comment modifier le contour d’une image lorsqu’elle est survolée par la souris.

Le document utilisé est des plus simples. Il contient une balise <img> d’identifiant montagne pour afficher l’image montagne.jpg.

Le code CSS se trouve dans la feuille de styles style5.css. Il est également très simple. Le seul style qui y est défini concerne l’identifiant montagne (et donc l’image affichée dans le document). La pseudo-classe hover applique le code CSS à l’image lorsque le pointeur de la souris se trouve au-dessus de l’image. Ce code modifie la bordure de l’image. Les trois valeurs passées à la propriété border sont :

–          L’épaisseur de la bordure en pixels. Ici 4 pixels.

–          Le style de la bordure. Ici, le mot dashed provoquera l’apparition de tirets. Vous auriez également pu utiliser les valeurs dotted (pointillés), solid (trait plein), double (bordure double), groove (rainure), ridge (relief), inset (relief intérieur) ou outset (relief extérieur).

–          La troisième valeur indique la couleur. Le nom de la couleur peut être pioché dans les seize couleurs de base, dans les couleurs étendues (reportez-vous à la page https://www.mediaforma.com/couleurs-html-etendues/ pour prendre connaissance des couleurs utilisables) ou encore codé en RVB avec une valeur hexadécimale. Dans cet exemple, la bordure sera rouge.

Il ne reste plus qu’à afficher le résultat dans un navigateur avec une des commandes Launch du menu Exécution. Comme vous le voyez, cette technique fonctionne à la perfection : la bordure apparaît lorsque le pointeur de la souris survole l’image. Elle disparaît lorsque le pointeur de la souris est placé en dehors de l’image.

Si vous regardez d’un peu plus prêt, vous verrez qu’un décalage de l’image assez désagréable se produit lors de l’affichage et de la disparition des pointillés. Nous allons voir comment le supprimer dans la rubrique suivante.


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

La balise <div> </div> est un élément essentiel en programmation HTML/CSS. Elle permet de définir une zone rectangulaire dans laquelle seront affichés divers éléments textuels, graphiques ou vidéo.

Une division (parfois appelée boîte) est caractérisée par plusieurs propriétés CSS :

–          ses dimensions : with (largeur) et height (hauteur) ;

–          ses marges intérieures : padding ;

–          ses marges extérieures : margin ;

–          sa couleur d’arrière-plan : background-color ;

–          sa bordure : border.

Les marges intérieures peuvent être identiques en haut, en bas, à droite et à gauche. Dans ce cas, vous utiliserez la propriété margin. Par contre, si vous voulez définir des marges intérieures différentes, vous devrez utiliser les propriétés margin-top, margin-bottom, margin-left et margin-right.

Il en va de même pour les marges extérieures. Si elles sont identiques, utilisez la propriété padding. Si elles sont différentes, utilisez les propriétés padding-top, padding-bottom, padding-left et padding-right.

Nous allons faire une première approche des balises <div> en écrivant quelques lignes de code :

Le corps du document contient deux <div>. La première a pour identifiant div1 et contient du texte. La deuxième a pour identifiant div2 et contient une image.

Comme vous le voyez, ce document HTML n’utilise aucune feuille de styles. Voyons le résultat dans Internet Explorer. Le texte et l’image sont affichés l’un à la suite de l’autre, comme s’ils étaient séparés par un passage à la ligne <br>.

Pour montrer l’intérêt des balises <div>, nous allons attacher la feuille de styles styles6.css au document et y définir les caractéristiques des deux balises <div>.

Avant de commencer à écrire le code CSS, nous ajoutons une balise <link> dans le document pour faire référence à la feuille de styles :

<link rel=”stylesheet” href=”styles6.css” />

Commençons par définir le style de la balise d’identifiant div1. Ses dimensions sont fixées à 400 pixels horizontalement et à 200 pixels verticalement. Ses marges extérieures sont fixées à 30 pixels. Sa marge intérieure supérieure est fixée à 40 pixels. Sa couleur d’arrière-plan est rouge. Enfin, sa bordure est épaisse de 2 pixels, continue et de couleur noire.

Définissons le style de la balise d’identifiant div2. Ses dimensions sont fixées à 300 pixels horizontalement et à 200 pixels verticalement. Ses marges extérieures sont fixées à 0 pixels. Ses marges intérieures sont fixées à 0 pixels. Sa couleur d’arrière-plan est bleue. Enfin, sa bordure est épaisse de 4 pixels, pointillée et de couleur rouge.

Voyons le résultat dans Internet Explorer.

Remarquez en particulier :

–          la marge autour de la première div, qui a été fixée à 30 pixels par la propriété margin ;

–          la marge intérieure supérieure de la première div, fixée à 40 pixels par la propriété padding-top ;

–          la position de l’image dans la deuxième <div>. Elle se retrouve “collée” à l’angle supérieur gauche de la division car la propriété padding a été initialisée à 0 ;

–          aucune marge n’ayant été définie pour la deuxième <div>. Elle se retrouve calée sur le côté gauche de la zone d’affichage.


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

Dans la rubrique précédente, vous avez appris à afficher une bordure autour d’une image lorsque le pointeur de la souris la survole. Malheureusement, l’image est décalée vers la droite et vers le bas à l’affichage des bordures. Elle est décalée en sens inverse, c’est-à-dire vers la gauche et vers le haut lors de la disparition des bordures.

Pour mieux comprendre ce qu’il se passe, nous allons augmenter l’épaisseur de la bordure. Pour cela, il faut modifier la première valeur de la propriété border. Nous allons par exemple choisir une bordure de 20 pixels. Comme vous le voyez, l’ampleur du décalage est liée à l’épaisseur de la bordure :

Pour éliminer ce problème, il faudrait que l’image occupe une position fixe, qu’elle comporte une bordure ou non. Pour cela, nous allons utiliser les propriétés CSS position, top et left. Tout va se passer dans le code CSS.

L’image a pour identifiant montagne. Nous commençons par définir un style #montagne pour positionner l’image dans la fenêtre du navigateur. Le coin supérieur gauche de la zone d’affichage a pour coordonnées 0,0. La première coordonnée représente l’abscisse, c’est-à-dire le décalage horizontal et la deuxième l’ordonnée, c’est-à-dire le décalage vertical.

Pour indiquer que l’image doit se trouver à une position bien précise, commencez par affecter la valeur absolute à la propriété position. Définissez ensuite les coordonnées du coin supérieur gauche de l’image dans les propriétés top et left. Ici, l’image sera située à 30 pixels du bord supérieur et à 30 pixels du bord gauche.

Affichons le résultat dans un navigateur. Malheureusement, rien n’a changé, si ce n’est que l’image se trouve désormais à 30 pixels des bords supérieur et gauche de la zone d’affichage.

Pour que l’image ne soit plus décalée, nous allons agir sur le style #montagne:hover. Dans cet exemple, la bordure a une épaisseur de 20 pixels. Cette épaisseur étant prise en compte dans la position de l’image, nous allons la soustraire des propriétés top et left. L’image se trouve toujours à une position absolue, mais cette fois-ci à 10 pixels des bords supérieur et gauche.

Affichons le résultat dans Internet Explorer. L’image ne se décale plus lors de l’affichage et de la disparition des pointillés.


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

Les classes CSS sont faites pour être utilisées à plusieurs endroits dans le code HTML. Ainsi par exemple, plusieurs balises <p>, plusieurs balises de titre <h1> à <h6> et plusieurs balises <td> peuvent utiliser la même classe.

Lorsqu’une balise HTML à laquelle on désire affecter un style est utilisée une et une seule fois dans un document, il est possible de remplacer l’attribut class de cette balise par un attribut id. Dans ce cas, le sélecteur CSS à utiliser est non plus le point décimal mais le caractère #.

Passons à la pratique. Ce document HTML fait référence à la feuille de styles externe styles4.css. Le corps du document contient deux balises <p>. Un attribut id identifie de façon unique la première balise <p>.

Il ne reste plus qu’à définir le sélecteur fantaisie dans la feuille de styles. Le mot fantaisie est précédé d’un #, ce qui le mettra en relation avec la balise dont l’attribut id a pour valeur fantaisie. Et donc avec notre première balise <p>. Pour bien différentier le texte d’id fantaisie, nous définissons une police fantasy, un style italique et une taille de caractères égale à 30 pixels :

Il ne reste plus qu’à afficher le document HTML dans un navigateur. Voici le résultat :


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

Dans la section précédente, vous avez vu qu’une classe pouvait être appliquée à plusieurs balises en affectant le nom de la classe à l’attribut class des balises concernées. Ici, je vais vous montrer comment restreindre le champ d’action d’une classe.

Le document HTML est des plus classiques. Il fait référence à la feuille de styles externe styles3.css. Le corps du document contient un titre de niveau 2 et de classe rouge, un paragraphe de classe rouge et un simple texte sans classe.

Maintenant, nous allons définir une classe rouge spécifique à la balise <h2> et une autre classe rouge spécifique à la balise <p>. Pour cela, il suffit de faire précéder le point décimal de la classe par le nom de la balise concernée.

C’est ainsi que nous définissons la classe p.rouge qui sera dédiée à la balise <p> et la classe h2.rouge qui sera dédiée à la balise <h2>. Pour bien montrer que les caractéristiques de ces deux classes sont différentes, la propriété font-family (c’est-à-dire la police) de la classe p.rouge est initialisée avec la valeur Courrier New et celle de la classe h2.rouge avec la valeur fantasy. Remarquez au passage les guillemets qui entourent le nom de la police dans la classe p.rouge. Ils sont nécessaires parce que le nom de la police contient un espace. Enfin, la taille des caractères de classe h2.rouge est fixée à 30 pixels avec la propriété font-size.

Affichons ce document dans un navigateur.  Comme vous pouvez le voir, la classe rouge est bien différente lorsqu’elle est appliquée aux balises <h2> et <p>.


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

Une classe CSS permet de modifier les caractéristiques d’une balise en fonction de son attribut class.

Pour mieux comprendre de quoi il est question, nous allons raisonner sur un exemple. Trois balises <h2> sont ajoutées au document HTML. La première a un attribut class initialisé à rouge, la deuxième a un attribut class initialisé à noir et la troisième a un attribut class initialisé à vert. Plus simplement, on dira que la première balise <h2> est de classe rouge, la deuxième de classe noir et la troisième de classe vert.

Affichons le document dans un navigateur. Les trois titres H2 apparaissent en noir. Si vous trouvez cela étrange, interrogez-vous : est-ce qu’il ne manque pas un peu de code CSS pour obtenir les couleurs demandées ? Bien sûr que si : il faut définir les classes rouge, noir et vert dans le fichier styles2.css (puisque c’est ce fichier qui est spécifié dans la balise <link>).

Voici la feuille de styles à utiliser :

Comme vous le voyez, la définition d’une classe n’a rien d’insurmontable. Pour cela, il suffit de faire précéder le nom de la classe d’un point décimal, de le faire suivre d’un espace et d’accolades ouvrante et fermante et de préciser la ou les propriétés à modifier entre les accolades.

Ici :

  • la classe noir affecte la valeur black à la propriété color ;
  • la classe rouge affecte la valeur red à la propriété color ;
  • la classe vert affecte la valeur green à la propriété color.

Affichons à nouveau le document dans le navigateur. Cette fois-ci l’effet recherché est bien obtenu :

Là où les classes deviennent vraiment magiques, c’est quand vous les utilisez dans plusieurs balises. Ainsi par exemple, vous pouvez très bien utiliser les classes noir, rouge et vert dans des balises <p>, <td> ou n’importe quelle autre balise qui concerne des éléments textuels.

Ici par exemple, nous définissons un tableau constitué de deux cellules. La première contient un texte affiché en vert via la balise <td> de classe vert et la deuxième un texte affiché en rouge via la balise <td> de classe rouge :

Affichons ce document dans un navigateur. Intéressant non ?


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>