« Le langage CSS/Introduction » : différence entre les versions

En [[w:fr:HTML|HTML]] ''classique'', les règles de styles sont souvent intégrées au fil du code structurel, ce qui a — entre autreautres — pour effet de mélanger la structure etavec sala présentation et de multiplier les déclarations de style, qui deviennent redondantes et lourdes.

Les feuilles de style se proposent de résoudre ces deux problèmes, en externalisant et en factorisant ces règles de style, le plus souvent dans un fichier externe d'extension .css, qui sera appelé dans la partie <tt>HEAD</tt> du document html (il est toutefois possible d'inclure directement les règles de style dans la partie <tt>HEAD</tt> du document html). Il s'agit donc premièrementd'abord de séparer structure et présentation.

Il est donc possible &mdash; et c'est le but recherché en général &mdash; de définir uniquement la structure primaire de la page web dans le document html, et toutes les mises en forme dans le fichier d'extension .css. Les feuilles de style sont généralement très faciles à créer du fait de leur syntaxe peu déroutante. Toutefois, des lacunes dans le support des règles CSS, chez tous les navigateurs, mais plus ou moins prononcées, imposent de rester attentif aux effets de bords (c'est-à-dire aux différences de rendus inattendues).

Une feuille de style consiste en la déclaration de toutes les '''règles de style''' nécessaires à la mise en forme visuelle du document auquel elle sera liée. Cela va de sa mise en page générale à l'aspect des liens survolés par la souris. La grammaire des feuilles de style est suffisament riche pour permettre de désigner des groupes d'éléments, un seul élément, des éléments faisant partipartie de tel autre élément seulement, des éléments répondantsrépondant à des conditions prévues par la spécification, etc. L'idée de base d'une feuille de style est donc de sélectionner une cible, au moyen d'un sélecteur, et de lui assigner des règles de style, ''via'' ses propriétés.

Le sélecteur est soit l'un des nombreux ot usuels et réservé (tel <tt>h1</tt> ou <tt>p</tt>), soitou une chaîne de caractèrecaractères valide définissant ou désignant un élément (comme <tt>.header</tt> ou <tt>#mail</tt>). Des symboles (comme <tt>.</tt> ou <tt>#</tt>) permettent de définir quel type d'élément va être affecté par les règles de style définies entre crochets, ou d'en désigner un ou plusplusieurs dans la structure html.

A noter que le formatage ''blanc'' (espace, tabulation, retour à la ligne...) est sans importance. Les impératifs principaux sont d'utiliser des minuscules et de bien former les règles, terminées par un <tt>;</tt> obligatoire. Enfin, on peut utiliser plusieurs sélecteurs séparés par une virgule, et définir une ou plusieurs déclarations.