Wikilivres

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

Navigation interactive dans l’historique
← Modification précédenteModification suivante →
Contenu supprimé Contenu ajouté
VisuelWikicode
petites corrections
(en travaux...)
Ligne 1 :
{{Programmation CSS | prec=[[Programmation CSS|Sommaire]] | cour=Introduction | suiv=[[Programmation CSS - Historique|Historique]]}}
 
== Qu'est-ce qu'une feuille de style ? ==
Les '''feuilles de style''' en cascade ('''CSS''', pour ''Cascading Style Sheets'') constituent un moyen de séparer la structure et la mise en page d'un site web. En tant que spécification du [[w:fr:World Wide Web Consortium|W3C]], elles obéissent à un ensemble de règles précises.
 
EnLe problème du [[w:fr:HTML|HTML]] simple est qu''classique'',il lesoblige règlesà deintégrer stylesles sontdéclarations souventde intégréesstyle au filsein du code structurel, ce qui aperd —ainsi entreen autres — pour effet de mélanger la structure avec la présentationclarté, et deà multiplier les déclarations de style, quipour deviennentchaque redondantescadre, etchaque lourdesparagraphe...
 
Les feuilles de style se proposent de résoudre ces deux problèmes, enpar externalisantdeux etapproches endifférentes. factorisantEn cesdéfinissant règlesune feuille de style interne on créé un style par page, lece qui est relativement lourd mais parfois intéressant. La méthode la plus souventcourante danset la plus adaptée, celle exploitant au mieux cette faculté de "généralisation" des styles, est l'externalisation. Elle consiste à créer un fichier externe d'extension .css et qui seracompilera appeléles dansrègles lade partiestyle <tt>HEAD</tt>de dutoutes documentles htmlpages (ilaffiliées està toutefoisce possiblefichier d'inclurepar directementune lesdéclaration règlesdans l'en-tête de stylechaque danspage (la partie <ttcode>HEADhead</ttcode> du document html). IlLe s'agitfichier donchtml d'abordne decontiendra séparerainsi que la structure de la page et son style sera appliqué "par dessus" comme une sorte de masque. L'objectif de séparation de la présentation et de la structure est donc atteint.
 
== Historique ==
Il est 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).
La création des CSS date de 1994. C'est à cette époque que l'essor du web commence avec en particulier l'avènement des publications électroniques. Mais il n'existe encore aucun moyen fiable et robuste pour appliquer un style à ces documents. Håkon Wium Lie, qui travaillait alors au [[w:fr:CERN|CERN]], berceau du web, comprend alors la nécessité de créer une feuille de style spécifique pour le web et en imagine une définition.
 
Certes l'idée de séparer la structure de la présentation date de la création en 1990, par Tim Berners-Lee, d'un éditeur/navigateur dans lequel il est possible de définir une feuille de style. Mais Tim Berners-Lee laissa le soin aux navigateurs d'en définir la syntaxe.
Enfin, l'objectif final est de produire une feuille de style valide, donc bien formée et rédigée.
 
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 partie de tel autre élément seulement, des éléments ré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 l'un des nombreux ot usuels et réservé (tel <tt>h1</tt> ou <tt>p</tt>) ou une chaîne de caractè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 plusieurs dans la structure html.
 
Entre crochets sont placées les déclarations, qui se décomposent en deux parties séparées par <tt>:</tt> . La première partie est une propriété (par exemple <tt>font-size</tt>), la seconde la valeur de la propriété (par exemple <tt>1em</tt>). Les valeurs ne sont pas entourées de guillemets <tt>" "</tt>.
 
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.
 
Un exemple concret d'une règle de style qui mettra en gras et en rouge tous les titres de niveau 1 d'un document :
h1 {
color: red;
font-weight: bold;
}
 
[[Catégorie:Programmation CSS]]
Récupérée de « https://fr.wikibooks.org/wiki/Le_langage_CSS/Introduction »