Ecrire une règle CSS pour un nouvel élément parent. L'exemple suivant crée une nouvelle règle nommée #myParentElement. La règle assigne à une position absolue de 100 pixels vers le bas à partir du haut de la page, 50 pixels de la gauche de la page et met 30 pixels de remplissage autour de l'élément enfant. Utilisation de la propriété padding est cruciale car elle finira par représenter la composante transparente de l'élément parent tout en centrant l'élément enfant.
myParentElement {
position: absolute;
top: 100px;
gauche: 50px;
padding: 30px;
}
Attribuer une propriété de la transparence à la règle de #myParentElement. Cet exemple utilise la valeur RGBA de la propriété CSS background pour coiffer un fond partiellement transparente pour l'élément parent. Par opposition à la propriété d'opacité, le réglage d'opacité RGBA est pas automatiquement transmis à des éléments de l'enfant. La valeur accepte quatre paramètres. Les trois premiers paramètres définissent les différents composants de rouge, vert et bleu. Le quatrième paramètre détermine l'opacité sur une échelle de 0,1 à 1. Dans cet exemple, les paramètres rouges et verts sont laissés à zéro, tandis que le réglage bleu est placé à 10 et l'opacité est réglée à 0,5. Cela va créer un calque transparent en utilisant un écran gris.
myParentElement {
position: absolute;
top: 100px;
gauche: 50px;
padding: 30px;
fond: rgba (0, 0, 10, 0,5);
}
Écris une règle CSS pour l'élément enfant. Dans cet exemple, la règle de #myChildElment contient simplement du texte noir sur un fond blanc. Cet élément ne sera pas inhérente de la valeur d'opacité de .5 de la règle de #myParentElment.
myChildElement {
fond: blanc;
la couleur noire;
}
Appliquer le CSS pour le document HTML. Les styles CSS div un enfant (élément d'un site Web) avec l'écriture noire sur un fond blanc. Cette div qui est placé à l'intérieur de la div parent. Le div parent a un pixel 30 (en raison de la propriété padding), frontière grise partiellement transparente. La transparence de la div parent est pas hérité par le div enfant.
Le texte de la div enfant va ici.