Dans la médiathèque, vous allez retrouver toutes les images, fichier vidéo & audio qui vont agrémenter votre site internet.
Mais, WordPress ne classe pas ces fichiers autrement que par date de téléversement. Autrement dit, si votre site ne comporte que quelques dizaine d’images, cela convient parfaitement.
Par contre, si celui a une médiathèque importante (plusieurs centaine d’images pour ne pas dire milliers) alors il faut vous organiser afin de facilement pouvoir les retrouver.
La base : Nommer chaque fichier avec des mots qui sont en lien avec l’image et la page du site ou elle va se trouver.
En effet, chaque mot du nom du fichier image sera reprise par les moteurs de recherche et deviennent des éléments du référencement du site.
Le texte alternatif est ce qui s’affichera quand l’image ne sera pas charger sur le navigateur du visiteur.
Le titre, la légende et la description sont du texte qui nourrissent les moteur de recherche.
Attention au fait, qu’aujourd’hui, ceux-ci vérifie la pertinence de ces mots par rapport au site web et à la page ou elles sont placées.
Si, pendant une (courte) période, dans les débuts d’internet, on pouvait abuser les moteurs de recherche, maintenant, ce n’est plus le cas.
Un autre aspect est que les mots utiliser pour nommer les fichiers, comme ceux des titre, sont utiliser par WordPress pour vous permettre de faire un sélection d’image via la case « rechercher » de la médiathèque.
Un autre point important est la taille de ces fichiers.
WordPress limite cette taille généralement à 2Mo ce qui, pour une image affiché sur un écran est énorme.
Je vous préconise, sauf à avoir un site d’image (photographe, graphiste…) d’utiliser des images qui sont autour de 500ko. Ponctuellement vous pouvez avoir besoin de charger un fichier plus important. Dans ce cas, il vous faudra voir avec votre hébergeur afin qu’il puisse monter cette limite ou, mettre lui-même ce fichier.
Ce cas se présente souvent quand il y a des fichiers audio ou vidéo à installer.
Aujourd’hui, de nombreux sites nous demande d’ouvrir un compte et de choisir un identifiant et un mot de passe.
Très souvent, l’identifiant est notre mail : nous n’avons donc pas de choix à faire.
Par contre, il nous faut choisir un mot de passe qui assure un niveau de sécurité afin que personne ne puissent accéder à notre compte.
De base, il n’existe pas de mot de passe invulnérable ! Même s’il faut plusieurs semaines, mois, années pour le trouver, un « pirate », un « hacker » finira par le trouver.
Pour choisir un mot de passe, il existe quelques règle, mais avant voici quelques points de « bon sens »
La complexité d’un mot de passe doit dépendre du contenu à protéger.
Une intrusion sur un compte bancaire n’aura pas la même conséquence qu’un intrusion sur site d’information ou de vidéos en ligne.
Certes, le hacker aura accès au compte, mais que pourra-t-il faire ?
Consulter et voir des vidéos, même si c’est nous qui payons l’abonnement, n’est pas du même niveau qu’une intrusion sur le site de notre banque en ligne ou là, il pourra accéder aux comptes, les manipuler et peut-être même faire des virements à son profit !
Entre un mot de passe simple (quelques chiffres) et un mot de passe complexe (chiffres, caractères majuscule & minuscules et des symboles) nous avons le choix.
Pour choisir votre mot de passe, prenez en compte le contenu à protéger et ce que le hacker pourra faire, en votre nom.
Ensuite, choisissez la codification de votre mot de passe.
L’infographie suivante vous donne une idée, pour 2023, du temps qu’un hackeur peut mettre pour trouver votre mot de passe.
Restera ensuite à trouver comment mémoriser ces codes!!
Les apprendre par cœur est une solution, mais pas sûr que tout le monde y arrive !
Mettre le même mot de passe de partout est une idée à éliminer de suite.
Les noter dans un carnet, c’est bien car pas sur son PC, mais quand on perd le carnet… je vous laisse imaginer les conséquences, surtout si la personne qui le trouve est , on dira, « curieuse ».
Idem pour les post-it !
Vous pouvez aussi les noter dans un fichier sur votre PC. Dans ce cas, prévoyez un fichier crypté et accessible lui même par un mot de passe complexe qu’il faudra mémoriser !!
Il faut aussi relativiser un peu. Le hacker ne va pas aller sur un PC au hasard. Il va cibler le PC en fonction de son propriétaire et de ce qu’il cherche. L’importance de votre activité est à prendre en compte pour savoir jusqu’ou aller dans le choix de son mot de passe. Mais, le monde des hackers étant vaste et ceux-ci de plus en plus performants, personne n’est à l’abri d’un piratage.
Reste l’identifiant : Rien ne vous interdit d’avoir plusieurs mail et donc de pouvoir choisir des identifiants différents selon l’importance du site à protéger. Dans ce cas, le hacker aura à trouver l’identifiant et le mot de passe. Certes, le nombre de mail que l’on peut avoir n’est pas infini, mais cela peut retarder l’intrusion.
Pour conclure, garder en mémoire qu’un mot de passe finira par être trouver.
Reste à le changer régulièrement et surtout, à la complexifier suffisamment pour que, quand le hacker l’aura trouver, il accède à des informations obsolètes.
Ces raccourcis mythiques fonctionnent sur toutes les versions de Windows. Du fait de leur popularité, ils sont également disponibles sur de nombreux logiciels de bureau.
Ctrl+C : copier
Ctrl+X : couper
Ctrl+V : coller
Ctrl+Z : annuler
Ctrl+Y : rétablir
Ctrl+A : tout sélectionner
Ctrl+P : imprimer
F1 : afficher l’aide
Ctrl+Alt+Suppr : pour ouvrir le gestionnaire de tâche ou verrouiller l’ordinateur
Les raccourcis Windows les plus utilisés par les professionnels
Des raccourcis Windows qui simplifie la vie.
Ctrl+Roulette de la souris : pour zoomer/dé-zoomer.
Windows+P : pour changer le mode d’affichage (pratique avec un rétroprojecteur) : déconnecter le rétroprojecteur, dupliquer, étendre, ou rétroprojecteur uniquement.
Windows+F : pour lancer une recherche rapide sur un ordinateur
Windows+Maj+Clic : pour lancer une nouvel instance d’un programme. Exemple : cliquez sur l’icône Microsoft Word de votre barre de tâche pour ouvrir un nouveau document.
Windows+L : un raccourci clavier pour verrouiller son ordinateur.
Ctrl+Flèche gauche/droite : pour placer le curseur au début du mot ou du prochain mot.
Shift+Flèche gauche/droite : pour sélectionner du texte.
Ctrl+Shift+Flèche gauche/droite : pour sélectionner un mot entier.
Ctrl+Backspace : pour supprimer un mot entier.
Alt+F4 : pour fermer une fenêtre. Ou un ordinateur, si aucune fenêtre n’est ouverte.
Windows+E : un raccourci clavier pour afficher le poste de travail.
Maj à l’insertion d’un CD : ce raccourci permet d’empêcher la lecture automatique.
Ctrl+Windows+F : pour rechercher un ordinateur sur un réseau.
Echap pendant un processus : pour annuler le processus en cours (transfert, copie…).
Ctrl+Maj+Clic : pour ouvrir un programme en tant qu’administrateur.
Les raccourcis clavier Windows pour gérer les fenêtres
Des raccourci qui aident à naviguer entre les fenêtre de windows
Alt+Tab : passer d’une fenêtre à l’autre. Maintenez la touche Alt enfoncée et appuyez une ou plusieurs fois sur la touche Tab pour accéder à la fenêtre de votre choix.
Alt+Shift+Tab : passer d’une fenêtre à l’autre (dans l’ordre inverse). Cette fois-ci, vous devez maintenir les touches Alt et Shift, et appuyer sur la touche Tab une ou plusieurs fois.
Windows+Tab : même principe qu’Alt+Tab, mais sous une forme plus visuelle. Fonctionne depuis Windows 7 lorsque la fonctionnalité Aero est supportée.
Windows+D : masquer toutes les fenêtres. Pratique pour afficher brièvement le bureau. Il suffit d’appuyer à nouveau sur les touches Windows+D pour récupérer les fenêtres.
Windows+Flèche vers le bas : si la fenêtre occupe tout l’écran (fenêtre agrandie), elle retrouve une taille classique. Un deuxième clique sur Windows+Flèche vers le bas minimise la fenêtre.
Windows+Flèche vers le haut : une raccourci clavier pour agrandir la fenêtre active.
Windows+Flèche vers la gauche : pour placer la fenêtre sur la moitié gauche de l’écran.
Windows+Flèche vers la droite : pour placer la fenêtre sur la moitié droite de l’écran.
Windows+Shift+Flèche droite ou gauche : permet de déplacer une fenêtre d’un écran à l’autre. Ce raccourci clavier ne fonctionne que si vous utilisez plusieurs écrans.
D’autres raccourcis Windows à connaître
Ctrl+N : ouvrir une nouvelle fenêtre.
F5 ou Ctrl+R : actualiser la fenêtre active.
Ctrl+Maj+Echap : affiche le gestionnaire de tâches, qui permet de fermer une application, afficher les processus ou les performances de votre PC en temps-réel.
Ctrl+clic : pour sélectionner plusieurs éléments (des fichiers ou des dossiers par exemple).
Shift+clic : pour sélectionner tous les éléments compris entre le premier et le second clic. Fonctionne avec du texte, des fichiers et des dossiers, et peut être combiné avec Ctrl+clic.
Maj (5 fois) : pour désactiver les touches rémanentes (ou les activer).
Alt+Maj : pour repasser le clavier en Français, si par mégarde votre clavier est passé en anglais. Ce raccourci ne fonctionne qu’avec la touche Alt gauche, et si plusieurs langues sont activées.
Maj+Suppr : pour supprimer définitivement un fichier ou un dossier. Vous ne passez pas par la corbeille et ne touchez pas 20 000 francs.
Le menu de gauche de WordPress permet de gérer l’intégralité des fonctions associés au site.
De manière synthétique voici, la présentation des principaux menus :
Tableau de bord : Donne un état des derniers événements passés sur le site et (admin) Permet le suivi des mises à jour des composants de WordPress.
JetPack (admin) : Extension qui permet d’avoir un premier niveau de statistique du site. Possède aussi un anti-spam.
Articles : Blog selon WordPress. Permet d’écrire des articles en leur affectant des catégories.
Médias : Bibliothèque d’images du site.
Pages : Pages du site. Chaque page peut-être mis en lien dans un des menus du site.
Commentaires : Permet de suivre les commentaires pouvant être publiés par des visiteurs. De base, c’est l’administrateur qui valide la publication d’un commentaire.
Projets : Permet de créer des pages pouvant présenter un « projet » selon DIVI. Ces pages ne sont pas accessibles pour être placées dans un menu.
GDPR Cookie Consent (admin) : Extension pour répondre aux exigences européennes, voir aussi des autres pays.
Apparence (admin) : Permet de suivre et gérer le thème en place, les menus et certaines parties visuelles du site.
Extensions (admin) : Permet de suivre et gérer les extensions installées en complément de ce qu’apporte DIVI (Oui, DIVI fait presque tout !)
Utilisateurs (admin): Gère les utilisateurs pouvant accéder au tableau de bord en leur affectant un « rôle » : Administrateur, éditeur, abonné, auteur…
Outils : Permet de faire des exports et des imports de données
Réglages :
SEO (admin) : Extension qui vérifie le niveau de référencement du site en proposant des améliorations.
Divi (admin) : Accès aux réglages du module DIVI.
AVERTISSEMENT :Ne modifier un paramètre que si vous êtes sûr de ce que vous faites. Certains sont certes « anodins », mais d’autres peuvent avoir des conséquences sur la navigation du site ou son référencement internet.
WordPress distingue les pages, les articles et les projets qui ont chacun un rôle différent et complémentaire. Par contre, la manière de les créer, de les modifier ou de les mettre à jour est exactement la même.
Le concept des feuilles de style n'est pas une
nouveauté dans le domaine de la programmation Html. Introduit en 1997 par Microsoft avec son Internet Explorer 3.0 (mais elles existaient déjà avec Arena sous Unix), ces feuilles de style n'ont connu qu'un intérêt limité du fait que celles-ci n'étaient pas reconnues par Netscape Navigator 3.0.
Depuis les choses ont bien changé. D'abord les navigateurs 4.0 de Microsoft et de Netscape reconnaissent tous deux les feuilles de style et surtout, la norme Html 4.0 en a repris le concept (CSS version 1).
Concept
Dans un site Web de plusieurs centaine de page, il est important d'avoir une présentation homogène : de respecter la charte graphique du site. Celle-ci peut demander à ce que le titre de chaque page soit écrit en Arial, en gras avec une taille de 20 pixel et avec une couleur définie.
On peut imaginer que l'on puisse donner à cette définition de mise en forme un nom soit, par exemple : "titrepage" et qu'à chaque nouvelle page, plutôt que d'écrire à chaque fois le nom du titre et puis de devoir le mettre en Arial, gras, etc..., l'on puisse dire à l'ordinateur, d'utiliser les attributs simplement en rapellant le nom "titrepage". Cette définition de mise en forme particulière, on va l'appeler feuille de style.
Le concept de feuilles de style [Style Sheets] est né.
Voici des exemple de codage de définitions de style, pour des tête de chapitre :
Précisons pour terminer que les feuilles de style ne sont pas une composante directe du langage Html mais un développement à part dans la publication de pages Web.
Utilité et avantages
Séparation du contenu et de la mise en forme.
Cohésion de la présentation tout au long du site.
Simplification de la gestion de la mise en forme des textes.
Simplification de l'écriture du code HTML dans chacune des pagesUne façon d'écriture concise et nette par rapport au Html qui devient vite fouillis.
Réduire le temps de chargement des pages.
Palier certaines insuffisances du langage Html (contrôle des polices, contrôle de la distance entre les lignes, contrôle des marges et des indentations (sans devoir utiliser de tableaux ou de balise
...).
Compatibilité
A l'origine, chaque navigateur avait sa manière de traiter les feuilles de styles et il fallait apporter une codification propre au navigateur dans le codage des feuilles de styles.
Aujourd'hui, un standard de codification existe et chaque navigateur se doit de le respecter.
Définition d'un style
La définition de base d'un style est simple :
balise { propriété de style: valeur; propriété de style: valeur }
Exemple :
P.titrepg { font-family: Arial; font-style: italic }
Dans cet exemple, la balise P.titrepg sera en Arial et en italique. Et dans votre document, toutes les balises auront comme style Arial et italique.
Simple! Mais de nombreux commentaires s'imposent :
Les feuilles de style portent sur des balises principalement et quelques autres éléments comme par exemple A:link pour un lien non-visité et A:visited pour un lien visité. Comme balises souvent utilisées avec des feuilles de style, on peut citer les en-têtes Hn, P, BODY...
Les propriétés de style sont entourées par des "{" et pas des [ ou des parenthèses.
Le couple "propriété de style/valeur" est séparé par un double-point (:).
Chaque couple "propriété de style/valeur" est séparé par un point-virgule (;).
Il n'y a pas de limite pour le nombre de couples "propriétés de style/valeur".
L'espace entre propriétés de style et valeur n'est pas obligatoire mais aide fortement à la lisibilité du code source.
On peut attribuer plusieurs valeurs à une même propriété. Dans ce cas, on séparera les différentes valeurs par des virgules. {font-family: Arial, Helvetica, sans-serif}
Styles internes
Il faut maintenant incorporer les styles dans le document Html. Commençons par le plus simple, soit l'incorporation à l'intérieur d'une page. D'où le titre "Styles internes".
A l'intérieur des balises
Cette façon de procéder est de loin la plus commune et la plus logique. D'abord parce que les balises HEAD contiennent des informations pour le browser et les feuilles de style appartiennent à celles-ci. Ensuite parce que l'on rejoint ainsi l'essence même des feuilles de style qui est de séparer les éléments de mise en forme du contenu. < HTML > < HEAD > < STYLE type="text/css" > < !-- La ou les feuille(s) de style -- > < /STYLE > < /HEAD > < BODY >
La balise < STYLE > avertit le navigateur que l'on va utiliser des feuilles de style.
L'attribut type="text/css" informe que ce qui suit est du texte et qu'il s'agit de cascading style sheets (css). Pour l'instant, il s'agit de la seule possibilité mais on peut prévoir à l'avenir d'autres versions de ce "langage".
La balise Html de commentaires < !-- ... -- > empêche que les navigateurs qui ne connaissent pas les feuilles de style, tentent d'interpréter ces instructions. Les informations à l'intérieur des tags de commentaires seront ignorées par ces navigateurs.
Pour vos propres commentaires à propos des feuilles de style, on utilisera la convention désormais classique (C, C++, Javascript...) de /* commentaires */.
A l'intérieur des balises < BODY >< /BODY >
On peut aussi utiliser, au coup par coup, les feuilles de style dans le corps (BODY) du document. Cette façon de faire nous paraît illogique et peu conforme à l'esprit des feuilles de style qui est de définir un style déterminé valable pour la globalité du document. Mais elle existe pour quelques utilisations spécifiques... < HTML > < BODY > < H1 style="font-family: Arial; font-style: italic" > texte affiché en H1 < /H1 > < /BODY> < /HTML >
Styles externes
Le style internes permet de définir une présentation de style valable pour une page. Mais CSS nous propose de définir une présentation de style valable pour plusieurs pages et même pour toutes les pages d'un site. Ce qui est possible, en créant une page externe qui regroupera toutes les feuilles de style, et en reliant chaque page à cette page de style.
On crée d'abord, dans le répertoire du site, un fichier avec l'extension
.css soit styles.css par exemple, qui contiendra toutes les définitions de style. < HTML > < HEAD > --- Les différentes feuilles de style --- < /HEAD > < BODY > < /BODY > < /HTML >
Ensuite, on crée une page normale, par exemple : page1.htm (bien entendu dans le même répertoire que le fichier styles.css). < HTML > < HEAD > < LINK rel=stylesheet type="text/css" href="styles.css" > < /HEAD >
La balise avertit le browser qu'il faudra réaliser un lien.
L'attribut rel=stylesheet (sans s et sans guillemets) précise qu'il trouvera une feuille de style externe.
L'attribut type="text/css" précise que l'information est du texte et du genre cascading style sheets (css).
L'attribut classique de lien href=" ... " donne le chemin d'accès et le nom du fichier à lier (styles.css).
Les classes et les ID
Notion de classes
On désire parfois affecter des styles différents à une même balise. Pas de problèmes, les feuilles de style vous proposent la solution des classes [class].
La syntaxe est ici aussi des plus simple.
La définition d'un style était : balise { propriété de style: valeur }
Elle devient : balise.nom_de_classe { propriété de style: valeur }
remarquez le point entre balise et nom_de_classe
Ou, comme la mention de la balise est facultative, .nom_de_classe { propriété de style: valeur }
Attention! L'emploi du point (.) devant le nom de classe est indispensable.
Pour appeler l'effet de style dans le document, on ajoute le nom de la classe à la balise. < balise class="nom_de-classe" > .... < /balise >
Un exemple ?
Je souhaite mettre ce qui est important dans le texte en gras et en bleu. Je crée la classe .essentiel : .essentiel { font-weight: bold; font-color: #000080 }
Et dans le document Html, il suffit d'appeler la classe .essentiel quand cela se révèle nécessaire :
< P class=".essentiel" > ... blabla ... < /P >
< H1 class=".essentiel" >Titre 1< /H1 >
< TABLE >< TR >< TD class=".essentiel" >cellule< /TD >< /TR >< /TABLE >
Notion des ID
Comme la convention nom/point/nom est utilisée aussi en Javascript, il a fallu trouver une autre convention d'écriture lorsqu'on désire utiliser les feuilles de style avec du Javascript. Ce sont les ID, aussi appelés les identifiants.
Les ID fonctionnent exactement comme les classes. Pas mieux, pas plus. C'est la même chose!
La syntaxe est : #nom_de_ID { propriété de style: valeur }
Et pour l'appeler : < balise id="nom_de_ID" > .... < /balise >
Notons qu'on ne pourra effectuer qu'un seul appel à #nom_de_ID par page. Ainsi,
Pour #essentiel{ ... }
< P id=essentiel > est correct.
Mais si on rencontre dans la même page
< H1 id=essentiel > ce n'est plus correct !
Si vous pensez utiliser des feuilles de style, mais sans vous compliquer la vie avec des scripts, oubliez au plus vite ID et utilisez exclusivement les classes.
Si par contre vous souhaitez utiliser des scripts avec les feuilles de style pour faire du DHTML par exemple (voir plus loin dans le site), la notion de ID vous sera alors indispensable.
< SPAN > et < DIV >
Utilité
Dernier point, il fallait penser à un système pour "déconnecter" certains morceaux de paragraphe ou plusieurs paragraphes de cette logique d'écriture avec des feuilles de style. Ce sont respectivement les balises SPAN et DIV qui créaient ainsi des petits blocs particuliers dans le document sans devoir repasser par les éléments structurels du Html classique.
Notons que SPAN et DIV s'utilisent toujours avec les classes et les ID.
SPAN
La balise < SPAN > ... < /SPAN > permet d'appliquer des styles à des éléments de texte d'un paragraphe ou si vous préférez à un morceau de paragraphe.
Ainsi je voudrais écrire : Un monde de géants. < HTML > < HEAD > < STYLE type="text/css" > .element{font-size: x-large; color: navy} < /STYLE > < /HEAD > < BODY > < P >Un monde de < SPAN class=element >géants< /SPAN >.< /P > < /BODY > < /HTML >
DIV
La balise < DIV > ... < /DIV > permet de regrouper plusieurs paragraphes ou si vous préférez, de délimiter une zone comportant plusieurs paragraphes. < HTML > < HEAD > < STYLE type="text/css" > .zone{font-size: x-small} < /STYLE > < /HEAD > < BODY > < DIV class=zone > < P >Commentaire :< /P > < P >N'oubliez pas l'attribut class! < /P > < /DIV > < /BODY > < /HTML >
Positionner avec CSS
Quel concepteur de pages Web n'a pas laissé échapper quelques jurons bien sentis en essayant, à grand renfort de tableaux, de placer précisément du texte ou une image là où il le désirait ?
Le miracle est arrivé ! Outre le balise < LAYER > (mais qui était comprise que par Netscape 4.0), il est désormais possible de positionner, au pixel près, du texte ou une image avec les feuilles de style.
Le positionnement des éléments par les feuilles de style est repris sous la spécification CSS-P.
Position absolue ou relative
La position absolue {position: absolute} se détermine par rapport au coin supérieur gauche de la fenêtre du browser. Les coordonnées de ce point sont top = 0 et left = 0. Les coordonnées d'un point s'expriment en pixels, de haut en bas pour top et de gauche à droite pour left.
La position relative {position: relative} se détermine par rapport à d'autres éléments de la page, par exemple un élément du code Htm.
Précisons que l'on utilisera presque toujours le positionnement absolu car plus facile et plus sûr.
Positionner du texte
Plaçons en position absolue le texte "Publication Html" à 50 pixels du haut de la fenêtre (top) et à 150 pixels à gauche (left). < HTML > < HEAD > < STYLE type="text/css" > .pub{position: absolute; top: 100px; left: 25px; color: yellow; font-size: x-large; font-weight: bold;} < /STYLE > < /HEAD > < BODY > < DIV class=pub > Publication Html < /DIV > < /BODY > < /HTML >
Ajoutons que plusieurs encodages sont possibles.
Positionner une image
Plaçons l'image htmlplus.gif en position absolue à 50 pixels de haut de la fenêtre (top) et à 100 pixels à gauche (left). Les dimensions de l'image sont width=242 et height=84. < HTML > < BODY > < span style="position: absolute; top: 50px; left: 100px; width: 242px; heigth: 84px;" > < IMG src="htmlplus.gif" > < /span > < /BODY > < /HTML >
Spécifiez toujours les propriétés width et heigth avec les feuilles de style.
Ajoutons que, là aussi, plusieurs encodages sont possibles.
Superposer du texte sur une image
Reprenons l'image htmlplus.gif et on y superposera un texte, au pixel près dans la barre qui souligne le terme Html. < HTML > < BODY > < span style="position: absolute; top: 50px; left: 100px; width: 242px; heigth: 84px;" > < IMG src="htmlplus.gif"> < /span > < span style="position: absolute; top: 96px; left: 145px; color: yellow; font-size: x-small; font-weight: bold;" > Texte à superposer < /span > < /BODY > < /HTML >
Liste des propriétés
Les styles de police
font-family définit un nom de police ou une famille de police
< nom > ou < famille >
police précise (Arial, Times, Helvetica...)ou
famille (serif, sans-serif, cursive, fantasy, monospace)
H5 {font-family: Arial}
font-style définit le style de l'écriture
normal ou italique ou oblique
H6 {font-style: normal}
font-weight définit l'épaisseur de la police
normal ou bold ou bolder ou lighter ou valeur numérique soit
(100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900)
P {font-weight: 300}
font-size définit la taille de la police
xx-small ou x-small ou small ou médium ou large ou x-large ou xx-large
ou larger ou smaller
ou taille précise en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
P {font-size: 16pt}
font-variant définit une variante par rapport à la normale
normal ou small-caps
P {font-variant: small-caps}
font raccourci pour les différentes propriétés de police
P {font: bold italic}
Les styles du texte
text-align définit l'alignement du texte
left ou center ou right
H2 {text-align: center}
text-indent définit un retrait dans la première ligne d'un bloc de texte
souvent utilisé avec , n'oubliez pas dans ce cas .
spécifié en inches (in) ou en centimètres (cm) ou en pixels (px)
P {text-indent: 2cm}
text-decoration définit un attribut du texte, soit barré, clignotant, etc.
blink ou underline ou line-through ou overline ou none
A:visited {text-decoration: underline}
text-transform définit la casse du texte (majuscule, minuscule
uppercase : met les caractères en majuscules
lowercase : met les caractères en minuscules
capitalize : met le premier caractère en majuscule
P {text-transform: uppercase}
color définit la couleur du texte
par exemple en hexadécimal
H4 {color: #000080}
word-spacing définit l'espace entre les mots
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
P {word-spacing: 8pt}
letter-spacing définit l'espace entre les lettres
spécifié en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
P {letter-spacing: 5pt}
line-height définit l'interligne soit l'espace entre les lignes du texte
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
P {line-height: 12pt}
width détermine la longueur d'un élément de texte ou d'une image
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
H1 {width: 240px}
height détermine la hauteur d'un élément de texte ou d'une image
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
H1 {heigh: 100px}
white-space espace ou blanc
normal ou pre ou nowrap
PRE {white-space: pre}
Les arrière-plans
background-color définit la couleur de l'arrière-plan
couleur (par exemple en hexadécimal) ou transparent
H1 {background-color: #000080}
background-image définit l'image de l'arrière-plan
URL de l'image
BODY {background-image: image.jpg}
background-repeat définit la façon de répéter l'image d'arrière-plan
repeat ou no-repeat ou repeat-x (x = nombre de répétitions horizontales) ou
repeat-y (y = nombre de répétitions verticales
P {background-image: image.gif; background-repeat: repeat-4}
background-attachment spécifie si l'image d'arrière-plan reste fixe avec les déplacements de l'écran
scroll ou fixed
BODY {background-image: image.gif; background-attachement: fixed}
background-position spécifie la position de l'image d'arrière-plan par rapport au coin
supérieur gauche de la fenêtre
{1, 2}
{top ou center ou bottom , left ou center ou right}
ou en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
BODY {background-image: img.gif; background-position: right top}
background raccourci pour les différentes propriétés d'arrière-plan
P {background: image.gif fixed repeat}
Les marges
margin-top détermine la valeur de la marge supérieure
en unité de longueur ou auto
{ margin-top: 12px }
margin-right détermine la valeur de la marge droite
en unité de longueur ou auto
{ margin-right: 12px }
margin-bottom détermine la valeur de la marge inférieure
en unité de longueur ou auto
{ margin-bottom: 12px }
margin-left détermine la valeur de la marge gauche
en unité de longueur ou auto
{ margin-left: 12px }
margin regroupe les différentes propriétés de la marge
Les bords et les "enrobages"
border-top-width donne l'épaisseur du bord supérieur
thin ou medium ou thick ou spécifié par l'auteur
23 {border-top-width: thin}
border-right-width donne l'épaisseur du bord droit
thin ou medium ou thick ou spécifié par l'auteur
H1 {border-right-width: medium}
border-bottom-width donne l'épaisseur du bord inférieur
thin ou medium ou thick ou spécifié par l'auteur
H5 {border-bottom-width: thick}
border-left-width donne l'épaisseur du bord gauche
thin ou medium ou thick ou spécifié par l'auteur
H3 {border-left-width: 0.8cm}
border-width regroupe les différentes propriétés de border-width
border-color
détermine la couleur de la bordure
H3 {border-color: blue}
border-style détermine le style du trait de la bordure
none ou solid ou dotted ou dashed ou double
ou groove ou ridge ou inset ou outset
{border-style: solid dashed}
border regroupe toutes les propriétés des bords
padding-top valeur de remplissage haut entre l'élément et le bord
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
H5 {padding-top: 5px}
padding-right valeur de remplissage droite entre l'élément et le bord
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
H4 {padding-right: 5px}
padding-bottom valeur de remplissage bas entre l'élément et le bord
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
H2 {padding-bottom: 5px}
padding-left valeur de remplissage gauche entre l'élément et le bord
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
H5 {padding-left: 8px}
padding regroupe les différentes propriétés de remplissage
Les listes
list-style-type détermine le type de puces ou de numérotation
disc ou circle ou square
decimal ou lower-roman ou upper-roman ou lower-alpha ou upper-alpha
OL {list-style-type: square}
list-style-image permet de remplacer les puces par une image
url ou none
OL {list-style-image: img.gif}
list-style-position spécifie si les puces sont à l'intérieur ou à l'extérieur du texte
inside ou outside
UL {list-style-position: inside}
list-style regroupe toutes les propriétés de liste
Quelques informations complémentaires :
Non, les feuilles de style ne sont pas sensibles à la case [case insensitive]. Ecrire CLASS ou class ou Class est donc équivalent.
Cependant les éléments qui ne sont pas sous le contrôle des feuilles de style comme les noms de police ou les URLs peuvent être case sensitive.
Pour le système d'exploitation (et je pense à Unix), Arial n'est peut-être pas égal à arial, de même IMAGE.gif n'est pas forcément égal à image.gif.
Les noms des feuilles de style, des sélecteurs, des classes et ID peuvent contenir les lettres de a-z ou de A-Z, les chiffres de 0-9,
le trait d'union et le caractère _. Les noms ne peuvent commencer par un chiffre ou un tiret. La documentation officielle affirme que
les caractères spéciaux ASCII 160-255 peuvent être utilisés. Mais cela ne fonctionne pas chez moi. On prendra vite l'habitude (voir les langages de programmation) de les éviter.
Oui. Les feuilles de style seront ignorées par les navigateurs qui ne supportent pas les feuilles de style. Et c'est tant mieux pour la compatibilité de votre site sous les différents navigateurs.
Les propriétés des feuilles de style l'emportent sur les attributs Html. Si les deux sont spécifiés, les attributs Html seront affichés
avec les navigateurs qui ne supportent pas les CSS et n'auront aucun effet avec les navigateurs qui supportent les feuilles de style.
Ainsi, < H3 style="color: red" >< B >< FONT COLOR="navy">Cascading Style Sheets < ;/FONT& gt;< /B >< /H3 >
apparaîtra en rouge sous un browser compatible CSS (par exemple Microsoft Explorer).
et sous une autre couleur (noire ? bleue ? ...) sous un browser qui ne reconnaît pas les feuilles de style
Ce qui est très bien pour la compatibilité mais qui ne simplifie pas la clarté de l'écriture.
En cas de concurrence entre plusieurs éléments de style, intervient alors la notion de "cascade" ou d'ordre de priorité.
La concurrence entre plusieurs éléments de style peut provenir des différentes possibilités de localisation de feuilles de style :
dans un fichier externe avec l'extension css.
dans la balise HEAD du document.
dans le BODY du document.
La règle de priorité appliquée par le browser sera d'appliquer pour la présentation du document la feuille de style la plus proche de
l'élément. Ainsi, un style spécifié dans le BODY sera retenu par rapport à un style déclaré dans un fichier externe.
Il y a cependant moyen de contourner ces règles de priorité par la déclaration ! important;. Du genre BODY {background: white ! important; color: black}.
Vous l'avez compris, ce tutoriel est une ébauche qui permet de faire quelques pas avec les fuilles de style. Nous en resterons là dans le cadre de ce tutorial.
Si vous souhaitez aller plus avant, il existre de site internet beaucoup plus étoffé et exhauxtif qui pourront satifaire votre sagacité !
Nous utilisons des cookies sur notre site Web pour vous offrir l'expérience la plus pertinente en mémorisant vos préférences et les visites répétées. En cliquant sur «Accepter», vous consentez à l'utilisation de TOUS les cookies.
This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
Commentaires récents