Lexique pour la partie CSS


Du mot en français vers le nom en CSS
Les noms Les noms en CSS Exemples
le titre h{ }
h1{ } titre principal
h2{ } titre secondaire
sous-titre: h3{ }
sous sous-titre:h4{ }		 
h1{
    font-family:chalkboard, sans serif;
    color:red;
    font-size:30px;
    text-align:center;}
le paragraphe p{ }
On peut avoir des styles de paragraphe différents. On peut les noter: .p1{ } ou inventer des noms, mais il ne faut pas oublier le point : . avant le nom.

Pour débuter un paragraphe en retrait: p{text-indent:..px;}

 
.p-italique{
    text-indent:10px;
    font-style:italic;
    color:blue; (ou: color:#0015F4;)
    width:300px;
    text-align:right;}
Les tableaux: éléments en CSS Définir un tableau en CSS Ecrire un tableau en html
un tableau,
une ligne,
une cellule ,
une cellule de titre 		table{ }  
tr{ }  
td{ }
th{ }

Je peux préciser en CSS: la largeur (width) en % ou en px, la hauteur (height) en % ou en px, la police, la couleur,...

 Voir les balises html de base.

Si je veux fusionner plusieurs lignes ou fusionner plusieurs colonnes, je l'écris dans la partie html.

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

Le texte et la police Le texte et la police en CSS Exemple d'utilisation:
la police font-family: ..., sans serif;
Il est possible d'utiliser des polices spécifiques : penser à mettre les fichiers dans le même dossier que .css

Utilisé pour: body{ }   h1{ }   h2{ }   p{ }   a.bulle{ } (info-bulles)   mark{ } ...

Exemple: en CSS, je définis: 
.p-italique{
    text-indent:20px;
    font-family:arial, sans serif;
    font-size:17px;
    font-style:italic;
    background-color:white; 
    color:blue;
    text-align:left;
    border: solid red;}
    
mark{
background-color:red;
font-weight:bold;
color:black;}
En html, j'écris: Résultat:

bla bla bla ce mot est important bla bla bla bla bla bla bla bla

la taille de police font-size:... px;
Je peux utiliser em à la place de px : em indique une taille relative.
texte en gras font-weight:bold;
texte en italique font-style:italic;
texte / mot souligné text-decoration:underline;
texte / mot barré text-decoration:line-through;
la couleur color: #...;  site pour les codes couleur
Un mot ou un groupe de mots surligné en couleur 
mark { 
 background:#...; }
Un paragraphe surligné en couleur 
.p-color{
 background:#...;}
(pour le code couleur: voir le site)
texte à gauche,
texte à droite
texte centré,
texte justifié 		text-align:left;
text-align:right;
text-align:center;
text-align:justify;
début décalé du texte d'un paragraphe 
p{
text-indent:10px;}
mon style concerne un paragraphe je crée une classe en CSS: .p1{ } Dans la partie html, j'écris: 
<p class="p1"> 
 bla bla bla </p>
mon style concerne un mot ou un groupe de mots je crée une classe en CSS: 
.faux{
text-decoration:line-through;
color: red;}
 Dans la partie html, j'écris: 
<p>bla bla <span class="faux"> 
 bli </span></p>
Ce qui donne:

bla bla bli

Le corps de la page body{ } en CSS Utilisé pour
Image de fond Attention, c'est une adresse relative par rapport au fichier CSS pas au fichier html 
body{
background-image: url('XXX.png');
background-attachment:fixed;
ou background-attachment: scroll;}
 

   body{
   }
            
   div{
   }
            
   section{
   }
Exemple: je définis en CSS:

J'écris en html:

Cela donne:
Image de fond unique (non répétée sur la page) background-repeat:no-repeat;
Position de l'image de fond: depuis la gauche, depuis le haut background-position: ...% ...%;
ou: background-position: ..px ...px;
ou : background-position: top bottom left center right;
Couleur de fond de la page background: #...;
ou: background-color:#...;
site pour les codes couleur
Les marges de la page (haut, droite, bas, gauche) margin:..px ..px ..px ..px;
la police, la taille de police voir "font-family" et "font-size"
Exemple de style pour la partie body: 
  
   body{
   margin:1px 5px 5px 5px; 
   font-family:chalkboard, arial, verdana, sans-serif; 
   font-size:18px; 
   text-align:left;
   background: #E9F2E1;}
body{ 
background: url('...png') fixed no-repeat top , url('...jpg') fixed;}
La 1ère image se place au-dessus.
Marges En CSS Explications
début décalé du texte d'un paragraphe p{text-indent:..px;} Utile pour:
body {  } , p{ } , div{  },
section{ } , a.bulle{ }
indiquer les marges extérieures (haut, droite, bas, gauche) margin: .. px ..px ..px ..px;
indiquer les marges intérieures (haut, droite, bas, gauche) padding: .. px ..px ..px ..px;
préciser la marge de gauche: extérieure / intérieure margin-left: .. px;
padding-left:..px;
marge de droite: extérieure
intérieure 		margin-right: .. px;
padding-right:..px;
indiquer la marge entre le texte et le bas de la page margin-bottom: .. px;
padding-bottom:..px;
indiquer la marge entre le texte et le haut de la page margin-top: .. px; (marge extérieure)
padding-top:..px; (marge intérieure)
Cadres, bordures et ombres Ecriture en CSS Explications
bordure
  • encadrer un mot
  • encadrer un paragraphe,
  • une div
  • une image,
  • créer un bouton,...
 border: solid ...épaisseur de la bordurepx  #.....couleur de la bordure;

border-style: solid;
border-style:...;(style de trait)
border-width:...px; (épaisseur du trait)
border-color:...; (couleur)

.ligne{ border:solid black 2px;}

.trait{ border:dashed red 2px;}

.point{ border:dotted blue 2px;}

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

.relief1 {border: brown inset 6px;}

.relief2 {border-style:outset;
border-color:brown;
border-width:6px;
width:250px;}
cadre aux bords arrondis 4 valeurs possibles:

mot encadré

.cadre1{
padding:2px; 
border:solid 2px black;
border-radius:10coin en haut à gauchepx 20en haut à droitepx 30en bas à droitepx 40en bas à gauchepx;}

mot encadré

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

mot encadré

.cadre3{
padding:2px;
border:solid 2px black; 
border-radius:5arrondi en haut à gauche
 + en bas à droitepx 30arrondi en haut à droite
 et en bas à gauchepx;}
ombre
  • d'un cadre, d'une image
  • d'un texte
 shadow
  • box-shadow
  • text-shadow

.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;}

La nuit des VAMPIRES !!


Code CSS:
.ombre{
box-shadow: 6px 6px 10px blue;}
En HTML:
<p> <img src="images/jul2.jpg"
class="ombre"/></p>
Positionnement En CSS Explications
élément flottant float
.flotte1{float:right;}
.flotte2{float:left;}
Pour faire cesser l'effet de "float" sur les paragraphes suivants, utiliser: 
p.clear { clear: right;}
p.clear { clear: left;}
p.clear { clear: both;}

Dans la partie html, placer l'élément flottant avant le texte.

Pour que le paragraphe suivant se place sous l'objet flottant, créer une class avec l'élément "clear" en CSS.

En CSS Explications