Contenu
| Valeur : | [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit |
| Initiale : | auto |
| S'applique à : | tous les éléments |
| Héritée : | oui |
| Pourcentage : | sans objet |
| Médias : | visuel, interactif |
Cette propriété spécifie le type de curseur qui sera affiché pour l'appareil de pointage. Les significations des valeurs sont :
P { cursor : url("mything.cur"), url("second.csr"), text; }
En plus de la possibilité de prédéfinir les valeurs de couleur du texte, de l'arrière-plan, etc., CSS2 permet aux auteurs la spécification de couleurs de façon à les intégrer dans l'environnement graphique de l'utilisateur. Les feuilles de style qui prennent en compte les préférences de l'utilisateur offrent ainsi certains avantages :
On a voulu que le jeu des valeurs définies pour les couleurs système soit exhaustif. Pour les systèmes n'ayant pas de valeur correspondante, la valeur spécifiée devrait être reliée à l'attribut système le plus proche ou à une couleur par défaut.
Voici la liste des valeurs supplémentaires des attributs CSS liés à la couleur et leurs significations. Toute propriété de couleur (ex. 'color' ou 'background-color') peut prendre l'un des noms suivants. Bien que ceux-ci ne soient pas sensibles à la casse, on recommande leur capitalisation mélangée comme ci-dessous, pour une meilleure lisibilité.
Par exemple, pour que les couleurs d'avant-plan et d'arrière-plan d'un paragraphe soient les mêmes que celles de la fenêtre de l'utilisateur :
P { color: WindowText; background-color: Window }
Comme pour les couleurs, les auteurs peuvent spécifier des polices de manière à utiliser les ressources du système de l'utilisateur. Consulter la propriété 'font' pour des détails.
Parfois, les auteurs de feuilles de style peuvent souhaiter créer des contours autour d'objets visuels, comme les boutons, les champs actifs des formulaires, les images découpées, etc., pour les faire ressortir. Les contours CSS2 diffèrent des bordures ainsi :
Les propriétés de contour régissent le style de ces contours dynamiques.
| Valeur : | [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit |
| Initiale : | voir les propriétés individuelles |
| S'applique à : | tous les éléments |
| Héritée : | non |
| Pourcentage : | sans objet |
| Médias : | visuel, interactif |
| Valeur : | <bordure-épaisseur> | inherit |
| Initiale : | medium |
| S'applique à : | tous les éléments |
| Héritée : | non |
| Pourcentage : | sans objet |
| Médias : | visuel, interactif |
| Valeur : | <bordure-style> | inherit |
| Initiale : | none |
| S'applique à : | tous les éléments |
| Héritée : | non |
| Pourcentage : | sans objet |
| Médias : | visuel, interactif |
| Valeur : | <couleur> | invert | inherit |
| Initiale : | invert |
| S'applique à : | tous les éléments |
| Héritée : | non |
| Pourcentage : | sans objet |
| Médias : | visuel, interactif |
Le contour produit par les propriétés de contour est dessiné "par dessus" la boîte, c.à.d. le contour est toujours au-dessus de celle-ci et n'influence pas sur son placement ou sur sa taille, et sur aucune des autres boîtes. De ce fait, l'affichage, ou la suppression, des contours ne provoque pas une nouvelle mise en forme de la page.
Le contour est dessiné juste en dehors du bord de la bordure.
Les contours peuvent avoir une forme non rectangulaire. Par exemple, quand un élément est distribué sur plusieurs lignes, le contour correspond à celui minimum qui englobe toutes les boîtes de l'élément. À l'inverse des bordures, le contour ne s'ouvre pas à la fin ou au début de la boîte de ligne, et celui-ci est toujours entièrement connecté.
La propriété 'outline-width' admet les mêmes valeurs que celles de la propriété 'border-width'.
La propriété 'outline-style' admet les mêmes valeurs que celles de la propriété'border-style', sauf la valeur 'hidden' qui n'est pas admise pour un style de contour.
La propriété 'outline-color' admet toutes les valeurs de couleur, avec en plus le mot-clé 'invert'. Celui-ci produit l'inversion des couleurs des pixels à l'écran. C'est une astuce courante pour s'assurer que la bordure active soit visible, indépendamment de la couleur du fond.
La propriété raccourcie 'outline' sert à la spécification des valeurs pour les trois propriétés individuelles 'outline-style', 'outline-width' et 'outline-color'.
Noter que le contour est le même pour tous les côtés, à l'inverse des bordures, il n'existe pas de propriétés 'outline-top' ou 'outline-left'.
Cette spécification ne définit pas, quand plusieurs contours se chevauchent, comment ceux-ci sont dessinés ni comment le faire pour les boîtes dont des parties sont cachées derrière d'autres éléments.
Remarque : Le contour d'activation [ndt. focus outline] n'affectant pas la mise en forme (c.à.d. aucun espace n'est consacré aux contours dans le modèle de la boîte), celui-ci peut très bien déborder sur d'autres éléments de la page.
Voici un exemple de dessin d'un contour épais autour d'un élément BUTTON :
BUTTON { outline-width : thick }
On peut employer un script pour le changement dynamique de l'épaisseur du contour, sans induire une remise en forme de la page.
Les interfaces graphiques des utilisateurs peuvent employer des contours autour des éléments pour confirmer à ceux-ci lequel des éléments de la page est sélectionné. Ces contours s'ajoutent aux éventuelles bordures de ces éléments, leur sélection ou désélection ne devant pas provoquer une nouvelle mise en forme de la page. La sélection d'un élément d'un document relève d'une action de l'utilisateur (ex. saisie d'un texte, sélection d'un bouton, etc.). Les agents utilisateurs reconnaissant le groupe de média interactif doivent conserver l'information relative à l'endroit où intervient la sélection et doivent aussi en donner une représentation. Ceci peut être réalisé à l'aide de contours dynamiques en conjonction avec la pseudo-classe :focus.
Par exemple, on peut employer les règles suivantes pour faire apparaître un trait noir épais autour d'un élément sélectionné, ce trait devenant rouge quand on l'active :
:focus { outline: thick solid black }
:active { outline: thick solid red }
Le groupe de travail de CSS considère que le grossissement d'un document, ou de parties de celui-ci, ne devrait pas être spécifié par des feuilles de style. Les agents utilisateurs peuvent en avoir une interprétation de différentes façons (ex. images agrandies, volumes sonores augmentés, etc.).
Lors du grossissement d'une page, les agents utilisateurs devraient conserver les relations entre les éléments positionnés. Par exemple, une bande dessinée peut se composer d'images sur lesquelles viennent s'appliquer des éléments de texte. Quand un agent utilisateur grossit celle-ci, le texte devrait rester dans les bulles de la bande dessinée.