WebPetit

La propriété CSS margin permet de définir les propriétés de la liste d’un élément en une seule fois.

ul li{
list-style: square none outside;
}

Elle peut prendre comme valeurs (l’ordre n’a pas d’importance) : list-style-type, list-style-image, list-style-position.

Exemple :

CSS

ul li{
list-style: square none outside;
}

HTML

<ul>
Lorem ipsum dolor sit amet,
<li>consectetur adipiscing elit.</li>
<li> Suspendisse pharetra placerat felis,</li>
<li>quis auctor urna lobortis eu.</li>
</ul>

Lorem ipsum dolor sit amet,
• consectetur adipiscing elit.
• Suspendisse pharetra placerat felis,
• quis auctor urna lobortis eu.

La propriété CSS clear permet de modifier le positionnement des éléments sur lesquels elle est appliquée .
Les valeurs possibles sont :left, right, both, none.

p {
clear:both;
}

Elle permet de modifier le positionnement d’un élément, mais à la différence de la propriété float, elle ne s’applique qu’aux éléments de type bloc.
Le positionnement se fait par rapport à l’élément qui le précède et permet de détacher le bloc auquel elle est rattachée ainsi que de ne pas se chevaucher avec d’autre élément, ce qui se passe avec le float.
Cette propriété est très utile pour un pied de page par exemple.

Exemple :

CSS

#haut{
border:1px solid green;
float:right;
width:200px;
}
#bas{
border:1px solid red;
clear:both;
}

HTML

<div id="haut"><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</p></div>

<div id="bas">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</p>
</div>

La propriété CSS text-decoration permet de modifier la décoration (soulignement,…) des éléments sur lesquels elle est appliquée.

p {
text-decoration:underline;
}

Elle permet de modifier la décoration d’un texte, dans cette exemple elle s’applique à un paragraphe.
Les valeurs possibles sont :

• underline: pour souligner
• overline: pour surligner
• line-through: pour barrer
• blink: pour faire clignoter (sauf Internet Explorer et safari).
• none: aucune décoration

Exemple :

CSS

p{
text-decoration:underline,
}

HTML

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

La propriété CSS opacity permet de définir l’opacité (transparence) d’un élément HTML.

#mon-identifiant {
opacity:0.5;
}

Elle prend en valeur en un nombre compris entre 0 et 1. Comme pour les em c’est un coefficient (0.5 pour 50% d’opacité). Plus le nombre se rapproche de 1  plus l’élément HTML est opaque. Plus il se rapproche de 0 plus l’élément HTML est transparent.

Parce que Internet Explorer est casse-couilles spécial, il faut rajouter une ligne spécialement pour lui :

#mon-identifiant {
opacity : 0.5;
filter : alpha(opacity=50);
}

Exemple

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.</p>

CSS

p  {
background:red;
color:black;
opacity : 0.5;
filter : alpha(opacity=50);
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

La propriété CSS margin permet de définir les propriétés  des quatre marges extérieures d’un élément en une seule fois.

p{
margin: 20px 20px 20px 20px;
}

Les valeurs renseignés sont de type numérique en %, pt, px ou em.

Il y a plusieurs possibilités :
• S’il y a une valeur celle-ci est appliquée à quatre marges intérieures.
• S’il y a deux valeurs la première est appliquée aux marges intérieures hautes et basses et la deuxième aux marges intérieures droites et gauches.
• S’il y a quatre valeurs la première est appliquée à une marge intérieure à la fois dans le sens des aiguilles d’une montre en partant de la marge intérieure haute.

Exemple :

CSS

#contour{
border:1px solid green;
}
p{
border: 1px solid red;
margin: 20px 20px 20px 20px;
}

HTML

<div id ="contour"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.</p></div>

La propriété CSS padding-top permet de modifier la taille de la marge intérieure haute des éléments sur lesquels elle est appliquée.

p {
padding-top:20px;
}

Elle permet de modifier la taille de la marge intérieure haute, dans cette exemple elle s’applique à un paragraphe.
Les valeurs sont des nombres en pixel(px), point(pt) ou pourcentage(%).

Exemple :

CSS

#contour{
border:1px solid green;
padding-top:20px;
}
p{
border:1px solid red;
margin:0;
}

HTML

<div id"contour">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</p>
</div>