Le langage CSS/Glossaire

<mediawiki xmlns="http://www.mediawiki.org/xml/export-0.10/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mediawiki.org/xml/export-0.10/ http://www.mediawiki.org/xml/export-0.10.xsd" version="0.10" xml:lang="fr">
  <siteinfo>
    <sitename>Wikilivres</sitename>
    <dbname>frwikibooks</dbname>
    <base>https://fr.wikibooks.org/wiki/Accueil</base>
    <generator>MediaWiki 1.39.0-wmf.25</generator>
    <case>first-letter</case>
    <namespaces>
      <namespace key="-2" case="first-letter">Média</namespace>
      <namespace key="-1" case="first-letter">Spécial</namespace>
      <namespace key="0" case="first-letter" />
      <namespace key="1" case="first-letter">Discussion</namespace>
      <namespace key="2" case="first-letter">Utilisateur</namespace>
      <namespace key="3" case="first-letter">Discussion utilisateur</namespace>
      <namespace key="4" case="first-letter">Wikilivres</namespace>
      <namespace key="5" case="first-letter">Discussion Wikilivres</namespace>
      <namespace key="6" case="first-letter">Fichier</namespace>
      <namespace key="7" case="first-letter">Discussion fichier</namespace>
      <namespace key="8" case="first-letter">MediaWiki</namespace>
      <namespace key="9" case="first-letter">Discussion MediaWiki</namespace>
      <namespace key="10" case="first-letter">Modèle</namespace>
      <namespace key="11" case="first-letter">Discussion modèle</namespace>
      <namespace key="12" case="first-letter">Aide</namespace>
      <namespace key="13" case="first-letter">Discussion aide</namespace>
      <namespace key="14" case="first-letter">Catégorie</namespace>
      <namespace key="15" case="first-letter">Discussion catégorie</namespace>
      <namespace key="100" case="first-letter">Transwiki</namespace>
      <namespace key="101" case="first-letter">Discussion Transwiki</namespace>
      <namespace key="102" case="first-letter">Wikijunior</namespace>
      <namespace key="103" case="first-letter">Discussion Wikijunior</namespace>
      <namespace key="710" case="first-letter">TimedText</namespace>
      <namespace key="711" case="first-letter">TimedText talk</namespace>
      <namespace key="828" case="first-letter">Module</namespace>
      <namespace key="829" case="first-letter">Discussion module</namespace>
      <namespace key="2300" case="first-letter">Gadget</namespace>
      <namespace key="2301" case="first-letter">Discussion gadget</namespace>
      <namespace key="2302" case="case-sensitive">Définition de gadget</namespace>
      <namespace key="2303" case="case-sensitive">Discussion définition de gadget</namespace>
    </namespaces>
  </siteinfo>
  <page>
    <title>Le langage CSS/Glossaire</title>
    <ns>0</ns>
    <id>2284</id>
    <revision>
      <id>683825</id>
      <parentid>683763</parentid>
      <timestamp>2022-08-21T13:50:50Z</timestamp>
      <contributor>
        <username>DavidL</username>
        <id>1746</id>
      </contributor>
      <comment>/* P */</comment>
      <model>wikitext</model>
      <format>text/x-wiki</format>
      <text bytes="11505" xml:space="preserve">&lt;noinclude&gt;{{Sommaire CSS}}&lt;/noinclude&gt;

== A ==
;Arborescence:Un document HTML définit une structure hiérarchique sous la forme d'un arbre d'éléments : chaque élément peut en contenir plusieurs autres. En CSS, il est possible d'enchaîner les [[../Les sélecteurs|sélecteurs]] pour sélectionner les éléments parents (directs ou non) avant l'élément ciblé :
:Exemple 1 : Tous les éléments p enfants directs d'un élément de classe &lt;code&gt;info&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;.info &gt; p&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments de classe &lt;code&gt;item&lt;/code&gt; enfants directs ou indirects d'un élément de classe &lt;code&gt;menu&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;.menu .item&lt;/syntaxhighlight&gt;

;{{wt|attribut|Attribut}}:Un attribut est une propriété associée à un élément HTML. Par exemple, l'attribut &lt;code&gt;style&lt;/code&gt; définit une série de propriétés CSS appliquées à l'élément.
:Exemple : &lt;syntaxhighlight lang=&quot;html&quot; inline&gt;&lt;div style=&quot;border: solid 1px; font-weight:bold;&quot;&gt;Zone avec bordure, en gras&lt;/div&gt;&lt;/syntaxhighlight&gt;
:Un [[../Les sélecteurs|sélecteur]] peut [[../Les sélecteurs#Sélecteur d'attribut|utiliser les attributs]] en encadrant le nom avec des crochets, et peut aussi tester la valeur associée.
:Exemple 1 : Tous les éléments ayant un attribut style défini : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;[style]&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments ayant un attribut style défini et contenant la chaîne &quot;color:&quot; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;[style*=&quot;color:&quot;]&lt;/syntaxhighlight&gt;

== B ==
;BEM:Bonne pratique du CSS consistant à organiser les styles en arborescence. Par exemple, &lt;code&gt;__&lt;/code&gt; dans un nom de sélecteur signifie &quot;enfant direct&quot;.
;Bordure:Zone entourant un élément comprise entre la marge et l'espace interne dans le modèle de boîte. Par défaut, cette zone est vide (aucune bordure).
:Voir [[../Le modèle de boîte|le chapitre « Le modèle de boîte »]]

== C ==

;Canevas:Représente l'espace fermé dans lequel la [[#Structure|structure de formatage]] est traitée. Pour l'écran d'ordinateur, il s'agira de la zone de visualisation du navigateur ; pour une page papier, il s'agira de l'espace imprimable de la page ; etc.
:[http://www.yoyodesign.org/doc/w3c/css2/intro.html#q4 Recommandation CSS2 - Le canevas] (FR)
;Chrome:Navigateur de Google basé sur le moteur Chromium.
;Couleur:La couleur est définie par un ensemble de composants, en général RVB : Rouge, Vert, Bleu (en anglais : RGB = Red, Green, Blue), et potentiellement une composante alpha indiquant l'opacité. Les propriétés CSS permettent de définir différentes couleurs :
:* Couleur de texte : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;color: blue;&lt;/syntaxhighlight&gt;
:* Couleur de fond : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;background-color: #432;&lt;/syntaxhighlight&gt;
:* Couleur de bordure : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;border-color: rgb(100%, 50%, 0%);&lt;/syntaxhighlight&gt;
:Voir [[../Valeurs et unités#Les couleurs|la section « Les couleurs » du chapitre « Valeurs et unités »]]

== D ==
;Dégradé de couleur:Les règles de style CSS permettent de mettre un dégradé de couleur en fond d'un élément en utilisant l'une des fonctions &lt;code&gt;gradient&lt;/code&gt; pour la propriété &lt;code&gt;background-image&lt;/code&gt; : &lt;code&gt;linear-gradient&lt;/code&gt;, &lt;code&gt;repeating-linear-gradient&lt;/code&gt;, &lt;code&gt;radial-gradient&lt;/code&gt;, &lt;code&gt;repeating-radial-gradient&lt;/code&gt; ou &lt;code&gt;conic-gradient&lt;/code&gt;.
:Voir [[../Fonds, bordures, marges et espacements#Fond en dégradé de couleur|la section « Fond en dégradé de couleur » du chapitre « Fonds, bordures, marges et espacements »]]
;Document:Les règles de style CSS s'applique à un document HTML ou XHTML. Ce document définit un ensemble d'éléments imbriqués. Les règles CSS ciblent des éléments particulier à styliser en utilisant des sélecteurs.

== E ==
;Edge:Navigateur de Microsoft successeur d'Internet Explorer. Les dernières versions sont basées sur le moteur Chromium.
;Élément:Nœud de l'arborescence des documents HTML, XHTML ou XML défini par une balise d'ouverture et une balise de fermeture.
:Un [[../Les sélecteurs|sélecteur]] peut désigner tous les éléments ayant le même nom:
:Exemple 1 : Tous les éléments nommés &lt;code&gt;div&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;div&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;*&lt;/syntaxhighlight&gt;

== F ==
;Feuille de style:Une feuille de style est un ensemble de règles CSS. Elle peut être un fichier séparé (extension &lt;code&gt;.css&lt;/code&gt;) ou incluse dans un document HTML dans un élément &lt;syntaxhighlight lang=&quot;html&quot; inline&gt;&lt;style&gt;&lt;/syntaxhighlight&gt;.
:Voir [[../Interface HTML|le chapitre « Interface HTML »]]
;FF:Firefox, navigateur de la fondation Mozilla.

== G ==
== H ==
;Héritage:La plupart des propriétés appliquées à un élément s'appliquent également aux éléments qu'il contient : police de caractère, couleur de texte et de fond, ... D'autres ne sont pas héritées ; par exemple les propriétés sur la bordure ne s'appliquent qu'à l'élément ciblé.
:La valeur spéciale &lt;code&gt;inherit&lt;/code&gt; permet d'écraser la valeur d'une propriété pour utiliser la même valeur que celle de l'élément parent.
:Voir [[../Héritage|le chapitre « Héritage »]]
;HTML:HyperText Markup Language ; langage utilisé pour les documents web, définissant une structure hiérarchique d'éléments dont le style est définissable par une feuille de style CSS.
:Voir [[Le langage HTML|le livre sur le langage HTML]].

== I ==
;IE:Internet Explorer ; navigateur ancien de Microsoft très peu utilisé et ne supportant pas complètement les standards récents. Il a été remplacé par Edge.

== J ==
== K ==
== L ==
== M ==
;Modèle de boîte:Le rendu des éléments de type bloc peut être modélisé par un ensemble de zone rectangulaire imbriquées appelées boîtes.
:Voir [[../Le modèle de boîte|le chapitre « Le modèle de boîte »]]

== N ==
== O ==
;Opacité:L'opacité permet de rendre un élément plus ou moins opaque : 100% = opaque (par défaut), 0% = transparent. Elle s'applique à tout l'élément : fond et contenu. Pour ne l'appliquer que sur le fond, il faut utiliser une couleur de fond avec composante alpha pour indiquer l'opacité de la couleur.
:Voir [[../Fonds, bordures, marges et espacements#Opacité|la section « Opacité » du chapitre « Fonds, bordures, marges et espacements »]]
;Ordre:L'ordre d'application des règles de style est défini par :
:* la spécificité des sélecteurs : plus le sélecteur est précis plus il a la priorité,
:* l'attribut &lt;code&gt;style&lt;/code&gt; a la priorité sur les feuilles de styles (sauf les valeurs marquées avec &lt;code&gt;!important&lt;/code&gt;),
:* l'ordre d'inclusion des feuilles de style en cas d'égalité : la nouvelle règle écrase l'ancienne valeur.
:Voir [[../Structure et syntaxe#Ordre d'interprétation des styles et cascade|la section « Ordre d'interprétation des styles et cascade » du chapitre « Structure et syntaxe »]] pour plus de détails.

== P ==
;Page:Une page web est définie par un document HTML constitué d'une hiérarchie d'éléments.
;Plate-forme:Désigne généralement le type de système d'exploitation d'un ordinateur. On parlera de la plate-forme Linux, la plate-forme Macintosh, la plate-forme Windows, etc.
;{{wt|propriété|Propriété}}:Une propriété définit une valeur à un attribut changeant l'apparence : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;color, background-color, margin, padding, font-family&lt;/syntaxhighlight&gt;, ...
:Voir [[../Structure et syntaxe#Structure générale|la section « Structure générale » dans le chapitre « Structure et syntaxe »]]
;Pseudo-classe, pseudo-élément:Dans un sélecteur, une pseudo-classe désigne un état particulier d'un élément : premier élément du parent, survol de la souris, lien déjà visité, ... Un pseudo-élément est similaire mais possède un contenu à définir : contenu avant, contenu après... Leur nom est précédé d'un signe deux-points. Ils sont en général combinés avec d'autres sélecteurs.
:Voir [[../Les sélecteurs#Les pseudo-classes et les pseudo-éléments|la section « Les pseudo-classes et les pseudo-éléments » du chapitre « Les sélecteurs »]]

== Q ==
== R ==
== S ==
;{{wt|sélecteur|Sélecteur}}:Un sélecteur désigne les éléments auxquels s'appliquent les propriétés regroupées dans le bloc qui suit le sélecteur. Il peut désigner les éléments par leur nom, une classe CSS particulière, un identifiants, une combinaison de sélecteurs, ...
:Voir [[../Les sélecteurs|le chapitre « Les sélecteurs »]]
;Spécificité:La spécificité est la précision d'un sélecteur. Elle est utilisée pour définir la priorité des règles de style. Quand plusieurs valeurs différentes existe pour une même propriété, le sélecteur plus spécifique a la priorité.
:Voir [[../Structure et syntaxe#Ordre des spécificités des règles|la section « Ordre des spécificités des règles » du chapitre « Structure et syntaxe »]]
;Structure de formatage:Tout document HTML ou XML donne lieu à la construction d'un ''arbre du document'' reflétant l'organisation de ses contenus et de leur structure. À partir de l'arbre du document, le moteur de rendu CSS d'un navigateur produit une structure dite « de formatage » qui est utilisée pour appliquer les règles de style aux éléments. La structure de formatage est déduite de l'arbre du document, mais peut en différer lorsque des contenus sont générés ou supprimés via CSS.

== T ==
;Taille de police:La taille de la police de caractères définit la hauteur des caractères d'une ligne de texte. En unité absolue, celle-ci est couramment exprimée en points ; elle peut utiliser d'autres unités absolues ou des unités relatives.
:Voir [[../Valeurs et unités|le chapitre « Valeurs et unités »]] et les sections « [[../Texte#Police et taille de police|Police et taille de police]] » et « [[../Texte#font-size : taille des caractères|font-size : taille des caractères]] » du chapitre « [[../Texte|Texte]] ».

== U ==
;Unité:Les valeurs de certains propriété sont exprimées en différentes unités spécifiées en général après la valeur.
:Voir [[../Valeurs et unités|le chapitre « Valeurs et unités »]]

== V ==
;Variable:Une variable permet de stocker une valeur utilisée plusieurs fois. cela facilite la maintenance car la modification de la valeur ne se fait qu'à un seul endroit : la définition de la variable.
:Voir [[../Structure et syntaxe#Déclaration de variable|la section « Déclaration de variable » dans le chapitre « Structure et syntaxe »]]

== W ==
== X ==
;XHTML:eXtensible HyperText Markup Language ; langage utilisé pour les documents web, définissant une structure hiérarchique d'éléments dont le style est définissable par une feuille de style CSS. Il s'agit de HTML utilisant la syntaxe plus stricte du XML.
:Voir [[Le langage HTML|le livre sur le langage HTML]].
;XML:eXtensible Markup Language ; langage générique définissant une structure hiérarchique d'éléments. Ce langage est d'utilisation plus générale pour définir des structures de données. Le rendu peut être stylisé pour le transformer en XHTML en utilisant des feuilles de style XSLT.
:Voir [[Programmation XML|le livre sur le langage XML]].

== Y ==
== Z ==

== Voir aussi ==
* {{WT|Catégorie:Lexique en français de la programmation}}</text>
      <sha1>qdnawlk9t8afkchyliwi29k999bfcbh</sha1>
    </revision>
    <revision>
      <id>683826</id>
      <parentid>683825</parentid>
      <timestamp>2022-08-21T13:51:38Z</timestamp>
      <contributor>
        <username>DavidL</username>
        <id>1746</id>
      </contributor>
      <comment>/* E */</comment>
      <model>wikitext</model>
      <format>text/x-wiki</format>
      <text bytes="11506" xml:space="preserve">&lt;noinclude&gt;{{Sommaire CSS}}&lt;/noinclude&gt;

== A ==
;Arborescence:Un document HTML définit une structure hiérarchique sous la forme d'un arbre d'éléments : chaque élément peut en contenir plusieurs autres. En CSS, il est possible d'enchaîner les [[../Les sélecteurs|sélecteurs]] pour sélectionner les éléments parents (directs ou non) avant l'élément ciblé :
:Exemple 1 : Tous les éléments p enfants directs d'un élément de classe &lt;code&gt;info&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;.info &gt; p&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments de classe &lt;code&gt;item&lt;/code&gt; enfants directs ou indirects d'un élément de classe &lt;code&gt;menu&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;.menu .item&lt;/syntaxhighlight&gt;

;{{wt|attribut|Attribut}}:Un attribut est une propriété associée à un élément HTML. Par exemple, l'attribut &lt;code&gt;style&lt;/code&gt; définit une série de propriétés CSS appliquées à l'élément.
:Exemple : &lt;syntaxhighlight lang=&quot;html&quot; inline&gt;&lt;div style=&quot;border: solid 1px; font-weight:bold;&quot;&gt;Zone avec bordure, en gras&lt;/div&gt;&lt;/syntaxhighlight&gt;
:Un [[../Les sélecteurs|sélecteur]] peut [[../Les sélecteurs#Sélecteur d'attribut|utiliser les attributs]] en encadrant le nom avec des crochets, et peut aussi tester la valeur associée.
:Exemple 1 : Tous les éléments ayant un attribut style défini : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;[style]&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments ayant un attribut style défini et contenant la chaîne &quot;color:&quot; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;[style*=&quot;color:&quot;]&lt;/syntaxhighlight&gt;

== B ==
;BEM:Bonne pratique du CSS consistant à organiser les styles en arborescence. Par exemple, &lt;code&gt;__&lt;/code&gt; dans un nom de sélecteur signifie &quot;enfant direct&quot;.
;Bordure:Zone entourant un élément comprise entre la marge et l'espace interne dans le modèle de boîte. Par défaut, cette zone est vide (aucune bordure).
:Voir [[../Le modèle de boîte|le chapitre « Le modèle de boîte »]]

== C ==

;Canevas:Représente l'espace fermé dans lequel la [[#Structure|structure de formatage]] est traitée. Pour l'écran d'ordinateur, il s'agira de la zone de visualisation du navigateur ; pour une page papier, il s'agira de l'espace imprimable de la page ; etc.
:[http://www.yoyodesign.org/doc/w3c/css2/intro.html#q4 Recommandation CSS2 - Le canevas] (FR)
;Chrome:Navigateur de Google basé sur le moteur Chromium.
;Couleur:La couleur est définie par un ensemble de composants, en général RVB : Rouge, Vert, Bleu (en anglais : RGB = Red, Green, Blue), et potentiellement une composante alpha indiquant l'opacité. Les propriétés CSS permettent de définir différentes couleurs :
:* Couleur de texte : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;color: blue;&lt;/syntaxhighlight&gt;
:* Couleur de fond : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;background-color: #432;&lt;/syntaxhighlight&gt;
:* Couleur de bordure : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;border-color: rgb(100%, 50%, 0%);&lt;/syntaxhighlight&gt;
:Voir [[../Valeurs et unités#Les couleurs|la section « Les couleurs » du chapitre « Valeurs et unités »]]

== D ==
;Dégradé de couleur:Les règles de style CSS permettent de mettre un dégradé de couleur en fond d'un élément en utilisant l'une des fonctions &lt;code&gt;gradient&lt;/code&gt; pour la propriété &lt;code&gt;background-image&lt;/code&gt; : &lt;code&gt;linear-gradient&lt;/code&gt;, &lt;code&gt;repeating-linear-gradient&lt;/code&gt;, &lt;code&gt;radial-gradient&lt;/code&gt;, &lt;code&gt;repeating-radial-gradient&lt;/code&gt; ou &lt;code&gt;conic-gradient&lt;/code&gt;.
:Voir [[../Fonds, bordures, marges et espacements#Fond en dégradé de couleur|la section « Fond en dégradé de couleur » du chapitre « Fonds, bordures, marges et espacements »]]
;Document:Les règles de style CSS s'applique à un document HTML ou XHTML. Ce document définit un ensemble d'éléments imbriqués. Les règles CSS ciblent des éléments particulier à styliser en utilisant des sélecteurs.

== E ==
;Edge:Navigateur de Microsoft successeur d'Internet Explorer. Les dernières versions sont basées sur le moteur Chromium.
;Élément:Nœud de l'arborescence des documents HTML, XHTML ou XML défini par une balise d'ouverture et une balise de fermeture.
:Un [[../Les sélecteurs|sélecteur]] peut désigner tous les éléments ayant le même nom :
:Exemple 1 : Tous les éléments nommés &lt;code&gt;div&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;div&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;*&lt;/syntaxhighlight&gt;

== F ==
;Feuille de style:Une feuille de style est un ensemble de règles CSS. Elle peut être un fichier séparé (extension &lt;code&gt;.css&lt;/code&gt;) ou incluse dans un document HTML dans un élément &lt;syntaxhighlight lang=&quot;html&quot; inline&gt;&lt;style&gt;&lt;/syntaxhighlight&gt;.
:Voir [[../Interface HTML|le chapitre « Interface HTML »]]
;FF:Firefox, navigateur de la fondation Mozilla.

== G ==
== H ==
;Héritage:La plupart des propriétés appliquées à un élément s'appliquent également aux éléments qu'il contient : police de caractère, couleur de texte et de fond, ... D'autres ne sont pas héritées ; par exemple les propriétés sur la bordure ne s'appliquent qu'à l'élément ciblé.
:La valeur spéciale &lt;code&gt;inherit&lt;/code&gt; permet d'écraser la valeur d'une propriété pour utiliser la même valeur que celle de l'élément parent.
:Voir [[../Héritage|le chapitre « Héritage »]]
;HTML:HyperText Markup Language ; langage utilisé pour les documents web, définissant une structure hiérarchique d'éléments dont le style est définissable par une feuille de style CSS.
:Voir [[Le langage HTML|le livre sur le langage HTML]].

== I ==
;IE:Internet Explorer ; navigateur ancien de Microsoft très peu utilisé et ne supportant pas complètement les standards récents. Il a été remplacé par Edge.

== J ==
== K ==
== L ==
== M ==
;Modèle de boîte:Le rendu des éléments de type bloc peut être modélisé par un ensemble de zone rectangulaire imbriquées appelées boîtes.
:Voir [[../Le modèle de boîte|le chapitre « Le modèle de boîte »]]

== N ==
== O ==
;Opacité:L'opacité permet de rendre un élément plus ou moins opaque : 100% = opaque (par défaut), 0% = transparent. Elle s'applique à tout l'élément : fond et contenu. Pour ne l'appliquer que sur le fond, il faut utiliser une couleur de fond avec composante alpha pour indiquer l'opacité de la couleur.
:Voir [[../Fonds, bordures, marges et espacements#Opacité|la section « Opacité » du chapitre « Fonds, bordures, marges et espacements »]]
;Ordre:L'ordre d'application des règles de style est défini par :
:* la spécificité des sélecteurs : plus le sélecteur est précis plus il a la priorité,
:* l'attribut &lt;code&gt;style&lt;/code&gt; a la priorité sur les feuilles de styles (sauf les valeurs marquées avec &lt;code&gt;!important&lt;/code&gt;),
:* l'ordre d'inclusion des feuilles de style en cas d'égalité : la nouvelle règle écrase l'ancienne valeur.
:Voir [[../Structure et syntaxe#Ordre d'interprétation des styles et cascade|la section « Ordre d'interprétation des styles et cascade » du chapitre « Structure et syntaxe »]] pour plus de détails.

== P ==
;Page:Une page web est définie par un document HTML constitué d'une hiérarchie d'éléments.
;Plate-forme:Désigne généralement le type de système d'exploitation d'un ordinateur. On parlera de la plate-forme Linux, la plate-forme Macintosh, la plate-forme Windows, etc.
;{{wt|propriété|Propriété}}:Une propriété définit une valeur à un attribut changeant l'apparence : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;color, background-color, margin, padding, font-family&lt;/syntaxhighlight&gt;, ...
:Voir [[../Structure et syntaxe#Structure générale|la section « Structure générale » dans le chapitre « Structure et syntaxe »]]
;Pseudo-classe, pseudo-élément:Dans un sélecteur, une pseudo-classe désigne un état particulier d'un élément : premier élément du parent, survol de la souris, lien déjà visité, ... Un pseudo-élément est similaire mais possède un contenu à définir : contenu avant, contenu après... Leur nom est précédé d'un signe deux-points. Ils sont en général combinés avec d'autres sélecteurs.
:Voir [[../Les sélecteurs#Les pseudo-classes et les pseudo-éléments|la section « Les pseudo-classes et les pseudo-éléments » du chapitre « Les sélecteurs »]]

== Q ==
== R ==
== S ==
;{{wt|sélecteur|Sélecteur}}:Un sélecteur désigne les éléments auxquels s'appliquent les propriétés regroupées dans le bloc qui suit le sélecteur. Il peut désigner les éléments par leur nom, une classe CSS particulière, un identifiants, une combinaison de sélecteurs, ...
:Voir [[../Les sélecteurs|le chapitre « Les sélecteurs »]]
;Spécificité:La spécificité est la précision d'un sélecteur. Elle est utilisée pour définir la priorité des règles de style. Quand plusieurs valeurs différentes existe pour une même propriété, le sélecteur plus spécifique a la priorité.
:Voir [[../Structure et syntaxe#Ordre des spécificités des règles|la section « Ordre des spécificités des règles » du chapitre « Structure et syntaxe »]]
;Structure de formatage:Tout document HTML ou XML donne lieu à la construction d'un ''arbre du document'' reflétant l'organisation de ses contenus et de leur structure. À partir de l'arbre du document, le moteur de rendu CSS d'un navigateur produit une structure dite « de formatage » qui est utilisée pour appliquer les règles de style aux éléments. La structure de formatage est déduite de l'arbre du document, mais peut en différer lorsque des contenus sont générés ou supprimés via CSS.

== T ==
;Taille de police:La taille de la police de caractères définit la hauteur des caractères d'une ligne de texte. En unité absolue, celle-ci est couramment exprimée en points ; elle peut utiliser d'autres unités absolues ou des unités relatives.
:Voir [[../Valeurs et unités|le chapitre « Valeurs et unités »]] et les sections « [[../Texte#Police et taille de police|Police et taille de police]] » et « [[../Texte#font-size : taille des caractères|font-size : taille des caractères]] » du chapitre « [[../Texte|Texte]] ».

== U ==
;Unité:Les valeurs de certains propriété sont exprimées en différentes unités spécifiées en général après la valeur.
:Voir [[../Valeurs et unités|le chapitre « Valeurs et unités »]]

== V ==
;Variable:Une variable permet de stocker une valeur utilisée plusieurs fois. cela facilite la maintenance car la modification de la valeur ne se fait qu'à un seul endroit : la définition de la variable.
:Voir [[../Structure et syntaxe#Déclaration de variable|la section « Déclaration de variable » dans le chapitre « Structure et syntaxe »]]

== W ==
== X ==
;XHTML:eXtensible HyperText Markup Language ; langage utilisé pour les documents web, définissant une structure hiérarchique d'éléments dont le style est définissable par une feuille de style CSS. Il s'agit de HTML utilisant la syntaxe plus stricte du XML.
:Voir [[Le langage HTML|le livre sur le langage HTML]].
;XML:eXtensible Markup Language ; langage générique définissant une structure hiérarchique d'éléments. Ce langage est d'utilisation plus générale pour définir des structures de données. Le rendu peut être stylisé pour le transformer en XHTML en utilisant des feuilles de style XSLT.
:Voir [[Programmation XML|le livre sur le langage XML]].

== Y ==
== Z ==

== Voir aussi ==
* {{WT|Catégorie:Lexique en français de la programmation}}</text>
      <sha1>bu1swxvrvduec4kstyv4j68p2307h1i</sha1>
    </revision>
    <revision>
      <id>683827</id>
      <parentid>683826</parentid>
      <timestamp>2022-08-21T13:55:19Z</timestamp>
      <contributor>
        <username>DavidL</username>
        <id>1746</id>
      </contributor>
      <comment>/* C */</comment>
      <model>wikitext</model>
      <format>text/x-wiki</format>
      <text bytes="11669" xml:space="preserve">&lt;noinclude&gt;{{Sommaire CSS}}&lt;/noinclude&gt;

== A ==
;Arborescence:Un document HTML définit une structure hiérarchique sous la forme d'un arbre d'éléments : chaque élément peut en contenir plusieurs autres. En CSS, il est possible d'enchaîner les [[../Les sélecteurs|sélecteurs]] pour sélectionner les éléments parents (directs ou non) avant l'élément ciblé :
:Exemple 1 : Tous les éléments p enfants directs d'un élément de classe &lt;code&gt;info&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;.info &gt; p&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments de classe &lt;code&gt;item&lt;/code&gt; enfants directs ou indirects d'un élément de classe &lt;code&gt;menu&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;.menu .item&lt;/syntaxhighlight&gt;

;{{wt|attribut|Attribut}}:Un attribut est une propriété associée à un élément HTML. Par exemple, l'attribut &lt;code&gt;style&lt;/code&gt; définit une série de propriétés CSS appliquées à l'élément.
:Exemple : &lt;syntaxhighlight lang=&quot;html&quot; inline&gt;&lt;div style=&quot;border: solid 1px; font-weight:bold;&quot;&gt;Zone avec bordure, en gras&lt;/div&gt;&lt;/syntaxhighlight&gt;
:Un [[../Les sélecteurs|sélecteur]] peut [[../Les sélecteurs#Sélecteur d'attribut|utiliser les attributs]] en encadrant le nom avec des crochets, et peut aussi tester la valeur associée.
:Exemple 1 : Tous les éléments ayant un attribut style défini : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;[style]&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments ayant un attribut style défini et contenant la chaîne &quot;color:&quot; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;[style*=&quot;color:&quot;]&lt;/syntaxhighlight&gt;

== B ==
;BEM:Bonne pratique du CSS consistant à organiser les styles en arborescence. Par exemple, &lt;code&gt;__&lt;/code&gt; dans un nom de sélecteur signifie &quot;enfant direct&quot;.
;Bordure:Zone entourant un élément comprise entre la marge et l'espace interne dans le modèle de boîte. Par défaut, cette zone est vide (aucune bordure).
:Voir [[../Le modèle de boîte|le chapitre « Le modèle de boîte »]]

== C ==

;Canevas:Représente l'espace fermé dans lequel la [[#Structure|structure de formatage]] est traitée. Pour l'écran d'ordinateur, il s'agira de la zone de visualisation du navigateur ; pour une page papier, il s'agira de l'espace imprimable de la page ; etc.
:[http://www.yoyodesign.org/doc/w3c/css2/intro.html#q4 Recommandation CSS2 - Le canevas] (FR)
;Chrome:Navigateur de Google basé sur le moteur Chromium.
;Couleur:La couleur est définie par un ensemble de composants, en général RVB : Rouge, Vert, Bleu (en anglais : RGB = Red, Green, Blue), et potentiellement une composante alpha indiquant l'opacité. Les propriétés CSS permettent de définir différentes couleurs :
:* Couleur de texte : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;color: blue;&lt;/syntaxhighlight&gt;
:* Couleur de fond : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;background-color: #432;&lt;/syntaxhighlight&gt;
:* Couleur de bordure : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;border-color: rgb(100%, 50%, 0%);&lt;/syntaxhighlight&gt;
:Voir [[../Valeurs et unités#Les couleurs|la section « Les couleurs » du chapitre « Valeurs et unités »]]
;CSS:Feuilles de styles en cascade (''Cascading Style Sheets''), servent à mettre en forme des documents web, type page HTML ou XML et sont le sujet de ce livre.

== D ==
;Dégradé de couleur:Les règles de style CSS permettent de mettre un dégradé de couleur en fond d'un élément en utilisant l'une des fonctions &lt;code&gt;gradient&lt;/code&gt; pour la propriété &lt;code&gt;background-image&lt;/code&gt; : &lt;code&gt;linear-gradient&lt;/code&gt;, &lt;code&gt;repeating-linear-gradient&lt;/code&gt;, &lt;code&gt;radial-gradient&lt;/code&gt;, &lt;code&gt;repeating-radial-gradient&lt;/code&gt; ou &lt;code&gt;conic-gradient&lt;/code&gt;.
:Voir [[../Fonds, bordures, marges et espacements#Fond en dégradé de couleur|la section « Fond en dégradé de couleur » du chapitre « Fonds, bordures, marges et espacements »]]
;Document:Les règles de style CSS s'applique à un document HTML ou XHTML. Ce document définit un ensemble d'éléments imbriqués. Les règles CSS ciblent des éléments particulier à styliser en utilisant des sélecteurs.

== E ==
;Edge:Navigateur de Microsoft successeur d'Internet Explorer. Les dernières versions sont basées sur le moteur Chromium.
;Élément:Nœud de l'arborescence des documents HTML, XHTML ou XML défini par une balise d'ouverture et une balise de fermeture.
:Un [[../Les sélecteurs|sélecteur]] peut désigner tous les éléments ayant le même nom :
:Exemple 1 : Tous les éléments nommés &lt;code&gt;div&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;div&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;*&lt;/syntaxhighlight&gt;

== F ==
;Feuille de style:Une feuille de style est un ensemble de règles CSS. Elle peut être un fichier séparé (extension &lt;code&gt;.css&lt;/code&gt;) ou incluse dans un document HTML dans un élément &lt;syntaxhighlight lang=&quot;html&quot; inline&gt;&lt;style&gt;&lt;/syntaxhighlight&gt;.
:Voir [[../Interface HTML|le chapitre « Interface HTML »]]
;FF:Firefox, navigateur de la fondation Mozilla.

== G ==
== H ==
;Héritage:La plupart des propriétés appliquées à un élément s'appliquent également aux éléments qu'il contient : police de caractère, couleur de texte et de fond, ... D'autres ne sont pas héritées ; par exemple les propriétés sur la bordure ne s'appliquent qu'à l'élément ciblé.
:La valeur spéciale &lt;code&gt;inherit&lt;/code&gt; permet d'écraser la valeur d'une propriété pour utiliser la même valeur que celle de l'élément parent.
:Voir [[../Héritage|le chapitre « Héritage »]]
;HTML:HyperText Markup Language ; langage utilisé pour les documents web, définissant une structure hiérarchique d'éléments dont le style est définissable par une feuille de style CSS.
:Voir [[Le langage HTML|le livre sur le langage HTML]].

== I ==
;IE:Internet Explorer ; navigateur ancien de Microsoft très peu utilisé et ne supportant pas complètement les standards récents. Il a été remplacé par Edge.

== J ==
== K ==
== L ==
== M ==
;Modèle de boîte:Le rendu des éléments de type bloc peut être modélisé par un ensemble de zone rectangulaire imbriquées appelées boîtes.
:Voir [[../Le modèle de boîte|le chapitre « Le modèle de boîte »]]

== N ==
== O ==
;Opacité:L'opacité permet de rendre un élément plus ou moins opaque : 100% = opaque (par défaut), 0% = transparent. Elle s'applique à tout l'élément : fond et contenu. Pour ne l'appliquer que sur le fond, il faut utiliser une couleur de fond avec composante alpha pour indiquer l'opacité de la couleur.
:Voir [[../Fonds, bordures, marges et espacements#Opacité|la section « Opacité » du chapitre « Fonds, bordures, marges et espacements »]]
;Ordre:L'ordre d'application des règles de style est défini par :
:* la spécificité des sélecteurs : plus le sélecteur est précis plus il a la priorité,
:* l'attribut &lt;code&gt;style&lt;/code&gt; a la priorité sur les feuilles de styles (sauf les valeurs marquées avec &lt;code&gt;!important&lt;/code&gt;),
:* l'ordre d'inclusion des feuilles de style en cas d'égalité : la nouvelle règle écrase l'ancienne valeur.
:Voir [[../Structure et syntaxe#Ordre d'interprétation des styles et cascade|la section « Ordre d'interprétation des styles et cascade » du chapitre « Structure et syntaxe »]] pour plus de détails.

== P ==
;Page:Une page web est définie par un document HTML constitué d'une hiérarchie d'éléments.
;Plate-forme:Désigne généralement le type de système d'exploitation d'un ordinateur. On parlera de la plate-forme Linux, la plate-forme Macintosh, la plate-forme Windows, etc.
;{{wt|propriété|Propriété}}:Une propriété définit une valeur à un attribut changeant l'apparence : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;color, background-color, margin, padding, font-family&lt;/syntaxhighlight&gt;, ...
:Voir [[../Structure et syntaxe#Structure générale|la section « Structure générale » dans le chapitre « Structure et syntaxe »]]
;Pseudo-classe, pseudo-élément:Dans un sélecteur, une pseudo-classe désigne un état particulier d'un élément : premier élément du parent, survol de la souris, lien déjà visité, ... Un pseudo-élément est similaire mais possède un contenu à définir : contenu avant, contenu après... Leur nom est précédé d'un signe deux-points. Ils sont en général combinés avec d'autres sélecteurs.
:Voir [[../Les sélecteurs#Les pseudo-classes et les pseudo-éléments|la section « Les pseudo-classes et les pseudo-éléments » du chapitre « Les sélecteurs »]]

== Q ==
== R ==
== S ==
;{{wt|sélecteur|Sélecteur}}:Un sélecteur désigne les éléments auxquels s'appliquent les propriétés regroupées dans le bloc qui suit le sélecteur. Il peut désigner les éléments par leur nom, une classe CSS particulière, un identifiants, une combinaison de sélecteurs, ...
:Voir [[../Les sélecteurs|le chapitre « Les sélecteurs »]]
;Spécificité:La spécificité est la précision d'un sélecteur. Elle est utilisée pour définir la priorité des règles de style. Quand plusieurs valeurs différentes existe pour une même propriété, le sélecteur plus spécifique a la priorité.
:Voir [[../Structure et syntaxe#Ordre des spécificités des règles|la section « Ordre des spécificités des règles » du chapitre « Structure et syntaxe »]]
;Structure de formatage:Tout document HTML ou XML donne lieu à la construction d'un ''arbre du document'' reflétant l'organisation de ses contenus et de leur structure. À partir de l'arbre du document, le moteur de rendu CSS d'un navigateur produit une structure dite « de formatage » qui est utilisée pour appliquer les règles de style aux éléments. La structure de formatage est déduite de l'arbre du document, mais peut en différer lorsque des contenus sont générés ou supprimés via CSS.

== T ==
;Taille de police:La taille de la police de caractères définit la hauteur des caractères d'une ligne de texte. En unité absolue, celle-ci est couramment exprimée en points ; elle peut utiliser d'autres unités absolues ou des unités relatives.
:Voir [[../Valeurs et unités|le chapitre « Valeurs et unités »]] et les sections « [[../Texte#Police et taille de police|Police et taille de police]] » et « [[../Texte#font-size : taille des caractères|font-size : taille des caractères]] » du chapitre « [[../Texte|Texte]] ».

== U ==
;Unité:Les valeurs de certains propriété sont exprimées en différentes unités spécifiées en général après la valeur.
:Voir [[../Valeurs et unités|le chapitre « Valeurs et unités »]]

== V ==
;Variable:Une variable permet de stocker une valeur utilisée plusieurs fois. cela facilite la maintenance car la modification de la valeur ne se fait qu'à un seul endroit : la définition de la variable.
:Voir [[../Structure et syntaxe#Déclaration de variable|la section « Déclaration de variable » dans le chapitre « Structure et syntaxe »]]

== W ==
== X ==
;XHTML:eXtensible HyperText Markup Language ; langage utilisé pour les documents web, définissant une structure hiérarchique d'éléments dont le style est définissable par une feuille de style CSS. Il s'agit de HTML utilisant la syntaxe plus stricte du XML.
:Voir [[Le langage HTML|le livre sur le langage HTML]].
;XML:eXtensible Markup Language ; langage générique définissant une structure hiérarchique d'éléments. Ce langage est d'utilisation plus générale pour définir des structures de données. Le rendu peut être stylisé pour le transformer en XHTML en utilisant des feuilles de style XSLT.
:Voir [[Programmation XML|le livre sur le langage XML]].

== Y ==
== Z ==

== Voir aussi ==
* {{WT|Catégorie:Lexique en français de la programmation}}</text>
      <sha1>7yb7g29e1g30hqzka1fvzelkpdt41f0</sha1>
    </revision>
    <revision>
      <id>683828</id>
      <parentid>683827</parentid>
      <timestamp>2022-08-21T13:56:23Z</timestamp>
      <contributor>
        <username>DavidL</username>
        <id>1746</id>
      </contributor>
      <comment>/* J */</comment>
      <model>wikitext</model>
      <format>text/x-wiki</format>
      <text bytes="11840" xml:space="preserve">&lt;noinclude&gt;{{Sommaire CSS}}&lt;/noinclude&gt;

== A ==
;Arborescence:Un document HTML définit une structure hiérarchique sous la forme d'un arbre d'éléments : chaque élément peut en contenir plusieurs autres. En CSS, il est possible d'enchaîner les [[../Les sélecteurs|sélecteurs]] pour sélectionner les éléments parents (directs ou non) avant l'élément ciblé :
:Exemple 1 : Tous les éléments p enfants directs d'un élément de classe &lt;code&gt;info&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;.info &gt; p&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments de classe &lt;code&gt;item&lt;/code&gt; enfants directs ou indirects d'un élément de classe &lt;code&gt;menu&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;.menu .item&lt;/syntaxhighlight&gt;

;{{wt|attribut|Attribut}}:Un attribut est une propriété associée à un élément HTML. Par exemple, l'attribut &lt;code&gt;style&lt;/code&gt; définit une série de propriétés CSS appliquées à l'élément.
:Exemple : &lt;syntaxhighlight lang=&quot;html&quot; inline&gt;&lt;div style=&quot;border: solid 1px; font-weight:bold;&quot;&gt;Zone avec bordure, en gras&lt;/div&gt;&lt;/syntaxhighlight&gt;
:Un [[../Les sélecteurs|sélecteur]] peut [[../Les sélecteurs#Sélecteur d'attribut|utiliser les attributs]] en encadrant le nom avec des crochets, et peut aussi tester la valeur associée.
:Exemple 1 : Tous les éléments ayant un attribut style défini : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;[style]&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments ayant un attribut style défini et contenant la chaîne &quot;color:&quot; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;[style*=&quot;color:&quot;]&lt;/syntaxhighlight&gt;

== B ==
;BEM:Bonne pratique du CSS consistant à organiser les styles en arborescence. Par exemple, &lt;code&gt;__&lt;/code&gt; dans un nom de sélecteur signifie &quot;enfant direct&quot;.
;Bordure:Zone entourant un élément comprise entre la marge et l'espace interne dans le modèle de boîte. Par défaut, cette zone est vide (aucune bordure).
:Voir [[../Le modèle de boîte|le chapitre « Le modèle de boîte »]]

== C ==

;Canevas:Représente l'espace fermé dans lequel la [[#Structure|structure de formatage]] est traitée. Pour l'écran d'ordinateur, il s'agira de la zone de visualisation du navigateur ; pour une page papier, il s'agira de l'espace imprimable de la page ; etc.
:[http://www.yoyodesign.org/doc/w3c/css2/intro.html#q4 Recommandation CSS2 - Le canevas] (FR)
;Chrome:Navigateur de Google basé sur le moteur Chromium.
;Couleur:La couleur est définie par un ensemble de composants, en général RVB : Rouge, Vert, Bleu (en anglais : RGB = Red, Green, Blue), et potentiellement une composante alpha indiquant l'opacité. Les propriétés CSS permettent de définir différentes couleurs :
:* Couleur de texte : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;color: blue;&lt;/syntaxhighlight&gt;
:* Couleur de fond : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;background-color: #432;&lt;/syntaxhighlight&gt;
:* Couleur de bordure : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;border-color: rgb(100%, 50%, 0%);&lt;/syntaxhighlight&gt;
:Voir [[../Valeurs et unités#Les couleurs|la section « Les couleurs » du chapitre « Valeurs et unités »]]
;CSS:Feuilles de styles en cascade (''Cascading Style Sheets''), servent à mettre en forme des documents web, type page HTML ou XML et sont le sujet de ce livre.

== D ==
;Dégradé de couleur:Les règles de style CSS permettent de mettre un dégradé de couleur en fond d'un élément en utilisant l'une des fonctions &lt;code&gt;gradient&lt;/code&gt; pour la propriété &lt;code&gt;background-image&lt;/code&gt; : &lt;code&gt;linear-gradient&lt;/code&gt;, &lt;code&gt;repeating-linear-gradient&lt;/code&gt;, &lt;code&gt;radial-gradient&lt;/code&gt;, &lt;code&gt;repeating-radial-gradient&lt;/code&gt; ou &lt;code&gt;conic-gradient&lt;/code&gt;.
:Voir [[../Fonds, bordures, marges et espacements#Fond en dégradé de couleur|la section « Fond en dégradé de couleur » du chapitre « Fonds, bordures, marges et espacements »]]
;Document:Les règles de style CSS s'applique à un document HTML ou XHTML. Ce document définit un ensemble d'éléments imbriqués. Les règles CSS ciblent des éléments particulier à styliser en utilisant des sélecteurs.

== E ==
;Edge:Navigateur de Microsoft successeur d'Internet Explorer. Les dernières versions sont basées sur le moteur Chromium.
;Élément:Nœud de l'arborescence des documents HTML, XHTML ou XML défini par une balise d'ouverture et une balise de fermeture.
:Un [[../Les sélecteurs|sélecteur]] peut désigner tous les éléments ayant le même nom :
:Exemple 1 : Tous les éléments nommés &lt;code&gt;div&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;div&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;*&lt;/syntaxhighlight&gt;

== F ==
;Feuille de style:Une feuille de style est un ensemble de règles CSS. Elle peut être un fichier séparé (extension &lt;code&gt;.css&lt;/code&gt;) ou incluse dans un document HTML dans un élément &lt;syntaxhighlight lang=&quot;html&quot; inline&gt;&lt;style&gt;&lt;/syntaxhighlight&gt;.
:Voir [[../Interface HTML|le chapitre « Interface HTML »]]
;FF:Firefox, navigateur de la fondation Mozilla.

== G ==
== H ==
;Héritage:La plupart des propriétés appliquées à un élément s'appliquent également aux éléments qu'il contient : police de caractère, couleur de texte et de fond, ... D'autres ne sont pas héritées ; par exemple les propriétés sur la bordure ne s'appliquent qu'à l'élément ciblé.
:La valeur spéciale &lt;code&gt;inherit&lt;/code&gt; permet d'écraser la valeur d'une propriété pour utiliser la même valeur que celle de l'élément parent.
:Voir [[../Héritage|le chapitre « Héritage »]]
;HTML:HyperText Markup Language ; langage utilisé pour les documents web, définissant une structure hiérarchique d'éléments dont le style est définissable par une feuille de style CSS.
:Voir [[Le langage HTML|le livre sur le langage HTML]].

== I ==
;IE:Internet Explorer ; navigateur ancien de Microsoft très peu utilisé et ne supportant pas complètement les standards récents. Il a été remplacé par Edge.

== J ==
;JS:Javascript est un langage de programmation permettant les interactions avec l'utilisateur.
:Voir [[Programmation Javascript|le livre « Programmation Javascript »]]

== K ==
== L ==
== M ==
;Modèle de boîte:Le rendu des éléments de type bloc peut être modélisé par un ensemble de zone rectangulaire imbriquées appelées boîtes.
:Voir [[../Le modèle de boîte|le chapitre « Le modèle de boîte »]]

== N ==
== O ==
;Opacité:L'opacité permet de rendre un élément plus ou moins opaque : 100% = opaque (par défaut), 0% = transparent. Elle s'applique à tout l'élément : fond et contenu. Pour ne l'appliquer que sur le fond, il faut utiliser une couleur de fond avec composante alpha pour indiquer l'opacité de la couleur.
:Voir [[../Fonds, bordures, marges et espacements#Opacité|la section « Opacité » du chapitre « Fonds, bordures, marges et espacements »]]
;Ordre:L'ordre d'application des règles de style est défini par :
:* la spécificité des sélecteurs : plus le sélecteur est précis plus il a la priorité,
:* l'attribut &lt;code&gt;style&lt;/code&gt; a la priorité sur les feuilles de styles (sauf les valeurs marquées avec &lt;code&gt;!important&lt;/code&gt;),
:* l'ordre d'inclusion des feuilles de style en cas d'égalité : la nouvelle règle écrase l'ancienne valeur.
:Voir [[../Structure et syntaxe#Ordre d'interprétation des styles et cascade|la section « Ordre d'interprétation des styles et cascade » du chapitre « Structure et syntaxe »]] pour plus de détails.

== P ==
;Page:Une page web est définie par un document HTML constitué d'une hiérarchie d'éléments.
;Plate-forme:Désigne généralement le type de système d'exploitation d'un ordinateur. On parlera de la plate-forme Linux, la plate-forme Macintosh, la plate-forme Windows, etc.
;{{wt|propriété|Propriété}}:Une propriété définit une valeur à un attribut changeant l'apparence : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;color, background-color, margin, padding, font-family&lt;/syntaxhighlight&gt;, ...
:Voir [[../Structure et syntaxe#Structure générale|la section « Structure générale » dans le chapitre « Structure et syntaxe »]]
;Pseudo-classe, pseudo-élément:Dans un sélecteur, une pseudo-classe désigne un état particulier d'un élément : premier élément du parent, survol de la souris, lien déjà visité, ... Un pseudo-élément est similaire mais possède un contenu à définir : contenu avant, contenu après... Leur nom est précédé d'un signe deux-points. Ils sont en général combinés avec d'autres sélecteurs.
:Voir [[../Les sélecteurs#Les pseudo-classes et les pseudo-éléments|la section « Les pseudo-classes et les pseudo-éléments » du chapitre « Les sélecteurs »]]

== Q ==
== R ==
== S ==
;{{wt|sélecteur|Sélecteur}}:Un sélecteur désigne les éléments auxquels s'appliquent les propriétés regroupées dans le bloc qui suit le sélecteur. Il peut désigner les éléments par leur nom, une classe CSS particulière, un identifiants, une combinaison de sélecteurs, ...
:Voir [[../Les sélecteurs|le chapitre « Les sélecteurs »]]
;Spécificité:La spécificité est la précision d'un sélecteur. Elle est utilisée pour définir la priorité des règles de style. Quand plusieurs valeurs différentes existe pour une même propriété, le sélecteur plus spécifique a la priorité.
:Voir [[../Structure et syntaxe#Ordre des spécificités des règles|la section « Ordre des spécificités des règles » du chapitre « Structure et syntaxe »]]
;Structure de formatage:Tout document HTML ou XML donne lieu à la construction d'un ''arbre du document'' reflétant l'organisation de ses contenus et de leur structure. À partir de l'arbre du document, le moteur de rendu CSS d'un navigateur produit une structure dite « de formatage » qui est utilisée pour appliquer les règles de style aux éléments. La structure de formatage est déduite de l'arbre du document, mais peut en différer lorsque des contenus sont générés ou supprimés via CSS.

== T ==
;Taille de police:La taille de la police de caractères définit la hauteur des caractères d'une ligne de texte. En unité absolue, celle-ci est couramment exprimée en points ; elle peut utiliser d'autres unités absolues ou des unités relatives.
:Voir [[../Valeurs et unités|le chapitre « Valeurs et unités »]] et les sections « [[../Texte#Police et taille de police|Police et taille de police]] » et « [[../Texte#font-size : taille des caractères|font-size : taille des caractères]] » du chapitre « [[../Texte|Texte]] ».

== U ==
;Unité:Les valeurs de certains propriété sont exprimées en différentes unités spécifiées en général après la valeur.
:Voir [[../Valeurs et unités|le chapitre « Valeurs et unités »]]

== V ==
;Variable:Une variable permet de stocker une valeur utilisée plusieurs fois. cela facilite la maintenance car la modification de la valeur ne se fait qu'à un seul endroit : la définition de la variable.
:Voir [[../Structure et syntaxe#Déclaration de variable|la section « Déclaration de variable » dans le chapitre « Structure et syntaxe »]]

== W ==
== X ==
;XHTML:eXtensible HyperText Markup Language ; langage utilisé pour les documents web, définissant une structure hiérarchique d'éléments dont le style est définissable par une feuille de style CSS. Il s'agit de HTML utilisant la syntaxe plus stricte du XML.
:Voir [[Le langage HTML|le livre sur le langage HTML]].
;XML:eXtensible Markup Language ; langage générique définissant une structure hiérarchique d'éléments. Ce langage est d'utilisation plus générale pour définir des structures de données. Le rendu peut être stylisé pour le transformer en XHTML en utilisant des feuilles de style XSLT.
:Voir [[Programmation XML|le livre sur le langage XML]].

== Y ==
== Z ==

== Voir aussi ==
* {{WT|Catégorie:Lexique en français de la programmation}}</text>
      <sha1>lwqec5ictwvvvj6m25ddu13ffj0gccu</sha1>
    </revision>
    <revision>
      <id>683829</id>
      <parentid>683828</parentid>
      <timestamp>2022-08-21T13:58:09Z</timestamp>
      <contributor>
        <username>DavidL</username>
        <id>1746</id>
      </contributor>
      <comment>/* S */</comment>
      <model>wikitext</model>
      <format>text/x-wiki</format>
      <text bytes="12081" xml:space="preserve">&lt;noinclude&gt;{{Sommaire CSS}}&lt;/noinclude&gt;

== A ==
;Arborescence:Un document HTML définit une structure hiérarchique sous la forme d'un arbre d'éléments : chaque élément peut en contenir plusieurs autres. En CSS, il est possible d'enchaîner les [[../Les sélecteurs|sélecteurs]] pour sélectionner les éléments parents (directs ou non) avant l'élément ciblé :
:Exemple 1 : Tous les éléments p enfants directs d'un élément de classe &lt;code&gt;info&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;.info &gt; p&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments de classe &lt;code&gt;item&lt;/code&gt; enfants directs ou indirects d'un élément de classe &lt;code&gt;menu&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;.menu .item&lt;/syntaxhighlight&gt;

;{{wt|attribut|Attribut}}:Un attribut est une propriété associée à un élément HTML. Par exemple, l'attribut &lt;code&gt;style&lt;/code&gt; définit une série de propriétés CSS appliquées à l'élément.
:Exemple : &lt;syntaxhighlight lang=&quot;html&quot; inline&gt;&lt;div style=&quot;border: solid 1px; font-weight:bold;&quot;&gt;Zone avec bordure, en gras&lt;/div&gt;&lt;/syntaxhighlight&gt;
:Un [[../Les sélecteurs|sélecteur]] peut [[../Les sélecteurs#Sélecteur d'attribut|utiliser les attributs]] en encadrant le nom avec des crochets, et peut aussi tester la valeur associée.
:Exemple 1 : Tous les éléments ayant un attribut style défini : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;[style]&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments ayant un attribut style défini et contenant la chaîne &quot;color:&quot; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;[style*=&quot;color:&quot;]&lt;/syntaxhighlight&gt;

== B ==
;BEM:Bonne pratique du CSS consistant à organiser les styles en arborescence. Par exemple, &lt;code&gt;__&lt;/code&gt; dans un nom de sélecteur signifie &quot;enfant direct&quot;.
;Bordure:Zone entourant un élément comprise entre la marge et l'espace interne dans le modèle de boîte. Par défaut, cette zone est vide (aucune bordure).
:Voir [[../Le modèle de boîte|le chapitre « Le modèle de boîte »]]

== C ==

;Canevas:Représente l'espace fermé dans lequel la [[#Structure|structure de formatage]] est traitée. Pour l'écran d'ordinateur, il s'agira de la zone de visualisation du navigateur ; pour une page papier, il s'agira de l'espace imprimable de la page ; etc.
:[http://www.yoyodesign.org/doc/w3c/css2/intro.html#q4 Recommandation CSS2 - Le canevas] (FR)
;Chrome:Navigateur de Google basé sur le moteur Chromium.
;Couleur:La couleur est définie par un ensemble de composants, en général RVB : Rouge, Vert, Bleu (en anglais : RGB = Red, Green, Blue), et potentiellement une composante alpha indiquant l'opacité. Les propriétés CSS permettent de définir différentes couleurs :
:* Couleur de texte : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;color: blue;&lt;/syntaxhighlight&gt;
:* Couleur de fond : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;background-color: #432;&lt;/syntaxhighlight&gt;
:* Couleur de bordure : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;border-color: rgb(100%, 50%, 0%);&lt;/syntaxhighlight&gt;
:Voir [[../Valeurs et unités#Les couleurs|la section « Les couleurs » du chapitre « Valeurs et unités »]]
;CSS:Feuilles de styles en cascade (''Cascading Style Sheets''), servent à mettre en forme des documents web, type page HTML ou XML et sont le sujet de ce livre.

== D ==
;Dégradé de couleur:Les règles de style CSS permettent de mettre un dégradé de couleur en fond d'un élément en utilisant l'une des fonctions &lt;code&gt;gradient&lt;/code&gt; pour la propriété &lt;code&gt;background-image&lt;/code&gt; : &lt;code&gt;linear-gradient&lt;/code&gt;, &lt;code&gt;repeating-linear-gradient&lt;/code&gt;, &lt;code&gt;radial-gradient&lt;/code&gt;, &lt;code&gt;repeating-radial-gradient&lt;/code&gt; ou &lt;code&gt;conic-gradient&lt;/code&gt;.
:Voir [[../Fonds, bordures, marges et espacements#Fond en dégradé de couleur|la section « Fond en dégradé de couleur » du chapitre « Fonds, bordures, marges et espacements »]]
;Document:Les règles de style CSS s'applique à un document HTML ou XHTML. Ce document définit un ensemble d'éléments imbriqués. Les règles CSS ciblent des éléments particulier à styliser en utilisant des sélecteurs.

== E ==
;Edge:Navigateur de Microsoft successeur d'Internet Explorer. Les dernières versions sont basées sur le moteur Chromium.
;Élément:Nœud de l'arborescence des documents HTML, XHTML ou XML défini par une balise d'ouverture et une balise de fermeture.
:Un [[../Les sélecteurs|sélecteur]] peut désigner tous les éléments ayant le même nom :
:Exemple 1 : Tous les éléments nommés &lt;code&gt;div&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;div&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;*&lt;/syntaxhighlight&gt;

== F ==
;Feuille de style:Une feuille de style est un ensemble de règles CSS. Elle peut être un fichier séparé (extension &lt;code&gt;.css&lt;/code&gt;) ou incluse dans un document HTML dans un élément &lt;syntaxhighlight lang=&quot;html&quot; inline&gt;&lt;style&gt;&lt;/syntaxhighlight&gt;.
:Voir [[../Interface HTML|le chapitre « Interface HTML »]]
;FF:Firefox, navigateur de la fondation Mozilla.

== G ==
== H ==
;Héritage:La plupart des propriétés appliquées à un élément s'appliquent également aux éléments qu'il contient : police de caractère, couleur de texte et de fond, ... D'autres ne sont pas héritées ; par exemple les propriétés sur la bordure ne s'appliquent qu'à l'élément ciblé.
:La valeur spéciale &lt;code&gt;inherit&lt;/code&gt; permet d'écraser la valeur d'une propriété pour utiliser la même valeur que celle de l'élément parent.
:Voir [[../Héritage|le chapitre « Héritage »]]
;HTML:HyperText Markup Language ; langage utilisé pour les documents web, définissant une structure hiérarchique d'éléments dont le style est définissable par une feuille de style CSS.
:Voir [[Le langage HTML|le livre sur le langage HTML]].

== I ==
;IE:Internet Explorer ; navigateur ancien de Microsoft très peu utilisé et ne supportant pas complètement les standards récents. Il a été remplacé par Edge.

== J ==
;JS:Javascript est un langage de programmation permettant les interactions avec l'utilisateur.
:Voir [[Programmation Javascript|le livre « Programmation Javascript »]]

== K ==
== L ==
== M ==
;Modèle de boîte:Le rendu des éléments de type bloc peut être modélisé par un ensemble de zone rectangulaire imbriquées appelées boîtes.
:Voir [[../Le modèle de boîte|le chapitre « Le modèle de boîte »]]

== N ==
== O ==
;Opacité:L'opacité permet de rendre un élément plus ou moins opaque : 100% = opaque (par défaut), 0% = transparent. Elle s'applique à tout l'élément : fond et contenu. Pour ne l'appliquer que sur le fond, il faut utiliser une couleur de fond avec composante alpha pour indiquer l'opacité de la couleur.
:Voir [[../Fonds, bordures, marges et espacements#Opacité|la section « Opacité » du chapitre « Fonds, bordures, marges et espacements »]]
;Ordre:L'ordre d'application des règles de style est défini par :
:* la spécificité des sélecteurs : plus le sélecteur est précis plus il a la priorité,
:* l'attribut &lt;code&gt;style&lt;/code&gt; a la priorité sur les feuilles de styles (sauf les valeurs marquées avec &lt;code&gt;!important&lt;/code&gt;),
:* l'ordre d'inclusion des feuilles de style en cas d'égalité : la nouvelle règle écrase l'ancienne valeur.
:Voir [[../Structure et syntaxe#Ordre d'interprétation des styles et cascade|la section « Ordre d'interprétation des styles et cascade » du chapitre « Structure et syntaxe »]] pour plus de détails.

== P ==
;Page:Une page web est définie par un document HTML constitué d'une hiérarchie d'éléments.
;Plate-forme:Désigne généralement le type de système d'exploitation d'un ordinateur. On parlera de la plate-forme Linux, la plate-forme Macintosh, la plate-forme Windows, etc.
;{{wt|propriété|Propriété}}:Une propriété définit une valeur à un attribut changeant l'apparence : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;color, background-color, margin, padding, font-family&lt;/syntaxhighlight&gt;, ...
:Voir [[../Structure et syntaxe#Structure générale|la section « Structure générale » dans le chapitre « Structure et syntaxe »]]
;Pseudo-classe, pseudo-élément:Dans un sélecteur, une pseudo-classe désigne un état particulier d'un élément : premier élément du parent, survol de la souris, lien déjà visité, ... Un pseudo-élément est similaire mais possède un contenu à définir : contenu avant, contenu après... Leur nom est précédé d'un signe deux-points. Ils sont en général combinés avec d'autres sélecteurs.
:Voir [[../Les sélecteurs#Les pseudo-classes et les pseudo-éléments|la section « Les pseudo-classes et les pseudo-éléments » du chapitre « Les sélecteurs »]]

== Q ==
== R ==
== S ==
;{{wt|sélecteur|Sélecteur}}:Un sélecteur désigne les éléments auxquels s'appliquent les propriétés regroupées dans le bloc qui suit le sélecteur. Il peut désigner les éléments par leur nom, une classe CSS particulière, un identifiants, une combinaison de sélecteurs, ...
:Voir [[../Les sélecteurs|le chapitre « Les sélecteurs »]]
;Spécificité:La spécificité est la précision d'un sélecteur. Elle est utilisée pour définir la priorité des règles de style. Quand plusieurs valeurs différentes existe pour une même propriété, le sélecteur plus spécifique a la priorité.
:Voir [[../Structure et syntaxe#Ordre des spécificités des règles|la section « Ordre des spécificités des règles » du chapitre « Structure et syntaxe »]]
;Structure de formatage:Tout document HTML ou XML donne lieu à la construction d'un ''arbre du document'' reflétant l'organisation de ses contenus et de leur structure. À partir de l'arbre du document, le moteur de rendu CSS d'un navigateur produit une structure dite « de formatage » qui est utilisée pour appliquer les règles de style aux éléments. La structure de formatage est déduite de l'arbre du document, mais peut en différer lorsque des contenus sont générés ou supprimés via CSS.
;Style:Le style définissant l'apparence d'un élément peut être fourni par l'attribut &lt;code&gt;style&lt;/code&gt; dans le document HTML ou de manière plus réutilisable dans un document séparé de feuille de style d'extension &lt;code&gt;.css&lt;/code&gt;.

== T ==
;Taille de police:La taille de la police de caractères définit la hauteur des caractères d'une ligne de texte. En unité absolue, celle-ci est couramment exprimée en points ; elle peut utiliser d'autres unités absolues ou des unités relatives.
:Voir [[../Valeurs et unités|le chapitre « Valeurs et unités »]] et les sections « [[../Texte#Police et taille de police|Police et taille de police]] » et « [[../Texte#font-size : taille des caractères|font-size : taille des caractères]] » du chapitre « [[../Texte|Texte]] ».

== U ==
;Unité:Les valeurs de certains propriété sont exprimées en différentes unités spécifiées en général après la valeur.
:Voir [[../Valeurs et unités|le chapitre « Valeurs et unités »]]

== V ==
;Variable:Une variable permet de stocker une valeur utilisée plusieurs fois. cela facilite la maintenance car la modification de la valeur ne se fait qu'à un seul endroit : la définition de la variable.
:Voir [[../Structure et syntaxe#Déclaration de variable|la section « Déclaration de variable » dans le chapitre « Structure et syntaxe »]]

== W ==
== X ==
;XHTML:eXtensible HyperText Markup Language ; langage utilisé pour les documents web, définissant une structure hiérarchique d'éléments dont le style est définissable par une feuille de style CSS. Il s'agit de HTML utilisant la syntaxe plus stricte du XML.
:Voir [[Le langage HTML|le livre sur le langage HTML]].
;XML:eXtensible Markup Language ; langage générique définissant une structure hiérarchique d'éléments. Ce langage est d'utilisation plus générale pour définir des structures de données. Le rendu peut être stylisé pour le transformer en XHTML en utilisant des feuilles de style XSLT.
:Voir [[Programmation XML|le livre sur le langage XML]].

== Y ==
== Z ==

== Voir aussi ==
* {{WT|Catégorie:Lexique en français de la programmation}}</text>
      <sha1>bunczbg8mqhvczsf73dnl0twnxnspya</sha1>
    </revision>
    <revision>
      <id>683830</id>
      <parentid>683829</parentid>
      <timestamp>2022-08-21T14:03:58Z</timestamp>
      <contributor>
        <username>DavidL</username>
        <id>1746</id>
      </contributor>
      <comment>/* A */</comment>
      <model>wikitext</model>
      <format>text/x-wiki</format>
      <text bytes="12531" xml:space="preserve">&lt;noinclude&gt;{{Sommaire CSS}}&lt;/noinclude&gt;

== A ==
;Adaptabilité:Un document adaptatif peut s'afficher sans problème sur toutes les tailles d'écran disponible, du plus petit (téléphone portable) au plus grand (écran HD cinéma/projection). Pour cela, la feuille de style doit prévoir différentes disposition possible selon la largeur d'affichage disponible (Par exemple : placer 4 sections par ligne sur écrans larges, 2 par ligne sur écrans moyens et un seul par ligne sur petits écrans).
;Arborescence:Un document HTML définit une structure hiérarchique sous la forme d'un arbre d'éléments : chaque élément peut en contenir plusieurs autres. En CSS, il est possible d'enchaîner les [[../Les sélecteurs|sélecteurs]] pour sélectionner les éléments parents (directs ou non) avant l'élément ciblé :
:Exemple 1 : Tous les éléments p enfants directs d'un élément de classe &lt;code&gt;info&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;.info &gt; p&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments de classe &lt;code&gt;item&lt;/code&gt; enfants directs ou indirects d'un élément de classe &lt;code&gt;menu&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;.menu .item&lt;/syntaxhighlight&gt;

;{{wt|attribut|Attribut}}:Un attribut est une propriété associée à un élément HTML. Par exemple, l'attribut &lt;code&gt;style&lt;/code&gt; définit une série de propriétés CSS appliquées à l'élément.
:Exemple : &lt;syntaxhighlight lang=&quot;html&quot; inline&gt;&lt;div style=&quot;border: solid 1px; font-weight:bold;&quot;&gt;Zone avec bordure, en gras&lt;/div&gt;&lt;/syntaxhighlight&gt;
:Un [[../Les sélecteurs|sélecteur]] peut [[../Les sélecteurs#Sélecteur d'attribut|utiliser les attributs]] en encadrant le nom avec des crochets, et peut aussi tester la valeur associée.
:Exemple 1 : Tous les éléments ayant un attribut style défini : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;[style]&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments ayant un attribut style défini et contenant la chaîne &quot;color:&quot; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;[style*=&quot;color:&quot;]&lt;/syntaxhighlight&gt;

== B ==
;BEM:Bonne pratique du CSS consistant à organiser les styles en arborescence. Par exemple, &lt;code&gt;__&lt;/code&gt; dans un nom de sélecteur signifie &quot;enfant direct&quot;.
;Bordure:Zone entourant un élément comprise entre la marge et l'espace interne dans le modèle de boîte. Par défaut, cette zone est vide (aucune bordure).
:Voir [[../Le modèle de boîte|le chapitre « Le modèle de boîte »]]

== C ==

;Canevas:Représente l'espace fermé dans lequel la [[#Structure|structure de formatage]] est traitée. Pour l'écran d'ordinateur, il s'agira de la zone de visualisation du navigateur ; pour une page papier, il s'agira de l'espace imprimable de la page ; etc.
:[http://www.yoyodesign.org/doc/w3c/css2/intro.html#q4 Recommandation CSS2 - Le canevas] (FR)
;Chrome:Navigateur de Google basé sur le moteur Chromium.
;Couleur:La couleur est définie par un ensemble de composants, en général RVB : Rouge, Vert, Bleu (en anglais : RGB = Red, Green, Blue), et potentiellement une composante alpha indiquant l'opacité. Les propriétés CSS permettent de définir différentes couleurs :
:* Couleur de texte : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;color: blue;&lt;/syntaxhighlight&gt;
:* Couleur de fond : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;background-color: #432;&lt;/syntaxhighlight&gt;
:* Couleur de bordure : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;border-color: rgb(100%, 50%, 0%);&lt;/syntaxhighlight&gt;
:Voir [[../Valeurs et unités#Les couleurs|la section « Les couleurs » du chapitre « Valeurs et unités »]]
;CSS:Feuilles de styles en cascade (''Cascading Style Sheets''), servent à mettre en forme des documents web, type page HTML ou XML et sont le sujet de ce livre.

== D ==
;Dégradé de couleur:Les règles de style CSS permettent de mettre un dégradé de couleur en fond d'un élément en utilisant l'une des fonctions &lt;code&gt;gradient&lt;/code&gt; pour la propriété &lt;code&gt;background-image&lt;/code&gt; : &lt;code&gt;linear-gradient&lt;/code&gt;, &lt;code&gt;repeating-linear-gradient&lt;/code&gt;, &lt;code&gt;radial-gradient&lt;/code&gt;, &lt;code&gt;repeating-radial-gradient&lt;/code&gt; ou &lt;code&gt;conic-gradient&lt;/code&gt;.
:Voir [[../Fonds, bordures, marges et espacements#Fond en dégradé de couleur|la section « Fond en dégradé de couleur » du chapitre « Fonds, bordures, marges et espacements »]]
;Document:Les règles de style CSS s'applique à un document HTML ou XHTML. Ce document définit un ensemble d'éléments imbriqués. Les règles CSS ciblent des éléments particulier à styliser en utilisant des sélecteurs.

== E ==
;Edge:Navigateur de Microsoft successeur d'Internet Explorer. Les dernières versions sont basées sur le moteur Chromium.
;Élément:Nœud de l'arborescence des documents HTML, XHTML ou XML défini par une balise d'ouverture et une balise de fermeture.
:Un [[../Les sélecteurs|sélecteur]] peut désigner tous les éléments ayant le même nom :
:Exemple 1 : Tous les éléments nommés &lt;code&gt;div&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;div&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;*&lt;/syntaxhighlight&gt;

== F ==
;Feuille de style:Une feuille de style est un ensemble de règles CSS. Elle peut être un fichier séparé (extension &lt;code&gt;.css&lt;/code&gt;) ou incluse dans un document HTML dans un élément &lt;syntaxhighlight lang=&quot;html&quot; inline&gt;&lt;style&gt;&lt;/syntaxhighlight&gt;.
:Voir [[../Interface HTML|le chapitre « Interface HTML »]]
;FF:Firefox, navigateur de la fondation Mozilla.

== G ==
== H ==
;Héritage:La plupart des propriétés appliquées à un élément s'appliquent également aux éléments qu'il contient : police de caractère, couleur de texte et de fond, ... D'autres ne sont pas héritées ; par exemple les propriétés sur la bordure ne s'appliquent qu'à l'élément ciblé.
:La valeur spéciale &lt;code&gt;inherit&lt;/code&gt; permet d'écraser la valeur d'une propriété pour utiliser la même valeur que celle de l'élément parent.
:Voir [[../Héritage|le chapitre « Héritage »]]
;HTML:HyperText Markup Language ; langage utilisé pour les documents web, définissant une structure hiérarchique d'éléments dont le style est définissable par une feuille de style CSS.
:Voir [[Le langage HTML|le livre sur le langage HTML]].

== I ==
;IE:Internet Explorer ; navigateur ancien de Microsoft très peu utilisé et ne supportant pas complètement les standards récents. Il a été remplacé par Edge.

== J ==
;JS:Javascript est un langage de programmation permettant les interactions avec l'utilisateur.
:Voir [[Programmation Javascript|le livre « Programmation Javascript »]]

== K ==
== L ==
== M ==
;Modèle de boîte:Le rendu des éléments de type bloc peut être modélisé par un ensemble de zone rectangulaire imbriquées appelées boîtes.
:Voir [[../Le modèle de boîte|le chapitre « Le modèle de boîte »]]

== N ==
== O ==
;Opacité:L'opacité permet de rendre un élément plus ou moins opaque : 100% = opaque (par défaut), 0% = transparent. Elle s'applique à tout l'élément : fond et contenu. Pour ne l'appliquer que sur le fond, il faut utiliser une couleur de fond avec composante alpha pour indiquer l'opacité de la couleur.
:Voir [[../Fonds, bordures, marges et espacements#Opacité|la section « Opacité » du chapitre « Fonds, bordures, marges et espacements »]]
;Ordre:L'ordre d'application des règles de style est défini par :
:* la spécificité des sélecteurs : plus le sélecteur est précis plus il a la priorité,
:* l'attribut &lt;code&gt;style&lt;/code&gt; a la priorité sur les feuilles de styles (sauf les valeurs marquées avec &lt;code&gt;!important&lt;/code&gt;),
:* l'ordre d'inclusion des feuilles de style en cas d'égalité : la nouvelle règle écrase l'ancienne valeur.
:Voir [[../Structure et syntaxe#Ordre d'interprétation des styles et cascade|la section « Ordre d'interprétation des styles et cascade » du chapitre « Structure et syntaxe »]] pour plus de détails.

== P ==
;Page:Une page web est définie par un document HTML constitué d'une hiérarchie d'éléments.
;Plate-forme:Désigne généralement le type de système d'exploitation d'un ordinateur. On parlera de la plate-forme Linux, la plate-forme Macintosh, la plate-forme Windows, etc.
;{{wt|propriété|Propriété}}:Une propriété définit une valeur à un attribut changeant l'apparence : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;color, background-color, margin, padding, font-family&lt;/syntaxhighlight&gt;, ...
:Voir [[../Structure et syntaxe#Structure générale|la section « Structure générale » dans le chapitre « Structure et syntaxe »]]
;Pseudo-classe, pseudo-élément:Dans un sélecteur, une pseudo-classe désigne un état particulier d'un élément : premier élément du parent, survol de la souris, lien déjà visité, ... Un pseudo-élément est similaire mais possède un contenu à définir : contenu avant, contenu après... Leur nom est précédé d'un signe deux-points. Ils sont en général combinés avec d'autres sélecteurs.
:Voir [[../Les sélecteurs#Les pseudo-classes et les pseudo-éléments|la section « Les pseudo-classes et les pseudo-éléments » du chapitre « Les sélecteurs »]]

== Q ==
== R ==
== S ==
;{{wt|sélecteur|Sélecteur}}:Un sélecteur désigne les éléments auxquels s'appliquent les propriétés regroupées dans le bloc qui suit le sélecteur. Il peut désigner les éléments par leur nom, une classe CSS particulière, un identifiants, une combinaison de sélecteurs, ...
:Voir [[../Les sélecteurs|le chapitre « Les sélecteurs »]]
;Spécificité:La spécificité est la précision d'un sélecteur. Elle est utilisée pour définir la priorité des règles de style. Quand plusieurs valeurs différentes existe pour une même propriété, le sélecteur plus spécifique a la priorité.
:Voir [[../Structure et syntaxe#Ordre des spécificités des règles|la section « Ordre des spécificités des règles » du chapitre « Structure et syntaxe »]]
;Structure de formatage:Tout document HTML ou XML donne lieu à la construction d'un ''arbre du document'' reflétant l'organisation de ses contenus et de leur structure. À partir de l'arbre du document, le moteur de rendu CSS d'un navigateur produit une structure dite « de formatage » qui est utilisée pour appliquer les règles de style aux éléments. La structure de formatage est déduite de l'arbre du document, mais peut en différer lorsque des contenus sont générés ou supprimés via CSS.
;Style:Le style définissant l'apparence d'un élément peut être fourni par l'attribut &lt;code&gt;style&lt;/code&gt; dans le document HTML ou de manière plus réutilisable dans un document séparé de feuille de style d'extension &lt;code&gt;.css&lt;/code&gt;.

== T ==
;Taille de police:La taille de la police de caractères définit la hauteur des caractères d'une ligne de texte. En unité absolue, celle-ci est couramment exprimée en points ; elle peut utiliser d'autres unités absolues ou des unités relatives.
:Voir [[../Valeurs et unités|le chapitre « Valeurs et unités »]] et les sections « [[../Texte#Police et taille de police|Police et taille de police]] » et « [[../Texte#font-size : taille des caractères|font-size : taille des caractères]] » du chapitre « [[../Texte|Texte]] ».

== U ==
;Unité:Les valeurs de certains propriété sont exprimées en différentes unités spécifiées en général après la valeur.
:Voir [[../Valeurs et unités|le chapitre « Valeurs et unités »]]

== V ==
;Variable:Une variable permet de stocker une valeur utilisée plusieurs fois. cela facilite la maintenance car la modification de la valeur ne se fait qu'à un seul endroit : la définition de la variable.
:Voir [[../Structure et syntaxe#Déclaration de variable|la section « Déclaration de variable » dans le chapitre « Structure et syntaxe »]]

== W ==
== X ==
;XHTML:eXtensible HyperText Markup Language ; langage utilisé pour les documents web, définissant une structure hiérarchique d'éléments dont le style est définissable par une feuille de style CSS. Il s'agit de HTML utilisant la syntaxe plus stricte du XML.
:Voir [[Le langage HTML|le livre sur le langage HTML]].
;XML:eXtensible Markup Language ; langage générique définissant une structure hiérarchique d'éléments. Ce langage est d'utilisation plus générale pour définir des structures de données. Le rendu peut être stylisé pour le transformer en XHTML en utilisant des feuilles de style XSLT.
:Voir [[Programmation XML|le livre sur le langage XML]].

== Y ==
== Z ==

== Voir aussi ==
* {{WT|Catégorie:Lexique en français de la programmation}}</text>
      <sha1>r39whtrobsxuyvrr41ytfm3or5j904a</sha1>
    </revision>
    <revision>
      <id>683831</id>
      <parentid>683830</parentid>
      <timestamp>2022-08-21T14:06:09Z</timestamp>
      <contributor>
        <username>DavidL</username>
        <id>1746</id>
      </contributor>
      <comment>/* A */</comment>
      <model>wikitext</model>
      <format>text/x-wiki</format>
      <text bytes="12822" xml:space="preserve">&lt;noinclude&gt;{{Sommaire CSS}}&lt;/noinclude&gt;

== A ==
;Adaptabilité:Un document adaptatif peut s'afficher sans problème sur toutes les tailles d'écran disponible, du plus petit (téléphone portable) au plus grand (écran HD cinéma/projection). Pour cela, la feuille de style doit prévoir différentes disposition possible selon la largeur d'affichage disponible. Par exemple :
:* placer 4 sections par ligne sur écrans larges, 2 par ligne sur écrans moyens et un seul par ligne sur petits écrans ;
:* choisir une grande taille de police de caractères sur écrans larges pour éviter les vides et avoir une meilleur visibilité sur les écrans à haute résolution, et choisir une taille plus petite pour loger davantage de texte par ligne sur les petits écrans de téléphone mobile.
;Arborescence:Un document HTML définit une structure hiérarchique sous la forme d'un arbre d'éléments : chaque élément peut en contenir plusieurs autres. En CSS, il est possible d'enchaîner les [[../Les sélecteurs|sélecteurs]] pour sélectionner les éléments parents (directs ou non) avant l'élément ciblé :
:Exemple 1 : Tous les éléments p enfants directs d'un élément de classe &lt;code&gt;info&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;.info &gt; p&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments de classe &lt;code&gt;item&lt;/code&gt; enfants directs ou indirects d'un élément de classe &lt;code&gt;menu&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;.menu .item&lt;/syntaxhighlight&gt;

;{{wt|attribut|Attribut}}:Un attribut est une propriété associée à un élément HTML. Par exemple, l'attribut &lt;code&gt;style&lt;/code&gt; définit une série de propriétés CSS appliquées à l'élément.
:Exemple : &lt;syntaxhighlight lang=&quot;html&quot; inline&gt;&lt;div style=&quot;border: solid 1px; font-weight:bold;&quot;&gt;Zone avec bordure, en gras&lt;/div&gt;&lt;/syntaxhighlight&gt;
:Un [[../Les sélecteurs|sélecteur]] peut [[../Les sélecteurs#Sélecteur d'attribut|utiliser les attributs]] en encadrant le nom avec des crochets, et peut aussi tester la valeur associée.
:Exemple 1 : Tous les éléments ayant un attribut style défini : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;[style]&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments ayant un attribut style défini et contenant la chaîne &quot;color:&quot; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;[style*=&quot;color:&quot;]&lt;/syntaxhighlight&gt;

== B ==
;BEM:Bonne pratique du CSS consistant à organiser les styles en arborescence. Par exemple, &lt;code&gt;__&lt;/code&gt; dans un nom de sélecteur signifie &quot;enfant direct&quot;.
;Bordure:Zone entourant un élément comprise entre la marge et l'espace interne dans le modèle de boîte. Par défaut, cette zone est vide (aucune bordure).
:Voir [[../Le modèle de boîte|le chapitre « Le modèle de boîte »]]

== C ==

;Canevas:Représente l'espace fermé dans lequel la [[#Structure|structure de formatage]] est traitée. Pour l'écran d'ordinateur, il s'agira de la zone de visualisation du navigateur ; pour une page papier, il s'agira de l'espace imprimable de la page ; etc.
:[http://www.yoyodesign.org/doc/w3c/css2/intro.html#q4 Recommandation CSS2 - Le canevas] (FR)
;Chrome:Navigateur de Google basé sur le moteur Chromium.
;Couleur:La couleur est définie par un ensemble de composants, en général RVB : Rouge, Vert, Bleu (en anglais : RGB = Red, Green, Blue), et potentiellement une composante alpha indiquant l'opacité. Les propriétés CSS permettent de définir différentes couleurs :
:* Couleur de texte : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;color: blue;&lt;/syntaxhighlight&gt;
:* Couleur de fond : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;background-color: #432;&lt;/syntaxhighlight&gt;
:* Couleur de bordure : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;border-color: rgb(100%, 50%, 0%);&lt;/syntaxhighlight&gt;
:Voir [[../Valeurs et unités#Les couleurs|la section « Les couleurs » du chapitre « Valeurs et unités »]]
;CSS:Feuilles de styles en cascade (''Cascading Style Sheets''), servent à mettre en forme des documents web, type page HTML ou XML et sont le sujet de ce livre.

== D ==
;Dégradé de couleur:Les règles de style CSS permettent de mettre un dégradé de couleur en fond d'un élément en utilisant l'une des fonctions &lt;code&gt;gradient&lt;/code&gt; pour la propriété &lt;code&gt;background-image&lt;/code&gt; : &lt;code&gt;linear-gradient&lt;/code&gt;, &lt;code&gt;repeating-linear-gradient&lt;/code&gt;, &lt;code&gt;radial-gradient&lt;/code&gt;, &lt;code&gt;repeating-radial-gradient&lt;/code&gt; ou &lt;code&gt;conic-gradient&lt;/code&gt;.
:Voir [[../Fonds, bordures, marges et espacements#Fond en dégradé de couleur|la section « Fond en dégradé de couleur » du chapitre « Fonds, bordures, marges et espacements »]]
;Document:Les règles de style CSS s'applique à un document HTML ou XHTML. Ce document définit un ensemble d'éléments imbriqués. Les règles CSS ciblent des éléments particulier à styliser en utilisant des sélecteurs.

== E ==
;Edge:Navigateur de Microsoft successeur d'Internet Explorer. Les dernières versions sont basées sur le moteur Chromium.
;Élément:Nœud de l'arborescence des documents HTML, XHTML ou XML défini par une balise d'ouverture et une balise de fermeture.
:Un [[../Les sélecteurs|sélecteur]] peut désigner tous les éléments ayant le même nom :
:Exemple 1 : Tous les éléments nommés &lt;code&gt;div&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;div&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;*&lt;/syntaxhighlight&gt;

== F ==
;Feuille de style:Une feuille de style est un ensemble de règles CSS. Elle peut être un fichier séparé (extension &lt;code&gt;.css&lt;/code&gt;) ou incluse dans un document HTML dans un élément &lt;syntaxhighlight lang=&quot;html&quot; inline&gt;&lt;style&gt;&lt;/syntaxhighlight&gt;.
:Voir [[../Interface HTML|le chapitre « Interface HTML »]]
;FF:Firefox, navigateur de la fondation Mozilla.

== G ==
== H ==
;Héritage:La plupart des propriétés appliquées à un élément s'appliquent également aux éléments qu'il contient : police de caractère, couleur de texte et de fond, ... D'autres ne sont pas héritées ; par exemple les propriétés sur la bordure ne s'appliquent qu'à l'élément ciblé.
:La valeur spéciale &lt;code&gt;inherit&lt;/code&gt; permet d'écraser la valeur d'une propriété pour utiliser la même valeur que celle de l'élément parent.
:Voir [[../Héritage|le chapitre « Héritage »]]
;HTML:HyperText Markup Language ; langage utilisé pour les documents web, définissant une structure hiérarchique d'éléments dont le style est définissable par une feuille de style CSS.
:Voir [[Le langage HTML|le livre sur le langage HTML]].

== I ==
;IE:Internet Explorer ; navigateur ancien de Microsoft très peu utilisé et ne supportant pas complètement les standards récents. Il a été remplacé par Edge.

== J ==
;JS:Javascript est un langage de programmation permettant les interactions avec l'utilisateur.
:Voir [[Programmation Javascript|le livre « Programmation Javascript »]]

== K ==
== L ==
== M ==
;Modèle de boîte:Le rendu des éléments de type bloc peut être modélisé par un ensemble de zone rectangulaire imbriquées appelées boîtes.
:Voir [[../Le modèle de boîte|le chapitre « Le modèle de boîte »]]

== N ==
== O ==
;Opacité:L'opacité permet de rendre un élément plus ou moins opaque : 100% = opaque (par défaut), 0% = transparent. Elle s'applique à tout l'élément : fond et contenu. Pour ne l'appliquer que sur le fond, il faut utiliser une couleur de fond avec composante alpha pour indiquer l'opacité de la couleur.
:Voir [[../Fonds, bordures, marges et espacements#Opacité|la section « Opacité » du chapitre « Fonds, bordures, marges et espacements »]]
;Ordre:L'ordre d'application des règles de style est défini par :
:* la spécificité des sélecteurs : plus le sélecteur est précis plus il a la priorité,
:* l'attribut &lt;code&gt;style&lt;/code&gt; a la priorité sur les feuilles de styles (sauf les valeurs marquées avec &lt;code&gt;!important&lt;/code&gt;),
:* l'ordre d'inclusion des feuilles de style en cas d'égalité : la nouvelle règle écrase l'ancienne valeur.
:Voir [[../Structure et syntaxe#Ordre d'interprétation des styles et cascade|la section « Ordre d'interprétation des styles et cascade » du chapitre « Structure et syntaxe »]] pour plus de détails.

== P ==
;Page:Une page web est définie par un document HTML constitué d'une hiérarchie d'éléments.
;Plate-forme:Désigne généralement le type de système d'exploitation d'un ordinateur. On parlera de la plate-forme Linux, la plate-forme Macintosh, la plate-forme Windows, etc.
;{{wt|propriété|Propriété}}:Une propriété définit une valeur à un attribut changeant l'apparence : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;color, background-color, margin, padding, font-family&lt;/syntaxhighlight&gt;, ...
:Voir [[../Structure et syntaxe#Structure générale|la section « Structure générale » dans le chapitre « Structure et syntaxe »]]
;Pseudo-classe, pseudo-élément:Dans un sélecteur, une pseudo-classe désigne un état particulier d'un élément : premier élément du parent, survol de la souris, lien déjà visité, ... Un pseudo-élément est similaire mais possède un contenu à définir : contenu avant, contenu après... Leur nom est précédé d'un signe deux-points. Ils sont en général combinés avec d'autres sélecteurs.
:Voir [[../Les sélecteurs#Les pseudo-classes et les pseudo-éléments|la section « Les pseudo-classes et les pseudo-éléments » du chapitre « Les sélecteurs »]]

== Q ==
== R ==
== S ==
;{{wt|sélecteur|Sélecteur}}:Un sélecteur désigne les éléments auxquels s'appliquent les propriétés regroupées dans le bloc qui suit le sélecteur. Il peut désigner les éléments par leur nom, une classe CSS particulière, un identifiants, une combinaison de sélecteurs, ...
:Voir [[../Les sélecteurs|le chapitre « Les sélecteurs »]]
;Spécificité:La spécificité est la précision d'un sélecteur. Elle est utilisée pour définir la priorité des règles de style. Quand plusieurs valeurs différentes existe pour une même propriété, le sélecteur plus spécifique a la priorité.
:Voir [[../Structure et syntaxe#Ordre des spécificités des règles|la section « Ordre des spécificités des règles » du chapitre « Structure et syntaxe »]]
;Structure de formatage:Tout document HTML ou XML donne lieu à la construction d'un ''arbre du document'' reflétant l'organisation de ses contenus et de leur structure. À partir de l'arbre du document, le moteur de rendu CSS d'un navigateur produit une structure dite « de formatage » qui est utilisée pour appliquer les règles de style aux éléments. La structure de formatage est déduite de l'arbre du document, mais peut en différer lorsque des contenus sont générés ou supprimés via CSS.
;Style:Le style définissant l'apparence d'un élément peut être fourni par l'attribut &lt;code&gt;style&lt;/code&gt; dans le document HTML ou de manière plus réutilisable dans un document séparé de feuille de style d'extension &lt;code&gt;.css&lt;/code&gt;.

== T ==
;Taille de police:La taille de la police de caractères définit la hauteur des caractères d'une ligne de texte. En unité absolue, celle-ci est couramment exprimée en points ; elle peut utiliser d'autres unités absolues ou des unités relatives.
:Voir [[../Valeurs et unités|le chapitre « Valeurs et unités »]] et les sections « [[../Texte#Police et taille de police|Police et taille de police]] » et « [[../Texte#font-size : taille des caractères|font-size : taille des caractères]] » du chapitre « [[../Texte|Texte]] ».

== U ==
;Unité:Les valeurs de certains propriété sont exprimées en différentes unités spécifiées en général après la valeur.
:Voir [[../Valeurs et unités|le chapitre « Valeurs et unités »]]

== V ==
;Variable:Une variable permet de stocker une valeur utilisée plusieurs fois. cela facilite la maintenance car la modification de la valeur ne se fait qu'à un seul endroit : la définition de la variable.
:Voir [[../Structure et syntaxe#Déclaration de variable|la section « Déclaration de variable » dans le chapitre « Structure et syntaxe »]]

== W ==
== X ==
;XHTML:eXtensible HyperText Markup Language ; langage utilisé pour les documents web, définissant une structure hiérarchique d'éléments dont le style est définissable par une feuille de style CSS. Il s'agit de HTML utilisant la syntaxe plus stricte du XML.
:Voir [[Le langage HTML|le livre sur le langage HTML]].
;XML:eXtensible Markup Language ; langage générique définissant une structure hiérarchique d'éléments. Ce langage est d'utilisation plus générale pour définir des structures de données. Le rendu peut être stylisé pour le transformer en XHTML en utilisant des feuilles de style XSLT.
:Voir [[Programmation XML|le livre sur le langage XML]].

== Y ==
== Z ==

== Voir aussi ==
* {{WT|Catégorie:Lexique en français de la programmation}}</text>
      <sha1>bm4r3g5eikrkgmnh7zrb8o4ithyid47</sha1>
    </revision>
    <revision>
      <id>683832</id>
      <parentid>683831</parentid>
      <timestamp>2022-08-21T14:06:36Z</timestamp>
      <contributor>
        <username>DavidL</username>
        <id>1746</id>
      </contributor>
      <comment>/* A */</comment>
      <model>wikitext</model>
      <format>text/x-wiki</format>
      <text bytes="12846" xml:space="preserve">&lt;noinclude&gt;{{Sommaire CSS}}&lt;/noinclude&gt;

== A ==
;Adaptabilité:Un document adaptatif peut s'afficher sans problème sur toutes les tailles d'écran disponible, du plus petit (téléphone portable, montre connectée, ...) au plus grand (écran HD cinéma/projection). Pour cela, la feuille de style doit prévoir différentes disposition possible selon la largeur d'affichage disponible. Par exemple :
:* placer 4 sections par ligne sur écrans larges, 2 par ligne sur écrans moyens et un seul par ligne sur petits écrans ;
:* choisir une grande taille de police de caractères sur écrans larges pour éviter les vides et avoir une meilleur visibilité sur les écrans à haute résolution, et choisir une taille plus petite pour loger davantage de texte par ligne sur les petits écrans de téléphone mobile.
;Arborescence:Un document HTML définit une structure hiérarchique sous la forme d'un arbre d'éléments : chaque élément peut en contenir plusieurs autres. En CSS, il est possible d'enchaîner les [[../Les sélecteurs|sélecteurs]] pour sélectionner les éléments parents (directs ou non) avant l'élément ciblé :
:Exemple 1 : Tous les éléments p enfants directs d'un élément de classe &lt;code&gt;info&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;.info &gt; p&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments de classe &lt;code&gt;item&lt;/code&gt; enfants directs ou indirects d'un élément de classe &lt;code&gt;menu&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;.menu .item&lt;/syntaxhighlight&gt;

;{{wt|attribut|Attribut}}:Un attribut est une propriété associée à un élément HTML. Par exemple, l'attribut &lt;code&gt;style&lt;/code&gt; définit une série de propriétés CSS appliquées à l'élément.
:Exemple : &lt;syntaxhighlight lang=&quot;html&quot; inline&gt;&lt;div style=&quot;border: solid 1px; font-weight:bold;&quot;&gt;Zone avec bordure, en gras&lt;/div&gt;&lt;/syntaxhighlight&gt;
:Un [[../Les sélecteurs|sélecteur]] peut [[../Les sélecteurs#Sélecteur d'attribut|utiliser les attributs]] en encadrant le nom avec des crochets, et peut aussi tester la valeur associée.
:Exemple 1 : Tous les éléments ayant un attribut style défini : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;[style]&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments ayant un attribut style défini et contenant la chaîne &quot;color:&quot; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;[style*=&quot;color:&quot;]&lt;/syntaxhighlight&gt;

== B ==
;BEM:Bonne pratique du CSS consistant à organiser les styles en arborescence. Par exemple, &lt;code&gt;__&lt;/code&gt; dans un nom de sélecteur signifie &quot;enfant direct&quot;.
;Bordure:Zone entourant un élément comprise entre la marge et l'espace interne dans le modèle de boîte. Par défaut, cette zone est vide (aucune bordure).
:Voir [[../Le modèle de boîte|le chapitre « Le modèle de boîte »]]

== C ==

;Canevas:Représente l'espace fermé dans lequel la [[#Structure|structure de formatage]] est traitée. Pour l'écran d'ordinateur, il s'agira de la zone de visualisation du navigateur ; pour une page papier, il s'agira de l'espace imprimable de la page ; etc.
:[http://www.yoyodesign.org/doc/w3c/css2/intro.html#q4 Recommandation CSS2 - Le canevas] (FR)
;Chrome:Navigateur de Google basé sur le moteur Chromium.
;Couleur:La couleur est définie par un ensemble de composants, en général RVB : Rouge, Vert, Bleu (en anglais : RGB = Red, Green, Blue), et potentiellement une composante alpha indiquant l'opacité. Les propriétés CSS permettent de définir différentes couleurs :
:* Couleur de texte : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;color: blue;&lt;/syntaxhighlight&gt;
:* Couleur de fond : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;background-color: #432;&lt;/syntaxhighlight&gt;
:* Couleur de bordure : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;border-color: rgb(100%, 50%, 0%);&lt;/syntaxhighlight&gt;
:Voir [[../Valeurs et unités#Les couleurs|la section « Les couleurs » du chapitre « Valeurs et unités »]]
;CSS:Feuilles de styles en cascade (''Cascading Style Sheets''), servent à mettre en forme des documents web, type page HTML ou XML et sont le sujet de ce livre.

== D ==
;Dégradé de couleur:Les règles de style CSS permettent de mettre un dégradé de couleur en fond d'un élément en utilisant l'une des fonctions &lt;code&gt;gradient&lt;/code&gt; pour la propriété &lt;code&gt;background-image&lt;/code&gt; : &lt;code&gt;linear-gradient&lt;/code&gt;, &lt;code&gt;repeating-linear-gradient&lt;/code&gt;, &lt;code&gt;radial-gradient&lt;/code&gt;, &lt;code&gt;repeating-radial-gradient&lt;/code&gt; ou &lt;code&gt;conic-gradient&lt;/code&gt;.
:Voir [[../Fonds, bordures, marges et espacements#Fond en dégradé de couleur|la section « Fond en dégradé de couleur » du chapitre « Fonds, bordures, marges et espacements »]]
;Document:Les règles de style CSS s'applique à un document HTML ou XHTML. Ce document définit un ensemble d'éléments imbriqués. Les règles CSS ciblent des éléments particulier à styliser en utilisant des sélecteurs.

== E ==
;Edge:Navigateur de Microsoft successeur d'Internet Explorer. Les dernières versions sont basées sur le moteur Chromium.
;Élément:Nœud de l'arborescence des documents HTML, XHTML ou XML défini par une balise d'ouverture et une balise de fermeture.
:Un [[../Les sélecteurs|sélecteur]] peut désigner tous les éléments ayant le même nom :
:Exemple 1 : Tous les éléments nommés &lt;code&gt;div&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;div&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;*&lt;/syntaxhighlight&gt;

== F ==
;Feuille de style:Une feuille de style est un ensemble de règles CSS. Elle peut être un fichier séparé (extension &lt;code&gt;.css&lt;/code&gt;) ou incluse dans un document HTML dans un élément &lt;syntaxhighlight lang=&quot;html&quot; inline&gt;&lt;style&gt;&lt;/syntaxhighlight&gt;.
:Voir [[../Interface HTML|le chapitre « Interface HTML »]]
;FF:Firefox, navigateur de la fondation Mozilla.

== G ==
== H ==
;Héritage:La plupart des propriétés appliquées à un élément s'appliquent également aux éléments qu'il contient : police de caractère, couleur de texte et de fond, ... D'autres ne sont pas héritées ; par exemple les propriétés sur la bordure ne s'appliquent qu'à l'élément ciblé.
:La valeur spéciale &lt;code&gt;inherit&lt;/code&gt; permet d'écraser la valeur d'une propriété pour utiliser la même valeur que celle de l'élément parent.
:Voir [[../Héritage|le chapitre « Héritage »]]
;HTML:HyperText Markup Language ; langage utilisé pour les documents web, définissant une structure hiérarchique d'éléments dont le style est définissable par une feuille de style CSS.
:Voir [[Le langage HTML|le livre sur le langage HTML]].

== I ==
;IE:Internet Explorer ; navigateur ancien de Microsoft très peu utilisé et ne supportant pas complètement les standards récents. Il a été remplacé par Edge.

== J ==
;JS:Javascript est un langage de programmation permettant les interactions avec l'utilisateur.
:Voir [[Programmation Javascript|le livre « Programmation Javascript »]]

== K ==
== L ==
== M ==
;Modèle de boîte:Le rendu des éléments de type bloc peut être modélisé par un ensemble de zone rectangulaire imbriquées appelées boîtes.
:Voir [[../Le modèle de boîte|le chapitre « Le modèle de boîte »]]

== N ==
== O ==
;Opacité:L'opacité permet de rendre un élément plus ou moins opaque : 100% = opaque (par défaut), 0% = transparent. Elle s'applique à tout l'élément : fond et contenu. Pour ne l'appliquer que sur le fond, il faut utiliser une couleur de fond avec composante alpha pour indiquer l'opacité de la couleur.
:Voir [[../Fonds, bordures, marges et espacements#Opacité|la section « Opacité » du chapitre « Fonds, bordures, marges et espacements »]]
;Ordre:L'ordre d'application des règles de style est défini par :
:* la spécificité des sélecteurs : plus le sélecteur est précis plus il a la priorité,
:* l'attribut &lt;code&gt;style&lt;/code&gt; a la priorité sur les feuilles de styles (sauf les valeurs marquées avec &lt;code&gt;!important&lt;/code&gt;),
:* l'ordre d'inclusion des feuilles de style en cas d'égalité : la nouvelle règle écrase l'ancienne valeur.
:Voir [[../Structure et syntaxe#Ordre d'interprétation des styles et cascade|la section « Ordre d'interprétation des styles et cascade » du chapitre « Structure et syntaxe »]] pour plus de détails.

== P ==
;Page:Une page web est définie par un document HTML constitué d'une hiérarchie d'éléments.
;Plate-forme:Désigne généralement le type de système d'exploitation d'un ordinateur. On parlera de la plate-forme Linux, la plate-forme Macintosh, la plate-forme Windows, etc.
;{{wt|propriété|Propriété}}:Une propriété définit une valeur à un attribut changeant l'apparence : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;color, background-color, margin, padding, font-family&lt;/syntaxhighlight&gt;, ...
:Voir [[../Structure et syntaxe#Structure générale|la section « Structure générale » dans le chapitre « Structure et syntaxe »]]
;Pseudo-classe, pseudo-élément:Dans un sélecteur, une pseudo-classe désigne un état particulier d'un élément : premier élément du parent, survol de la souris, lien déjà visité, ... Un pseudo-élément est similaire mais possède un contenu à définir : contenu avant, contenu après... Leur nom est précédé d'un signe deux-points. Ils sont en général combinés avec d'autres sélecteurs.
:Voir [[../Les sélecteurs#Les pseudo-classes et les pseudo-éléments|la section « Les pseudo-classes et les pseudo-éléments » du chapitre « Les sélecteurs »]]

== Q ==
== R ==
== S ==
;{{wt|sélecteur|Sélecteur}}:Un sélecteur désigne les éléments auxquels s'appliquent les propriétés regroupées dans le bloc qui suit le sélecteur. Il peut désigner les éléments par leur nom, une classe CSS particulière, un identifiants, une combinaison de sélecteurs, ...
:Voir [[../Les sélecteurs|le chapitre « Les sélecteurs »]]
;Spécificité:La spécificité est la précision d'un sélecteur. Elle est utilisée pour définir la priorité des règles de style. Quand plusieurs valeurs différentes existe pour une même propriété, le sélecteur plus spécifique a la priorité.
:Voir [[../Structure et syntaxe#Ordre des spécificités des règles|la section « Ordre des spécificités des règles » du chapitre « Structure et syntaxe »]]
;Structure de formatage:Tout document HTML ou XML donne lieu à la construction d'un ''arbre du document'' reflétant l'organisation de ses contenus et de leur structure. À partir de l'arbre du document, le moteur de rendu CSS d'un navigateur produit une structure dite « de formatage » qui est utilisée pour appliquer les règles de style aux éléments. La structure de formatage est déduite de l'arbre du document, mais peut en différer lorsque des contenus sont générés ou supprimés via CSS.
;Style:Le style définissant l'apparence d'un élément peut être fourni par l'attribut &lt;code&gt;style&lt;/code&gt; dans le document HTML ou de manière plus réutilisable dans un document séparé de feuille de style d'extension &lt;code&gt;.css&lt;/code&gt;.

== T ==
;Taille de police:La taille de la police de caractères définit la hauteur des caractères d'une ligne de texte. En unité absolue, celle-ci est couramment exprimée en points ; elle peut utiliser d'autres unités absolues ou des unités relatives.
:Voir [[../Valeurs et unités|le chapitre « Valeurs et unités »]] et les sections « [[../Texte#Police et taille de police|Police et taille de police]] » et « [[../Texte#font-size : taille des caractères|font-size : taille des caractères]] » du chapitre « [[../Texte|Texte]] ».

== U ==
;Unité:Les valeurs de certains propriété sont exprimées en différentes unités spécifiées en général après la valeur.
:Voir [[../Valeurs et unités|le chapitre « Valeurs et unités »]]

== V ==
;Variable:Une variable permet de stocker une valeur utilisée plusieurs fois. cela facilite la maintenance car la modification de la valeur ne se fait qu'à un seul endroit : la définition de la variable.
:Voir [[../Structure et syntaxe#Déclaration de variable|la section « Déclaration de variable » dans le chapitre « Structure et syntaxe »]]

== W ==
== X ==
;XHTML:eXtensible HyperText Markup Language ; langage utilisé pour les documents web, définissant une structure hiérarchique d'éléments dont le style est définissable par une feuille de style CSS. Il s'agit de HTML utilisant la syntaxe plus stricte du XML.
:Voir [[Le langage HTML|le livre sur le langage HTML]].
;XML:eXtensible Markup Language ; langage générique définissant une structure hiérarchique d'éléments. Ce langage est d'utilisation plus générale pour définir des structures de données. Le rendu peut être stylisé pour le transformer en XHTML en utilisant des feuilles de style XSLT.
:Voir [[Programmation XML|le livre sur le langage XML]].

== Y ==
== Z ==

== Voir aussi ==
* {{WT|Catégorie:Lexique en français de la programmation}}</text>
      <sha1>il0371kgrtdmg51k4ixs209yd6jg7si</sha1>
    </revision>
    <revision>
      <id>683833</id>
      <parentid>683832</parentid>
      <timestamp>2022-08-21T14:07:32Z</timestamp>
      <contributor>
        <username>DavidL</username>
        <id>1746</id>
      </contributor>
      <comment>/* A */</comment>
      <model>wikitext</model>
      <format>text/x-wiki</format>
      <text bytes="12856" xml:space="preserve">&lt;noinclude&gt;{{Sommaire CSS}}&lt;/noinclude&gt;

== A ==
;Adaptabilité:Un document adaptatif peut s'afficher sans problème sur toutes les tailles d'écran disponible, du plus petit (téléphone portable, montre connectée, ...) au plus grand (écran HD cinéma/projection). Pour cela, la feuille de style doit prévoir différentes disposition possible selon la largeur d'affichage disponible. Par exemple :
:* placer 4 sections par ligne sur écrans larges, 2 par ligne sur écrans moyens et une seule section par ligne sur petits écrans ;
:* choisir une grande taille de police de caractères sur écrans larges pour éviter les vides et avoir une meilleur visibilité sur les écrans à haute résolution, et choisir une taille plus petite pour loger davantage de texte par ligne sur les petits écrans de téléphone mobile.
;Arborescence:Un document HTML définit une structure hiérarchique sous la forme d'un arbre d'éléments : chaque élément peut en contenir plusieurs autres. En CSS, il est possible d'enchaîner les [[../Les sélecteurs|sélecteurs]] pour sélectionner les éléments parents (directs ou non) avant l'élément ciblé :
:Exemple 1 : Tous les éléments p enfants directs d'un élément de classe &lt;code&gt;info&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;.info &gt; p&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments de classe &lt;code&gt;item&lt;/code&gt; enfants directs ou indirects d'un élément de classe &lt;code&gt;menu&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;.menu .item&lt;/syntaxhighlight&gt;

;{{wt|attribut|Attribut}}:Un attribut est une propriété associée à un élément HTML. Par exemple, l'attribut &lt;code&gt;style&lt;/code&gt; définit une série de propriétés CSS appliquées à l'élément.
:Exemple : &lt;syntaxhighlight lang=&quot;html&quot; inline&gt;&lt;div style=&quot;border: solid 1px; font-weight:bold;&quot;&gt;Zone avec bordure, en gras&lt;/div&gt;&lt;/syntaxhighlight&gt;
:Un [[../Les sélecteurs|sélecteur]] peut [[../Les sélecteurs#Sélecteur d'attribut|utiliser les attributs]] en encadrant le nom avec des crochets, et peut aussi tester la valeur associée.
:Exemple 1 : Tous les éléments ayant un attribut style défini : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;[style]&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments ayant un attribut style défini et contenant la chaîne &quot;color:&quot; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;[style*=&quot;color:&quot;]&lt;/syntaxhighlight&gt;

== B ==
;BEM:Bonne pratique du CSS consistant à organiser les styles en arborescence. Par exemple, &lt;code&gt;__&lt;/code&gt; dans un nom de sélecteur signifie &quot;enfant direct&quot;.
;Bordure:Zone entourant un élément comprise entre la marge et l'espace interne dans le modèle de boîte. Par défaut, cette zone est vide (aucune bordure).
:Voir [[../Le modèle de boîte|le chapitre « Le modèle de boîte »]]

== C ==

;Canevas:Représente l'espace fermé dans lequel la [[#Structure|structure de formatage]] est traitée. Pour l'écran d'ordinateur, il s'agira de la zone de visualisation du navigateur ; pour une page papier, il s'agira de l'espace imprimable de la page ; etc.
:[http://www.yoyodesign.org/doc/w3c/css2/intro.html#q4 Recommandation CSS2 - Le canevas] (FR)
;Chrome:Navigateur de Google basé sur le moteur Chromium.
;Couleur:La couleur est définie par un ensemble de composants, en général RVB : Rouge, Vert, Bleu (en anglais : RGB = Red, Green, Blue), et potentiellement une composante alpha indiquant l'opacité. Les propriétés CSS permettent de définir différentes couleurs :
:* Couleur de texte : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;color: blue;&lt;/syntaxhighlight&gt;
:* Couleur de fond : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;background-color: #432;&lt;/syntaxhighlight&gt;
:* Couleur de bordure : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;border-color: rgb(100%, 50%, 0%);&lt;/syntaxhighlight&gt;
:Voir [[../Valeurs et unités#Les couleurs|la section « Les couleurs » du chapitre « Valeurs et unités »]]
;CSS:Feuilles de styles en cascade (''Cascading Style Sheets''), servent à mettre en forme des documents web, type page HTML ou XML et sont le sujet de ce livre.

== D ==
;Dégradé de couleur:Les règles de style CSS permettent de mettre un dégradé de couleur en fond d'un élément en utilisant l'une des fonctions &lt;code&gt;gradient&lt;/code&gt; pour la propriété &lt;code&gt;background-image&lt;/code&gt; : &lt;code&gt;linear-gradient&lt;/code&gt;, &lt;code&gt;repeating-linear-gradient&lt;/code&gt;, &lt;code&gt;radial-gradient&lt;/code&gt;, &lt;code&gt;repeating-radial-gradient&lt;/code&gt; ou &lt;code&gt;conic-gradient&lt;/code&gt;.
:Voir [[../Fonds, bordures, marges et espacements#Fond en dégradé de couleur|la section « Fond en dégradé de couleur » du chapitre « Fonds, bordures, marges et espacements »]]
;Document:Les règles de style CSS s'applique à un document HTML ou XHTML. Ce document définit un ensemble d'éléments imbriqués. Les règles CSS ciblent des éléments particulier à styliser en utilisant des sélecteurs.

== E ==
;Edge:Navigateur de Microsoft successeur d'Internet Explorer. Les dernières versions sont basées sur le moteur Chromium.
;Élément:Nœud de l'arborescence des documents HTML, XHTML ou XML défini par une balise d'ouverture et une balise de fermeture.
:Un [[../Les sélecteurs|sélecteur]] peut désigner tous les éléments ayant le même nom :
:Exemple 1 : Tous les éléments nommés &lt;code&gt;div&lt;/code&gt; : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;div&lt;/syntaxhighlight&gt;
:Exemple 2 : Tous les éléments : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;*&lt;/syntaxhighlight&gt;

== F ==
;Feuille de style:Une feuille de style est un ensemble de règles CSS. Elle peut être un fichier séparé (extension &lt;code&gt;.css&lt;/code&gt;) ou incluse dans un document HTML dans un élément &lt;syntaxhighlight lang=&quot;html&quot; inline&gt;&lt;style&gt;&lt;/syntaxhighlight&gt;.
:Voir [[../Interface HTML|le chapitre « Interface HTML »]]
;FF:Firefox, navigateur de la fondation Mozilla.

== G ==
== H ==
;Héritage:La plupart des propriétés appliquées à un élément s'appliquent également aux éléments qu'il contient : police de caractère, couleur de texte et de fond, ... D'autres ne sont pas héritées ; par exemple les propriétés sur la bordure ne s'appliquent qu'à l'élément ciblé.
:La valeur spéciale &lt;code&gt;inherit&lt;/code&gt; permet d'écraser la valeur d'une propriété pour utiliser la même valeur que celle de l'élément parent.
:Voir [[../Héritage|le chapitre « Héritage »]]
;HTML:HyperText Markup Language ; langage utilisé pour les documents web, définissant une structure hiérarchique d'éléments dont le style est définissable par une feuille de style CSS.
:Voir [[Le langage HTML|le livre sur le langage HTML]].

== I ==
;IE:Internet Explorer ; navigateur ancien de Microsoft très peu utilisé et ne supportant pas complètement les standards récents. Il a été remplacé par Edge.

== J ==
;JS:Javascript est un langage de programmation permettant les interactions avec l'utilisateur.
:Voir [[Programmation Javascript|le livre « Programmation Javascript »]]

== K ==
== L ==
== M ==
;Modèle de boîte:Le rendu des éléments de type bloc peut être modélisé par un ensemble de zone rectangulaire imbriquées appelées boîtes.
:Voir [[../Le modèle de boîte|le chapitre « Le modèle de boîte »]]

== N ==
== O ==
;Opacité:L'opacité permet de rendre un élément plus ou moins opaque : 100% = opaque (par défaut), 0% = transparent. Elle s'applique à tout l'élément : fond et contenu. Pour ne l'appliquer que sur le fond, il faut utiliser une couleur de fond avec composante alpha pour indiquer l'opacité de la couleur.
:Voir [[../Fonds, bordures, marges et espacements#Opacité|la section « Opacité » du chapitre « Fonds, bordures, marges et espacements »]]
;Ordre:L'ordre d'application des règles de style est défini par :
:* la spécificité des sélecteurs : plus le sélecteur est précis plus il a la priorité,
:* l'attribut &lt;code&gt;style&lt;/code&gt; a la priorité sur les feuilles de styles (sauf les valeurs marquées avec &lt;code&gt;!important&lt;/code&gt;),
:* l'ordre d'inclusion des feuilles de style en cas d'égalité : la nouvelle règle écrase l'ancienne valeur.
:Voir [[../Structure et syntaxe#Ordre d'interprétation des styles et cascade|la section « Ordre d'interprétation des styles et cascade » du chapitre « Structure et syntaxe »]] pour plus de détails.

== P ==
;Page:Une page web est définie par un document HTML constitué d'une hiérarchie d'éléments.
;Plate-forme:Désigne généralement le type de système d'exploitation d'un ordinateur. On parlera de la plate-forme Linux, la plate-forme Macintosh, la plate-forme Windows, etc.
;{{wt|propriété|Propriété}}:Une propriété définit une valeur à un attribut changeant l'apparence : &lt;syntaxhighlight lang=&quot;css&quot; inline&gt;color, background-color, margin, padding, font-family&lt;/syntaxhighlight&gt;, ...
:Voir [[../Structure et syntaxe#Structure générale|la section « Structure générale » dans le chapitre « Structure et syntaxe »]]
;Pseudo-classe, pseudo-élément:Dans un sélecteur, une pseudo-classe désigne un état particulier d'un élément : premier élément du parent, survol de la souris, lien déjà visité, ... Un pseudo-élément est similaire mais possède un contenu à définir : contenu avant, contenu après... Leur nom est précédé d'un signe deux-points. Ils sont en général combinés avec d'autres sélecteurs.
:Voir [[../Les sélecteurs#Les pseudo-classes et les pseudo-éléments|la section « Les pseudo-classes et les pseudo-éléments » du chapitre « Les sélecteurs »]]

== Q ==
== R ==
== S ==
;{{wt|sélecteur|Sélecteur}}:Un sélecteur désigne les éléments auxquels s'appliquent les propriétés regroupées dans le bloc qui suit le sélecteur. Il peut désigner les éléments par leur nom, une classe CSS particulière, un identifiants, une combinaison de sélecteurs, ...
:Voir [[../Les sélecteurs|le chapitre « Les sélecteurs »]]
;Spécificité:La spécificité est la précision d'un sélecteur. Elle est utilisée pour définir la priorité des règles de style. Quand plusieurs valeurs différentes existe pour une même propriété, le sélecteur plus spécifique a la priorité.
:Voir [[../Structure et syntaxe#Ordre des spécificités des règles|la section « Ordre des spécificités des règles » du chapitre « Structure et syntaxe »]]
;Structure de formatage:Tout document HTML ou XML donne lieu à la construction d'un ''arbre du document'' reflétant l'organisation de ses contenus et de leur structure. À partir de l'arbre du document, le moteur de rendu CSS d'un navigateur produit une structure dite « de formatage » qui est utilisée pour appliquer les règles de style aux éléments. La structure de formatage est déduite de l'arbre du document, mais peut en différer lorsque des contenus sont générés ou supprimés via CSS.
;Style:Le style définissant l'apparence d'un élément peut être fourni par l'attribut &lt;code&gt;style&lt;/code&gt; dans le document HTML ou de manière plus réutilisable dans un document séparé de feuille de style d'extension &lt;code&gt;.css&lt;/code&gt;.

== T ==
;Taille de police:La taille de la police de caractères définit la hauteur des caractères d'une ligne de texte. En unité absolue, celle-ci est couramment exprimée en points ; elle peut utiliser d'autres unités absolues ou des unités relatives.
:Voir [[../Valeurs et unités|le chapitre « Valeurs et unités »]] et les sections « [[../Texte#Police et taille de police|Police et taille de police]] » et « [[../Texte#font-size : taille des caractères|font-size : taille des caractères]] » du chapitre « [[../Texte|Texte]] ».

== U ==
;Unité:Les valeurs de certains propriété sont exprimées en différentes unités spécifiées en général après la valeur.
:Voir [[../Valeurs et unités|le chapitre « Valeurs et unités »]]

== V ==
;Variable:Une variable permet de stocker une valeur utilisée plusieurs fois. cela facilite la maintenance car la modification de la valeur ne se fait qu'à un seul endroit : la définition de la variable.
:Voir [[../Structure et syntaxe#Déclaration de variable|la section « Déclaration de variable » dans le chapitre « Structure et syntaxe »]]

== W ==
== X ==
;XHTML:eXtensible HyperText Markup Language ; langage utilisé pour les documents web, définissant une structure hiérarchique d'éléments dont le style est définissable par une feuille de style CSS. Il s'agit de HTML utilisant la syntaxe plus stricte du XML.
:Voir [[Le langage HTML|le livre sur le langage HTML]].
;XML:eXtensible Markup Language ; langage générique définissant une structure hiérarchique d'éléments. Ce langage est d'utilisation plus générale pour définir des structures de données. Le rendu peut être stylisé pour le transformer en XHTML en utilisant des feuilles de style XSLT.
:Voir [[Programmation XML|le livre sur le langage XML]].

== Y ==
== Z ==

== Voir aussi ==
* {{WT|Catégorie:Lexique en français de la programmation}}</text>
      <sha1>463bx91ce8it6rcfxw6zi9w0877a3u8</sha1>
    </revision>
  </page>
  <page>
    <title>Prénoms corses</title>
    <ns>0</ns>
    <id>3940</id>
    <revision>
      <id>683838</id>
      <parentid>669903</parentid>
      <timestamp>2022-08-22T09:24:40Z</timestamp>
      <contributor>
        <ip>2A01:CB1E:8:AEDF:BCF3:E8F4:F483:1196</ip>
      </contributor>
      <model>wikitext</model>
      <format>text/x-wiki</format>
      <text bytes="2791" xml:space="preserve">{{Corse}}
Liste non exhaustive de prénoms corses :

'''- A'''

* Alanu (Alain)
* Albertu (Albert)
* Aléria
* Andria (André)
* Anghjula (Angèle)
* Anghjula-Dea
* Anghjula-Maria
* Anghjulu (Ange)
* Anghjulina (Angélina)
* Antone, Antonu (Antoine)
* Antonu-Paulu
* Anna (Anne)
* Anna-Maria
* Arrigu (Henri)

'''- B'''

* Battistu (Baptiste)
* Bartolumeu (Barthélémy)
* Biasgiu (Blaise)
* Bianca (Blanche)

'''- C'''

* Catalina (Catherine)
* Carlu, Carla (Charles, Charlotte)
* Carla-Maria
* Carulina (Caroline)
* Chjara (Claire)
* Chjara-Lesia
* Chjara-Livia
* Chjara-Maria
* Chjara-Rosa
* Cristofanu (Christophe)

'''- D'''

* Davia
* Davia-Catalina
* Dumenicu, Dumenica (Dominique), voc. ou dim. Dumè
* Divotta (Devotte)
* Desideriu (Désiré)

'''- E'''

* Emiliu (Emile)
* Ettore, Ettaru (Hector)
'''- F'''

* Felice (Felix)
* Francescu, Francesca (François, Françoise), dim. Ceccu, Ceccè.
* Filippu (Philippe)
* Federicu, Federica (Frédéric, Frédérique)
* Fiurenzu (Florent)

'''- G'''

* Ghjacumu (Jacques)
* Ghjulia
* Ghjulia-Maria
* Ghjuvanni, Ghjuvanna, Ghjuvannina (Jean, Jeanne)
* Ghjilormu (Jérome)
* Ghjilormina (Jéromine)
* Ghjiseppu, Ghjaseppu (Joseph)
* Ghjiseppina, Ghjaseppina (Joséphine)
* Guglielmu (Guillaume)

'''-I'''

* Isabella, Isabedda (Isabelle)
* Iviu (Yves)

'''- L'''

* Larenzu, Lorenzu, Lurenzu (Laurent)
* Lavisa
* Lavisu
* Lena (Hélène)
* Leria
* Lesia (Lise)
* Letizia (Laetitia)
* Lisandru, Lisandra (Alexandre, Alexandra)
* Lisandrina (Alexandrine)
* Lucca (Luc)
* Lucia (Lucie)
* Luigi, Lavighju (Louis)
* Livia
* Livia-Rosa

'''- M'''

* Maddalena (Madeleine)
* Marcu (Marc)
* Marc'Andria
* Marc'Antonu
* Maria (Marie)
* Maria-Stella
* Mattea (Mathée)
* Matteu (Mathieu)
* Mariu (Marius)
* Michele, Micheli (Michel), dim. Michè (Migué)
* Margherita (Marguerite, Margaux)

'''- N'''

* Natale, Natali (Noel)
* Niculaiu, Niculosu, Nicurosu (Nicolas)
* Nunziu (Nonce)

'''- O'''

* Orsiliu (Orsilius)
* Orsu (Ours)

'''- P'''

* Pasquale (Pascal)
* Pantaléonu (Pantaléon)
* Patriziu, Patrizia (Patrice, Patricia)
* Paulu (Paul)
* Paulina (Pauline)
* Petru, Petra (Pierre, Pierrette)
* Petr'Antò
* Petru-Maria
* Petru-Paulu

'''- R'''

* Renatu, Rinatu (René)
* Renata, Rinata (Renée)
* Risterucciu 
* Ristituta (Restitude)
* Rosa (Rose)
* Roccu (Roch)
* Rumenzu (Romain)
'''- S'''

* Salvadore (Sauveur)
* Santu, Santa (Toussaint, Toussainte)
* Saveriu, Saveria (Xavier, Xavière)
* Silvia (Sylvie) 
* Stefanu (Étienne)
* Stella, Stedda (Estelle)
*Sacra 

'''- T'''

* Teresa (Thérése)
* Tumasgiu (Thomas)

'''- U'''

* Ulivieru (Olivier)

'''- V'''

* Vincentu ( Vincent )
*Valeriu, Valeria (Valère, Valéri, Valérie)
* Vittoriu, Vittoria (Victor, Victoire)
* Virginia, Virghjinia (Virginie)

[[Catégorie:Corse|Prénoms]]</text>
      <sha1>m14kiccsbbm0vbi6m0n09ovs7kncsy4</sha1>
    </revision>
    <revision>
      <id>683839</id>
      <parentid>683838</parentid>
      <timestamp>2022-08-22T09:37:46Z</timestamp>
      <contributor>
        <ip>2A01:CB1E:8:AEDF:BCF3:E8F4:F483:1196</ip>
      </contributor>
      <model>wikitext</model>
      <format>text/x-wiki</format>
      <text bytes="2644" xml:space="preserve">{{Corse}}
Liste non exhaustive de prénoms corses :

'''- A'''

* Alanu (Alain)
* Albertu (Albert)
* Andria (André)
* Anghjula (Angèle)
* Anghjulu (Ange)
* Anghjulina (Angélina)
* Antone, Antonu (Antoine)
* Antonia
* Anna (Anne)
* Arrigu (Henri)

'''- B'''

* Battistu (Baptiste)
* Bartolumeu (Barthélémy)
* Biasgiu (Blaise)
* Bianca (Blanche)

'''- C'''

* Catalina (Catherine)
* Carlu, Carla (Charles, Charlotte)
* Carulina (Caroline)
* Chjara (Claire)
*
*
* Cristofanu (Christophe)

'''- D'''

* Davia
* Dea
* Desideriu (Désiré)
* Divotta (Devotte)
* Dumenicu, Dumenica (Dominique), voc. ou dim. Dumè

'''- E'''

* Emiliu (Emile)
* Ettore, Ettaru (Hector)
'''- F'''

* Felice (Felix) dim. Felì
* Francescu, Francesca (François, Françoise), dim. Ceccu, Ceccè.
* Filippu (Philippe)
* Federicu, Federica (Frédéric, Frédérique)
* Fiurenzu (Florent)

'''- G'''

* Ghjacumu (Jacques)
* Giulia o Ghjulia (Julie)
* Giuliu o Ghjuliu (Jules)
* Ghjuvanni, Ghjuvanna, Ghjuvannina (Jean, Jeanne)
* Ghjilormu (Jérome)
* Ghjilormina (Jéromine)
* Ghjiseppu, Ghjaseppu (Joseph)
* Ghjiseppina, Ghjaseppina (Joséphine)
* Guglielmu (Guillaume)

'''-I'''

* Isabella, Isabedda (Isabelle)
* Iviu (Yves)

'''- L'''

* Larenzu, Lorenzu, Lurenzu (Laurent)
* Lavisa
* Lavisu
* Lena (Hélène)
* Leria
* Lesia (Lise)
* Letizia (Laetitia)
* Lisandru, Lisandra (Alexandre, Alexandra)
* Lisandrina (Alexandrine)
* Livia
* Liviu
* Lucca (Luc)
* Lucia (Lucie)
* Luigi, Lavighju, Lavigliu (Louis)

'''- M'''

* Maddalena (Madeleine)
* Marcu (Marc)
* Maria (Marie)
* Mattea (Mathée)
* Matteu (Mathieu)
* Mariu (Marius)
* Michele, Micheli (Michel), dim. Michè 
* Margherita (Marguerite, Margaux)

'''- N'''

* Natale, Natali (Noel)
* Niculaiu, Niculosu, Nicurosu (Nicolas)
* Nunziu (Nonce)

'''- O'''

* Orsiliu (Orsilius)
* Orsu (Ours)

'''- P'''

* Pasquale (Pascal)
* Pasqualina (Pascaline)
* Pantaléonu (Pantaléon)
* Patriziu, Patrizia (Patrice, Patricia)
* Paulu (Paul)
* Paula (Paule)
* Paulina (Pauline)
* Petru, Petra (Pierre, Pierrette)

'''- R'''

* Renatu, Rinatu (René)
* Renata, Rinata (Renée)
* Risterucciu 
* Ristituta (Restitude)
* Rosa (Rose)
* Roccu (Roch)
* Rumenzu (Romain)
'''- S'''

* Salvadore (Sauveur)
* Santu, Santa (Toussaint, Toussainte)
* Saveriu, Saveria (Xavier, Xavière)
* Silvia (Sylvie) 
* Stefanu (Étienne)
* Stella, Stedda (Estelle)
*Sacra 

'''- T'''

* Teresa (Thérése)
* Tumasgiu (Thomas)

'''- U'''

* Ulivieru (Olivier)

'''- V'''

* Vincente ( Vincent )
*Valeriu, Valeria (Valère, Valéri, Valérie)
* Vittoriu, Vittoria (Victor, Victoire)
* Virginia, Virghjinia (Virginie)

[[Catégorie:Corse|Prénoms]]</text>
      <sha1>lvq4lfjhjioy0m90k7u56i2gqhhy50k</sha1>
    </revision>
    <revision>
      <id>683840</id>
      <parentid>683839</parentid>
      <timestamp>2022-08-22T09:40:02Z</timestamp>
      <contributor>
        <ip>2A01:CB1E:8:AEDF:BCF3:E8F4:F483:1196</ip>
      </contributor>
      <model>wikitext</model>
      <format>text/x-wiki</format>
      <text bytes="2677" xml:space="preserve">{{Corse}}
Liste non exhaustive de prénoms corses :

'''- A'''

* Alanu (Alain)
* Albertu (Albert)
* Andria (André)
* Anghjula (Angèle)
* Anghjulu (Ange)
* Anghjulina (Angélina)
* Antone, Antonu (Antoine)
* Antonia
* Anna (Anne)
* Arrigu (Henri)

'''- B'''

* Battistu (Baptiste)
* Bartolumeu (Barthélémy)
* Biasgiu (Blaise)
* Bianca (Blanche)

'''- C'''

* Catalina (Catherine)
* Carlu, Carla (Charles, Charlotte)
* Carulina (Caroline)
* Chjara (Claire)
*
*
* Cristofanu (Christophe)

'''- D'''

* Davia
* Dea
* Desideriu (Désiré)
* Divotta (Devotte)
* Dumenicu, Dumenica (Dominique), voc. ou dim. Dumè

'''- E'''

* Emiliu (Emile)
* Ettore, Ettaru (Hector)
'''- F'''

* Felice (Felix) dim. Felì
* Francescu, Francesca (François, Françoise), dim. Ceccu, Ceccè.
* Filippu (Philippe)
* Federicu, Federica (Frédéric, Frédérique)
* Fiurenzu (Florent)

'''- G'''

* Ghjacumu (Jacques)
* Giulia o Ghjulia (Julie)
* Giuliu o Ghjuliu (Jules)
* Ghjuvanni, Ghjuvanna, Ghjuvannina (Jean, Jeanne)
* Ghjilormu (Jérome)
* Ghjilormina (Jéromine)
* Ghjiseppu, Ghjaseppu (Joseph)
* Ghjiseppina, Ghjaseppina (Joséphine)
* Guglielmu (Guillaume)

'''-I'''

* Isabella, Isabedda (Isabelle)
* Iviu (Yves)

'''- L'''

* Larenzu, Lorenzu, Lurenzu (Laurent)
* Lavisa
* Lavisu
* Lena (Hélène)
* Leria
* Lesia (Lise)
* Letizia (Laetitia)
* Lisandru, Lisandra (Alexandre, Alexandra)
* Lisandrina (Alexandrine)
* Livia
* Liviu
* Lucca (Luc)
* Lucia (Lucie)
* Luigi, Lavighju, Lavigliu (Louis)

'''- M'''

* Maddalena (Madeleine)
* Marcu (Marc)
* Maria (Marie)
* Marinu, Marina (Marin, Marine)
* Mattea (Mathée)
* Matteu (Mathieu)
* Mariu (Marius)
* Michele, Micheli (Michel), dim. Michè 
* Margherita (Marguerite, Margaux)

'''- N'''

* Natale, Natali (Noel)
* Niculaiu, Niculosu, Nicurosu (Nicolas)
* Nunziu (Nonce)

'''- O'''

* Orsiliu (Orsilius)
* Orsu (Ours)

'''- P'''

* Pasquale (Pascal)
* Pasqualina (Pascaline)
* Pantaléonu (Pantaléon)
* Patriziu, Patrizia (Patrice, Patricia)
* Paulu (Paul)
* Paula (Paule)
* Paulina (Pauline)
* Petru, Petra (Pierre, Pierrette)

'''- R'''

* Renatu, Rinatu (René)
* Renata, Rinata (Renée)
* Risterucciu 
* Ristituta (Restitude)
* Rosa (Rose)
* Roccu (Roch)
* Rumenzu (Romain)
'''- S'''

* Salvadore (Sauveur)
* Santu, Santa (Toussaint, Toussainte)
* Saveriu, Saveria (Xavier, Xavière)
* Silvia (Sylvie) 
* Stefanu (Étienne)
* Stella, Stedda (Estelle)
*Sacra 

'''- T'''

* Teresa (Thérése)
* Tumasgiu (Thomas)

'''- U'''

* Ulivieru (Olivier)

'''- V'''

* Vincente ( Vincent )
*Valeriu, Valeria (Valère, Valéri, Valérie)
* Vittoriu, Vittoria (Victor, Victoire)
* Virginia, Virghjinia (Virginie)

[[Catégorie:Corse|Prénoms]]</text>
      <sha1>g0so10l6p6ec4kk9v8e6zmd9164z52g</sha1>
    </revision>
  </page>
  <page>
    <title>Mécanique, enseignée via l'Histoire des Sciences/La chute libre</title>
    <ns>0</ns>
    <id>8718</id>
    <revision>
      <id>683824</id>
      <parentid>683823</parentid>
      <timestamp>2022-08-21T12:16:31Z</timestamp>
      <contributor>
        <username>Guerinsylvie</username>
        <id>928</id>
      </contributor>
      <minor />
      <comment>/* Puits */</comment>
      <model>wikitext</model>
      <format>text/x-wiki</format>
      <text bytes="31128" xml:space="preserve">&lt;noinclude&gt;{{Mécanique, enseignée via l'Histoire des Sciences}}&lt;/noinclude&gt;

*Attention : une bonne partie de la réflexion est actuellement dans la discussion. Elle en sortira quand elle aura été suffisamment critiquée.

Cette première leçon est élémentaire. Son niveau est bac-2, bac-1, bac , et bac+1. Les exercices et les commentaires sont de niveau variable.

== Loi de Galilée==
=== Expérience=== 
Soit un plomb, P, soutenu par une ficelle mince.

On le laisse bien au repos, au ras du sol. On marque à la craie la position au sol, disons A . Le plomb est relevé de 2m environ, bien à la verticale de A en un point O.

Il est immobile en O. On brûle la ficelle. Le plomb tombe de O en A. En &quot;chute libre&quot;, dit-on ; en réalité, l'air perturbe le mouvement en le ralentissant.

Galilée(1564-1642) eût l'idée, '''géniale pour l'époque''', d'imaginer ce mouvement '''''à la limite''''' où il n'y aurait pas d'air ! Le plomb tomberait alors dans le vide : c'est la chute libre verticale, dont Galilée donna la loi en 1604.

=== La loi  ===
Soit z(t) la hauteur de chute, v  la vitesse de chute, et a l'accélération.  

'''L'accélération est constante'''. 

On l'appelle g.
À Paris, elle vaut 9.81 m/s². 
La vitesse initiale est nulle.

On en déduit :
 
:&lt;math&gt; \frac {d^2z}{dt^2} = g  &lt;=&gt;   \frac{dz}{dt} = gt &lt;=&gt; z =\frac{1}{2}gt^2  &lt;/math&gt;


( De plus, si on élimine la variable t entre v(t) et z(t), on obtient :  v² = 2gz ; Torricelli(1640)).

Avec des conditions initiales quelconques, on obtiendrait :

&lt;math&gt;v = v_0 + gt &lt;=&gt; z =\frac{1}{2}gt^2 + v_0 t + z_0  &lt;/math&gt;

''Remarque'' : en réalité, le pivotement de la Terre en un jour sidéral provoque une minuscule déviation vers l'Est.

==Notes historiques==

===penser le vide ===

Aujourd'hui, on sait faire cette expérience dans un tube privé d'air (grâce à une pompe aspirante). On a des caméras pour enregistrer le mouvement. On peut refaire l'expérience à loisir avec d'autres dispositifs. On l'a même refaite sur la Lune, qui n'a pas d'atmosphère. À l'époque ( avant 1644 ), '''penser le vide''' était assez '''révolutionnaire''', voire hérétique (la discussion en est passionnante, cf article sur le vide) ; Galilée lui-même n'y croyait pas trop ; son élève Torricelli(1609-1647) mit en évidence le &quot;vide grosso&quot; dans la &quot;chambre barométrique&quot; en 1644, ceci après avoir compris le problème des fontainiers (de la ville de Sienne) qui n'arrivaient pas à faire fonctionner leurs siphons.

Le génie de Galilée fût de penser la loi comme une loi-limite qui existerait à la limite du vide absolu. En effet, dès que la vitesse est grande, la résistance de l'air vient '''limiter''' la vitesse. Cette vitesse-limite est différente selon les corps. La loi de Galilée devient fausse. Chacun peut le vérifier ; et Galilée, et ses contemporains, le savaient. L'affirmation de Galilée , v = g.t , est donc une décision, correspondant à une loi approximative de début de mouvement dans l'air résiduel.

===la masse n'intervient pas ===

La lettre de Galilée à Sarpi (16/10/1604) présente en réalité '''deux''' Lois:
 
#Le mouvement a une accélération constante 
#'''Un fait extraordinaire''', '''peu crédible''' mais pourtant vrai : la loi ne dépend pas du plomb ! 

On peut prendre une pierre, un sac lesté de plomb, de sable ou de papier, ou de polystyrène, une fleur de pissenlit, une plume. Dans un tube de verre de 2m de long, dont l'air a été pompé, on fait chuter la plume et le plomb ; on parle de l'expérience du &quot;tube de Newton&quot;. Il faut avoir vu cette plume tomber vertigineusement vite :

#'''elle accélère de 10 m/s chaque seconde ;''' 
#'''La plume tombe exactement comme le plomb !''' 

Évidemment, ce qui est le plus curieux dans cette loi est que ni la masse ni la densité du corps n'interviennent : ceci paraît absurde. Et la lumière tombe-t-elle dans le vide ? et l'air, pourquoi ne tombe-t-il pas ? Voir l'exercice.

En réalité, Galilée n'a pas pu vérifier la loi. Il a même &quot;triché&quot; sciemment. Ses contemporains avaient déjà vérifié amplement certaines caractéristiques de la chute dans l'air. Galilée a ignoré ces critiques. Comme il l'a réaffirmé dans le Dialogo, il se place dans une situation théorique, où le vide est '''parfait'''.

Que la masse inerte soit égale à la masse pesante sera la base du Principe d’Équivalence, en théorie de la Relativité Générale d'Einstein, en 1915 ; mais c'est bien plus savant.

===  la Tour de Pise ===
Il faut tordre le coup à ce faux compte-rendu de Viviani dans son hagiographie de la vie du grand Maître : Galilée n'a vraisemblablement jamais vérifié sa loi à la tour de Pise. Koyré le démontre très bien : Galilée , tout comme Beeckman, sait l'existence d'une vitesse-limite. Plomb et sureau ne tombent pas à la même vitesse. Deux billes de plomb non plus. À quoi eût donc servi une telle expérience ? 

De fait, la grande idée expérimentale de Galilée fût en réalité celle de ralentir la chute, via le plan incliné (voir leçon ultérieure), et de penser théoriquement une gedanken-experiment : faire remonter ensuite la masse sur un autre plan incliné : alors, il était '''crédible''' que la bille allait remonter à la même hauteur, ''' à supposer''' que l'influence des frottements fût négligeable. '''Cette supposition est ce qui permet d'épurer le mouvement : la loi devient simple'''. Puis dans une seconde partie (laissée inachevée!), la perturbation due à l'air vient modifier le comportement. D'autres que Galilée eurent des idées, elles aussi très ingénieuses, plus proches même de la réalité expérimentale. L'Histoire n'a retenu que Galilée, parce que sa démarche s'est avérée la plus fructueuse. Mais ne pas oublier les autres.

===les difficultés liées au calculus===

La présentation donnée, v=gt ; z=1/2 gt², est ''anachronique'', très loin de la formulation de 1604. S'il faut attendre 1640 pour trouver la formule de Torricelli, v²=2gz, c'est que ce n'est pas simple, pour l'époque. Il y a au moins trois difficultés :

La notion d'unité, de dimension est précaire (les ''Discorsi'' sont écrits en 1638). Nos montres n'existent pas. La mesure du temps est rudimentaire : on fait chanter une chorale et on se base sur son tempo. Un peu plus tard, on utilisera le pendule ( sans même discuter la circularité du raisonnement, car le pendule utilise aussi la chute ). Galilée n'utilisera jamais &quot;l'axe des temps&quot;. Et bien sûr, la notation g n'existe pas en 1604 ! 

La notion de fonction n'existe pas vraiment. On a simplement deux tableaux numériques : z(k) positions échelonnées aussi régulièrement que possible versus temps de passage t(k). Mais pourquoi ne pas utiliser des temps espacés régulièrement ? Comment intrapoler pour passer d'un tableau à l'autre ? etc. Et on se rend compte très vite que le point initial est grande source d'erreur, à cause du déclenchement du &quot;&quot;chronomètre&quot;&quot;. D'où l'idée de procéder avec les différences_premières ; l'erreur systématique est moindre ; mais alors mesurer des différences augmente l'erreur expérimentale. Mais doit-on afficher les temps à des positions espacées régulièrement ? ou bien les positions à des dates échelonnées régulièrement ? Ce que Galilée va finalement privilégier, ce sont des dates échelonnées : alors, les différences d'espace augmentent comme 1,3,5,7,...(et ceci, ''quel que soit le choix de l'intervalle de temps''). Or il sait que la somme des impairs est un carré. Il en déduit z ~ t². 

La troisième difficulté est la notion de ''calculus'' ( le calcul différentiel et intégral ) : la notion de vitesse instantanée, à la date t, à un instant déterminé, dans le &quot;moment&quot; examiné, etc , n'existe pas encore.Il faudra attendre Newton, et surtout Leibniz pour écrire la dérivée v = dz /dt, via la limite ultime des durées petites, ou des distances infimes ; et comment la déduire des t(k),z(k) ? Et si on définit la lenteur comme limite de Δt/Δz, a-t-on la lenteur égale à 1/v ?  

Admettons que l'on forme un tableau de ces v_i &quot;au mieux&quot; ; ce tableau formé, faut-il considérer les v(k) fonction des t(k) ou bien des z(k) ? Galilée est hésitant. Cela en est touchant. Mais l'affaire est importante, car au coup suivant, pour la &quot;différence des différences&quot;, il faudra aussi faire attention ; est-ce v(t) ou bien lenteur(z)? auquel cas d(lenteur(z))/dz ne donne rien de bien simple! C'est bien dv(t)/dt qui est simple. On affouille, bafouille, cafouille. On patouille. Clairement, 50 après, on a progressé. Mais combien d'efforts de savants illustres ! Le terrain aplani, nous perdons conscience de cette difficulté immense : la construction du calculus.

== Exercices ==

On prendra g = 10 m/s² approximativement.

===quelques exercices simples===
1/. '''simple AN''' : Trouver la hauteur de chute si le temps de chute est 2s .

'''Réponse''' : h = 1/2 . 10 . 4 = 20 m ! et la vitesse à l'arrivée est v= 20 m/s soit 72 km/h : malheur à vous, c'est fatal ! 
----


2/. '''ex.RelationV(x)''' : Éliminer le temps entre z(t) et v(t) pour trouver la relation dite de Torricelli(1608-1647) : v² = 2g.z (c'est la quatrième formulation de la loi, dans le résumé).

En déduire la compréhension du slogan de la Sécurité routière : arriver sur un obstacle à 36 km/h &quot;c'est comme&quot; chuter de 5 m (2ème étage environ), mais à 72 km/h , c'est comme chuter de 20 m! mortel sans ceinture et air-bag.

Montrer plus généralement que V² -Vo² = 2g (z-zo) [ loi de Torricelli(1608-1647).

'''solution''' : 
en reportant t= v/g dans z = 1/2 gt², on obtient z = 1/2 g(v/g)² , soit v²= 2gz.

2g(z-zo) = 2gVot +g²t² ; et V² = (Vo+gt)² = Vo² + 2gVot + g²t² , d'où V²-Vo² = 2g(z-zo).
:Appliquer le théorème de l'énergie cinétique serait ici anachronique. Leibniz ne l'énoncera que vers 1700 ! 
--------


3/. '''ex.Croisement''' : c'est un teaser classique. On lance une pierre P vers le haut. Elle atteint la hauteur H . Juste à cet instant, on lance une deuxième pierre Q de la même manière. De tête, où les 2 pierres se rencontrent-elles ?

'''solution ex.Croisement''' :
Tracer le diagramme horaire de P, zP(t) et celui de Q, zQ(t) : ces deux courbes identiques sont décalées de sorte que le sommet de l'une est au pied de l'autre, la symétrie montre que la rencontre a lieu à T/2 ; le résultat devient évident :[Réponse : rencontre à z =3/4 . H].

--------

4/. '''exercice Beeckman(1618)''' : Beeckman connaît x ~ t² , mais pas encore v² ~ x . Alors il se pose la question suivante : on lâche une pierre du 8eme étage et le temps de chute est T =2s , et sa vitesse vo . Quelle est la durée du 4eme au sol ? et la vitesse au 4eme ? 

réponse : pour Beeckman , le raisonnement est tout à fait laborieux ; en 1641 , pour Torricelli c'est évident. En 20 ans, il y a grand progrès sur la notion de vitesse instantanée ! Ici, pour la moitié d'espace, le temps de passage au 4eme est T/ sqrt(2) , et donc la durée demandée est T( 1 - 1/sqrt(2)) . La vitesse est linéaire en temps , donc V( au 4eme ) = vo / sqrt(2)  
----

5/  '''exercice saut à la perche''' : On dit que la perche sert juste à transférer la vitesse horizontale en vitesse verticale vo . En ordre de grandeur, montrer qu'un record sportif H = 8 m est improbable. 

réponse : oui , improbable, car H = 8m correspond à une vitesse vo ~ 12 à 13 m/s , soit 43-46 km/h , pas trop crédible. De fait, il faudrait pouvoir alors maîtriser le saut... 

----

(* signale un exercice plus difficile)

===Puits===
Pour avoir la hauteur H d'un puits, on y laisse tomber un caillou au temps t = 0 ; on entend le son au temps T = 2 s : trouver la hauteur H (on appellera c , la célérité du son, égale à 1000/3 m/s).

'''solution ex.Puits'''  : On aura la durée de chute t₁ telle que H = ½ g t₁² , et la durée de retour du son t₂ telle que H = ct₂ ; soit 
T = durée totale = t₁ +t₂ = sqrt(2H/g) + H/c , équation du deuxième degré en sqrtH = x &gt; 0 ; soit x² + x. sqrt(2c²/g)-cT = 0  et on en prend la racine positive.

Allyson prend alors sa calculette et trouve x= 4,34546 ; puis H = 18,883 m

Alliette, elle, pousse les calculs littéraux jusqu'au bout et trouve x² = H = 1/2 gT².[ 2 / (1 + sqrt(1+2gT/c))]² = 20. (0,94415) = 18,883 m 
 
De même, après moult calculs, l'équation en x²= H peut se réécrire  :  H = 1/2 g(T-H/c)² = 1/2 gT² ( 1 - H gT/2c)^2

Béatrice dit : maiz'alors, il suffit de dire que si t₂= H/c, alors t₁ = T- H/c , donc H = 1/2 g(T-H/c)²  

L'équation du second degré obtenue est alors : H² - 2H(c²/g + cT) + c²T² = 0

En poursuivant les calculs littéraux, on retrouve le résultat exact d' Alliette.

Catherine dit : t₁ &lt; T donc H = 1/2 g.(t₁)² &lt; 1/2 gT² = 20 m = Ho ; elle ajoute finement : donc   t₂ = H/c &lt; Ho/c = 60 ms ; mesalors t1 &gt; T-Ho/c ; et H &gt; 1/2 g (T-Ho/c)² , soit H1 = 18.82m .

Daisy s'empresse : donc H &lt; H2 = 1/2 g (T-H1/c)². Le démontrer.

Emmy, matheuse, finit : soit y(x) = 1/2 g (T- x/c)² et y = x ; la suite récurrente Hn converge en &quot;araignée&quot; vers la solution d'autant plus vite que [y'(x)| est inférieure à 1. On a successivement 20, puis 18,82 , puis 18,88 m . 

remarque-annexe sur les chiffres significatifs : la résistance de l'air rend ces calculs au centimètre près fictifs. Par ailleurs, on n'a pas poussé au-delà, ( et la margelle du puits ? ), et car il y a ambiguïté sur les ChS : on aurait dû donner T = 2,0000 s par exemple ; passons, d'ailleurs on a pris g = 10.

Fanny, pragmatique, conclut : bon, dans ces conditions, je reprends juste le calcul de Catherine : H &lt; 20 m , la première correction est -1,2 m ; DONC , SI c'est une progression géométrique alternée, de raison k = -6/100, alors H = 20/ (1+k) = 18,87 ; soit H = 18,9 m avec 3 ChS. D'ailleurs, numériquement, Béa a trouvé : H = 20 (1-3H/100)², soit sensiblement H = 20 ( 1-6/100 ), c'est pareil.

Chaque élève a son bout de vérité. C'est souvent l'ensemble des réponses qui donne une compréhension harmonieuse. Un problème a rarement une solution exacte et la méthode initiée par Catherine est donc très appréciée ; elle conduit aussi, par itération, au résultat exact et une itération de cette sorte est très aisée à conduire avec les calculettes usuelles. En conclusion, on a besoin : 1/. de mettre en équations  et, éventuellement, de sortir la physique hors des équations pour mettre tout sous forme d'un pb de math 2/. résoudre alors comme en math, avec toute les capacités des math, y compris l'analyse numérique  3/. exploiter la solution du point de vue physique.

Reprenons le tout pour fixer la démarche : 

Un puits , 2s , g = 10 et c = 333 m/s . Donc en gros H = 20m , et le retour du son en 60ms : le prof nous fait calculer des clopinettes..., soit !

mise en équation : H = 1/2 g (T -H/c )² 

et sortir la physique des équations : H = 1/2 gT². Z , soit Z = ( 1 - gT/2c .Z )^2 , et on passe aux maths

résoudre l'éq en Z : c'est une éq du 2eme degré =&gt; résultat 

ou résoudre Z = f(Z) = f(f(Z)) , etc , point-fixe =&gt; résultat 

interprétation-du résultat : pas la peine d'aller au delà du cm ! on a pris g = 10 m/s²

''Ou bien'', selon la première méthode via sqrt(H) = x :

mise en équation :  x sqrt(2/g) + x²/c = T , et sortir la physique des équations : poser x = T.sqrt(g/2). X ; soit X = 1 - α X², avec α = gT/2c,

évidemment la même équation que précédemment ( car Z = X² )

Puis résoudre en math : l'avantage pour un matheux expérimenté est qu'il reconnaît l'équation X = 1 - α X² ! dont la solution-ici est X = c(-α) , où c(x) désigne la fonction génératrice des nombres de Catalan , donc X = 1 - α  + 2α² - 5α³ + ... . On pourra vérifier. Certes , ici pour un exercice de début, il est prétentieux d'invoquer les nb de Catalan, mais c'est juste pour indiquer qu'un exercice bien &quot;normalisé&quot; peut se ramener à une étude connue. 

Ici, la phase essentielle fût : repérer le paramètre sans dimension, petit, gT/2c . Cette analyse dimensionnelle se retrouvera dans moult exercices ultérieurs.

exo * : si l'on a bien assimilé tout ce qui a été dit précédemment , on demande, de tête , de calculer la profondeur du puits pour T = 4s . Catherine avait répondu instantanément !  
----

=== Expérimentation(*)===
Une caméra prend des photos d'une bille en chute libre à des tops réguliers, d'intervalle T. Une règle verticale photographiée en même temps que la bille donne 3 valeurs z1, z2 et z3 pour des temps t1, t2 = t1 + T , t3 = t1 + T .Montrer que , quel que soit t1 et T , [(z3-z2)/T - (z2-z1)/T ]/T = g . En déduire une manière de mesurer g avec avantage. La réciproque est-elle vraie(**), c'est à dire : si l'accélération discrète est constante, le mouvement discret est-il celui de Galilée ?


'''solution expérimentation : '''
 
Comme la vitesse Vo n'intervient pas,cela se vérifie d'ailleurs aisément, il reste en prenant t2 comme origine,

z3-2z2+z1 = 1/2.g[(t2+T)² -2(t2)² + (t2-T)²] = 1/2. g [ 2 T²].

On appelle dérivée discrète seconde au point z2 , la quantité (z3-2z2+z1)/T² .

On constate qu'elle vaut g , ceci quel que soit z2 et T !

(**)Et réciproquement, une suite récurrente z(n+1) = 2 z(n) - z(n-1) + Go(T)² est effectivement une suite du type z(n) = ½Go (n.T)² + A (n.T) + B.

Tout ceci permet d'intéressantes comparaisons expérimentales et permet de valoriser certains TP(travaux pratiques). Admettons par exemple que la caméra donne 25+1 photos sur une seconde (soit une chute de 5m devant une règle graduée): Voici une méthode parmi d'autres, via un logiciel de traitement de données : la caméra a donné la k-ième photo au temps k/25 . 
Donc, on possède un '''tableau de valeurs numériques''', 26 valeurs de l'abscisse z(k) au temps t(k). De ces 26 valeurs, il faut tirer une valeur de g. C'est de manière très usuelle le problème d'un TP : la théorie est faite. On veut la vérifier et en tirer la valeur d'un paramètre du problème, au mieux.

Pour cela, on calcule les 24 dérivées discrètes. Par exemple, pour calculer a(4) on calcule les valeurs sensiblement identiques : (z(0)-2z(4)+z(8))/16 ; (z(1)-2z(4)+z(7))/9 ; (z(2)-2z(4)+z(6))/4 ; (z(3)-2z(4)+z(5))/1 ; et on extrapolera. On portera alors ces valeurs a(k) en fonction de v(k)² [avec les v(k) calculées de même façon ]: la courbe est &quot;sensiblement linéaire&quot; : son extrapolation pour les faibles vitesses donne LA valeur de g. On a ainsi défini une '''procédure algorithmique''', qui, éventuellement, peut s'automatiser.
Les résultats d'une classe (2 *2* 12 élèves) sont honnêtes et valent bien le résultat obtenu avec le pendule réversible, dit de Kater. Ne pas espérer 3 ChS (chiffres significatifs) ! 

D'autres dispositifs équipés de photodiodes donnent le temps de passage à telle ou telle altitude (t(k) = T(z(k)) ). Certaines méthodes lancent le projectile vers le haut ; il retombe ; au passage il a coupé les deux faisceaux de deux photodiodes distantes de H, aux temps t1, t2, t3, et t4. On forme les deux durées D1 = t4-t1 et D2 = t3-t2. Montrer que g = 8H / (D1²-D2²). 

'''note''' : Actuellement(2015), la méthode de chute libre est utilisée mais en faisant tomber &quot;le coin de cube d'un Michelson&quot;, servant de miroir réflecteur : les franges défilent et sont enregistrées. On arrive à une précision relative de 11 ChS(Chiffres Significatifs), depuis la mise au point du dispositif par Sakuma, en 1970, au BIPM (Bureau International des Poids et mesures , installé au parc de Saint-Cloud, Paris).Inutile de dire qu'il faut de multiples précautions. 

Une autre méthode consiste à laisser tomber un &quot;atome-froid&quot; , et on étudie sa fonction d'onde quantique :précision , 10^(-12).

La gravimétrie est donc devenue une science très précise, utilisée par les géologues. Voir plus loin, leçon sur la gravimétrie (de niveau nettement plus élevé).

----

=== Un raisonnement de Torricelli(**)===
 
Galilée défendit la thèse suivante, appelée depuis Principe de Relativité galiléenne : si un bateau se déplace à la vitesse constante Vo, alors on ne peut pas s'en apercevoir depuis l'intérieur du bateau ; on pourrait continuer à jouer au ping-pong, à faire de la GRS, etc. RIEN ne permet de distinguer le mouvement du bateau. &quot;Un mouvement uniforme , c'est comme RIEN &quot;. Familièrement, on dirait aujourd'hui, ça compte pour du beurre. 

Torricelli(1608-1647) est le premier à avoir appliqué ce principe à la chute libre. 

*[ '''''Note historique''''' : dans son deMotu, 1641,il l'a signalé à Castelli (1577-1644) , qui en rendit compte à Galilée. Galilée , très admiratif, demanda à Torricelli de devenir son élève, en 1641 ; bien que très fier d'être choisi, Torricelli était mort de trouille, à cause de l'Inquisition : rappelons que dire du mouvement de la Terre, c'est comme rien , revenait à accréditer la thèse de Copernic. Or le Vatican venait de condamner cette thèse en 1618 ].

Torricelli '''admet''' que z(t) = h(t)+Vot+Zo , avec h(t) fonction inconnue, mais indépendante de Zo ET de Vo. Ce faisant, il admet beaucoup. Mais alors, grâce au principe de relativité, montrer que h(t) = kt²

'''solution :'''
  
Commençons par le résultat suivant :
 
si le mouvement d'un corps chutant au départ comme z = 1/2.g.t² est avec une nouvelle origine des temps, z = f(t, Zo, Vo)= 1/2 gt² + Vot +Zo , 

alors à un instant T1, il sera en Z1 = f(T1, Zo, Vo) avec la vitesse V1 = g.T1 + Vo. 

Puisque la vitesse V1 joue à cet instant '''le même rôle''' que Vo à l'instant t=0 pris pour origine, Torricelli dit que :
z= f(t+T1, Zo, Vo) = f(t,Z1, V1), avec la même fonction f(., . , .), soit :
 
1/2 g (t+T1)² + Vo.(t+T1) + Zo = ? = 1/2 g.t² + V1.t + Z1 ,
avec V1 = g.T1 + Vo et Z1 = 1/2 g.T1² + Vo.T1 + Zo :

Après simplification, Zo s'élimine ainsi que Vo.t , puis Vo.T1 .
Il reste à vérifier : 

1/2 g (t+T1)² = ? = 1/2 g.t² + g.T1.t + 1/2 g.T1² , ce qui est vrai.

'''Mais ce n'est pas la réponse demandée''' ! bien que cela soit perçu par beaucoup d'étudiants comme la bonne réponse ! le calcul est en effet pertinent et exact; mais il ne répond pas à la question ! On ne fait que vérifier l'auto-pertinence de la formule, mais on ne démontre pas h(t) = k t² !  

Voici ce que Torricelli a dit :

z = h(t+T1) + Zo + Vo.(t + T1) = h(t)+ Z1 + V1.t , ceci quel que soit t , avec Z1 = h(T1) + Zo + Vo.T1 , et avec V1 = h'(T1) + Vo (exprimé en formalisme moderne). Ce qui conduit à l'équation fonctionnelle:

h(t+T1) = h(t) + h(T1) + h'(T1).t , 

pour tout t et pour tout T1.

Alors , par symétrie de rôle de t et de T1 , on peut écrire :

h(t+T1) = h(T1) + h(t) + h'(t).T1

ce qui conduit à h'(t).T1 = h'(T1).t et donc h'(t)/t = h'(T1)/T1 = cste donc , appelons-la ...g ! Alors h'(t) = g.t

'''La vitesse ne pouvait être que linéaire en t'''.

Du reste, si on prend l'origine du référentiel galiléen tangent à l'instant de départ , donc avec une vitesse nulle, cela paraît &quot;naturel&quot; ! Remarquable raisonnement de Torricelli en 1641(De Motu).

Au final, si h'(t) = g.t , h(t) = 1/2.g.t² :

Rappelons ce qui a été utilisé : l'invariance galiléenne et l'invariance du mouvement par translation (ce qui revient à dire : pesanteur constante).

Il est évident que Galilée fût ravi que son ami Castelli eût un élève aussi doué ! D'autant que Torricelli n'avait pas ces notations modernes !
----
'''Un autre joli raisonnement de Torricelli(1647) :''' 
à la veille de sa mort, Torricelli possédait très bien la relation v² = 2 gx , et même v² - vo² = 2g ( z-zo ). Voici ce qu'il disait du cas g(z) , pesanteur non uniforme. Lâchons une pierre sur une hauteur 2H , où sur le premier intervalle H , g = g1 , et sur le deuxième g = g2 . Trouver la vitesse finale . Généraliser à 3 intervalles , puis N intervalles . Conclure si g = g(z) , v² = 2∫ g(z) dz . 

réponse : sur le premier intervalle , v1² = 2 g1 H ; sur le deuxième , la vitesse s'accroît et devient telle que v2² = v1² + 2 g2 H = 2 ( g1+ g2 ) H .
Ceci se généralise en v(nH)² = 2 ( somme des gi ) Δz . Ce que des étudiants de L1 comprendront vite comme v² = 2 ∫ g(z) dz . Malheureusement, Torricelli , qui vient de publier un livre de stéréotomie ( la découpe des pierres ), et qui a parfaitement maîtrisé l'enseignement de son maître, Cavalieri , meurt subitement en 1647 . Mersenne meurt peu après. Et Pascal ne saura pas récupérer cet héritage ; ni Fermat ; ni Huygens ; dommage...il s'agissait des prémisses du calculus.

== Exercices, deuxième série ==


=== exPseudoparadoxe de la vitesse nulle(**) ===
Marin Mersenne (1588-1648) [un des plus célèbres correspondants scientifiques de l'époque] n'arrivait pas à comprendre la loi V = g.t , car disait-il, si V = 0 au départ , le plomb ne peut pas avancer ! Huygens(à 17ans!) lui répondit(1646). Imaginer sa lettre de réponse.

Mersenne ne comprenait pas non plus v² = 2gx , et en x=0, v est nulle. Donc le mobile n'avance pas.

''' Solution :  '''
Essentiellement, le jeune Huygens répondit que la loi générale était V = Vo + gt , même si Vo est négatif (la pierre est lancée vers le haut) : la loi est tout aussi vraie , mais c'est une loi affine dans ce cas, avec '''vraiment rien de particulier''' au moment où V(t) = Vo. Au sommet de la parabole du diagramme horaire, il ne se passe donc strictement rien de particulier, même si ce point fût l'objet de spéculations intellectuelles très passionnées, pour savoir si le temps passé en ce point était FINI.

Torricelli, lui, invoquera le raisonnement suivant : par invariance galiléenne, on peut se placer dans n'importe quel référentiel de vitesse Vo ; alors le sommet du diagramme horaire est n'importe quel point. Le &quot;sommet&quot; devient un point ordinaire ; ainsi on a banalisé ce point. Alors, plus personne n'a d'objection ; on dit qu'on a &quot;réduit&quot; le pseudo-paradoxe. Progressivement, avec les siècles, la question n'est même plus soulevée.'''Les contradicteurs sont morts'''. 

La deuxième question est plus délicate, pour l'époque : si v(x) = sqrt( 2gx ) , comment l'intégrer ? De nos jours, on dit l'équation est de Cauchy-Lipschitz, et le tour est joué. En 1620, dt = dx/sqrt(2gx) n'est pas encore intégrable en t = sqrt(2x/g).

Quelques années auparavant, la confusion v(x) ou v(t) est bien plus grande. Il faut bien voir que la notion de fonction n'est pas affermie. On a des tableaux numériques : à t(k) correspond z(k). On peut en faire des tableaux de différences, les Δt et les Δx. Puis dt/dx ( càd 1/v ) fonction de t ou de x ? Pourquoi est-ce v =dx/dt = f(t) qui s'impose ; et non pas 1/v = f(x) ? Ces questions n'ont rien d'anodin. Galilée s'est fait piéger. Descartes aussi. La science cafouille souvent , mais progresse ! 
----------------------------------------------------------

=== ex_sur la loi de Sarpi(***) ===
La loi de Galilée dans son deuxième énoncé semble absurde : quelle que soit la masse du corps, le corps tombe de la même manière dans le vide !  Question 1 : la lumière(c'est-à-dire un photon) tombe-t-elle dans le vide ? Question 2 : l'air tombe-t-il ? 

'''Solution : '''
Oui ! ce sont des questions un peu shadok, quasi-impertinentes ! Mais il convient de les poser.

'''Question 1 :'''  oui , la lumière tombe dans le vide, MAIS ce n'est pas sa vitesse qui change , puisqu'elle reste immuable : c = 299 792 458 m/s. C'est son impulsion ; il vaut mieux parler de photon : ainsi l'impulsion du photon change, c'est parfaitement vérifié aujourd'hui (il faut en tenir compte dans l'envoi des signaux [[w:GPS|GPS]], sous peine de voir la qualité des résultats être entâchée d'une erreur systématique). Par ailleurs, l'énergie change corrélativement, c'est le red-shift gravitationnel d'Einstein, vérifié lui aussi. 

'''Question 2 :''' oui bien sûr , une molécule de dioxygène tombe. Si l'air globalement ne tombe pas , c'est qu'il est déjà tombé depuis longtemps : on sait bien que l'air est situé essentiellement à basse altitude ; mais précisément comme il y en a plus en bas qu'en haut, la '''diffusion thermique''' en fait plus remonter du bas vers le haut que du haut vers le bas ; ce que nous voyons est l'équilibre dynamique stationnaire entre ces deux phénomènes : la chute vers le bas et la diffusion globalement vers le haut (Einstein,1905). On peut relire l'explication magnifique de Feynman , dans Lectures on physics.

== À quoi est due la pesanteur ? ==
Bonne question !

La pesanteur est essentiellement due à l'attraction terrestre et partiellement au pivotement de la Terre ( et encore un peu à tous les Astres, mais usuellement, on met cette partie dans &quot;l'action de marée&quot; ).

Il est hors de question dans cette première leçon de parler de la gravimétrie.

Pour faire simple, on peut dire ceci : si la Terre était sphérique et ne pivotait pas, alors la pesanteur se réduirait à une attraction (verticale par définition), centrale ( c'est à dire dirigée vers le centre O de la Terre) de valeur : G.M / r² = g(r)  (théorème dit ''remarquable'' de Newton, 1685 ); comme la Terre pivote, elle s'aplatit légèrement en forme de géoïde (aplatissement =~ 1/298), et la gravité est légèrement plus élevée au pôle qu'à l'équateur.

Cavendish(1731-1810) mesurera G en 1798 avec énormément de difficulté : G = 6.67 10^-11 N.m²/kg² environ. On en déduit la valeur de la masse de la Terre si l'on connaît son rayon : M = ~6 10^24 kg . Truc mnémotechnique , retenir que la masse_volumique de la Terre est intermédiaire entre celle de l'eau (1kg/L) et dix fois plus (10kg/L) , soit 5.5 kg/L . 

Ceci dit, à quoi est due l'attraction de la Terre, cette étrange action à distance ? '''Newton''', après y avoir réfléchi longtemps, déclara forfait : ''hypotheses non fingo'', je ne fais aucune hypothèse. Il la posa comme postulat, il en généralisa la portée. Il en formula toutes les conséquences. Il fondait ainsi une discipline, la mécanique dite &quot;rationnelle&quot; qui sera, pour des siècles et des siècles, la discipline-phare des sciences physiques. '''Euler, Lagrange, Hamilton, Poincaré''' et des milliers d'autres poursuivront les travaux de '''Newton'''. Puis '''Einstein''', en 1915, donna une interprétation de l'attraction gravitationnelle, en termes géométriques : la matière distord l'espace-temps, et tous calculs faits, on retrouve dans le cas de faible distorsion, la loi de Newton. Satisfaisant, mais cette théorie ne cadre pas encore avec la ''mécanique quantique''. La science doit continuer à progresser.

== Retour ==

Rappel : la page de discussion contient pas mal de matériaux bibliographiques.

*[[Mécanique, enseignée via l'Histoire des Sciences|Mécanique , enseignée via l'Histoire des Sciences]]

[[Catégorie:Mécanique, enseignée via l'Histoire des Sciences (livre)]]</text>
      <sha1>fe12h2ychb7cqkitaswhqa5x8ikceer</sha1>
    </revision>
  </page>
  <page>
    <title>Programmation D/Avant de commencer</title>
    <ns>0</ns>
    <id>39286</id>
    <revision>
      <id>683834</id>
      <parentid>478927</parentid>
      <timestamp>2022-08-21T19:04:29Z</timestamp>
      <contributor>
        <username>CaféBuzz</username>
        <id>105870</id>
      </contributor>
      <minor />
      <comment>/* Introduction */ ajout du paradigme fonctionnel</comment>
      <model>wikitext</model>
      <format>text/x-wiki</format>
      <text bytes="5716" xml:space="preserve">&lt;noinclude&gt;{{Programmation D}}&lt;/noinclude&gt;
{{Wikipédia|D (langage)}}
== Introduction ==

Le langage D est un langage de programmation système qui se présente comme le successeur des langages C et C++. Son objectif est d'allier la puissance du C et du C++ à la simplicité et à la productivité de langages comme Ruby et Python. Le célèbre slogan lié à ce langage est :

''Si un langage peut récupérer 90 % de la puissance du C++ mais seulement 10 % de sa complexité, cela vaut largement le coup.

Walter Bright''

Les paradigmes supportés par ce langage sont les suivants :
* [[w:Programmation impérative|impératif]]
* [[w:Programmation orientée objet|orienté objet]]
* [[w:Programmation fonctionnelle|fonctionnel]]
* [[w:Méta-programmation|méta-programmation]]
* [[w:Programmation par contrat|programmation par contrat]]

== À qui s'adresse ce langage ? ==

* Aux programmeurs qui sont lassés d'utiliser des analyseurs de codes ou des outils similaires pour réussir à éliminer des bogues
* À tout ceux qui en ont assez des messages d'erreurs incompréhensibles lors de la compilation de code C++
* À tout ceux qui veulent utiliser la programmation objet sans avoir la complexité du C++
* Aux codeurs qui aiment la puissance du C++ mais qui sont frustrés par le temps de débogage nécessaire
* À ceux qui veulent intégrer les tests unitaires et activer des sections de code en mode débogage
* Aux équipes qui écrivent des applications avec un million de lignes de code
* Aux développeurs qui pensent que le langage doit fournir suffisamment de fonctionnalités pour pallier la nécessité de continuer à manipuler les pointeurs
* Aux programmeurs qui ont besoin de manipulations avancées sur les nombres. Le langage D intègre de nombreuses fonctionnalités pour cela
* Aux équipes qui doivent écrire en partie leurs applications dans des langages de script comme Python et Ruby pour gagner du temps de développement

=== À qui ne s'adresse pas ce langage ? ===

Aux puristes. D est un langage orienté pratique et non théorique, chaque fonctionnalité est pensée avec cet objectif plutôt qu'un idéal théorique. Par exemple, D est construit et fournit une sémantique de façon à éliminer la nécessité de l'utilisation des pointeurs pour les tâches ordinaires. Mais les pointeurs sont toujours là, parce que leur utilisation reste parfois obligatoire.

== Ce dont vous avez besoin ==

{{paquet|fedora=ldc tango-devel|ubuntu=ldc libtango-ldc-dev}}

Sous GNU/Linux, utilisez votre gestionnaire de paquets pour installer
* Le compilateur ''ldc''
* La bibliothèque standard du langage D ''tango-devel''

=== Fedora 14 ===

La célèbre distribution Fedora garde un temps d'avance sur ses concurrentes. En effet elle propose à ses utilisateurs un environnement de travail pour le langage D dernier cris. De nombreux jours de travail ont permis des améliorations significatives autour de ce langage. Et comme à son habitude fedora vous propose les dernières versions de ces outils. Avec un compilateur basé sur LLVM nommé ldc et une bibliothèque standard pour développer des applications en D : tango. Contrairement aux autres distributions les outils sont pleinement fonctionnels et activement maintenu. De plus le travail de la communauté Fedora ne se sont pas arrêté en si bon chemin ils ont intégrés également :
* la bibliothèque mango qui tourne autour du réseau
* la bibliothèque derelict qui permet de développer des applications [[w:OpenGL|OpenGL]] en D

== Les éditeurs pour programmer en D ==

=== Emacs ===

Pour cela, vous avez besoin de ce fichier: [[Fichier pour ajouter le support D dans Emacs]].

# Démarrer emacs, puis faites &quot;ouvrir&quot; ou &quot;créer un fichier D&quot;
# Taper M-x (méta x soit alt + x)
# Entrer d-mode (valider avec la touche entrée)

=== Gedit ===

Gedit ne requiert par de paramétrage particulier pour programmer en D; le langage D est  nativement reconnu, ce qui active automatiquement la coloration syntaxique.

=== Scite ===
Il possède lui aussi la coloration syntaxique. Petite particularité: l'explorateur de fichier possède un filtre pour les fichiers sources et ne considère pas les fichiers .d comme tels ! Par conséquent, vous ne pouvez pas les voir. Il suffit de permuter le filtre sur &quot;tout fichier&quot;.

=== Vim ===
Ce célèbre éditeur n'a rien à envier à ses semblables et propose lui aussi nativement la coloration syntaxique pour le langage D.

=== Geany ===

Geany supporte nativement la coloration syntaxique et il est possible de lui faire utiliser ldc.

=== Code::blocks ===

Cet IDE supporte le langage D et propose l'auto-complétion et quelques autres fonctionnalités. Le compilateur ldc est supporté à partir de la révision 6562.

====Pour Fedora====
Installer le dépôt codeblocks (merci à sharkcz's ) suivant votre version de Fedora:
* [http://fedora.danny.cz/danny/danny-release-12-1.noarch.rpm fedora 12|en]
* [http://fedora.danny.cz/danny/danny-release-13-1.noarch.rpm fedora 13|en]
* [http://web.archive.org/web/20110722061042/http://fedora.danny.cz/danny/danny-release-14-1.noarch.rpm fedora 14|en]

=== Eclipse et le plugin DDT ===

À travers ce plugin, on retrouve le confort de l'utilisation d'un IDE supportant le langage D. Tout comme Code::blocks, il ne supporte pas nativement le compilateur ldc. 
Vous pouvez consulter la [http://code.google.com/a/eclipselabs.org/p/ddt/wiki/UserGuide documentation pour installer et configurer DDT].

== Pour exécuter un programme ==

Si le programme source se nomme '''toto.d''' et se trouve dans votre répertoire courant, les deux lignes suivantes permettent de le compiler puis de l'exécuter:
&lt;pre&gt;
$ gdc toto.d 
$./a.out
&lt;/pre&gt;</text>
      <sha1>23sitmu39uzv4t2b7b980hlti0jf1ir</sha1>
    </revision>
  </page>
  <page>
    <title>Les cartes graphiques/Les unités de gestion de la géométrie</title>
    <ns>0</ns>
    <id>67393</id>
    <revision>
      <id>683835</id>
      <parentid>660038</parentid>
      <timestamp>2022-08-22T08:22:22Z</timestamp>
      <contributor>
        <ip>37.160.45.202</ip>
      </contributor>
      <comment>/* Tesselation */</comment>
      <model>wikitext</model>
      <format>text/x-wiki</format>
      <text bytes="21834" xml:space="preserve">Nous allons maintenant voir les circuits chargés de gérer la géométrie. Il existe deux grands types de circuits chargés de traiter la géométrie : l'input assembler charge les Sur les cartes graphiques assez anciennes, ce cache est souvent très petit, à peine 30 à à 50 sommets. Pour profiter le plus possible de ce cache, les concepteurs de jeux vidéo peuvent changer l'ordre des sommets en mémoire.s depuis la mémoire vidéo, et les circuits de traitement de vertices les traitent. Ceux-ci effectuent plusieurs traitements, qui peuvent être synthétisés en trois grandes étapes.

* La première étape de traitement de la géométrie consiste à placer les objets au bon endroit dans la scène 3D. Lors de la modélisation d'un objet, celui-ci est encastré dans un cube : un sommet du cube possède la coordonnée (0, 0, 0), et les vertices de l'objet sont définies à partir de celui-ci. Pour placer l'objet dans la scène, il faut tenir compte de sa localisation, calculée par le moteur physique : si le moteur physique a décrété que l'objet est à l'endroit de coordonnées (50, 250, 500), toutes les coordonnées des sommets de l'objet doivent être modifiées. Pendant cette étape, l'objet peut subir une translation, une rotation, ou un gonflement/dégonflement (on peut augmenter ou diminuer sa taille). C'est la première étape de calcul : l''''étape de transformation'''.
* Ensuite, les sommets sont éclairées dans une '''phase de lightning'''. Chaque Sur les cartes graphiques assez anciennes, ce cache est souvent très petit, à peine 30 à à 50 sommets. Pour profiter le plus possible de ce cache, les concepteurs de jeux vidéo peuvent changer l'ordre des sommets en mémoire. se voit attribuer une couleur, qui définit son niveau de luminosité : est-ce que le sommet est fortement éclairée ou est-elle dans l'ombre ?
* Vient ensuite une '''phase de traitement de la géométrie''', où les sommets sont assemblés en triangles, points, lignes, en polygones. Ces formes géométriques de base sont ensuite traitées telles quelles par la carte graphique. Sur les cartes graphiques récentes, cette étape peut être gérée par le programmeur : il peut programmer les divers traitements à effectuer lui-même.

==L'''input assembler''==

L'''input assembler'' charge les informations géométriques, présentes dans en mémoire vidéo, dans les unités de traitement des sommets. C'est une unité d'accès mémoire un peu particulière, mais qui contient des circuits assez classiques pour ce genre de circuits : des circuits de calcul d'adresse, des circuits pour commander la mémoire VRAM, un contrôleur mémoire, diverses mémoires tampons, etc. Pour faire son travail, il a besoin d'informations mémorisées dans des registres, à savoir l'adresse des données géométriques en mémoire, leur taille et éventuellement du type des données qu'on lui envoie (sommets codées sur 32 bits, 64, 128, etc).

[[File:Input assembler.png|centre|vignette|upright=2.0|Input assembler]]

Avant leur traitement, les objets géométriques présents dans la scène 3D sont mémorisés dans la mémoire vidéo, sous une forme plus ou moins structurée. Rappelons que les objets 3D sont représentés comme un assemblage de triangles collés les uns aux autres, l'ensemble formant un maillage. La position d'un triangle est déterminée par la position de chacun de ses sommets. Avec trois coordonnées x, y et z pour un sommet, un triangle demande donc 9 cordonnées. De plus, il faut ajouter des informations sur la manière dont les sommets sont reliés entre eux, quel sommet est relié à quel autre, comment les arêtes sont connectées, etc. Toutes ces informations sont stockées dans un tableau en mémoire vidéo : le '''tampon de sommets'''.

[[File:Cube colored.png|vignette|Cube en 3D]]

Le contenu du tampon de sommet dépend de la représentation utilisée. Il y a plusieurs manières de structure les informations dans le tampon de sommet, qui ont des avantages et inconvénients divers. Toutes ces représentations cherchent à résoudre un problème bien précis : comment indiquer comment les sommets doivent être reliés entre triangles. Le point crucial est qu'un sommet est très souvent partagé par plusieurs triangles. Par exemple, prenez le cube de l'image ci-contre. Le sommet rouge du cube appartient aux 3 faces grise, jaune et bleue, et sera présent en trois exemplaires dans le tampon de sommets : un pour la face bleue, un pour la jaune, et un pour la grise. Pour éviter ce gâchis, les concepteurs d'API et de cartes graphiques ont inventé des représentations pour les maillages, qui visent à limiter la consommation de mémoire ou faciliter la traversée du tampon de sommet.

===Les techniques anciennes : ''Triangle strip'' et ''Triangle fan''===

Pour gérer le partage des sommets entre triangles, la représentation la plus simple est appelée le '''maillage sommet-sommet''' (''Vertex-Vertex Meshes''). L'idée est que chaque sommet précise, en plus de ses trois coordonnées, quels sont les autres sommets auxquels il est relié. Les sommets sont regroupés dans un tableau, et les autres sommets sont identifiés par leur position dans le tableau, leur indice. Les informations sur les triangles sont implicites et doivent être reconstruites à partir des informations présentes dans le tampon de sommets. Autant dire que niveau praticité et utilisation de la puissance de calcul, cette techniques est peu efficace. Par contre, le tampon de sommet a l'avantage, avec cette technique, d'utiliser peu de mémoire. Les informations sur les arêtes et triangles étant implicites, elles ne sont pas mémorisées, ce qui économise de la place.

[[File:Vertex-Vertex Meshes (VV).png|centre|vignette|upright=1.5|Vertex-Vertex Meshes (VV)]]

Dans la représentation précédente, les arêtes sont présentes plus ou moins directement dans le tampon de sommets. Mais il existe des méthodes pour que les informations sur les arêtes soient codées de manière implicite. L'idée est que deux sommets consécutifs dans le tampon de sommet soient reliés par une arête. Ainsi, les informations sur les arêtes n'ont plus à être codées dans le tampon de sommet, mais sont implicitement contenues dans l'ordre des sommets. Ces représentations sont appelées des ''Corner-tables''. Dans le domaine du rendu 3D, deux techniques de ce genre ont été utilisées : la technique du ''triangle fans'' et celle des ''triangle strips''.

La technique des '''triangles strip''' permet d'optimiser le rendu de triangles placés en série, qui ont une arête et deux sommets en commun. L'optimisation consiste à ne stocker complètement que le premier triangle le plus à gauche, les autres triangles étant codés avec un seul sommet. Ce sommet est combiné avec les deux derniers sommets chargés par l'input assembler pour former un triangle. Pour gérer ces triangles strips, l'input assembler doit mémoriser dans un registre les deux derniers sommets utilisées. En mémoire, le gain est énorme : au lieu de trois sommets pour chaque triangle, on se retrouve avec un sommet pour chaque triangle, sauf le premier de la surface.

[[File:Triangle strip.png|centre|vignette|Triangle strip]]

La technique des '''triangles fan''' fonctionne comme pour le triangles strip, sauf que le sommet n'est pas combiné avec les deux sommets précédents. Supposons que je crée un premier triangle avec les sommets v1, v2, v3. Avec la technique des triangles strips, les deux sommets réutilisés auraient été les sommets v2 et v3. Avec les triangles fans, les sommets réutilisés sont les sommets v1 et v3. Les triangles fans sont utiles pour créer des figures comme des cercles, des halos de lumière, etc.

[[File:Triangle fan.png|centre|vignette|upright=2.0|Triangle fan]]

===Le tampon d'indices===

Enfin, nous arrivons à la dernière technique, qui permet de limiter l'empreinte mémoire tout en facilitant la manipulation de la géométrie. Cette technique est appelée la '''représentation face-sommet'''. Elle consiste à stocker les informations sur les triangles et sur les sommets séparément. Le tampon de sommet contient juste les coordonnées des sommets, mais ne dit rien sur la manière dont ils sont reliés. Les informations sur les triangles sont quand à elles, non pas reconstituées à la volée, mais mémorisées dans un tableau séparé. Ce dernier est appelé le ''tampon d'indices'' et n'est rien de plus qu'une liste de triangles.

Chaque triangle dans le tampon d'indices est codé non pas par ses trois coordonnées, mais par trois indices. Un indice est tout simplement un numéro qui indique la position du sommet dans le tampon de sommet. On pourrait se demander pourquoi ne pas utiliser les coordonnées du sommet directement. La raison est que les sommets étant partagés entre plusieurs triangle, il y aurait beaucoup de redondance. Si un sommet est partagé entre N triangles, les coordonnées du sommets seraient copiés en N exemplaires. Avec la technique du tampon d'indice, les coordonnées sont codées en un seul exemplaire, mais le tampon d'indice contiendra N exemplaires de l'indice. Dit comme cela, on ne voit pas vraiment où se trouve le gain en mémoire. On se retrouve avec deux tableaux : un pour les indices, un pour les vertices. Sauf qu'un indice prend moins de place qu'un sommet : entre un indice et trois coordonnées, le choix est vite fait. Et entre 7 exemplaires d'un sommets, et 7 exemplaire d'un indice et un sommet associé, le gain en mémoire est du côté de la solution à base d'index.

: On pourrait remplacer les indices par des pointeurs, ce qui donnerait un cas particulier d'une structure de données connue sous le nom de vecteur de Liffe. Mais ce n'est pas très pratique et n'est pas utilisé dans le domaine du rendu 3D.

[[File:Mesh fv.jpg|centre|vignette|upright=2|Représentation face-sommet.]]

Avec un tampon d'indices, un sommet peut être chargé plusieurs fois depuis la mémoire vidéo. Pour exploiter cette propriété, les cartes graphiques intercalent une mémoire cache pour mémoriser les sommets déjà chargés : le '''cache de sommets'''. Chaque sommet est stocké dans ce cache avec son indice en guise de Tag. Sur les cartes graphiques assez anciennes, ce cache est souvent très petit, à peine 30 à à 50 sommets. Pour profiter le plus possible de ce cache, les concepteurs de jeux vidéo peuvent changer l'ordre des sommets en mémoire.

[[File:Vertex cache.png|centre|vignette|upright=2.0|Cache de sommets.]]

==Transformation==

Chaque sommet appartient à un objet, dont la surface est modélisée sous la forme d'un ensemble de points. Chaque point est localisé par rapport au centre de l'objet qui a les coordonnées (0, 0, 0). La première étape consiste à placer cet objet aux coordonnées (X, Y, Z) déterminées par le moteur physique : le centre de l'objet passe des coordonnées (0, 0, 0) aux coordonnées (X, Y, Z) et tous les sommets de l'objet doivent être mis à jour. De plus, l'objet a une certaine orientation : il faut aussi le faire tourner. Enfin, l'objet peut aussi subir une mise à l'échelle : on peut le gonfler ou le faire rapetisser, du moment que cela ne modifie pas sa forme, mais simplement sa taille. En clair, l'objet subit une translation, une rotation et une mise à l'échelle.

Ensuite, la carte graphique va effectuer un dernier changement de coordonnées. Au lieu de considérer un des bords de la scène 3D comme étant le point de coordonnées (0, 0, 0), il va passer dans le référentiel de la caméra. Après cette transformation, le point de coordonnées (0, 0, 0) sera la caméra. La direction de la vue du joueur sera alignée avec l'axe de la profondeur (l'axe Z).

Toutes ces transformations ne sont pas réalisées les unes après les autres. À la place, elles sont toutes effectuées en un seul passage. Pour réussir cet exploit, les concepteurs de cartes graphiques et de jeux vidéos utilisent ce qu'on appelle des matrices, des tableaux organisés en lignes et en colonnes avec un nombre dans chaque case. Le lien avec la 3D, c'est qu'appliquées sur le vecteur (X, Y, Z) des coordonnées d'un sommet, la multiplication par une matrice peut simuler des translations, des rotations, ou des mises à l'échelle. Il existe des matrices pour la translation, la mise à l'échelle, d'autres pour la rotation, etc. Et mieux : il existe des matrices dont le résultat correspond à plusieurs opérations simultanées : rotation ET translation, par exemple. Autant vous dire que le gain en terme de performances est assez sympathique.

Mais les matrices qui le permettent sont des matrices avec 4 lignes et 4 colonnes. Et pour multiplier une matrice par un vecteur, il faut que le nombre de coordonnées dans le vecteur soit égal au nombre de colonnes. Pour résoudre ce petit problème, on ajoute une 4éme coordonnée, la coordonnée homogène. Pour faire simple, elle ne sert à rien, et est souvent mise à 1, par défaut.

Les anciennes cartes graphiques contenaient un circuit spécialisé dans ce genre de calculs, qui prenait un sommet et renvoyait le sommet transformé. Il était composé d'un gros paquet de multiplieurs et d'additionneurs flottants. Pour plus d'efficacité, certaines cartes graphiques comportaient plusieurs de ces circuits, afin de pouvoir traiter plusieurs sommets d'un même objet en même temps.

==Eclairage==

Seconde étape de traitement : l'éclairage. À la suite de cette étape d'éclairage, chaque sommet se voit attribuer une couleur, qui correspond à sa luminosité. Le calcul exact de cette couleur demande de calculer trois couleurs indépendantes, dont l'origine est différente, et qui ne proviennent pas des mêmes types de sources lumineuses. Par exemple, on peut simuler le soleil sans utiliser de source de lumière grâce à cette couleur. Il s'agit d'une source de '''lumière ambiante'''. Par simplicité, il est dit que celle-ci est égale en tout point de la scène 3D (d’où le terme lumière ambiante). Mais toute scène 3D contient aussi des sources de lumières, comme des lampes, des torches, etc. Celles-ci sont modélisées comme de simples points, qui ont une couleur bien précise (la couleur de la lumière émise) et émettent une intensité lumineuse codée par un entier. La lumière provenant de ces sources de lumière est appelée la '''lumière directionnelle'''.

{|
|[[File:Graphics lightmodel ambient.png|vignette|upright=1.0|Lumière ambiante.]]
|[[File:Graphics lightmodel directional.png|vignette|upright=1.0|Lumière directionnelle.]]
|}

* La '''couleur ambiante''' correspond à la lumière ambiante réfléchie par la surface. Celle-ci s'obtient simplement en multipliant la couleur ambiante de la surface par l'intensité de la lumière ambiante, deux constantes pré-calculées par les concepteurs du jeu vidéo ou du rendu 3D.
* les autres couleurs proviennent de la réflexion de a lumière directionnelle. Elles doivent être calculées par la carte graphique, généralement avec des algorithmes compliqués qui demandent de faire des calculs entre vecteurs.
** La '''couleur spéculaire''' est la couleur de la lumière réfléchie via la réflexion de Snell-Descartes.
** La '''couleur diffuse''' vient du fait que la surface d'un objet diffuse une partie de la lumière qui lui arrive dessus dans toutes les directions. Cette lumière « rebondit » sur la surface de l'objet et une partie s'éparpille dans un peu toutes les directions. La couleur diffuse ne dépend pas vraiment de l'orientation de la caméra par rapport à la surface. Elle dépend uniquement de l'angle entre le rayon de lumière et la verticale de la surface (sa normale).

[[File:Reflection models.svg|centre|vignette|Illustration de la dispersion de la lumière diffuse par une surface, suivant sa rugosité.]]

Ces couleurs sont additionnées ensemble pour donner la couleur finale du sommet. Chaque composante rouge, bleu, ou verte de la couleur est traitée indépendamment des autres.

[[File:Phong components version 4.png|centre|vignette|upright=3.0|Couleurs utilisées dans l'algorithme de Phong.]]

===Vecteurs nécessaires pour faire les calculs===

Les calculs de réflexion de la lumière demandent de connaitre l'orientation de la surface. Pour gérer cette orientation, le sommet est fourni avec une information qui indique comment est orientée la surface : la '''normale'''. Cette normale est un simple vecteur, perpendiculaire à la surface de l'objet, dont l'origine est le sommet. Autre paramètre d'une surface : son '''coefficient de réflexion'''. Il indique si la surface réfléchit beaucoup la lumière ou pas, et dans quelles proportions. Généralement, chaque point d'une surface a trois coefficient de réflexion fournis de base : un pour la couleur diffuse, un pour la couleur spéculaire, et un pour la couleur ambiante. Outre la normale et la brillance, il faut aussi connaitre l'angle entre la normale et le trajet surface-caméra (noté w dans le schéma ci-dessous).

[[File:Graphics lightmodel ptsource.png|centre|thumb|Normale de la surface.]]

La carte graphique a aussi besoin de l'angle avec lequel arrive un rayon lumineux sur la surface de l'objet. Cet angle dépend de l'orientation de la lumière et du point de surface considéré. Par orientation de la lumière, il faut savoir que la majorité des sources de lumière émet de la lumière dans une direction privilégiée, la lumière émise diminuant avec l'angle comparé à cette direction. Il existe bien quelques sources de lumière qui émettent de manière égale dans toutes les directions, mais nous passons cette situation sous silence. La direction privilégiée est notée v dans le schéma du dessous. Le trajet entre la source de lumière fait un certain angle par rapport à la direction privilégiée. Il faut donc avoir une formule qui donne l'intensité de la lumière en fonction de cet angle, angle noté L dans le schéma du dessous.

[[File:Graphics lightmodel spot.png|centre|thumb|Graphics lightmodel spot]]

À partir de ces informations, la carte graphique calcule l'éclairage. Les anciennes cartes graphiques, entre la Geforce 256 et la Geforce FX contenaient des circuits câblés capables d'effectuer des calculs d'éclairage simples. Cette fonction de calcul de l'éclairage faisait partie intégrante d'un gros circuit nommé le T&amp;L. Dans ce qui va suivre, nous allons voir l'algorithme d'éclairage de Phong, une version simplifiée de la méthode utilisée dans les circuits de T&amp;L.

===Calcul des couleurs spéculaire et diffuse===

[[File:Phong Vectors.svg|droite|thumb|Vecteurs utilisés dans l'algorithme de Phong (et dans le calcul de l'éclairage, de manière générale).]]

Sur la droite, vous voyez illustrés les vecteurs utiles dans le calcul de l'éclairage directionnel. De base, le vecteur L est dirigé vers la source de lumière, et sa norme est égale à l'intensité de la source de lumière (qu'on suppose connue). La normale est multipliée par la couleur diffuse du sommet, ce qui donne le vecteur de couleur diffuse. La couleur diffuse finale est calculée en effectuant le produit scalaire entre l'intensité de la source de lumière et le vecteur de couleur diffuse.

La lumière réfléchie directement par la surface est émise dans la direction R. Sa couleur est simplement égale à l'intensité de la lumière multipliée par la couleur spéculaire. Mais la caméra n'est pas forcément alignée avec cette direction. Pour calculer la lumière spéculaire, il faut prendre en compte l'angle que fait la caméra et la lumière réfléchie. Dans le schéma de droite, c'est l'angle entre les vecteurs R et V, que nous appellerons angle A. Pour calculer la couleur dans la direction V, il faut multiplier la couleur sur le rayon R par le carré du cosinus de l'angle A.

==Tesselation==

Certaines cartes graphiques gèrent des techniques de '''tessellation''', qui permettent d'ajouter des vertices. La position et la couleur de ces vertices sont calculées à la volée par la carte graphique. Cette tesselation permet ainsi d'obtenir un fort niveau de détail géométrique, sans pour autant remplir la mémoire vidéo de vertices pré-calculées. Ces techniques de tesselation vont décomposer chaque triangle de la géométrie en sous-triangles plus petits, ce qui demande d'ajouter des sommets, et vont modifier les coordonnées des sommets créés lors de ce processus.

[[File:Tesselation pipeline.svg|centre|vignette|upright=2.0|Tesselation.]]

La première carte graphique commerciale à intégrer de quoi faire de la tesselation était la Radeon 8500, de l'entreprise ATI (aujourd'hui rachetée par l'entreprise AMD). La technologie de tesselation en question était appelée la technologie TrueForm. Elle utilisait un circuit non-programmable, qui tesselait certaines surfaces et interpolait la forme de la surface entre les sommets. Le manque de versatilité de la technologie fi qu'elle n'a pas été beaucoup utilisée et est tombée en désuétude. La tesselation a eu un regain d'intérêt à l'arrivée des ''geometry shaders'' dans Direct X 10 et Open Gl 3.2. Et il y avait de quoi, de tels shaders pouvant en théorie implémenter des algorithmes de tesselation complexes sans trop de problèmes. Mais les limitations de ces shaders n'a pas permis leur usage pour de la tesselation généraliste. Il fallu attendre l'arrivée des tesselation shaders dans Open Gl 4.0 pour que des shaders adéquats arrivent sur le marché commercial.

{{NavChapitre | book=Les cartes graphiques
           | prev=Le processeur de commandes
           | prevText=Le processeur de commandes
           | next=Le rasterizeur
           | nextText=Le rasterizeur
}}{{autocat}}</text>
      <sha1>lshyubi4degizx2osf4fkrnj1qzmim2</sha1>
    </revision>
    <revision>
      <id>683836</id>
      <parentid>683835</parentid>
      <timestamp>2022-08-22T08:23:20Z</timestamp>
      <contributor>
        <ip>37.160.45.202</ip>
      </contributor>
      <comment>/* Calcul des couleurs spéculaire et diffuse */</comment>
      <model>wikitext</model>
      <format>text/x-wiki</format>
      <text bytes="21838" xml:space="preserve">Nous allons maintenant voir les circuits chargés de gérer la géométrie. Il existe deux grands types de circuits chargés de traiter la géométrie : l'input assembler charge les Sur les cartes graphiques assez anciennes, ce cache est souvent très petit, à peine 30 à à 50 sommets. Pour profiter le plus possible de ce cache, les concepteurs de jeux vidéo peuvent changer l'ordre des sommets en mémoire.s depuis la mémoire vidéo, et les circuits de traitement de vertices les traitent. Ceux-ci effectuent plusieurs traitements, qui peuvent être synthétisés en trois grandes étapes.

* La première étape de traitement de la géométrie consiste à placer les objets au bon endroit dans la scène 3D. Lors de la modélisation d'un objet, celui-ci est encastré dans un cube : un sommet du cube possède la coordonnée (0, 0, 0), et les vertices de l'objet sont définies à partir de celui-ci. Pour placer l'objet dans la scène, il faut tenir compte de sa localisation, calculée par le moteur physique : si le moteur physique a décrété que l'objet est à l'endroit de coordonnées (50, 250, 500), toutes les coordonnées des sommets de l'objet doivent être modifiées. Pendant cette étape, l'objet peut subir une translation, une rotation, ou un gonflement/dégonflement (on peut augmenter ou diminuer sa taille). C'est la première étape de calcul : l''''étape de transformation'''.
* Ensuite, les sommets sont éclairées dans une '''phase de lightning'''. Chaque Sur les cartes graphiques assez anciennes, ce cache est souvent très petit, à peine 30 à à 50 sommets. Pour profiter le plus possible de ce cache, les concepteurs de jeux vidéo peuvent changer l'ordre des sommets en mémoire. se voit attribuer une couleur, qui définit son niveau de luminosité : est-ce que le sommet est fortement éclairée ou est-elle dans l'ombre ?
* Vient ensuite une '''phase de traitement de la géométrie''', où les sommets sont assemblés en triangles, points, lignes, en polygones. Ces formes géométriques de base sont ensuite traitées telles quelles par la carte graphique. Sur les cartes graphiques récentes, cette étape peut être gérée par le programmeur : il peut programmer les divers traitements à effectuer lui-même.

==L'''input assembler''==

L'''input assembler'' charge les informations géométriques, présentes dans en mémoire vidéo, dans les unités de traitement des sommets. C'est une unité d'accès mémoire un peu particulière, mais qui contient des circuits assez classiques pour ce genre de circuits : des circuits de calcul d'adresse, des circuits pour commander la mémoire VRAM, un contrôleur mémoire, diverses mémoires tampons, etc. Pour faire son travail, il a besoin d'informations mémorisées dans des registres, à savoir l'adresse des données géométriques en mémoire, leur taille et éventuellement du type des données qu'on lui envoie (sommets codées sur 32 bits, 64, 128, etc).

[[File:Input assembler.png|centre|vignette|upright=2.0|Input assembler]]

Avant leur traitement, les objets géométriques présents dans la scène 3D sont mémorisés dans la mémoire vidéo, sous une forme plus ou moins structurée. Rappelons que les objets 3D sont représentés comme un assemblage de triangles collés les uns aux autres, l'ensemble formant un maillage. La position d'un triangle est déterminée par la position de chacun de ses sommets. Avec trois coordonnées x, y et z pour un sommet, un triangle demande donc 9 cordonnées. De plus, il faut ajouter des informations sur la manière dont les sommets sont reliés entre eux, quel sommet est relié à quel autre, comment les arêtes sont connectées, etc. Toutes ces informations sont stockées dans un tableau en mémoire vidéo : le '''tampon de sommets'''.

[[File:Cube colored.png|vignette|Cube en 3D]]

Le contenu du tampon de sommet dépend de la représentation utilisée. Il y a plusieurs manières de structure les informations dans le tampon de sommet, qui ont des avantages et inconvénients divers. Toutes ces représentations cherchent à résoudre un problème bien précis : comment indiquer comment les sommets doivent être reliés entre triangles. Le point crucial est qu'un sommet est très souvent partagé par plusieurs triangles. Par exemple, prenez le cube de l'image ci-contre. Le sommet rouge du cube appartient aux 3 faces grise, jaune et bleue, et sera présent en trois exemplaires dans le tampon de sommets : un pour la face bleue, un pour la jaune, et un pour la grise. Pour éviter ce gâchis, les concepteurs d'API et de cartes graphiques ont inventé des représentations pour les maillages, qui visent à limiter la consommation de mémoire ou faciliter la traversée du tampon de sommet.

===Les techniques anciennes : ''Triangle strip'' et ''Triangle fan''===

Pour gérer le partage des sommets entre triangles, la représentation la plus simple est appelée le '''maillage sommet-sommet''' (''Vertex-Vertex Meshes''). L'idée est que chaque sommet précise, en plus de ses trois coordonnées, quels sont les autres sommets auxquels il est relié. Les sommets sont regroupés dans un tableau, et les autres sommets sont identifiés par leur position dans le tableau, leur indice. Les informations sur les triangles sont implicites et doivent être reconstruites à partir des informations présentes dans le tampon de sommets. Autant dire que niveau praticité et utilisation de la puissance de calcul, cette techniques est peu efficace. Par contre, le tampon de sommet a l'avantage, avec cette technique, d'utiliser peu de mémoire. Les informations sur les arêtes et triangles étant implicites, elles ne sont pas mémorisées, ce qui économise de la place.

[[File:Vertex-Vertex Meshes (VV).png|centre|vignette|upright=1.5|Vertex-Vertex Meshes (VV)]]

Dans la représentation précédente, les arêtes sont présentes plus ou moins directement dans le tampon de sommets. Mais il existe des méthodes pour que les informations sur les arêtes soient codées de manière implicite. L'idée est que deux sommets consécutifs dans le tampon de sommet soient reliés par une arête. Ainsi, les informations sur les arêtes n'ont plus à être codées dans le tampon de sommet, mais sont implicitement contenues dans l'ordre des sommets. Ces représentations sont appelées des ''Corner-tables''. Dans le domaine du rendu 3D, deux techniques de ce genre ont été utilisées : la technique du ''triangle fans'' et celle des ''triangle strips''.

La technique des '''triangles strip''' permet d'optimiser le rendu de triangles placés en série, qui ont une arête et deux sommets en commun. L'optimisation consiste à ne stocker complètement que le premier triangle le plus à gauche, les autres triangles étant codés avec un seul sommet. Ce sommet est combiné avec les deux derniers sommets chargés par l'input assembler pour former un triangle. Pour gérer ces triangles strips, l'input assembler doit mémoriser dans un registre les deux derniers sommets utilisées. En mémoire, le gain est énorme : au lieu de trois sommets pour chaque triangle, on se retrouve avec un sommet pour chaque triangle, sauf le premier de la surface.

[[File:Triangle strip.png|centre|vignette|Triangle strip]]

La technique des '''triangles fan''' fonctionne comme pour le triangles strip, sauf que le sommet n'est pas combiné avec les deux sommets précédents. Supposons que je crée un premier triangle avec les sommets v1, v2, v3. Avec la technique des triangles strips, les deux sommets réutilisés auraient été les sommets v2 et v3. Avec les triangles fans, les sommets réutilisés sont les sommets v1 et v3. Les triangles fans sont utiles pour créer des figures comme des cercles, des halos de lumière, etc.

[[File:Triangle fan.png|centre|vignette|upright=2.0|Triangle fan]]

===Le tampon d'indices===

Enfin, nous arrivons à la dernière technique, qui permet de limiter l'empreinte mémoire tout en facilitant la manipulation de la géométrie. Cette technique est appelée la '''représentation face-sommet'''. Elle consiste à stocker les informations sur les triangles et sur les sommets séparément. Le tampon de sommet contient juste les coordonnées des sommets, mais ne dit rien sur la manière dont ils sont reliés. Les informations sur les triangles sont quand à elles, non pas reconstituées à la volée, mais mémorisées dans un tableau séparé. Ce dernier est appelé le ''tampon d'indices'' et n'est rien de plus qu'une liste de triangles.

Chaque triangle dans le tampon d'indices est codé non pas par ses trois coordonnées, mais par trois indices. Un indice est tout simplement un numéro qui indique la position du sommet dans le tampon de sommet. On pourrait se demander pourquoi ne pas utiliser les coordonnées du sommet directement. La raison est que les sommets étant partagés entre plusieurs triangle, il y aurait beaucoup de redondance. Si un sommet est partagé entre N triangles, les coordonnées du sommets seraient copiés en N exemplaires. Avec la technique du tampon d'indice, les coordonnées sont codées en un seul exemplaire, mais le tampon d'indice contiendra N exemplaires de l'indice. Dit comme cela, on ne voit pas vraiment où se trouve le gain en mémoire. On se retrouve avec deux tableaux : un pour les indices, un pour les vertices. Sauf qu'un indice prend moins de place qu'un sommet : entre un indice et trois coordonnées, le choix est vite fait. Et entre 7 exemplaires d'un sommets, et 7 exemplaire d'un indice et un sommet associé, le gain en mémoire est du côté de la solution à base d'index.

: On pourrait remplacer les indices par des pointeurs, ce qui donnerait un cas particulier d'une structure de données connue sous le nom de vecteur de Liffe. Mais ce n'est pas très pratique et n'est pas utilisé dans le domaine du rendu 3D.

[[File:Mesh fv.jpg|centre|vignette|upright=2|Représentation face-sommet.]]

Avec un tampon d'indices, un sommet peut être chargé plusieurs fois depuis la mémoire vidéo. Pour exploiter cette propriété, les cartes graphiques intercalent une mémoire cache pour mémoriser les sommets déjà chargés : le '''cache de sommets'''. Chaque sommet est stocké dans ce cache avec son indice en guise de Tag. Sur les cartes graphiques assez anciennes, ce cache est souvent très petit, à peine 30 à à 50 sommets. Pour profiter le plus possible de ce cache, les concepteurs de jeux vidéo peuvent changer l'ordre des sommets en mémoire.

[[File:Vertex cache.png|centre|vignette|upright=2.0|Cache de sommets.]]

==Transformation==

Chaque sommet appartient à un objet, dont la surface est modélisée sous la forme d'un ensemble de points. Chaque point est localisé par rapport au centre de l'objet qui a les coordonnées (0, 0, 0). La première étape consiste à placer cet objet aux coordonnées (X, Y, Z) déterminées par le moteur physique : le centre de l'objet passe des coordonnées (0, 0, 0) aux coordonnées (X, Y, Z) et tous les sommets de l'objet doivent être mis à jour. De plus, l'objet a une certaine orientation : il faut aussi le faire tourner. Enfin, l'objet peut aussi subir une mise à l'échelle : on peut le gonfler ou le faire rapetisser, du moment que cela ne modifie pas sa forme, mais simplement sa taille. En clair, l'objet subit une translation, une rotation et une mise à l'échelle.

Ensuite, la carte graphique va effectuer un dernier changement de coordonnées. Au lieu de considérer un des bords de la scène 3D comme étant le point de coordonnées (0, 0, 0), il va passer dans le référentiel de la caméra. Après cette transformation, le point de coordonnées (0, 0, 0) sera la caméra. La direction de la vue du joueur sera alignée avec l'axe de la profondeur (l'axe Z).

Toutes ces transformations ne sont pas réalisées les unes après les autres. À la place, elles sont toutes effectuées en un seul passage. Pour réussir cet exploit, les concepteurs de cartes graphiques et de jeux vidéos utilisent ce qu'on appelle des matrices, des tableaux organisés en lignes et en colonnes avec un nombre dans chaque case. Le lien avec la 3D, c'est qu'appliquées sur le vecteur (X, Y, Z) des coordonnées d'un sommet, la multiplication par une matrice peut simuler des translations, des rotations, ou des mises à l'échelle. Il existe des matrices pour la translation, la mise à l'échelle, d'autres pour la rotation, etc. Et mieux : il existe des matrices dont le résultat correspond à plusieurs opérations simultanées : rotation ET translation, par exemple. Autant vous dire que le gain en terme de performances est assez sympathique.

Mais les matrices qui le permettent sont des matrices avec 4 lignes et 4 colonnes. Et pour multiplier une matrice par un vecteur, il faut que le nombre de coordonnées dans le vecteur soit égal au nombre de colonnes. Pour résoudre ce petit problème, on ajoute une 4éme coordonnée, la coordonnée homogène. Pour faire simple, elle ne sert à rien, et est souvent mise à 1, par défaut.

Les anciennes cartes graphiques contenaient un circuit spécialisé dans ce genre de calculs, qui prenait un sommet et renvoyait le sommet transformé. Il était composé d'un gros paquet de multiplieurs et d'additionneurs flottants. Pour plus d'efficacité, certaines cartes graphiques comportaient plusieurs de ces circuits, afin de pouvoir traiter plusieurs sommets d'un même objet en même temps.

==Eclairage==

Seconde étape de traitement : l'éclairage. À la suite de cette étape d'éclairage, chaque sommet se voit attribuer une couleur, qui correspond à sa luminosité. Le calcul exact de cette couleur demande de calculer trois couleurs indépendantes, dont l'origine est différente, et qui ne proviennent pas des mêmes types de sources lumineuses. Par exemple, on peut simuler le soleil sans utiliser de source de lumière grâce à cette couleur. Il s'agit d'une source de '''lumière ambiante'''. Par simplicité, il est dit que celle-ci est égale en tout point de la scène 3D (d’où le terme lumière ambiante). Mais toute scène 3D contient aussi des sources de lumières, comme des lampes, des torches, etc. Celles-ci sont modélisées comme de simples points, qui ont une couleur bien précise (la couleur de la lumière émise) et émettent une intensité lumineuse codée par un entier. La lumière provenant de ces sources de lumière est appelée la '''lumière directionnelle'''.

{|
|[[File:Graphics lightmodel ambient.png|vignette|upright=1.0|Lumière ambiante.]]
|[[File:Graphics lightmodel directional.png|vignette|upright=1.0|Lumière directionnelle.]]
|}

* La '''couleur ambiante''' correspond à la lumière ambiante réfléchie par la surface. Celle-ci s'obtient simplement en multipliant la couleur ambiante de la surface par l'intensité de la lumière ambiante, deux constantes pré-calculées par les concepteurs du jeu vidéo ou du rendu 3D.
* les autres couleurs proviennent de la réflexion de a lumière directionnelle. Elles doivent être calculées par la carte graphique, généralement avec des algorithmes compliqués qui demandent de faire des calculs entre vecteurs.
** La '''couleur spéculaire''' est la couleur de la lumière réfléchie via la réflexion de Snell-Descartes.
** La '''couleur diffuse''' vient du fait que la surface d'un objet diffuse une partie de la lumière qui lui arrive dessus dans toutes les directions. Cette lumière « rebondit » sur la surface de l'objet et une partie s'éparpille dans un peu toutes les directions. La couleur diffuse ne dépend pas vraiment de l'orientation de la caméra par rapport à la surface. Elle dépend uniquement de l'angle entre le rayon de lumière et la verticale de la surface (sa normale).

[[File:Reflection models.svg|centre|vignette|Illustration de la dispersion de la lumière diffuse par une surface, suivant sa rugosité.]]

Ces couleurs sont additionnées ensemble pour donner la couleur finale du sommet. Chaque composante rouge, bleu, ou verte de la couleur est traitée indépendamment des autres.

[[File:Phong components version 4.png|centre|vignette|upright=3.0|Couleurs utilisées dans l'algorithme de Phong.]]

===Vecteurs nécessaires pour faire les calculs===

Les calculs de réflexion de la lumière demandent de connaitre l'orientation de la surface. Pour gérer cette orientation, le sommet est fourni avec une information qui indique comment est orientée la surface : la '''normale'''. Cette normale est un simple vecteur, perpendiculaire à la surface de l'objet, dont l'origine est le sommet. Autre paramètre d'une surface : son '''coefficient de réflexion'''. Il indique si la surface réfléchit beaucoup la lumière ou pas, et dans quelles proportions. Généralement, chaque point d'une surface a trois coefficient de réflexion fournis de base : un pour la couleur diffuse, un pour la couleur spéculaire, et un pour la couleur ambiante. Outre la normale et la brillance, il faut aussi connaitre l'angle entre la normale et le trajet surface-caméra (noté w dans le schéma ci-dessous).

[[File:Graphics lightmodel ptsource.png|centre|thumb|Normale de la surface.]]

La carte graphique a aussi besoin de l'angle avec lequel arrive un rayon lumineux sur la surface de l'objet. Cet angle dépend de l'orientation de la lumière et du point de surface considéré. Par orientation de la lumière, il faut savoir que la majorité des sources de lumière émet de la lumière dans une direction privilégiée, la lumière émise diminuant avec l'angle comparé à cette direction. Il existe bien quelques sources de lumière qui émettent de manière égale dans toutes les directions, mais nous passons cette situation sous silence. La direction privilégiée est notée v dans le schéma du dessous. Le trajet entre la source de lumière fait un certain angle par rapport à la direction privilégiée. Il faut donc avoir une formule qui donne l'intensité de la lumière en fonction de cet angle, angle noté L dans le schéma du dessous.

[[File:Graphics lightmodel spot.png|centre|thumb|Graphics lightmodel spot]]

À partir de ces informations, la carte graphique calcule l'éclairage. Les anciennes cartes graphiques, entre la Geforce 256 et la Geforce FX contenaient des circuits câblés capables d'effectuer des calculs d'éclairage simples. Cette fonction de calcul de l'éclairage faisait partie intégrante d'un gros circuit nommé le T&amp;L. Dans ce qui va suivre, nous allons voir l'algorithme d'éclairage de Phong, une version simplifiée de la méthode utilisée dans les circuits de T&amp;L.

===Calcul des couleurs spéculaire et diffuse===

[[File:Phong Vectors.svg|droite|thumb|Vecteurs utilisés dans l'algorithme de Phong (et dans le calcul de l'éclairage, de manière générale).]]

Sur la droite, vous voyez illustrés les vecteurs utiles dans le calcul de l'éclairage directionnel. De base, le vecteur L est dirigé vers la source de lumière, et sa norme est égale à l'intensité de la source de lumière (qu'on suppose connue). La normale est multipliée par la couleur diffuse du sommet, ce qui donne le vecteur de couleur diffuse. La couleur diffuse finale est calculée en effectuant le produit scalaire entre l'intensité de la source de lumière et le vecteur de couleur diffuse.

La lumière réfléchie directement par la surface est émise dans la direction R. Sa couleur est simplement égale à l'intensité de la lumière multipliée par la couleur spéculaire. Mais la caméra n'est pas forcément alignée avec cette direction. Pour calculer la lumière spéculaire, il faut prendre en compte l'angle que fait la caméra et la lumière réfléchie. Dans le schéma de droite, c'est l'angle entre les vecteurs R et V, que nous appellerons angle A. Pour calculer la couleur dans la direction V, il faut multiplier la couleur sur le rayon R par le carré du cosinus de l'angle A.

==Tessellation==

Certaines cartes graphiques gèrent des techniques de '''tessellation''', qui permettent d'ajouter des vertices. La position et la couleur de ces vertices sont calculées à la volée par la carte graphique. Cette tesselation permet ainsi d'obtenir un fort niveau de détail géométrique, sans pour autant remplir la mémoire vidéo de vertices pré-calculées. Ces techniques de tesselation vont décomposer chaque triangle de la géométrie en sous-triangles plus petits, ce qui demande d'ajouter des sommets, et vont modifier les coordonnées des sommets créés lors de ce processus.

[[File:Tesselation pipeline.svg|centre|vignette|upright=2.0|Tesselation.]]

La première carte graphique commerciale à intégrer de quoi faire de la tessellation était la Radeon 8500, de l'entreprise ATI (aujourd'hui rachetée par l'entreprise AMD). La technologie de tessellation en question était appelée la technologie TrueForm. Elle utilisait un circuit non-programmable, qui tessellait certaines surfaces et interpolait la forme de la surface entre les sommets. Le manque de versatilité de la technologie fi qu'elle n'a pas été beaucoup utilisée et est tombée en désuétude. La tesselation a eu un regain d'intérêt à l'arrivée des ''geometry shaders'' dans Direct X 10 et Open Gl 3.2. Et il y avait de quoi, de tels shaders pouvant en théorie implémenter des algorithmes de tesselation complexes sans trop de problèmes. Mais les limitations de ces shaders n'a pas permis leur usage pour de la tesselation généraliste. Il fallu attendre l'arrivée des tesselation shaders dans Open Gl 4.0 pour que des shaders adéquats arrivent sur le marché commercial.

{{NavChapitre | book=Les cartes graphiques
           | prev=Le processeur de commandes
           | prevText=Le processeur de commandes
           | next=Le rasterizeur
           | nextText=Le rasterizeur
}}{{autocat}}</text>
      <sha1>64wsrt7vip3ft1m4znt73s5gvrb9bur</sha1>
    </revision>
    <revision>
      <id>683837</id>
      <parentid>683836</parentid>
      <timestamp>2022-08-22T09:00:10Z</timestamp>
      <contributor>
        <username>DavidL</username>
        <id>1746</id>
      </contributor>
      <comment>/* Tessellation */</comment>
      <model>wikitext</model>
      <format>text/x-wiki</format>
      <text bytes="21838" xml:space="preserve">Nous allons maintenant voir les circuits chargés de gérer la géométrie. Il existe deux grands types de circuits chargés de traiter la géométrie : l'input assembler charge les Sur les cartes graphiques assez anciennes, ce cache est souvent très petit, à peine 30 à à 50 sommets. Pour profiter le plus possible de ce cache, les concepteurs de jeux vidéo peuvent changer l'ordre des sommets en mémoire.s depuis la mémoire vidéo, et les circuits de traitement de vertices les traitent. Ceux-ci effectuent plusieurs traitements, qui peuvent être synthétisés en trois grandes étapes.

* La première étape de traitement de la géométrie consiste à placer les objets au bon endroit dans la scène 3D. Lors de la modélisation d'un objet, celui-ci est encastré dans un cube : un sommet du cube possède la coordonnée (0, 0, 0), et les vertices de l'objet sont définies à partir de celui-ci. Pour placer l'objet dans la scène, il faut tenir compte de sa localisation, calculée par le moteur physique : si le moteur physique a décrété que l'objet est à l'endroit de coordonnées (50, 250, 500), toutes les coordonnées des sommets de l'objet doivent être modifiées. Pendant cette étape, l'objet peut subir une translation, une rotation, ou un gonflement/dégonflement (on peut augmenter ou diminuer sa taille). C'est la première étape de calcul : l''''étape de transformation'''.
* Ensuite, les sommets sont éclairées dans une '''phase de lightning'''. Chaque Sur les cartes graphiques assez anciennes, ce cache est souvent très petit, à peine 30 à à 50 sommets. Pour profiter le plus possible de ce cache, les concepteurs de jeux vidéo peuvent changer l'ordre des sommets en mémoire. se voit attribuer une couleur, qui définit son niveau de luminosité : est-ce que le sommet est fortement éclairée ou est-elle dans l'ombre ?
* Vient ensuite une '''phase de traitement de la géométrie''', où les sommets sont assemblés en triangles, points, lignes, en polygones. Ces formes géométriques de base sont ensuite traitées telles quelles par la carte graphique. Sur les cartes graphiques récentes, cette étape peut être gérée par le programmeur : il peut programmer les divers traitements à effectuer lui-même.

==L'''input assembler''==

L'''input assembler'' charge les informations géométriques, présentes dans en mémoire vidéo, dans les unités de traitement des sommets. C'est une unité d'accès mémoire un peu particulière, mais qui contient des circuits assez classiques pour ce genre de circuits : des circuits de calcul d'adresse, des circuits pour commander la mémoire VRAM, un contrôleur mémoire, diverses mémoires tampons, etc. Pour faire son travail, il a besoin d'informations mémorisées dans des registres, à savoir l'adresse des données géométriques en mémoire, leur taille et éventuellement du type des données qu'on lui envoie (sommets codées sur 32 bits, 64, 128, etc).

[[File:Input assembler.png|centre|vignette|upright=2.0|Input assembler]]

Avant leur traitement, les objets géométriques présents dans la scène 3D sont mémorisés dans la mémoire vidéo, sous une forme plus ou moins structurée. Rappelons que les objets 3D sont représentés comme un assemblage de triangles collés les uns aux autres, l'ensemble formant un maillage. La position d'un triangle est déterminée par la position de chacun de ses sommets. Avec trois coordonnées x, y et z pour un sommet, un triangle demande donc 9 cordonnées. De plus, il faut ajouter des informations sur la manière dont les sommets sont reliés entre eux, quel sommet est relié à quel autre, comment les arêtes sont connectées, etc. Toutes ces informations sont stockées dans un tableau en mémoire vidéo : le '''tampon de sommets'''.

[[File:Cube colored.png|vignette|Cube en 3D]]

Le contenu du tampon de sommet dépend de la représentation utilisée. Il y a plusieurs manières de structure les informations dans le tampon de sommet, qui ont des avantages et inconvénients divers. Toutes ces représentations cherchent à résoudre un problème bien précis : comment indiquer comment les sommets doivent être reliés entre triangles. Le point crucial est qu'un sommet est très souvent partagé par plusieurs triangles. Par exemple, prenez le cube de l'image ci-contre. Le sommet rouge du cube appartient aux 3 faces grise, jaune et bleue, et sera présent en trois exemplaires dans le tampon de sommets : un pour la face bleue, un pour la jaune, et un pour la grise. Pour éviter ce gâchis, les concepteurs d'API et de cartes graphiques ont inventé des représentations pour les maillages, qui visent à limiter la consommation de mémoire ou faciliter la traversée du tampon de sommet.

===Les techniques anciennes : ''Triangle strip'' et ''Triangle fan''===

Pour gérer le partage des sommets entre triangles, la représentation la plus simple est appelée le '''maillage sommet-sommet''' (''Vertex-Vertex Meshes''). L'idée est que chaque sommet précise, en plus de ses trois coordonnées, quels sont les autres sommets auxquels il est relié. Les sommets sont regroupés dans un tableau, et les autres sommets sont identifiés par leur position dans le tableau, leur indice. Les informations sur les triangles sont implicites et doivent être reconstruites à partir des informations présentes dans le tampon de sommets. Autant dire que niveau praticité et utilisation de la puissance de calcul, cette techniques est peu efficace. Par contre, le tampon de sommet a l'avantage, avec cette technique, d'utiliser peu de mémoire. Les informations sur les arêtes et triangles étant implicites, elles ne sont pas mémorisées, ce qui économise de la place.

[[File:Vertex-Vertex Meshes (VV).png|centre|vignette|upright=1.5|Vertex-Vertex Meshes (VV)]]

Dans la représentation précédente, les arêtes sont présentes plus ou moins directement dans le tampon de sommets. Mais il existe des méthodes pour que les informations sur les arêtes soient codées de manière implicite. L'idée est que deux sommets consécutifs dans le tampon de sommet soient reliés par une arête. Ainsi, les informations sur les arêtes n'ont plus à être codées dans le tampon de sommet, mais sont implicitement contenues dans l'ordre des sommets. Ces représentations sont appelées des ''Corner-tables''. Dans le domaine du rendu 3D, deux techniques de ce genre ont été utilisées : la technique du ''triangle fans'' et celle des ''triangle strips''.

La technique des '''triangles strip''' permet d'optimiser le rendu de triangles placés en série, qui ont une arête et deux sommets en commun. L'optimisation consiste à ne stocker complètement que le premier triangle le plus à gauche, les autres triangles étant codés avec un seul sommet. Ce sommet est combiné avec les deux derniers sommets chargés par l'input assembler pour former un triangle. Pour gérer ces triangles strips, l'input assembler doit mémoriser dans un registre les deux derniers sommets utilisées. En mémoire, le gain est énorme : au lieu de trois sommets pour chaque triangle, on se retrouve avec un sommet pour chaque triangle, sauf le premier de la surface.

[[File:Triangle strip.png|centre|vignette|Triangle strip]]

La technique des '''triangles fan''' fonctionne comme pour le triangles strip, sauf que le sommet n'est pas combiné avec les deux sommets précédents. Supposons que je crée un premier triangle avec les sommets v1, v2, v3. Avec la technique des triangles strips, les deux sommets réutilisés auraient été les sommets v2 et v3. Avec les triangles fans, les sommets réutilisés sont les sommets v1 et v3. Les triangles fans sont utiles pour créer des figures comme des cercles, des halos de lumière, etc.

[[File:Triangle fan.png|centre|vignette|upright=2.0|Triangle fan]]

===Le tampon d'indices===

Enfin, nous arrivons à la dernière technique, qui permet de limiter l'empreinte mémoire tout en facilitant la manipulation de la géométrie. Cette technique est appelée la '''représentation face-sommet'''. Elle consiste à stocker les informations sur les triangles et sur les sommets séparément. Le tampon de sommet contient juste les coordonnées des sommets, mais ne dit rien sur la manière dont ils sont reliés. Les informations sur les triangles sont quand à elles, non pas reconstituées à la volée, mais mémorisées dans un tableau séparé. Ce dernier est appelé le ''tampon d'indices'' et n'est rien de plus qu'une liste de triangles.

Chaque triangle dans le tampon d'indices est codé non pas par ses trois coordonnées, mais par trois indices. Un indice est tout simplement un numéro qui indique la position du sommet dans le tampon de sommet. On pourrait se demander pourquoi ne pas utiliser les coordonnées du sommet directement. La raison est que les sommets étant partagés entre plusieurs triangle, il y aurait beaucoup de redondance. Si un sommet est partagé entre N triangles, les coordonnées du sommets seraient copiés en N exemplaires. Avec la technique du tampon d'indice, les coordonnées sont codées en un seul exemplaire, mais le tampon d'indice contiendra N exemplaires de l'indice. Dit comme cela, on ne voit pas vraiment où se trouve le gain en mémoire. On se retrouve avec deux tableaux : un pour les indices, un pour les vertices. Sauf qu'un indice prend moins de place qu'un sommet : entre un indice et trois coordonnées, le choix est vite fait. Et entre 7 exemplaires d'un sommets, et 7 exemplaire d'un indice et un sommet associé, le gain en mémoire est du côté de la solution à base d'index.

: On pourrait remplacer les indices par des pointeurs, ce qui donnerait un cas particulier d'une structure de données connue sous le nom de vecteur de Liffe. Mais ce n'est pas très pratique et n'est pas utilisé dans le domaine du rendu 3D.

[[File:Mesh fv.jpg|centre|vignette|upright=2|Représentation face-sommet.]]

Avec un tampon d'indices, un sommet peut être chargé plusieurs fois depuis la mémoire vidéo. Pour exploiter cette propriété, les cartes graphiques intercalent une mémoire cache pour mémoriser les sommets déjà chargés : le '''cache de sommets'''. Chaque sommet est stocké dans ce cache avec son indice en guise de Tag. Sur les cartes graphiques assez anciennes, ce cache est souvent très petit, à peine 30 à à 50 sommets. Pour profiter le plus possible de ce cache, les concepteurs de jeux vidéo peuvent changer l'ordre des sommets en mémoire.

[[File:Vertex cache.png|centre|vignette|upright=2.0|Cache de sommets.]]

==Transformation==

Chaque sommet appartient à un objet, dont la surface est modélisée sous la forme d'un ensemble de points. Chaque point est localisé par rapport au centre de l'objet qui a les coordonnées (0, 0, 0). La première étape consiste à placer cet objet aux coordonnées (X, Y, Z) déterminées par le moteur physique : le centre de l'objet passe des coordonnées (0, 0, 0) aux coordonnées (X, Y, Z) et tous les sommets de l'objet doivent être mis à jour. De plus, l'objet a une certaine orientation : il faut aussi le faire tourner. Enfin, l'objet peut aussi subir une mise à l'échelle : on peut le gonfler ou le faire rapetisser, du moment que cela ne modifie pas sa forme, mais simplement sa taille. En clair, l'objet subit une translation, une rotation et une mise à l'échelle.

Ensuite, la carte graphique va effectuer un dernier changement de coordonnées. Au lieu de considérer un des bords de la scène 3D comme étant le point de coordonnées (0, 0, 0), il va passer dans le référentiel de la caméra. Après cette transformation, le point de coordonnées (0, 0, 0) sera la caméra. La direction de la vue du joueur sera alignée avec l'axe de la profondeur (l'axe Z).

Toutes ces transformations ne sont pas réalisées les unes après les autres. À la place, elles sont toutes effectuées en un seul passage. Pour réussir cet exploit, les concepteurs de cartes graphiques et de jeux vidéos utilisent ce qu'on appelle des matrices, des tableaux organisés en lignes et en colonnes avec un nombre dans chaque case. Le lien avec la 3D, c'est qu'appliquées sur le vecteur (X, Y, Z) des coordonnées d'un sommet, la multiplication par une matrice peut simuler des translations, des rotations, ou des mises à l'échelle. Il existe des matrices pour la translation, la mise à l'échelle, d'autres pour la rotation, etc. Et mieux : il existe des matrices dont le résultat correspond à plusieurs opérations simultanées : rotation ET translation, par exemple. Autant vous dire que le gain en terme de performances est assez sympathique.

Mais les matrices qui le permettent sont des matrices avec 4 lignes et 4 colonnes. Et pour multiplier une matrice par un vecteur, il faut que le nombre de coordonnées dans le vecteur soit égal au nombre de colonnes. Pour résoudre ce petit problème, on ajoute une 4éme coordonnée, la coordonnée homogène. Pour faire simple, elle ne sert à rien, et est souvent mise à 1, par défaut.

Les anciennes cartes graphiques contenaient un circuit spécialisé dans ce genre de calculs, qui prenait un sommet et renvoyait le sommet transformé. Il était composé d'un gros paquet de multiplieurs et d'additionneurs flottants. Pour plus d'efficacité, certaines cartes graphiques comportaient plusieurs de ces circuits, afin de pouvoir traiter plusieurs sommets d'un même objet en même temps.

==Eclairage==

Seconde étape de traitement : l'éclairage. À la suite de cette étape d'éclairage, chaque sommet se voit attribuer une couleur, qui correspond à sa luminosité. Le calcul exact de cette couleur demande de calculer trois couleurs indépendantes, dont l'origine est différente, et qui ne proviennent pas des mêmes types de sources lumineuses. Par exemple, on peut simuler le soleil sans utiliser de source de lumière grâce à cette couleur. Il s'agit d'une source de '''lumière ambiante'''. Par simplicité, il est dit que celle-ci est égale en tout point de la scène 3D (d’où le terme lumière ambiante). Mais toute scène 3D contient aussi des sources de lumières, comme des lampes, des torches, etc. Celles-ci sont modélisées comme de simples points, qui ont une couleur bien précise (la couleur de la lumière émise) et émettent une intensité lumineuse codée par un entier. La lumière provenant de ces sources de lumière est appelée la '''lumière directionnelle'''.

{|
|[[File:Graphics lightmodel ambient.png|vignette|upright=1.0|Lumière ambiante.]]
|[[File:Graphics lightmodel directional.png|vignette|upright=1.0|Lumière directionnelle.]]
|}

* La '''couleur ambiante''' correspond à la lumière ambiante réfléchie par la surface. Celle-ci s'obtient simplement en multipliant la couleur ambiante de la surface par l'intensité de la lumière ambiante, deux constantes pré-calculées par les concepteurs du jeu vidéo ou du rendu 3D.
* les autres couleurs proviennent de la réflexion de a lumière directionnelle. Elles doivent être calculées par la carte graphique, généralement avec des algorithmes compliqués qui demandent de faire des calculs entre vecteurs.
** La '''couleur spéculaire''' est la couleur de la lumière réfléchie via la réflexion de Snell-Descartes.
** La '''couleur diffuse''' vient du fait que la surface d'un objet diffuse une partie de la lumière qui lui arrive dessus dans toutes les directions. Cette lumière « rebondit » sur la surface de l'objet et une partie s'éparpille dans un peu toutes les directions. La couleur diffuse ne dépend pas vraiment de l'orientation de la caméra par rapport à la surface. Elle dépend uniquement de l'angle entre le rayon de lumière et la verticale de la surface (sa normale).

[[File:Reflection models.svg|centre|vignette|Illustration de la dispersion de la lumière diffuse par une surface, suivant sa rugosité.]]

Ces couleurs sont additionnées ensemble pour donner la couleur finale du sommet. Chaque composante rouge, bleu, ou verte de la couleur est traitée indépendamment des autres.

[[File:Phong components version 4.png|centre|vignette|upright=3.0|Couleurs utilisées dans l'algorithme de Phong.]]

===Vecteurs nécessaires pour faire les calculs===

Les calculs de réflexion de la lumière demandent de connaitre l'orientation de la surface. Pour gérer cette orientation, le sommet est fourni avec une information qui indique comment est orientée la surface : la '''normale'''. Cette normale est un simple vecteur, perpendiculaire à la surface de l'objet, dont l'origine est le sommet. Autre paramètre d'une surface : son '''coefficient de réflexion'''. Il indique si la surface réfléchit beaucoup la lumière ou pas, et dans quelles proportions. Généralement, chaque point d'une surface a trois coefficient de réflexion fournis de base : un pour la couleur diffuse, un pour la couleur spéculaire, et un pour la couleur ambiante. Outre la normale et la brillance, il faut aussi connaitre l'angle entre la normale et le trajet surface-caméra (noté w dans le schéma ci-dessous).

[[File:Graphics lightmodel ptsource.png|centre|thumb|Normale de la surface.]]

La carte graphique a aussi besoin de l'angle avec lequel arrive un rayon lumineux sur la surface de l'objet. Cet angle dépend de l'orientation de la lumière et du point de surface considéré. Par orientation de la lumière, il faut savoir que la majorité des sources de lumière émet de la lumière dans une direction privilégiée, la lumière émise diminuant avec l'angle comparé à cette direction. Il existe bien quelques sources de lumière qui émettent de manière égale dans toutes les directions, mais nous passons cette situation sous silence. La direction privilégiée est notée v dans le schéma du dessous. Le trajet entre la source de lumière fait un certain angle par rapport à la direction privilégiée. Il faut donc avoir une formule qui donne l'intensité de la lumière en fonction de cet angle, angle noté L dans le schéma du dessous.

[[File:Graphics lightmodel spot.png|centre|thumb|Graphics lightmodel spot]]

À partir de ces informations, la carte graphique calcule l'éclairage. Les anciennes cartes graphiques, entre la Geforce 256 et la Geforce FX contenaient des circuits câblés capables d'effectuer des calculs d'éclairage simples. Cette fonction de calcul de l'éclairage faisait partie intégrante d'un gros circuit nommé le T&amp;L. Dans ce qui va suivre, nous allons voir l'algorithme d'éclairage de Phong, une version simplifiée de la méthode utilisée dans les circuits de T&amp;L.

===Calcul des couleurs spéculaire et diffuse===

[[File:Phong Vectors.svg|droite|thumb|Vecteurs utilisés dans l'algorithme de Phong (et dans le calcul de l'éclairage, de manière générale).]]

Sur la droite, vous voyez illustrés les vecteurs utiles dans le calcul de l'éclairage directionnel. De base, le vecteur L est dirigé vers la source de lumière, et sa norme est égale à l'intensité de la source de lumière (qu'on suppose connue). La normale est multipliée par la couleur diffuse du sommet, ce qui donne le vecteur de couleur diffuse. La couleur diffuse finale est calculée en effectuant le produit scalaire entre l'intensité de la source de lumière et le vecteur de couleur diffuse.

La lumière réfléchie directement par la surface est émise dans la direction R. Sa couleur est simplement égale à l'intensité de la lumière multipliée par la couleur spéculaire. Mais la caméra n'est pas forcément alignée avec cette direction. Pour calculer la lumière spéculaire, il faut prendre en compte l'angle que fait la caméra et la lumière réfléchie. Dans le schéma de droite, c'est l'angle entre les vecteurs R et V, que nous appellerons angle A. Pour calculer la couleur dans la direction V, il faut multiplier la couleur sur le rayon R par le carré du cosinus de l'angle A.

==Tessellation==

Certaines cartes graphiques gèrent des techniques de '''tessellation''', qui permettent d'ajouter des vertices. La position et la couleur de ces vertices sont calculées à la volée par la carte graphique. Cette tesselation permet ainsi d'obtenir un fort niveau de détail géométrique, sans pour autant remplir la mémoire vidéo de vertices pré-calculées. Ces techniques de tesselation vont décomposer chaque triangle de la géométrie en sous-triangles plus petits, ce qui demande d'ajouter des sommets, et vont modifier les coordonnées des sommets créés lors de ce processus.

[[File:Tesselation pipeline.svg|centre|vignette|upright=2.0|Tessellation.]]

La première carte graphique commerciale à intégrer de quoi faire de la tesselation était la Radeon 8500, de l'entreprise ATI (aujourd'hui rachetée par l'entreprise AMD). La technologie de tessellation en question était appelée la technologie TrueForm. Elle utilisait un circuit non-programmable, qui tessellait certaines surfaces et interpolait la forme de la surface entre les sommets. Le manque de versatilité de la technologie fi qu'elle n'a pas été beaucoup utilisée et est tombée en désuétude. La tesselation a eu un regain d'intérêt à l'arrivée des ''geometry shaders'' dans Direct X 10 et Open Gl 3.2. Et il y avait de quoi, de tels shaders pouvant en théorie implémenter des algorithmes de tesselation complexes sans trop de problèmes. Mais les limitations de ces shaders n'a pas permis leur usage pour de la tesselation généraliste. Il fallu attendre l'arrivée des tesselation shaders dans Open Gl 4.0 pour que des shaders adéquats arrivent sur le marché commercial.

{{NavChapitre | book=Les cartes graphiques
           | prev=Le processeur de commandes
           | prevText=Le processeur de commandes
           | next=Le rasterizeur
           | nextText=Le rasterizeur
}}{{autocat}}</text>
      <sha1>tux14xg94iqpixtr8gs4919pr6mzkur</sha1>
    </revision>
  </page>
</mediawiki>