Lexique pour la partie CSS

Du mot en anglais (nom en CSS) vers le nom en français
Nom en anglais Sens en français Remarque, exemple
background
background-image:url('...png');
background-color:#...;		 arrière-plan, fond de la page
image de fond
couleur de fond
body{ } corps de la page (taille, marges, police, couleur du texte...) Dans la partie html, on écrit: <body> </body>
border
border-style:...;(style de trait)
border-width:...px; (épaisseur du trait)
border-color:...; (couleur) 		pour définir la bordure (l'encadrement) d'un tableau, d'un mot, d'un paragraphe,d'une div,...

.ligne{ border:solid black 2px;}

.trait{ border:dashed red 2px;}

.point{ border:dotted blue 2px;}

.double{ border-style:double;
border-color:green;}

.relief1 {border: inset brown 6px;}

.relief2 {border-style:outset;
border-color:brown;
border-width:6px;
width:250px;}

Pour aller plus loin: CSS border

border-radius
pour arrondir les coins d'un cadre, d'une image.
4 valeurs possibles (haut , bas, gauche, droite)

mot encadré

.cadre1{
padding:2px; 
border:solid 2px black;
border-radius:10px 20px 30px 40px;}

mot encadré

.cadre2{
padding:2px;
border:solid 2px black;
border-radius:15px;}

mot encadré

.cadre3{
padding:2px;
border:solid 2px black; 
border-radius:5px 30px;}
box-shadow pour ajouter une ombre autour d'un cadre

.ombre{border:solid 1px blue;
box-shadow: 6décalage horizontalpx 6décalage verticalpx 10adoucissement du dégradépx blue;
width:250px;}

.ombre2{
border:solid 1px blue;
box-shadow: 10px 10px 5px blue;
width:250px;}

color:#...; couleur site pour les codes couleur
height :...px;
ou height:...%; 		hauteurEn html, pour une vidéo ou une image, on écrit: height ="..."
shadow pour ajouter une ombre sur un cadre ou un texte voir box-shadow et text-shadow
table{ }
tr{ }
th{ }
td{ }

Pour construire des tableaux élaborés, consulter la page tableaux.

 tableau
ligne
titre d'une colonne
cellule d'un tableau (= une case)		 Dans la partie html, on écrit (pour un tableau à 2 colonnes):
<table>
<caption> Titre de mon tableau </caption>
<tr>
<th>titre de la colonne 1  </th>
<th> titre de la colonne 2 </th></tr>
<tr>  
<td> cellule 1 de la colonne 1 </td>
<td>cellule 1 de la colonne 2  </td></tr>
</table>
text-shadow pour ajouter une ombre à un texte

.ombre3{text-shadow: 3décalage horizontal: positif vers la droite; négatif: vers la gauchepx -5décalage vertical: positif en bas, négatif en hautpx 2 netteté de l'ombre: petit nombre: net; nombre élevé: floupx grey;}

.ombre4{text-shadow: 3px 5px 2px red;}

Exemple: Les NUITS d'HALLOWEEN !

width :...px;
ou width:...%;		 largeur En html, pour une vidéo ou une image, on écrit: width ="..."