Les feuilles de style dans les documents HTML
Les feuilles de style représentent une avancée majeure pour les concepteurs de pages Web, élargissant leur capacité à améliorer l'apparence de leurs pages. Dans les milieux scientifiques où le Web a été conçu, les gens sont plus préoccupés par le contenu de leurs documents que la présentation. Comme les gens de milieux plus larges de la vie ont découvert le Web, les limites de HTML est devenu une source de frustration et continue auteurs ont été contraints de contourner les limites stylistiques de HTML. Alors que les intentions étaient bonnes - pour améliorer la présentation des pages Web - les techniques de le faire ont eu des effets secondaires malheureux. Ces techniques fonctionnent pour certaines personnes, de temps en temps, mais pas pour tout le peuple, tout le temps. Ils comprennent:
- Utiliser les extensions HTML propriétaires
- Conversion de texte en images
- Utilisation d'images pour le contrôle de l'espace blanc
- L'utilisation de tables pour la mise en page
- L'écriture d'un programme au lieu d'utiliser HTML
Ces techniques augmentent considérablement la complexité des pages Web, offrent une flexibilité limitée, souffrent de problèmes d'interopérabilité et de créer des difficultés pour les personnes handicapées.
Les feuilles de style résoudre ces problèmes en même temps, ils remplacent la gamme limitée de mécanismes de présentation au format HTML. Les feuilles de style, il est facile de spécifier la quantité d'espace blanc entre les lignes de texte, les lignes de quantité sont en retrait, les couleurs utilisées pour le texte et les arrière-plans, la taille de la police et le style, et une foule d'autres détails.
Par exemple, le suivant la feuille de style CSS court (stocké dans le fichier « special.css »), définit la couleur du texte d'un paragraphe au vert et l'entoure avec une bordure rouge solide:
HTML 4 prend en charge les fonctions de feuille de style suivantes:
La proposition aborde ces questions en permettant aux auteurs d'inclure des instructions de restitution dans chaque élément HTML. L'information est alors rendu toujours disponible au moment où l'agent utilisateur veut rendre chaque élément.
Dans de nombreux cas, les auteurs profiter d'une feuille de style commun pour un groupe de documents. Dans ce cas, la distribution des règles de style dans le document conduira effectivement à de moins bonnes performances que d'utiliser une feuille de style liée, étant donné que pour la plupart des documents, la feuille de style sera déjà présent dans le cache local. La disponibilité publique de feuilles de style bons encouragera cet effet.
14.2 Ajout du style à HTML
Remarque. L'échantillon feuille de style par défaut pour HTML 4 qui est inclus dans [CSS2] exprime des informations de style par défaut généralement admis pour chaque élément. Les auteurs et les réalisateurs pourraient trouver aussi bien cette ressource utile.
La syntaxe des données de style dépend de la langue de feuille de style.
Les auteurs doivent indiquer la langue de feuille de style de l'information style associé à un document HTML.
Les agents utilisateurs devraient déterminer la langue de feuille de style par défaut pour un document selon les étapes suivantes (la plus élevée à la plus basse priorité):
style = style de [CN] Cet attribut spécifie le style de l'élément en cours.
Cet exemple CSS définit la couleur et des informations de taille de la police pour le texte dans un paragraphe spécifique.
Pour spécifier des informations de style pour plus d'un élément, les auteurs devraient utiliser l'élément STYLE. Pour une flexibilité optimale, les auteurs doivent définir des styles dans des feuilles de style externes.
14.2.3 en-tête d'informations de style. l'élément STYLE
Attributs définis ailleurs
L'élément STYLE permet aux auteurs de mettre des règles de feuille de style dans la tête du document. HTML permet un certain nombre d'éléments de style dans la section HEAD d'un document.
Les agents utilisateurs qui ne supportent pas les feuilles de style, ou ne prennent pas en charge la langue de feuille de style spécifique utilisé par un élément de style, doit cacher le contenu de l'élément STYLE. Il est une erreur de rendre le contenu dans le cadre du texte du document. Certaines langues de feuille de style en charge la syntaxe pour cacher le contenu d'agents utilisateurs non conformes.
La syntaxe des données de style dépend de la langue de feuille de style.
- Toutes les instances d'un élément HTML spécifique (par exemple, tous les éléments P, tous les éléments H1, etc.)
- Toutes les instances d'un élément HTML appartenant à une classe spécifique (par exemple dont l'attribut class est défini sur une valeur).
- instances individuelles d'un élément HTML (à savoir dont l'attribut id est fixé à une certaine valeur).
Règles pour les règles de style préséances et l'héritage dépendent de la langue de feuille de style.
Pour spécifier que ces informations de style ne devrait concerner que les éléments H1 d'une classe spécifique, nous modifions comme suit:
Enfin, pour limiter la portée de l'information de style à une seule instance de H1. définissez l'attribut id:
Dans l'exemple suivant, nous utilisons l'élément SPAN pour définir le style de la police des premiers mots d'un paragraphe aux petites capitalisations.
HTML permet aux auteurs de concevoir des documents qui tirent parti des caractéristiques des médias où le document doit être rendu (par exemple, des affichages graphiques, écrans de télévision, les appareils portatifs, les navigateurs basés sur la parole, des appareils tactiles à base braille, etc.). En spécifiant l'attribut media, les auteurs permettent aux agents utilisateurs de charger et d'appliquer des feuilles de style de manière sélective. S'il vous plaît consulter la liste des descripteurs de médias reconnus.
Cet exemple ajoute des effets sonores à points d'ancrage pour une utilisation dans la production de la parole:
le contrôle des médias est particulièrement intéressant lorsqu'il est appliqué à des feuilles de style externes puisque les agents utilisateurs peuvent gagner du temps en récupérant du réseau que les feuilles de style qui s'appliquent à l'appareil actuel. Par exemple, les navigateurs basés sur la parole peuvent éviter des feuilles de style de téléchargement conçu pour le rendu visuel. Voir la section sur les cascades dépendant de médias pour plus d'informations.
14.3.1 feuilles de style préférées et alternatives
HTML permet aux auteurs d'associer un certain nombre de feuilles de style externes avec un document. Le langage de feuille de style définit la façon dont plusieurs feuilles de style externes interagissent (par exemple, les règles CSS « en cascade »).
Les agents utilisateurs doivent respecter les descripteurs des médias lors de l'application une feuille de style.
Les agents utilisateurs devraient également permettre aux utilisateurs de désactiver les feuilles de style de l'auteur tout à fait, dans ce cas, l'agent utilisateur ne doit pas appliquer des feuilles de style persistant ou de remplacement.
Les auteurs précisent des feuilles de style externes avec les attributs suivants de l'élément LINK:
- Définissez la valeur de href à l'emplacement du fichier de feuille de style. La valeur de href est un URI.
- Définissez la valeur de l'attribut type pour indiquer la langue du lien (feuille de style) ressource. Ceci permet à l'agent utilisateur pour éviter le téléchargement d'une feuille de style pour un langage de feuille de style non pris en charge.
- Préciser que la feuille de style est persistant, préféré, ou autre:
- Pour une feuille de style persistante, définissez l'attribut rel « stylesheet » et ne définissez pas l'attribut title.
- Pour une feuille de style préféré, définissez l'attribut rel « stylesheet » et nommez la feuille de style avec l'attribut title.
- Pour spécifier une feuille de style, définissez l'attribut rel « stylesheet alternatif » et nommez la feuille de style avec l'attribut title.
Les agents utilisateurs devraient fournir un moyen pour les utilisateurs de visualiser et de choisir dans la liste des styles alternatifs. La valeur de l'attribut title est recommandé que le nom de chaque choix.
Dans cet exemple, nous avons d'abord spécifions une feuille de style persistante situé dans le fichier mystyle.css:
Réglage de l'attribut title rend cette feuille de style préféré de l'auteur:
Ajout du mot-clé « alternative » à l'attribut rel il fait une feuille de style:
Pour plus d'informations sur les feuilles de style externes, s'il vous plaît consulter la section sur les liens et les feuilles de style externes.
Si deux ou plusieurs éléments LINK spécifient une feuille de style préféré, le premier a la priorité.
feuilles de style préférées spécifiées avec les en-têtes HTTP ou META ont la priorité sur ceux spécifiés avec l'élément LINK.
langues de feuille de style CSS Cascading telles que permettent les informations de style de plusieurs sources à mélanger ensemble. Cependant, toutes les langues de feuille de style en cascade prennent en charge. Pour définir une cascade, les auteurs spécifient une séquence de LINK et / ou des éléments de style. Les informations de style est en cascade dans l'ordre d'apparition des éléments dans la tête.
Remarque. Cette spécification ne précise pas comment des feuilles de style en cascade de différentes langues de style. Les auteurs doivent éviter de mélanger les langages de feuille de style.
Dans l'exemple suivant, nous précisons deux feuilles de style nommées « compact ». Si l'utilisateur sélectionne le style « compact », l'agent utilisateur doit appliquer les deux feuilles de style externes, ainsi que la feuille persistante de style « common.css ». Si l'utilisateur sélectionne la « grande impression » de style, seule la feuille de style « bigprint.css » et la persistance « common.css » sera appliquée.
Voici un exemple de cascade qui implique à la fois les éléments LINK et STYLE.
Dans l'exemple suivant, nous définissons une cascade où la feuille de style « corporate » est fourni en plusieurs versions: l'une adaptée à l'impression, l'une pour l'écran et un pour les navigateurs basés sur la parole (utile, par exemple, lors de la lecture électronique dans la voiture) . La feuille de style « de techreport » applique à tous les médias. La règle de couleur définie par l'élément de style est utilisé pour l'impression et de l'écran, mais pas pour le rendu sonore.
14.4.2 Héritage et cascade
Lorsque l'agent utilisateur souhaite rendre un document, il a besoin de trouver des valeurs pour les propriétés de style, par exemple la famille de la police, le style de police, la taille, la hauteur de la ligne, la couleur du texte et ainsi de suite. Le mécanisme exact dépend de la langue de feuille de style, mais la description suivante est généralement applicable:
Le mécanisme en cascade est utilisé lorsqu'un certain nombre de règles de style tout s'appliquent directement à un élément. Le mécanisme permet à l'agent utilisateur de trier les règles de spécificité, afin de déterminer quelle règle à appliquer. Si aucune règle ne peut être trouvée, l'étape suivante dépend de la propriété de style peut être héritée ou non. Toutes les propriétés peuvent être héritées. Pour ces propriétés la langue de feuille de style fournit des valeurs par défaut à utiliser quand il n'y a pas de règles explicites pour un élément particulier.
Certaines langues de feuille de style en charge la syntaxe destinée à permettre aux auteurs de masquer le contenu des éléments de style à partir des agents utilisateurs non conformes.
Cette section ne concerne que les agents utilisateurs conformes aux versions de HTTP qui définissent un champ d'en-tête de lien. Notez que HTTP 1.1 tel que défini par [RFC2616] ne comprend pas un champ d'en-tête de lien (voir la section 19.6.3).
Il est possible de spécifier plusieurs styles alternatifs en utilisant plusieurs têtes de liaison, puis utilisez l'attribut rel pour déterminer le style par défaut.
Dans l'exemple suivant, « compact » est appliqué par défaut car il omet le mot-clé « alternative » pour l'attribut rel.
LINK et éléments Méta sous-entendus par les entêtes HTTP sont définis comme se produisant avant tout lien explicite et éléments Méta dans la tête du document.