« Le langage CSS/Fonds, bordures, marges et espacements » : différence entre les versions

Contenu supprimé Contenu ajouté
→‎Bordures et marges : Maintenabilité : toujours garder un point-virgule à la fin
Ligne 347 :
** <code>none</code> : Aucune bordure ;
* sa largeur : <code>border-width</code>, dont la valeur est une distance ou un mot-clef de type <code>medium</code>.
; Exemple en HTML
<syntaxhighlight lang="html">
&lt;div style="border-color: gray;
<div style="border-stylecolor: dottedgray;
border-widthstyle: medium"&gtdotted;
border-width: medium;">
Bla bla bla
&lt;/div&gt;
</div>
</syntaxhighlight>
: donne
{{début cadre|bleu}}
Ligne 363 ⟶ 365 :
 
On peut synthétiser tout cela avec <code>border</code>, l'exemple ci-dessus devient alors
<syntaxhighlight lang="html">
&lt;div style="border: gray dotted medium"&gt;
&lt;<div style="border-color: gray dotted medium;">
Bla bla bla
&lt;/div&gt;
</div>
</syntaxhighlight>
 
On peut définir une bordure différente
Ligne 373 ⟶ 377 :
* et à droite, avec <code>border-right</code>.
; Exemple
<syntaxhighlight lang="css">
.foo {
border-top:solid 1px black;
border-bottomtop:solid 1px black;
border-leftbottom:nonesolid 1px black;
border-rightleft:none;
border-right:none;
}
et on peut définir indépendemmant chaque caractéristique de chaque trait : <code>border-top-width</code>, <code>border-top-style</code>, …
</syntaxhighlight>
et on peut définir indépendemmantindépendamment chaque caractéristique de chaque trait : <code>border-top-width</code>, <code>border-top-style</code>, …
 
=== Marge extérieure ===
Ligne 388 ⟶ 394 :
 
; Double soulignement
: On peut combiner la propriété <code>text-decoration</code> avec <code>border-bottom</code> pour produire un <span style="text-decoration: underline; padding-bottom: 0.08em; border-bottom: solid 1px">double soulignement</span> :
<syntaxhighlight lang="css">
.double-soulignement {
text-decoration: underline;
padding text-bottomdecoration: 0.08emunderline;
border padding-bottom: solid 1px0.08em;
border-topbottom: solid 1px black;
}
</syntaxhighlight>
 
; Soulignement pointillé