<css>
Permet de définir des styles css qui s'appliquent à l'élément parent du tag css. Ou à des éléments enfants si on le spécifie avec self-sel (élément ou enfants) ou selector (enfants uniquement)
| attribut | défaut | description |
|---|---|---|
| selector | sous sélecteur pour cibler ses enfants | |
| self-sel | sélecteur pour cibler une variante de l'élément ou ses enfants | |
| use-font | applique tous les styles défini dans un tag font | |
| use-background | applique tous les styles défini dans un tag background | |
| media | spécifie le media, par ex: media='print' pour l'impression | |
| breakpoint | spécifie un point d'arrêt pour appliquer des styles responsive (media-query) |
Exemples
Les styles s'appliquent par défaut à l'élément parent. Par exemple pour fixer le bord d'un div
<css border='1px solid red' />
...
</div>
Il est possible de sélectionner des sous éléments avec l'attribut selector
Il est possible d'appliquer les styles uniquement à une variante de l'élément courant avec l'attribut self-sel
N'affecte les enfant de type img seulement si l'élément courant a la classe on.
Automatismes CSS
Certains réglages CSS disposent d'automatismes pour simplifier l'écriture ou pour gérer quelques incompatibilités cross-browser.
RGBA Hack
au lieu d'utiliser deux définitions de couleurs pour rgb et rgba, on utilisera la syntax mix()
bg-color est un code couleur html, par exemple: #ff0 et il représente la couleur de fond derrière l'élément semi-transparent. fg-color est un code couleur html qui représente la couleur souhaitée mais sans la transparence. Opacity représente l'opacité voulue.
Ceci produira un code rgb et un code rgba. Le premier est calculer en mixant les couleurs. Le seconds est marqué comme rgba et sera calculé par le navigateur avec une vraie transparence.
Attention, il n'est pas encore possible d'écrire un code couleur en rgb dans mix. Ne pas ecrire ceci: mix(rgb(128,64,212), #ff0, 0.5)
Nuance entre select et self-sel
la valeur de l'attribut selector et apondue après un espace au selecteur représentant l'élément courant (l'élément dans lequel on code le tag css).
Par exemple:
<div id='toto'>
<css selector='.big' />
</div>
</body>
Produit: #toto .big
Alors que
<div id='toto'>
<css self-sel='.big' />
</div>
</body>
Produit: #toto.big
Il est possible d'utiliser uniquement l'attribut self-sel, mais alors si on veut cibler un enfant de class 'big' il faut écrire select=" .big" en assurant un espace avant le point.
Editer