Présentation

Article

1 - SYNTAXE DÉCLARATIVE, UNIVERSALITÉ

2 - TYPE DE PROPRIÉTÉS AFFECTÉES

3 - ÉTIQUETTES DE CLASSES ET D'IDENTIFIANTS

  • 3.1 - Types de balises XHTML
  • 3.2 - Classes d'éléments
  • 3.3 - Identifiants
  • 3.4 - Différence entre une classe (CLASS) et un identifiant (ID)

4 - CONTENANT, DESCENDANCE ET SÉLECTEUR HIÉRARCHIQUE

5 - PROPRIÉTÉS DE POSITIONNEMENT, DIMENSIONNEMENT ET ESPACEMENT

6 - SOURCES DE STYLE ET CASCADES

7 - INTERACTIVITÉ TECHNOLOGIQUE ET SOLUTIONS À LA NON-COMPLIANCE

8 - CONCLUSION

| Réf : H7163 v1

Syntaxe déclarative, universalité
Feuilles de style CSS - Aspects techniques

Auteur(s) : Nadine SAINT-AMAND

Date de publication : 10 mai 2008

Pour explorer cet article
Télécharger l'extrait gratuit

Vous êtes déjà abonné ?Connectez-vous !

Sommaire

Présentation

RÉSUMÉ

Sur la base d’une syntaxe simple et déclarative, les feuilles de style CSS permettent de maîtriser la mise en page d’un document. Souvent préférables aux artifices employés en HTML, ces feuilles visent l’accessibilité et possèdent entre autres fonctions celle de rendre possible la spécification simultanée de plusieurs mises en page, ou la restitution, pour un même contenu, par exemple pour l'imprimer, l'afficher sur un portable, ou le restituer à un malvoyant. Cet article présente les étiquettes de classe et l’organisation en cascade des feuilles CSS, avec les notions d’éléments descendants et enfants, puis les propriétés de positionnement, de dimensionnement et d’espacement qui les caractérisent.

Lire cet article issu d'une ressource documentaire complète, actualisée et validée par des comités scientifiques.

Lire l’article

ABSTRACT

Cascading Style Sheets (CSS) - Technical Aspects

On the basis of a simple declarative syntax, CSS is used to control the appearance and layout of a document or web page. Often preferable to HTML, these sheets are aimed at accessibility and possess features that make possible the simultaneous specification of multiple layouts, or the reproduction, for the same content, for example by printing, displaying on a laptop, or rendering accessible to the visually impaired. This article presents the classification etiquettes and cascading organization of the style sheets, with the notions of descendants and child elements of the body followed by the properties of positioning, dimensioning and spacing that characterize them.

Auteur(s)

  • Nadine SAINT-AMAND : Professeur à « Les formations Accent Net » - Ingénieure en informatique

INTRODUCTION

Les feuilles de style CSS ont pour but de spécifier de façon précise et non ambiguë la mise en page d'un document, séparément de son contenu. Elles utilisent une syntaxe simple et déclarative. Universellement accessibles, les CSS procurent à chaque intervenant la possibilité de maîtriser finement la présentation documentaire sans devoir recourir à des artifices relevant de la programmation.

De prime abord, les feuilles de style décrivent surtout les propriétés de coloration, de dimensionnement et de positionnement des éléments composant le document. Au moyen de sélecteurs hiérarchiques, basés sur des étiquettes et sur des catégories d'éléments, il est facile d'uniformiser les éléments similaires tout en préservant les cas particuliers. Étiquettes de classes et étiquettes d'identifiant unique fournissent la base de ce mécanisme.

Les feuilles de style spécifient aussi la mise en page générale du document et sont naturellement préférables aux artifices souvent employés en HTML, tels que l'utilisation de tables pour agencer la mise en page. Quelques concepts de mise en page sont déjà pris en compte dans les CSS tels que le flottement, le positionnement absolu, l'utilisation de contenants d'éléments : des parents positionnels. Ces propriétés, encore très limitées, ne constituent pour l'instant qu'une esquisse vers une approche intégrée de mise en page conduite par les CSS, la norme est toujours en évolution.

La notion de cascade rend possible la spécification hiérarchisée des propriétés : toute propriété décrite à un niveau plus général peut être altérée dans un niveau plus spécifique. Cela permet de décrire une fois pour toutes les propriétés communes à toute une famille de documents dans une CSS générale, et de laisser des détails particuliers ou des variantes dans des CSS plus spécifiques.

Ainsi, l'organisation cascadée des feuilles de style est à l'image du découpage d'un site web entier. Si celle-ci est parfois révélatrice de la structure des équipes de développement, elle leur permet d'intervenir à différents niveaux : du général au spécifique. Il importe alors aux différents acteurs de maîtriser les règles de la cascade, les principes de priorité des déclarations, de déterminer comment certaines déclarations ambiguës peuvent être résolues, comment verrouiller une déclaration importante et agir préventivement pour qu'elle ne soit pas surchargée à un autre niveau.

Les CSS, enfin, rendent possible la spécification simultanée de plusieurs mises en page, ou la restitution, pour un même contenu, par exemple pour l'imprimer, l'afficher sur un portable, le restituer à un malvoyant, etc. Ceci dans le but d'adapter des pages à des situations d'emploi prenant en compte des besoins spécifiques, en particulier le handicap. L'emploi des CSS s'inscrit dans une démarche visant à l'accessibilité, ce qui impose l'isolation du contenu et même son étiquetage sémantique. Ce dernier point peut, dans certains cas, faciliter l'indexation de ces contenus par les moteurs de recherche, bien qu'aucune règle n'impose actuellement de relation entre la désignation utilisée dans le XHTML et une quelconque sémantique.

Quelques divergences subsistant hélas encore entre les implémentations des interpréteurs de cette nouvelle technologie imposent aux auteurs web la connaissance des matrices de compatibilité, et parfois même l'utilisation provisoire de techniques de compensation dérogeant malencontreusement au principe de la séparation tripartite contenu/style/actions. Ces artifices sont hélas nécessaires pour l'incorporation « portable » des techniques CSS dans les pratiques actuelles de développement web et, par effet corollaire, pour la convergence vers la conformité aux nouveaux standards du web qui, rappelons le, imposent une indépendance entre la spécification des contenus et celle de la forme.

L'article « Feuilles de style CSS » se compose de deux fascicules :

  • [M 7 162] : « Évolution des technologies du web » ;

  • [M 7 163] : « Aspects techniques des feuilles de style ».

Cet article est réservé aux abonnés.
Il vous reste 93% à découvrir.

Pour explorer cet article
Téléchargez l'extrait gratuit

Vous êtes déjà abonné ?Connectez-vous !


L'expertise technique et scientifique de référence

La plus importante ressource documentaire technique et scientifique en langue française, avec + de 1 200 auteurs et 100 conseillers scientifiques.
+ de 10 000 articles et 1 000 fiches pratiques opérationnelles, + de 800 articles nouveaux ou mis à jours chaque année.
De la conception au prototypage, jusqu'à l'industrialisation, la référence pour sécuriser le développement de vos projets industriels.

DOI (Digital Object Identifier)

https://doi.org/10.51257/a-v1-h7163


Cet article fait partie de l’offre

Documents numériques Gestion de contenu

(73 articles en ce moment)

Cette offre vous donne accès à :

Une base complète d’articles

Actualisée et enrichie d’articles validés par nos comités scientifiques

Des services

Un ensemble d'outils exclusifs en complément des ressources

Un Parcours Pratique

Opérationnel et didactique, pour garantir l'acquisition des compétences transverses

Doc & Quiz

Des articles interactifs avec des quiz, pour une lecture constructive

ABONNEZ-VOUS

Lecture en cours
Présentation

1. Syntaxe déclarative, universalité

Les feuilles de style CSS rendent possible la spécification de la mise en page, même par des non-initiés à l'informatique. C'est-à-dire que leur syntaxe a été conçue pour sa simplicité et son universalité. Des graphistes sans aucune formation informatique peuvent exprimer facilement leur conception au moyen de ce langage. Sa syntaxe est simple et déclarative.

1.1 Syntaxe de base d'une déclaration CSS

En résumé :

1) On choisit ou sélectionne des éléments à présenter dans la page.

2) On nomme une propriété décorative.

3) On lui attribue une valeur.

Par exemple, on pourrait sélectionner les éléments délimités par une balise d'hyperlien <a>, évoquer sa propriété color et lui attribuer la couleur blue.

Exemple : déclarations CSS pour colorer les balises hyperliens <a> en bleu

a{color:blue;}

Exemple : déclarations CSS pour attribuer une bordure au formulaire

form{border:dotted 2px #cccccc;}

On peut attribuer plusieurs couples attribut-valeur à chaque type d'élément.

Exemple : bloc de plusieurs déclarations de style

p{

      color:#cccccc;

      text-indent:7px;

      text-align:justify;

}

Il existe d'autres manières de sélectionner les éléments à décorer que de nommer leur balise. Il existe des sélections basées sur les étiquettes et des sélections hiérarchiques pour choisir les enfants d'un élément particulier.

Des combinaisons des ces spécifications d'accès constituent ce que l'on nomme les sélecteurs.

HAUT DE PAGE

1.2 Unités de mesure

Il est parfois nécessaire de préciser de façon non ambiguë les valeurs caractérisant des propriétés quantitatives. Une valeur n'est...

Cet article est réservé aux abonnés.
Il vous reste 92% à découvrir.

Pour explorer cet article
Téléchargez l'extrait gratuit

Vous êtes déjà abonné ?Connectez-vous !


L'expertise technique et scientifique de référence

La plus importante ressource documentaire technique et scientifique en langue française, avec + de 1 200 auteurs et 100 conseillers scientifiques.
+ de 10 000 articles et 1 000 fiches pratiques opérationnelles, + de 800 articles nouveaux ou mis à jours chaque année.
De la conception au prototypage, jusqu'à l'industrialisation, la référence pour sécuriser le développement de vos projets industriels.

Cet article fait partie de l’offre

Documents numériques Gestion de contenu

(73 articles en ce moment)

Cette offre vous donne accès à :

Une base complète d’articles

Actualisée et enrichie d’articles validés par nos comités scientifiques

Des services

Un ensemble d'outils exclusifs en complément des ressources

Un Parcours Pratique

Opérationnel et didactique, pour garantir l'acquisition des compétences transverses

Doc & Quiz

Des articles interactifs avec des quiz, pour une lecture constructive

ABONNEZ-VOUS

Lecture en cours
Syntaxe déclarative, universalité
Sommaire
Sommaire

Cet article est réservé aux abonnés.
Il vous reste 95% à découvrir.

Pour explorer cet article
Téléchargez l'extrait gratuit

Vous êtes déjà abonné ?Connectez-vous !


L'expertise technique et scientifique de référence

La plus importante ressource documentaire technique et scientifique en langue française, avec + de 1 200 auteurs et 100 conseillers scientifiques.
+ de 10 000 articles et 1 000 fiches pratiques opérationnelles, + de 800 articles nouveaux ou mis à jours chaque année.
De la conception au prototypage, jusqu'à l'industrialisation, la référence pour sécuriser le développement de vos projets industriels.

Cet article fait partie de l’offre

Documents numériques Gestion de contenu

(73 articles en ce moment)

Cette offre vous donne accès à :

Une base complète d’articles

Actualisée et enrichie d’articles validés par nos comités scientifiques

Des services

Un ensemble d'outils exclusifs en complément des ressources

Un Parcours Pratique

Opérationnel et didactique, pour garantir l'acquisition des compétences transverses

Doc & Quiz

Des articles interactifs avec des quiz, pour une lecture constructive

ABONNEZ-VOUS