Dans le CSS les balises utilisés sont les suivantes :
/*********************************/
/* Exemple pour les balises HTML */
/*********************************/
body{ /* Exemple pour le BODY d'une page HTML */
color: green;
}
h1, h2, article{
color: blue;
}
/*******************************************/
/* Pour les id dans les balises HTML */
/* Les id sont uniques et un id correspond */
/* à une seule balise HTML */
/*******************************************/
#id1{ /* Exemple pour l'id unique 'id1' d'une page HTML */
text-align: center;
}
#id2{
text-align: right;
}
/***********************************************/
/* Pour les class dans les balises HTML. */
/* Les class peuvent correspondent à plusieurs */
/* balises HTML */
/***********************************************/
.gauche{ /* Exemple pour le nom de class 'gauche' d'une page HTML */
text-align: left;
}
.droite{
text-align: right;
}
Les propriétés CSS les plus courantes sont :
Mise en forme du texte
| PROPRIÉTÉ | Description | valeurs | exemple |
|---|---|---|---|
| font-family | Nom police utilisée | police1, police2, serif, sans-serif, monospace, etc | font-family: cursive, sans-serif; |
| font-size | Taille du texte | 1.5em, 14px, 120%. | font-size: 16px; |
| font-weight | Police gras | bold, normal | font-weight: bold; |
| font-style | Police italique | italic, oblique, normal | font-style: italic; |
| text-decoration | Texte soulignée, barrée ou clignotant | underline, overline, line-through, blink, none | text-decoration: underline; |
| text-transform | Texte en majuscule ou minuscule | capitalize, lowercase, uppercase | text-transform: uppercase |
| text-align | Alignement du texte horizontal | left, center, right, justify | text-align:center; |
| line-height | Hauteur de ligne | 8px, 120%, normal… | line-height: 150%; |
Couleur et fond
| PROPRIÉTÉ | DESCRIPTION | VALEURS | EXEMPLE |
|---|---|---|---|
| color | Couleur du texte | nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu, transparence), #CCC… | color: blue; |
| background-color | Couleur de fond | nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu, transparence), #CCC… | background-color: rgb(200,100,50); |
Les boîtes
| PROPRIÉTÉ | DESCRIPTION | VALEURS | EXEMPLE |
|---|---|---|---|
| width | Largeur | % ou px | width: 50%; |
| height | Hauteur | % ou px | height: 200px; |
| margin | Marges globales extérieures haut, bas, droite et gauche | px | margin: 20px; |
| margin-top | Marge en haut extérieur | px | margin-top: 10px; |
| margin-bottom | Marge en bas extérieur | px | margin-bottom: 10px; |
| margin-left | Marge gauche extérieur | px | margin-left: 10px; |
| margin-right | Marge droite extérieur | px | margin-right: 10px; |
| padding | Marge globales intérieurs haut, bas, droite et gauche | px | padding: 50px; |
| padding-top | Marge en haut intérieur | px | padding-top: 50px; |
| padding-bottom | Marge en bas intérieur | px | padding-bottom: 50px; |
| padding-left | Marge gauche intérieur | px | padding-left: 50px; |
| padding-right | Marge droite intérieur | px | padding-right: 50px; |
| border | Bordure | px type couleur | border: 2px solid black |
Position et affichage
| PROPRIÉTÉ | DESCRIPTION | VALEURS | EXEMPLE |
|---|---|---|---|
| display | Type d’élément ( block , inline , inline-block , none …) | block, inline, inline-block, table, table-cell, none | display: block; |
| visibility | Afficher, masquer | visible, hidden | visibility: hidden; |
| float | Flottant | left, right, none | float: right; |
| clear | Arrêt d’un flottant | left, right, both, none | clear: both; |
| position | Positionnement | relative, absolute, static | position: relative; |
| top | Position par rapport au haut | px | top: 20px; |
| bottom | Position par rapport au bas | px | bottom: 20px; |
| left | Position par rapport à la gauche | px | left: 20px; |
| right | Position par rapport à la droite | px | right: 20px; |
| z-index | Ordre d’affichage en cas de superposition. La plus grande valeur est affichée par-dessus les autres. | Numérique | z-index: -1; z-index: 1; z-index: 10; |
0 commentaires