14 feuilles de style

teneur

  1. Introduction aux feuilles de style
  2. Comment ajouter du style à HTML
    1. Réglage de la langue de la feuille de style par défaut
    2. Construit sur les informations de style
    3. Informations sur le style du titre: élément STYLE
    4. Les types de dispositifs
  3. feuilles de style externes
    1. Préférée et feuilles de style
    2. La spécification des feuilles de style externes
  4. Cascades stylesheets
    1. Cascades, selon le dispositif
    2. Héritage et cascades
  5. Comment cacher les informations de style de l' agent utilisateur
  6. Reliure feuilles de style en utilisant les en- têtes HTTP

14.1 Introduction aux feuilles de style

Les feuilles de style représentent la plus grande réussite pour la conception Web-pages, en élargissant les possibilités d'améliorer l'apparence des pages. Dans les milieux scientifiques dans lequel est né et Web, les gens sont plus axés sur le contenu des documents, plutôt que sur leur présentation. Comme d'autres personnes ouvrent le Web HTML restrictions sont devenues une source de frustration, et les auteurs ont dû détourner de HTML limitations stylistiques. Bien que les intentions étaient bonnes - améliorer la présentation des Web-pages - la technologie ont des effets secondaires indésirables. Ces techniques ne fonctionnent que pour certains, mais parfois, mais pas tous et pas toujours. Ceux-ci comprennent:

  • Utilisation de vos propres extensions au format HTML
  • Convertir le texte à l'image
  • Utilisation des images pour le contrôle de l'espace blanc
  • Utilisation de tables pour placer des objets sur le village
  • La rédaction d'un programme au lieu d'utiliser HTML

Ces technologies compliquent considérablement le Web page limite la flexibilité, de créer des problèmes d'interaction 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 transcendant les mécanismes de présentation limités au format HTML. Les feuilles de style simplifient la définition des intervalles entre les lignes de texte, les marges, les couleurs utilisées pour le texte et les couleurs de fond, la taille et le style de police, et d'autres informations.

Par exemple, la feuille de style CSS suivant (stocké dans le fichier "special.css") définit la couleur verte du texte du paragraphe et ses environs frontière solide rouge: 

  P.special {
 couleur: vert;
 border: solide rouge;
 }

Les auteurs peuvent lier des feuilles de style pour le document HTML original en utilisant l'élément LINK : 

  <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 // EN"
  "Http://www.w3.org/TR/REC-html40">
 <HTML>
  <HEAD>
  <LINK href = rel = "stylesheet" type "de" = "text / css">
  </ HEAD>
  <BODY>
  <P class = "spécial"> texte doit être vert dans le présent paragraphe.
  </ BODY>
 </ HTML>

HTML 4.0 fournit un support pour la feuille de style suivante:

placement flexible des informations de style
Placer les feuilles de style dans des fichiers séparés les rend plus faciles à réutiliser. Parfois, il est utile d'inclure une déclaration sur la proposition du document auquel ils se rapportent, au début du document, ou dans les attributs des éléments dans le corps du document. Pour simplifier la gestion du style de site dans cette spécification décrit comment utiliser les en-têtes HTTP pour définir la feuille de style appliquée au document.
Indépendamment des feuilles de style de langue
Cette spécification ne lie pas les feuilles de style spécifiques à la langue HTML. Cela vous permet d'utiliser un large éventail de langues, par exemple, un langage simple pour la majorité des utilisateurs et des cas plus complexes, pour plus spécialisé. Dans tous les exemples ci - dessous, utilisé le langage des CSS (Cascading Style Sheets) [CSS1] , mais il est possible d'utiliser d' autres langues.
Cascades
Cette capacité est fournie par certaines langues de feuille de style, tels que CSS, de combiner des informations de style à partir de plusieurs sources. Il peut être, par exemple, des dispositions sur le style d'entreprise, les styles communs à un groupe de documents, et de styles spécifiques à un seul document. En utilisant ces modèles de table de stockage distincts peuvent être réutilisés, ce qui simplifie le travail des auteurs et améliore l'efficacité de la mise en cache du réseau. La cascade définit une séquence ordonnée de feuilles de style où les règles plus tard tables ont préséance sur les précédentes. toutes les langues ne supportent pas les feuilles de style en cascade.
En fonction du dispositif
HTML permet aux auteurs de concevoir des documents, indépendamment de l'appareil. Cela permet aux utilisateurs d'accéder aux Web-pages en utilisant une variété de dispositifs, tels que les affichages graphiques pour les ordinateurs fonctionnant sous Windows, Macintosh OS, et le X11, les appareils de télévision, téléphones spécialement adaptés et les appareils portables basés sur le PDA, les navigateurs vocaux et dispositifs tactiles basé sur l'alphabet Broglie.

Les feuilles de style, en revanche, appliquent aux dispositifs ou groupes de dispositifs spécifiques. La feuille de style destiné à l'impression de l'écran peut être utilisé, mais il est inutile pour les navigateurs vocaux. Cette spécification permet de définir les grandes catégories de dispositifs auxquels appliquer une feuille de style spécifique. Cela permet à l'agent utilisateur pour éviter de charger inutilement les feuilles de style. langage de feuille de style peut inclure des descriptions de fonctions en fonction des appareils dans une seule table.

styles alternatifs
Les auteurs peuvent offrir aux lecteurs plusieurs façons de visualiser un document. Par exemple, la feuille de style pour la présentation des documents compacts avec de petites polices, ou une table qui spécifie des polices plus grandes pour faciliter la lecture. Cette spécification permet aux auteurs de spécifier une feuille de style préféré, ainsi que la table alternative pour les utilisateurs ou de dispositifs spécifiques. Les agents utilisateurs devraient permettre aux utilisateurs de sélectionner des tables alternatives ou désactiver toutes les feuilles de style.
les problèmes de performance
Certains utilisateurs ont exprimé des doutes quant à la vitesse des feuilles de style. Par exemple, le chargement d'une feuille de style externe peut conduire à un retard dans la présentation globale du matériau à l'utilisateur. Des situations similaires se posent et dans le cas où le titre du document inclus une longue série de règles concernant le style.

Ces questions sont abordées en permettant aux auteurs d'inclure des instructions relatives à la présentation de chaque élément de HTML. Cette information est toujours disponible sur la représentation de la date de soumission de l'élément par l'agent utilisateur.

Dans de nombreux cas, les auteurs vont profiter des avantages de l'utilisation d'une feuille de style commun pour un groupe de documents. Dans ce cas, les règles de style de distribution du document conduira à une baisse des performances par rapport à l'utilisation de la feuille de style liée, puisque pour la feuille de style la plupart des documents seront déjà présents dans le cache local. A cet effet sera de disponibilité générale de bonnes feuilles de style.

14.2 Comment ajouter du style à HTML

Remarque. Dans l'exemple, la feuille de style par défaut pour HTML 4.0, incorporé [CSS2] , exprimé dans une information de style commun pour chaque élément. Les auteurs peuvent tirer profit de cette ressource.

Les documents HTML peuvent contenir des règles de feuille de style directement, ou peuvent importer des feuilles de style.

En HTML, vous pouvez utiliser toutes les langues des feuilles de style. Un langage simple de feuille de style peut être suffisant pour la plupart des utilisateurs, tandis que d'autres langues peuvent être appropriées pour des tâches plus spécialisées. Dans les exemples utilisés dans ce langage de spécification "Cascading Style Sheets" ( [CSS1] ), CSS abrégée.

La syntaxe des données de style dépend du langage de feuille de style.

14.2.1 Réglage de la langue de la feuille de style par défaut

Les auteurs doivent indiquer la langue des informations de style associées au document HTML de feuille de style.

Pour appliquer un langage de feuille de style pour le document par défaut, utiliser l'élément META . Par exemple, pour définir la langue de CSS par défaut, doit être placé dans la section HEAD suite de l' annonce: 

 <META http-equiv = "Content-Style-Type" content = "text / css">

feuille de style par défaut de la langue peut également être réglé en utilisant les en-têtes HTTP. Les annonces sont montrées ci - dessus en utilisant la balise META équivalente à l' en- tête HTTP: 

  Content-Style-Type: text / css

Les agents utilisateurs devraient déterminer le langage de feuille de style par défaut pour un document selon les étapes suivantes (de la plus haute priorité au plus bas):

  1. Si l'annonce META donné "Content-Style-Type", langage de feuille de style définit la dernière annonce dans le flux de caractères.
  2. Sinon, si le "Content-Style-Type" est réglé dans les en-têtes HTTP Stylesheet Language définit le dernier en-tête dans le flux de caractères.
  3. Dans le cas contraire, la langue par défaut est "text / css".

Documents qui comportent des éléments qui définissent l'attribut de style , mais pas déterminés par la langue de la feuille de style par défaut, sont incorrectes. Outils doivent générer des informations sur la langue de la feuille de style par défaut ( en général avec l' annonce du META ), les agents utilisateurs qui ne reposent pas sur la langue par défaut "text / css".

14.2.2 Construit style d' informations

les définitions d' attributs

le style = de style [CN]
Cet attribut spécifie les informations de style pour l'élément courant.

attribut de style de style définit des informations de style pour un seul élément. feuille de style de langage intégré les règles de style définies par la langue de la feuille de style par défaut . La syntaxe des données de style dépend du langage de feuille de style.

Dans cet exemple, définir des informations sur la couleur et la taille du texte un paragraphe spécifique. 

 <P style = "font-size: 12pt; couleur: fuchsia"> Quel est le charme de la feuille de style!

En CSS, les déclarations de propriété ont la forme "nom: valeur" et sont séparés par un point-virgule.

Attribut de style peut être utilisé pour appliquer un style particulier à un élément HTML individuel. Si le style est réutilisée pour plusieurs éléments, les auteurs devraient utiliser l'élément STYLE pour regrouper cette information. Pour une flexibilité optimale, les auteurs devraient définir des styles dans des feuilles de style externes.

14.2.3 Les informations sur le titre de style : l'élément STYLE 

  <L'ELEMENT! Le STYLE - - % du StyleSheet - info de style ->
 <! ATTLIST STYLE
  % I18n;
  - Le lang , dir , pour une utilisation avec le titre -
  du type % ContentType;
  #REQUIRED - Langue styles de type de contenu -
  media % MediaDesc;
  #IMPLIED - Pour une utilisation avec ces dispositifs -
  Titre % du texte;
  #IMPLIED - L'en-tête recommandée -
  >

Balise de début: obligatoire, balise fermante: obligatoire

les définitions d' attributs

du type = le contenu du type [CI]
Cet attribut spécifie la langue du contenu de l'élément de feuille de style, et a priorité sur la langue de tables de styles, agissant comme source. Stylesheet Language est spécifié comme un type de contenu (par exemple, "text / css"). Les auteurs doivent fournir une valeur pour cet attribut; pas de valeur par défaut pour elle.
media = descripteurs de périphériques [CI]
Cet attribut définit le dispositif cible à l'information de style. Cela peut être un descripteur de périphérique ou une liste de descripteurs, séparés par des virgules. Le réglage par défaut est "écran".

attributs définis ailleurs

Element STYLE permet aux auteurs de mettre des règles de style dans la section des tables tête du document. Dans HTML est autorisé un certain nombre d'éléments STYLE dans la HEAD .

Les agents utilisateurs qui ne supportent pas les feuilles de style, ou ne prennent pas en charge le langage de feuille de style spécifique utilisé dans l'élément de la STYLE , ne doivent pas montrer un élément de la STYLE . L'erreur serait de générer son contenu dans le cadre du texte du document. Certaines langues soutiennent la syntaxe des feuilles de style, afin de ne pas montrer le contenu inapproprié agents utilisateurs de spécification.

La syntaxe des données de style dépend du langage de feuille de style.

Certaines implémentations de feuilles de style peuvent supporter une plus grande variété de règles pour un élément STYLE , que dans l'attribut de style . Par exemple, dans CSS règles peuvent être déclarées dans l'élément STYLE pour:

  • Toutes les instances d'un élément de langage HTML spécifique (par exemple, tous les éléments de la P , tous les éléments de H1 , etc.)
  • Toutes les instances de HTML, appartenant à un membre particulier de la classe (ie, l'attribut de classe mis à une certaine valeur).
  • Cas spécifiques de l' élément HTML (ie, l'attribut id est défini sur une certaine valeur).

Règles de priorité et de l'héritage dépendent des tables de langue de feuille de style.

Suivant ad CSS STYLE donne lieu à une bordure autour de tous les éléments H1 dans le document et les centrant sur la page. 

 <HEAD>
  <STYLE type = "text / css">
  H1 {border-width: 1;  border: solid;  text-align: center}
  </ STYLE>
 </ HEAD>

Pour spécifier que ces informations de style ne devrait appliquer aux éléments H1 certaine classe, vous pouvez modifier la définition comme suit: 

 <HEAD>
  <STYLE type = "text / css">
  H1.myclass {border-width: 1;  border: solid;  text-align: center}
  </ STYLE>
 </ HEAD>
 <BODY>
  <Classe H1 = "myclass"> Notre style affecte le niveau d'en-tête H1 </ H1>
  <H1> Et sur ce titre n'a aucune incidence sur notre style </ H1>
 </ BODY>

Enfin, pour obtenir des informations sur le style de l' élément de limitation d'action unique instance H1 , définissez l'attribut id : 

 <HEAD>
  <STYLE type = "text / css">
  #myid {border-width: 1;  border: solid;  text-align: center}
  </ STYLE>
 </ HEAD>
 <BODY>
  <Classe H1 = "myclass"> Ce style de titre H1 est pas affecté </ H1>
  <Id H1 = "myid"> Et cet effet </ H1>
  <H1> Ce </ H1> à nouveau ne soit pas affectée
 </ BODY>

Bien que les informations de style peut être défini pour presque tous les éléments HTML, les deux éléments, la DIV et SPAN , sont particulièrement utiles en ce sens qu'ils n'imposent aucune sémantique de présentation ( en plus d' îlot: niveau par rapport à la ligne ). Avec des feuilles de style, ces éléments permettent aux utilisateurs d'étendre indéfiniment HTML, en particulier lors de l' utilisation de la attributs de classe et id .

Dans l'exemple suivant, l'élément SPAN est utilisé pour définir les petites lettres capitales pour le style de la police des quelques premiers mots du paragraphe. 

 <HEAD>
  <STYLE type = "text / css">
  SPAN.sc-ex {font-variant: small-caps}
  </ STYLE>
 </ HEAD>
 <BODY>
 <P> <span class = "sc-ex"> La première quelques-uns </ SPAN> alinéa, les mots soulignés dans les petites lettres majuscules.
 </ BODY>

Dans l'exemple suivant, nous utilisons l'élément DIV et un attribut de classe pour définir la justification du texte pour une série de paragraphes qui composent l'introduction d'un article scientifique. Les informations de style peut être réutilisé pour d' autres sections de l'administration en définissant un attribut de classe partout dans le document. 

 <HEAD>
  <STYLE type = "text / css">
  DIV.Abstract {text-align: justify}
  </ STYLE>
 </ HEAD>
 <BODY>
  <DIV class = "Résumé">
  <P> La gamme de produits Chieftain est notre gagnant du marché pour
  l'année à venir.  Le présent rapport expose comment positionner
  Chieftain contre les produits concurrents.

  <P> Chieftain remplace la gamme Commander, qui sera
  rester sur la liste des prix jusqu'à nouvel ordre.
  </ DIV>
 </ BODY>

14.2.4 Types d'appareils

HTML permet aux auteurs de créer des documents en utilisant les caractéristiques de l'appareil, qui sera soumis au document (par exemple, des affichages graphiques, écrans de télévision, les appareils portatifs, les navigateurs vocaux, des appareils tactiles sur la base de l'alphabet Broglie, etc.). Avec l'aide des attributs médias auteurs peuvent permettre aux agents utilisateurs de charger et d' appliquer des feuilles de style sélectivement. Voir. Liste reconnus descripteurs de média .

Annonces dans cet exemple , sont appliqués aux éléments de H1 . Lors de l'affichage sur un projecteur lors d'une réunion, toutes les instances seront affichés en bleu. Lors de l'impression, ils seront alignés. 

  <HEAD>
  <STYLE type = "text / css" media = "projection">
  H1 {color: blue}
  </ STYLE>
  <STYLE type = "text / css" media = "print">
  H1 {text-align: center}
  </ STYLE>

Cet exemple ajoute des effets sonores pour le dispositif de sortie vocale: 

  <STYLE type = "text / css" media = "sonore">
  A {cue-before: uri (bell.aiff);  cue-after: uri (dong.wav)}
  </ STYLE>
 </ HEAD>

Gestion des appareils est particulièrement intéressant lorsqu'il est utilisé avec des feuilles de style externes depuis les agents utilisateurs peuvent gagner du temps en téléchargeant à partir du réseau que des feuilles de style qui appliquent au dispositif actuel. Par exemple, les navigateurs vocaux ne peuvent pas charger des feuilles de style conçus pour la présentation visuelle. Voir. Dans la section des étapes en fonction des équipements .

14.3 feuilles de style externes

Les auteurs peuvent séparer les feuilles de style à partir de documents HTML. Il offre les avantages suivants:

  • Les auteurs et les gestionnaires de sites Web peuvent partager une feuille de style dans un certain nombre de documents (et sites).
  • Les auteurs peuvent modifier la feuille de style sans changer le document.
  • Les agents utilisateurs peuvent sélectivement télécharger la feuille de style (selon les descriptions de périphériques).

14.3.1 privilégiées et feuilles de style

HTML permet aux auteurs d'associer avec le document, un certain nombre de feuilles de style externes. feuille de style de langue définit l'interaction de plusieurs feuilles de style externes (par exemple, les règles "cascades" CSS).

Les auteurs peuvent spécifier un certain nombre de feuilles de style appelées mutuellement exclusives alternent. Les utilisateurs peuvent sélectionner la table qu'ils aiment plus. Par exemple, un auteur peut spécifier un style pour les petits écrans, l'autre - pour les utilisateurs ayant une déficience visuelle (par exemple, en utilisant une police de grande taille). Les agents utilisateurs devraient permettre à l'utilisateur de sélectionner l'une des tables alternatives.

L'auteur peut indiquer que l' une des alternatives est préféré. Les agents utilisateurs devraient appliquer la feuille de style de l'auteur préféré, à moins que l'utilisateur a choisi une autre alternative.

Les auteurs peuvent regrouper plusieurs feuilles de style (y compris l'auteur préféré) sous un nom de style unique. Si l'utilisateur sélectionne un style nommé, l'agent utilisateur doit appliquer toutes les feuilles de style avec ce nom. Les agents utilisateurs ne doivent pas appliquer des feuilles de style alternatives avec un nom de style différent. Comment attribuer un nom à un groupe de styles, décrit dans la section sur la définition de la feuille de style externe .

Les auteurs peuvent également spécifier des feuilles de style persistants que les agents utilisateurs doivent appliquer en plus des styles alternatifs.

Lors de l' utilisation des feuilles de style, les agents utilisateurs devraient considérer les descripteurs de périphériques .

Les agents utilisateurs devraient également permettre aux utilisateurs de désactiver complètement la table de style de l'auteur; Dans ce cas, l'agent utilisateur ne doit pas appliquer l'une des feuilles de style.

14.3.2 La spécification des feuilles de style externes

Les auteurs indiquent des feuilles de style externes en utilisant l'élément d' attribut LINK :

  • Situé dans l'attribut href emplacement du fichier stylesheet. La valeur href doit être l'URI .
  • Réglez la valeur de l' attribut type indiquant la langue de la ressource liée (stylesheets). Cela permet aux agents utilisateurs de télécharger les feuilles de style ne sont pas en utilisant un langage non pris en charge.
  • Indiquez si la feuille de style en permanence, préféré ou alternatif:
    • Pour la table était une constante, définissez l'attribut rel valeur "stylesheet", et ne définissez pas l'attribut title .
    • Pour la table a été préféré, définissez l'attribut rel valeur "stylesheet", et laisser le nom de la table en utilisant l'attribut title .
    • Pour spécifier une table de remplacement, définissez l'attribut rel valeur "alternate stylesheet" et de donner le nom de la table en utilisant l'attribut title .

Les agents utilisateurs devraient fournir aux utilisateurs les moyens de visualiser et de sélectionner une feuille de style de la liste des alternatives. Pour attribuer le titre est recommandé de définir la valeur qui va représenter ce tableau dans la liste.

Dans cet exemple, nous définissons d' abord une feuille de style constante, ce qui est dans le fichier mystyle.css: 

 <LINK href = "mystyle.css" rel = type "stylesheet" = "text / css">

Réglage de l'attribut title nomme sa table auteur préféré: 

  <LINK href = "mystyle.css" title = "Compact" rel = type "stylesheet" = "text / css">

Ajout du mot - clé "alternate" et l'attribut rel faire sa feuille de style alternatif: 

 <LINK href = "mystyle.css" title = "Medium" rel = de type "alternate stylesheet" = "text / css">

Pour plus d' informations sur les feuilles de style externes peuvent être trouvés dans la section sur les liens et les feuilles de style externes.

Les auteurs peuvent également être utilisés pour définir l'élément de feuille de style préféré du META . Par exemple, pour définir la feuille de style préféré "compact", les auteurs peuvent inclure l'élément (voir l'exemple précédent.) HEAD ligne suivante: 

 <META http-equiv = "Default-Style" content = "compact">

Je préfère la feuille de style peut également être spécifié en utilisant les en-têtes HTTP. Annonce META ci - dessus est équivalente à l' en- tête HTTP: 

  Default-Style: "compact"

Si la feuille de style préféré est indiquée par deux ou plusieurs éléments des META - têtes ou HTTP, ce dernier annonce l' emporte. On croit que les en- têtes HTTP sont traitées avant l'annonce de la HEAD .

Si la feuille de style préféré est défini par deux ou plusieurs éléments du LINK , présente l'avantage de la première.

feuilles de style préférées spécifiées en utilisant META ou HTTP headers ont la priorité sur les tables élément définissable de LINK .

14.4 Cascades stylesheets

Cascading langages de feuille de style , tels que CSS, permettent l'utilisation des informations de style à partir de plusieurs sources. Cependant, toutes les langues ne prennent en charge les feuilles de style en cascade. Pour définir une cascade, les auteurs précisent une séquence d'éléments de LINK et / ou le STYLE . Cascade informations de feuille de style est faite de la manière indiquée articles sous la HEAD .

Remarque. Cette spécification ne décrit pas les feuilles de style en cascade dans des langues différentes. Les auteurs devraient éviter de mélanger les langues.

Dans l'exemple suivant, nous indiquons deux feuilles de style alternatives nommées "compact". Si l'utilisateur choisit le style de "compact", l'agent utilisateur doit appliquer les deux tables externes, ainsi que "common.css" table permanente. Si l'utilisateur choisit le style de "gros caractères", sera appliquée seulement à une table alternative »bigprint.css" et la table "common.css" constante. 

 <LINK rel = "alternate stylesheet" title = href "compact" = type "small-base.css" = "text / css">
 <LINK rel = "alternate stylesheet" title = href "compact" = "small-extras.css" type = "text / css">
 <LINK rel = "alternate stylesheet" title = "gros caractères" href = type "bigprint.css" = "text / css">
 <LINK rel = "stylesheet" href = "common.css" type = "text / css">

Voici un exemple de la cascade, ce qui implique à la fois des éléments - LINK et STYLE . 

 <LINK rel = "stylesheet" href = "corporate.css" type = "text / css">
 <LINK rel = "stylesheet" href = "techreport.css" type = "text / css">
 <STYLE type = "text / css">
  p.special {color: rgb (230, 100, 180)}
 </ STYLE>

14.4.1 Cascades, selon le dispositif

La cascade peut inclure des feuilles de style applicables aux différents dispositifs. Elements LINK et STYLE peuvent être utilisés avec l'attribut media . L'agent utilisateur est chargé de filtrer les feuilles de style, ne pas appliquer au dispositif actuel.

Dans l'exemple suivant, nous définissons une cascade où le stylesheet "corporate" apparaît dans plusieurs versions: l'une pour l'impression et l'autre pour la présentation à l'écran, le troisième pour les navigateurs vocaux (utile, par exemple, lors de la lecture électronique dans la voiture). Table "techreport" est appliqué à tous les appareils. Couleur à la règle, définit les éléments du style , utilisés pour l' impression et de l' écran , mais pas pour le rendu sonore. 

 <= LINK rel = médias "stylesheet" href "sonore" = le type "corporate-aural.css" = "text / css">
 <Link rel = "stylesheet media" = href "screen" = "corporate-screen.css" type = "text / css">
 <LINK rel = "stylesheet" media = "print" href = "corporate-print.css" type = "text / css">
 <LINK rel = "stylesheet" href = "techreport.css" type = "text / css">
 <STYLE type = "text / css">
  p.special {color: rgb (230, 100, 180)}
 </ STYLE>

14.4.2 Héritage et cascades

Si l'agent utilisateur va présenter un document, il a besoin de trouver des valeurs pour les propriétés de style, par exemple, la famille de polices, le style de police, taille de la police, de la longueur de la ligne, la couleur du texte, etc. Le mécanisme exact dépend de la langue de feuille de style, mais en général, applique ce qui suit:

le mécanisme en cascade est utilisé lorsque l'élément est utilisé un certain nombre de règles de style. Ce mécanisme permet à l'agent utilisateur de trier les règles par la spécificité et de déterminer quelle règle à appliquer. Si la règle ne peut pas être trouvée, l'étape suivante dépend des propriétés de l'héritage. Toutes les propriétés ne peuvent être héritées. Pour ces propriétés, la langue de feuille de style fournit des valeurs par défaut pour une utilisation en l'absence de règles explicites pour un élément particulier.

Si la propriété est héritée, l'agent utilisateur vérifie directement l'élément qui intègre l'élément courant, et est à la recherche des règles qui lui sont applicables. Ce processus se poursuit jusqu'à ce qu'il soit temps jusqu'à ce que la règle applicable est trouvée. Cet agencement fournit un compact stylesheets de référence. Par exemple, les auteurs peuvent spécifier la famille de polices pour tous les éléments de la section BODY par une règle unique pour l'élément BODY .

14.5 Comment cacher les informations de style de l' agent utilisateur

Certaines langues de feuille de style supportent la syntaxe qui permet aux auteurs de cacher le contenu des éléments STYLE par les agents utilisateurs inappropriés.

Dans cet exemple, le CSS montre comment vous pouvez masquer le contenu des éléments de la STYLE , afin d' assurer que les personnes âgées spécification inappropriée, les agents utilisateurs ne seront pas les présenter sous forme de texte. 

 <STYLE type = "text / css">
 <! -
  H1 {color: red}
  P {color: blue}
  ->
 </ STYLE>

14,6 feuilles de style Linking en utilisant les en- têtes HTTP

Les gestionnaires de serveur Web peuvent configurer le serveur afin que le style de tableau est appliqué à un groupe de pages. En- tête HTTP Link, décrit dans [RFC2068] , section 19.6.1.2, a le même effet comme un élément de la LINK , avec les mêmes attributs et les valeurs. Plusieurs en- têtes de liaison correspondent à plusieurs éléments LINK dans le même ordre. Par exemple, 

 Lien: <http://www.acme.com/corporate.css>;  REL = stylesheet

matches: 

 <LINK rel = "stylesheet" href = "http://www.acme.com/corporate.css">

Vous pouvez spécifier plusieurs styles alternatifs avec quelques têtes Link, puis utiliser l'attribut rel pour déterminer le style par défaut.

Dans l'exemple suivant, le style de "compact" est appliqué par défaut , car il n'a pas le mot - clé "alternate" attribut pour le rel . 

 Lien: <compact.css>;  rel = "stylesheet";  title = "compact"
 Lien: <bigprint.css>;  rel = "alternate stylesheet";  title = "gros caractères"

Cela fonctionne lors de l'envoi des documents HTML par e-mail. Certains agents de messagerie peuvent modifier l'ordre des titres [le RFC822] . Afin de protéger le style en changeant l'ordre des étapes pour les tables, les titres ont demandé Link, les auteurs peuvent utiliser l' en- tête de l' union pour combiner plusieurs instances du même champ d' en- tête. Les guillemets ne sont nécessaires que si les valeurs d'attribut comprennent des espaces. Utilisez entités SGML pour référencer des caractères qui ne sont pas autorisés dans un en-tête HTTP ou e-mail, ou des caractères qui peuvent être modifiés en transit à travers les passerelles.

Éléments de LINK et META , implicites les en- têtes HTTP sont définies comme un élément explicite rencontré plus tôt LINK et META et la section HEAD du document.

retour d' autres contenus éléments attributs index