Afficher la pageAnciennes révisionsLiens de retourExporter en PDFHaut de page Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur. [[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire Web}}]] ===== WEB - Les bases du CSS ===== [Mise à jour le 18/6/2023] * **Ressources** * <html><a href="https://developer.mozilla.org/fr/docs/Web/CSS" target="_blank">MDN web doc</a></html> <callout type="primary" icon="true">"//CSS est l'un des langages principaux du Web ouvert et a été standardisé par le W3C. Ce standard évolue sous forme de niveaux (levels), CSS1 est désormais considéré comme obsolète, CSS2.1 correspond à la recommandation et CSS3, qui est découpé en modules plus petits, est en voie de standardisation. MDN Web Docs Mozilla//".</callout> ==== 1. Les feuilles de style en cascade ==== //« Le design d'un site évolue au fil du temps. Le **problème**, lorsqu'on n'utilise pas de feuilles de style, c'est qu'il faut reprendre toutes les pages HTML une à une pour modifier une police de caractère ou une couleur de fond... Avec les "**Cascading Style Sheets**" (**CSS**), ce lourd handicap est résolu. »// {{ :web:style1.png?nolink |}} {{:web:style2.png?nolink&180 |}} « **CSS** (Cascading Style Sheets : **feuilles de style en cascade**) est un **langage informatique** qui sert à décrire la **présentation** des documents HTML. L'un des objectifs majeurs des CSS est de permettre la **__mise en forme__** hors des documents. Il est par exemple possible de ne décrire que la structure d'un document en HTML, et de décrire toute la **__présentation__** d**ans une ou plusieurs feuilles de style __CSS__** séparées. \\ Ainsi, les avantages des feuilles de style sont multiples : \\ - La structure du document et la présentation peuvent être gérées dans des **fichiers séparés**. \\ - La conception d'un document se fait dans un premier temps s**ans se soucier de la présentation**, ce qui permet d'être plus **efficace**. \\ - Dans le cas d'un site Web, la **présentation est uniformisée** : les documents (pages HTML) font référence aux mêmes feuilles de styles. Cette caractéristique permet de plus une remise en forme rapide de l'aspect visuel. Le **code HTML** est considérablement **réduit en taille et en complexité**, puisqu'il ne contient plus de balises ni d'attributs de présentation. » (Wikipédia) \\ {{ :web:style3.png?nolink|}} ==== 2. Notion de sélecteur ==== **Sélecteur** : toute balise HTML privée des signes < et >. Le sélecteur "**accroche**" u**n effet de style** à un élément ou une balise HTML. Chaque sélecteur (body, p, etc.) possède un ensemble de propriétés qui peuvent être définies par une ou plusieurs feuilles de style. // Syntaxe // <code> selecteur { propriété1 : valeur1; propriété2 : valeur2; ... propriétén : valeurn; } </code> //Exemples// <code css *.css> a { color: grey; } body { font-size: 12px; font-family: arial, sans-serif; background-color: rgba(8, 85, 157, 0.15); } </code> <callout icon="fa fa-hand-stop-o" color="red" title="A RETENIR">Le couple **__propriété__ : __valeur__ ;** constitue une **déclaration de style** et se termine par un point-virgule "**;**". \\ Un **sélecteur** + une ou plusieurs **déclarations de style** constituent une **REGLE CSS** </callout> ==== 3. Portée d'une feuille de style ==== === 3.1 Utilisation locale=== <callout type="primary" icon="true">La portée est **locale** si les **déclarations de style** sont placées **au sein de la balise** dans une propriété **style**.</callout> // Syntaxe // <code> <balise style="propriété:valeur;"> ... </balise> </code> //Exemple// <code html *.html> <!DOCTYPE html> <html> <head> ... </head> <body style="background-color:blue"> ... </body> </html> </code> === 3.2 Utilisation globale === <callout type="primary" icon="true">La portée est **globale** lorsqu'elle a lieu dans l'**en-tête du document**. Elle est introduite par la balise **<style>**.</callout> //Exemple// <code html *.html> <!DOCTYPE html> <html> <head> <style type="text/css"> body { background-color: blue; } p { background-color: lightgreen; color: darkblue } h1 { font-family: helvetica; } ... </style> </head> <body> ... </body> </html> </code> === 3.3 Utilisation externe === <callout type="primary" icon="true">Un lien vers une page .css est réalisé dans l'en-tête du document HTML avec une balise **<link>** et les propriétés **rel**, **type** et **href**.</callout> * **Avantage** : application d'un ensemble de règles à toutes les pages d'un site. //Exemple// <code html *.html> <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="nomfichier.css"> </head> <body> ... </body> </html> </code> === 3.4 Priorité === <callout icon="fa fa-hand-stop-o" color="red" title="PRIORITES">En cas de multiples définitions, **la définition locale est prioritaire sur la globale, elle-même prioritaire sur l'externe**.</callout> ==== 4. Les cibles des principales propriétés ==== * Propriétés liées aux **polices de caractères**. * Propriétés liées à la **mise en page des textes**. * Propriétés liées aux **arrière-plans**. * Propriétés liées aux **listes**. * Propriétés liées aux **bordures**. * Propriétés liées à la **définition des marges**. ==== 5. Les classes de style ==== <callout type="primary" icon="true">Les classes permettent d'appliquer **plusieurs styles différents** à une même balise. Le concepteur peut ainsi **définir ses propres sélecteurs**. Une classe est applicable à **plusieurs éléments**.</callout> === 5.1 Les classes régulières === <callout type="primary" icon="true">Elles permettent la définition de **plusieurs règles** d'affichage pour un **même sélecteur**.</callout> * //Syntaxe// * **Déclaration** : //sélecteur//**.**//nom_classe// {déclaration(s) de style} * **Utilisation** : <balise **class**="nom_classe">...</balise> * //Exemple de déclaration// <code css *.css> /* Déclaraion d'une classe gris qui sera appliquée à toutes les balises p */ p.gris { color: grey; font-style: italic; } </code> {{ :web:testegris.png?nolink|}} * //Exemple d'utilisation// <code html *.html> <p>Ce texte est en gris et en italique.</p> </code> === 5.2 Les classes génériques === <callout type="primary" icon="true">Elles ne sont pas liées à un sélecteur et peuvent être **appliquées à toutes les balises**.</callout> * //Syntaxe// * **Déclaration** : **.**//nom_classe// {déclaration(s) de style} * **Utilisation** : <balise **class**="//nom_classe//">...</balise> * //Exemple de déclaration// <code css *.css> /* Déclaraion d'une classe gris générique */ .gris { color: grey; font-style: italic; } </code> {{ :web:testegrisgenerique.png?nolink|}} * //Exemple d'utilisation// <code html *.html> <!-- Il faut préciser le nom de la classe générique pour qu'elle s'applique à la balise --> <p class="gris">Ce texte est en gris et en italique.</p> </code> === 5.3 Les pseudo-classes === <callout type="primary" icon="true">Elles autorisent des définitions pour l'affichage des balises dans des **états particuliers**.</callout> * //Syntaxe// * **Déclaration** : //sélecteur//**:**//nom_pseudo_classe// {déclaration(s) de style} * **Les pseudo-classes d'ancre : link, visited** * //Exemple// : couleur du fond d'un lien déjà visité rouge et la couleur du texte assicié en blanc. <code css *.css> a:visited{ color:white; background-color: red; } </code> * **Les pseudo-classes dynamiques : hover, active, focus** * //Exemple// : mise en italique du lien au passage de la souris. <code css *.css> a:hover{ font-style:italic; } </code> ==== 6. Le sélecteur id ==== <callout type="primary" icon="true">Ce sélecteur accroche un effet de style (comme le sélecteur class) mais **ne peut être appelé qu'une seule fois** dans le document. Il permet d'identifier un élément unique dans la page (**très utile lorsqu'on fait appel à du code JavaScript**).</callout> * //Syntaxe// * **Déclaration** : **#**//nom_classe// {déclaration(s) de style} * **Utilisation (appel une seule fois)** : <balise **id**="//nom_classe//">...</balise> * //Exemple// <code html *.html> <!DOCTYPE html> <html> <head> <style type="text/css"> #tcan { color: blue; font-size: 20px; } </style> </head> <body> <h1 id="tcan">La conversion analogique numérique</h1> <p> Un convertisseur analogique-numérique est un dispositif électronique ...</p> ... </body> </html> </code> {{ :web:excss2.png?nolink |}} ==== 7. Les balises de type "bloc et en ligne" ==== ===HTML=== La plupart des balises peuvent se ranger dans l’une ou l’autre des **catégories** : **bloc** ou **en ligne**. \\ \\ Une balise de type **bloc** crée automatiquement un **retour à la ligne** avant et après son contenu. Une page web est constituée d’un ensemble de blocs que l’on peut mettre les **uns à l’intérieur des autres**. \\ \\ //Exemples// \\ \\ <code html *.html> <h1></h1> <p></p> <div></div> </code> \\ Une balise de type **en ligne** se trouvera **obligatoirement à l’intérieur** d’une balise de type bloc. Une balise de type en ligne ne crée pas de retour à la ligne. \\ \\ //Exemples// \\ <code html *.html> <a></a> <em></em> <span></span> … </code> ===CSS=== La propriété CSS **display** permet de transformer n’importe quel élément d’un type dans un autre. Cette propriété prend les valeurs ci-dessous. ^ Valeur ^ Description ^ | **inline** | Les éléments se placent les uns à côté des autres. | | **block ** | Les éléments sont en forme de blocs. Ils se placent les uns en dessous des autres et peuvent être redimensionnés. | | **inline-block** | Les éléments sont positionnés les uns à côté des autres (comme inline) et peuvent être redimensionnés (comme block). | | **none** | Les éléments ne seront pas affichés. | //Exemple : Positionnement de liens les uns en dessous des autres et redimensionnement possible.// <code css *.css> a { display : block ; } </code> ==== 8. Sélecteurs avancés ==== ***** : **sélecteur universel** // Exemple // <code css *.css> /* Pour faire un RESET CSS on applique la même règle à toutes les balises */ * { /* Règle CSS */ } </code> **A B : une balise contenue dans une autre** // Exemple // <code css *.css> /* Pour appliquer la règle à toutes les balises <em> contenues dans une balise <h3> */ h3 em { /* Règle CSS */ } </code> **A + B : une balise qui en suit une autre** // Exemple // <code css *.css> /* Pour appliquer la règle à la première balise p (paragraphe) qui suit une balise h3 (titre) */ h3 + p { /* Règle CSS */ } </code> **A[attribut] : une balise possédant un attribut** // Exemple // <code css *.css> /* Pour appliquer la règle à toutes les balises a (lien) possédant l'attribut title */ a[title]{ /* Règle CSS */ } </code> **A[attribut="valeur"] : une balise possédant un attribut et une valeur exacte** // Exemple // <code css *.css> /* Pour appliquer la règle à toutes les balises a (lien) dont l'attribut title est égal au texte : Cliquez ici */ a[title="Cliquez ici"]{ /* Règle CSS */ } </code> **A[attribut*="valeur"] : une balise, un attribut et une valeur** // Exemple // <code css *.css> /* Pour appliquer la règle à toutes les balises a (lien) dont l'attribut title contient le texte : ici */ a[title*="Clic ici"] { /* Règle CSS */ } </code> ==== Pour aller plus loin ... ==== <html><a href="https://fr.learnlayout.com/" target="_blank">Apprendre les mises en page CSS</a></html> web/basescss.txt Dernière modification : 2023/06/18 18:47de phil