« Le langage CSS/Fonds, bordures, marges et espacements » : différence entre les versions
Contenu supprimé Contenu ajouté
Aucun résumé des modifications |
|||
Ligne 1 :
{{Sommaire_CSS}}
== Surface ==
L'élément HTML — texte, image, tableau, … compris entre deux balises — est inclus dans une [[../Introduction#Éléments et boîtes|boîte]] dont on peut définir le fond et la bordure.
Ligne 62 ⟶ 63 :
<source lang=html>
<div style="background-color: yellow; width: 100%; padding: 5px;">
<div style="background-color: lightblue; opacity: 0.5; position:50px;">
<div style="background-color: red; opacity: 0.5; position:50px;">Rouge sur
</div>
</source>
donne :
<div style="background-color: yellow; width: 100%; padding: 5px;">
<div style="background-color: lightblue; opacity: 0.5; position:50px;">
<div style="background-color: red; opacity: 0.5; position:50px;">Rouge sur
</div>
Ligne 192 ⟶ 193 :
== Arrondis ==
On définit l'arrondit d'un cadre avec le rayon de ses quatre coins :
border-radius: 10px;
== Profondeur ==
La 3D peut-être mesurée par trois axes : x (longueur), y (hauteur), z (profondeur). Pour définir dans quel ordre les objets doivent se superposer, on utilise la propriété <code>z-index</code>, qui représente leurs positions sur l'axe z.
Exemple :
<source lang=html>
<div style="background-color: yellow; width: 100%; padding: 5px; z-index: 10;">
<div style="background-color: lightblue; position: 50px; z-index: 9;">Bleu sur jaune.</div>
<div style="background-color: red; position: 50px; z-index: 11;">Rouge sur jaune.</div>
</div>
</source>
donne :
<div style="background-color: yellow; width: 100%; padding: 5px; z-index: 10;">
<div style="background-color: lightblue; position: 50px; z-index: 9;">Bleu sous jaune.</div>
<div style="background-color: red; position: 50px; z-index: 11;">Rouge sur jaune.</div>
</div>
| |||