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