CSS informations

par | Jan 1, 2021 | CSS, Web | 0 commentaires

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ÉDescriptionvaleursexemple
font-familyNom police utiliséepolice1, police2, serif,
sans-serif, monospace, etc
font-family:
cursive, sans-serif;
font-sizeTaille du texte1.5em, 14px, 120%.font-size: 16px;
font-weightPolice grasbold, normalfont-weight: bold;
font-stylePolice italiqueitalic, oblique, normalfont-style: italic;
text-decorationTexte soulignée,
barrée ou clignotant
underline, overline,
line-through, blink, none
text-decoration:
underline;
text-transformTexte en majuscule
ou minuscule
capitalize, lowercase,
uppercase
text-transform:
uppercase
text-alignAlignement du texte
horizontal
left, center, right, justifytext-align:center;
line-heightHauteur de ligne8px, 120%, normal…line-height: 150%;

Couleur et fond

PROPRIÉTÉDESCRIPTIONVALEURSEXEMPLE
colorCouleur du textenom,
rgb(rouge,vert,bleu),
rgba(rouge,vert,bleu,
transparence),
#CCC…
color: blue;
background-colorCouleur de fondnom,
rgb(rouge,vert,bleu),
rgba(rouge,vert,bleu,
transparence),
#CCC…
background-color:
rgb(200,100,50);

Les boîtes

PROPRIÉTÉDESCRIPTIONVALEURSEXEMPLE
widthLargeur% ou pxwidth: 50%;
heightHauteur% ou pxheight: 200px;
marginMarges globales extérieures
haut, bas, droite et gauche
pxmargin: 20px;
margin-topMarge en haut extérieurpxmargin-top: 10px;
margin-bottomMarge en bas extérieurpxmargin-bottom:
10px;
margin-leftMarge gauche extérieurpxmargin-left: 10px;
margin-rightMarge droite extérieurpxmargin-right: 10px;
paddingMarge globales intérieurs
haut, bas, droite et gauche
pxpadding: 50px;
padding-topMarge en haut intérieurpxpadding-top: 50px;
padding-bottomMarge en bas intérieurpxpadding-bottom: 50px;
padding-leftMarge gauche intérieurpxpadding-left: 50px;
padding-rightMarge droite intérieurpxpadding-right: 50px;
borderBordurepx type couleurborder: 2px solid black

Position et affichage

PROPRIÉTÉDESCRIPTIONVALEURSEXEMPLE
displayType d’élément ( block  , inline  , inline-block  , none  …)block, inline, inline-block, table, table-cell, nonedisplay: block;
visibilityAfficher, masquervisible, hiddenvisibility: hidden;
floatFlottantleft, right, nonefloat: right;
clearArrêt d’un flottantleft, right, both, noneclear: both;
positionPositionnementrelative, absolute, staticposition: relative;
topPosition par rapport au hautpxtop: 20px;
bottomPosition par rapport au baspxbottom: 20px;
leftPosition par rapport à la gauchepxleft: 20px;
rightPosition par rapport à la droitepxright: 20px;
z-indexOrdre d’affichage en cas de superposition.
La plus grande valeur est affichée par-dessus les autres.
Numériquez-index: -1;
z-index: 1;
z-index: 10;

0 commentaires

Soumettre un commentaire