Une démonstration de ce qui peut être réalisé visuellement grâce à la conception basée sur CSS !
Lien → bas de page et lien html5-css3 ...
CV d'Éric Bourgeois
Sources : Éric | Mathieu Nebra , Co-Fondateur d'OpenClassrooms & Frédéric Bardeau , Co-Fondateur de Simplon, vidéo
CSS est l'acronyme de « Cascading Style Sheets » ce qui signifie « feuille de style en cascade ». Le CSS correspond à un langage informatique permettant de mettre en forme des pages web (HTML ou XML). Ce langage est donc composé des fameuses « feuilles de style en cascade » également appelées fichiers CSS.
Prérequis : avoir pratiqué le code HTML !
Ce sont les navigateurs web qui font le travail le plus complexe : ils doivent lire le code CSS et comprendre comment afficher la page.
Au début des années 2000, Internet Explorer était le navigateur le plus répandu, mais sa gestion du CSS est longtemps restée assez médiocre (pour ne pas dire carrément mauvaise). C'était la grande époque de la version 6 (IE6).
Depuis, de nombreux navigateurs sont arrivés et ont chahuté Internet Explorer : Mozilla Firefox bien sûr, mais aussi Google Chrome. Et je ne vous parle pas du succès des Mac et iPhone avec leur navigateur Safari. Cela a incité Microsoft à réagir et publier (après une longue période d'inactivité) IE 7, puis IE 8 et IE 9, 10, 11... et maintenant, Edge.
On peut écrire du code en langage CSS à trois endroits différents
Maintenant que nous savons où placer le code CSS, recommandé dans un fichier .css de préférence à son imbrication dans le code html, intéressons-nous de plus près à ce code.
Observons un premier bout de code CSS :
Dans un code CSS comme celui-ci, on trouve trois éléments différents :
L'attribut class spéficifie un (ou plusieurs) nom(s) de classe à un élément HTML.
Dans le code HTML vous devez écrire le nom de la (class) qui sert à identifier la balise. Ce que vous voulez, du moment que le nom commence par une lettre.
Ce nom de class est utilisé entre les guillemet "" pour cibler l'élément HTML < h1 >, < p > ou < img > dans l'image ci-dessous :
Quelle est la différence entre une classe et un identifiant ?
Dans le fichier CSS, il faudra faire précéder le nom de la class par un point (.)
Si vous utilisez des id, il faudra faire précéder le nom de l'id par un dièse (#) :
Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id ) à certains mots qui, à l'origine, ne sont pas entourés par des balises.
En effet, le problème de l'attribut class (ou id) c'est qu'il s'agit justement d'un attribut, or vous ne pouvez l'utiliser que sur une balise. Si, par exemple, je veux modifier uniquement « bienvenue » dans le paragraphe suivant :
En fait, on a inventé deux balises dites universelles, qui n'ont aucune signification particulière (elles n'indiquent pas que le mot est important, par exemple). Il y a une différence minime (mais significative !) entre ces deux balises :
On encadre ici le mot « bienvenue » avec la balise span, on lui ajoute une classe du nom choisit [HTML],
(ci-dessous "salutations"), on crée le CSS (application de la couleur de police bleu dans l'exemple) et c'est gagné !
À l’inverse des balises < span > et < div > le caractère [*] sélectionne toutes les balises sans exception. On l'appelle le sélecteur universel.
1: étalon, Arial
2: étalon, Courier New
3: étalon, Verdana
4: étalon, DejaVu Sans
1: étalon, Arial Black (ajout d'épaisseur)
2: étalon, Comic Sans MS
3: étalon, Georgia
4: étalon, Impact (encore ajout d'épaisseur pour comparer)
5: étalon, Times New Roman
6: étalon, Trebuchet MS
0123456789 = Calibri
0123456789 = DejaVu Sans
étalon, Calibri, police plus concentrée qu'Arial, c'est mon choix pour cette page html...
étalon, Arial
étalon, Arial Black, plus étendu qu'Arial mais pas "Black !"
xx-small : minuscule ; x-small : très petit ; small : petit ; medium : moyen ; large : grand ; x-large : très grand ; xx-large : euh… gigantesque .
Pendant longtemps, cela n'était pas possible. Aujourd'hui, avec CSS 3, il existe heureusement un moyen d'utiliser n'importe quelle police sur son site. @font-face force les navigateurs à télécharger la police de votre choix ; cela fonctionne bien avec la plupart des navigateurs.
Voici un test de la police téléchargée « Bilbo-Regular »,
le style au format « Script » est reproduit avec succès avec une taille font-size: large...
La propriété CSS associée porte bien son nom : text-decoration . Elle permet, entre autres, de souligner le texte, mais pas seulement. Voici les différentes valeurs qu'elle peut prendre :
Le langage CSS nous permet de faire tous les alignements connus : à gauche, centré, à droite et justifié.
C'est tout simple. On utilise la propriété text-align et on indique l'alignement désiré :
Regardez le texte « lorem Ipsum » justifié sur l'exemple ci-dessous :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel consequat justo. Suspendisse vel lobortis quam. Integer semper diam ultrices mauris accumsan rhoncus. Nunc consequat ligula id ipsum congue, at maximus magna finibus. Nunc facijlisis justo sit amet urna consectetur, vitae imperdiet felis imperdiet. Vestibulum imperdiet nisl nisl, nec dapibus. Justifié marges gauche et droite !
Le CSS nous permet de faire flotter un élément autour du texte. On dit aussi qu'on fait un « habillage ».
« La propriété magique est… float (« flottant » en anglais). Cette propriété peut prendre deux valeurs très simples :
la figure suivante vous montre ce que nous obtenons avec float: left;.
Ceci est un texte justifié de paragraphe, écrit à la suite de l'image et qui l'habillera car l'image est flottante. « Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel consequat justo. Suspendisse vel lobortis quam. Integer semper diam ultrices mauris accumsan rhoncus. Nunc consequat ligula id ipsum congue, at maximus magna finibus. Nunc facilisis justo sit amet urna consectetur, vitae imperdiet felis imperdiet. Vestibulum imperdiet nisl nisl, nec dapibus (balise "br": retour chariot). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel consequat justo. Suspendisse vel lobortis quam. In1teger semper diam ultrices mauris accumsan rhoncus. Nunc consequat ligula id ipsum congue, at maximus magna finibus. Nunc facilisis justo sit amet urna consectetur, vitae imperdiet felis imperdiet. Vestibulum imperdiet nisl nisl, nec dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel consequat justo. Suspendisse vel lobortis quam. In1teger semper diam ultrices mauris accumsan rhoncus. Nunc consequat ligula id ipsum congue, at maximus magna finibus. Nunc facilisis justo sit amet urna consectetur, vitae imperdiet felis imperdiet. Vestibulum imperdiet nisl nisl, nec dapibus. Nunc facilisis justo sit amet urna consectetur, vitae imperdiet felis imperdiet. Vestibulum imperdiet nisl nisl, nec dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel consequat justo. Suspendisse vel lobortis quam. In1teger semper diam ultrices mauris accumsan rhoncus. Nunc consequat ligula id ipsum congue, at maximus magna finibus. Nunc facilisis justo sit amet urna consectetur, vitae imperdiet felis imperdiet. Vestibulum imperdiet nisl nisl, nec dapibus.
La propriété qui permet de modifier la couleur du texte est : color.
Il existe les seize couleurs « standard » reproduitent avec leurs noms en anglais :
white___ | _01_____ | red______ | _05_____ | yellow__ | _09_____ | fuchsia_ | _13_____ |
silver___ | _02_____ | maroon__ | _06_____ | olive___ | _10_____ | purple__ | _13_____ |
gray____ | _03_____ | lime_____ | _07_____ | blue____ | _11_____ | aqua____ | _15_____ |
black___ | _04_____ | green____ | _08_____ | navy____ | _12_____ | teal____ | _16_____ |
Par exemple le codage CSS : p {color:blue} applique la couleur bleu au texte du paragraphe.
Le système hexadécimal (base 16) utilise ainsi 16 symboles : les chiffres arabes pour les dix premiers chiffres et les lettres A à F pour les six suivants.
Toute couleur qui s'affiche sur l'écran d'un ordinateur est basée sur trois couleurs de lumière : rouge, vert et bleu. À partir de ces trois lumières de base, il est possible de créer, en modifiant les proportions, un très grand nombre de couleurs (16,7 millions de couleurs).
Il ne s'agit pas ici des trois couleurs « primaires » (magenta, cyan, jaune) qui permettent d'obtenir toutes les couleurs à partir de pigments, on parle de « synthèse soustractive ».
Sur un ordinateur, on mélange de la lumière rouge, verte et bleue (RVB, ou RGB en anglais) : on parle alors de « synthèse additive »
Le langage HTML utilise l'écriture hexadécimale pour rendre les différentes couleurs.
Le choix de la base 16 est pratique, puisqu'il permet d'obtenir 256 valeurs en n'utilisant que 2 chiffres FF → 16 puissance 2 = 256 ... voir le convertisseur !
Le code couleur est composé de 6 symboles, il est très facile à comprendre, car il repose sur un jeu de combinaisons chiffrées.
Chaque octet, (une paire de caractères dans le code Hex) représentant l'intensité de rouge, vert et bleu dans la couleur, respectivement.
#
00
00
00
Les deux premiers chiffres montrent le rouge, les deux suivants, le vert, et les deux derniers, le bleu.
RGB signifie en anglais, Rouge-Vert-Bleu s'écrit Red-Green-Blue, ce qui s'abrège en « RGB ».
Comme avec la notation hexadécimale, pour choisir une couleur, on doit définir une quantité de rouge, de vert et de bleu avec une valeur de 0 à 255 pour chacune :
exemple : {color: rgb(90,32,48);} pour un joli rouge grenat
Quoi qu’il en soit, il est très simple de trouver le code de chaque couleur, certains logiciels de dessin, comme Photoshop, Gimp et Paint.NET, vous indiquent les couleurs en hexadécimal. Il vous est alors facile de copier-coller le code hexadécimal d'une couleur dans votre fichier CSS.
Vous pouvez aussi trouver des extensions de navigateur qui permettent de "récupérer" n'importe quelle couleur qui vous plaît sur un site web :
Création du 14 septembre 2010, fichier html chargé sur mon premier site web → couleurs on the web
Je propose des formations sur Gimp, c'est un logiciel gratuit et Open Source dans le domaine de la Gestion de la Photo destiné à la retouche et la création d'images numériques. Gimp convient à de multiples activités graphiques parmi lesquelles le dessin artistique, mais également la retouche de photographies et plus globalement tout ce qui a trait à la manipulation d’images. Le graphisme web et les animations font également partie des fonctionnalités proposées par le logiciel.
Pour indiquer une couleur de fond, on utilise la propriété CSS background-color. Elle s'utilise de la même manière que la propriété color, c'est-à-dire que vous pouvez taper le nom d'une couleur, l'écrire en notation hexadécimale ou encore utiliser la méthode RGB.
Pour indiquer la couleur de fond de la page web, il faut travailler sur la balise < body > laquelle correspond à l'ensemble de la page web ; c'est donc en modifiant sa couleur de fond que l'on changera la couleur d'arrière-plan de la page.
En CSS, si vous appliquez un style à une balise, toutes les balises qui se trouvent à l'intérieur prendront le même style. C'est en fait simple à comprendre et intuitif. La balise < body >, vous le savez, contient entre autres les balises de paragraphe < p > et de titre < h1 > etc.
C'est d'ailleurs de là que vient le nom « CSS », qui signifie « Cascading Style Sheets », c'est-à-dire « Feuilles de style en cascade ». Les propriétés CSS sont héritées en cascade : si vous donnez un style à un élément, tous les sous-éléments auront le même style.
Le même principe vaut pour toutes les balises HTML et toutes les propriétés CSS ! Si vous dites :
… on pourrait penser qu'il y a un conflit. Le texte important fait partie d'un paragraphe, quelle taille lui donner ? 1.2 em ou 1.4 em ? Le CSS décide que c'est la déclaration la plus précise qui l'emporte : comme < strong > correspond à un élément plus précis que les paragraphes, le texte sera écrit en 1.4 em.
La propriété permettant d'indiquer une image de fond est background-image. Comme valeur, on doit renseigner url("nom_de_l_image.png").
Par exemple :
Attention lorsque vous écrivez une adresse en relatif dans le fichier CSS !
L'adresse de l'image doit être indiquée par rapport au fichier .css et non pas par rapport au fichier .html. Pour simplifier les choses, je vous conseille de placer l'image de fond dans le même dossier que le fichier .css (ou dans un sous-dossier).
On peut compléter la propriété background-image par plusieurs autres propriétés qui permettent de changer le comportement de l'image de fond
La propriété CSS background-attachment permet de « fixer » le fond. L'effet obtenu est intéressant, car on voit alors le texte « glisser » par-dessus le fond. Deux valeurs sont disponibles :
Par défaut, l'image de fond est répétée en mosaïque. Vous pouvez changer cela avec la propriétébackground-repeat :
On peut indiquer où doit se trouver l'image de fond avec background-position. Cette propriété n'est intéressante que si elle est combinée avec background-repeat: no-repeat; (un fond qui ne se répète pas).
Vous devez donner à background-position deux valeurs en pixels pour indiquer la position du fond par rapport au coin supérieur gauche de la page (ou du paragraphe, si vous appliquez le fond à un paragraphe). Ainsi, si vous tapez :
… votre fond sera placé à 740 pixels de la gauche et à 48 pixels du haut. Il est aussi possible d'utiliser ces valeurs en anglais :
Il est possible de combiner ces mots. Par exemple, pour aligner une image en haut à droite, vous taperez :
Ainsi, si je veux afficher une image de fond, en un unique exemplaire ( no-repeat ), toujours visible ( fixed ) et positionné en haut à droite ( top right ), je vais écrire ceci :
Le CSS nous permet de jouer très facilement avec les niveaux de transparence des éléments ! Pour cela, nous allons utiliser des fonctionnalités de CSS3 : la propriété opacity et la notation RGBa.
Propriété très simple, elle permet d'indiquer le niveau d'opacité (c'est à dire l'inverse de la transparence).
Il faut donc choisir une valeur comprise entre 0 et 1. Ainsi, avec une valeur de 0.6, votre élément sera opaque à 60 %… et on verra donc à travers !
Voici un exemple qui va nous permettre d'apprécier la transparence. Vous en trouverez le code CSS et le rendu HTML aux figures suivantes.
CSS3 nous propose une autre façon de jouer avec la transparence : la notation RGBa. Il s'agit en fait de la notation RGB que nous avons vue précédemment, mais avec un quatrième paramètre : le niveau de transparence (appelé « canal alpha »). De la même façon que précédemment, avec une valeur de 1, le fond est complètement opaque. Avec une valeur inférieure à 1, il est transparent.
destinée à combiner les avantages de l'accessibilité avec la puissance de la conception graphique, issu du fichier directives du nouveau et csszengarden.com amélioré.
hack-new-image-replacement | traduction google
de www.eric-page.info, le jeudi 4 février 2021
Éric Bourgeois