Ressources Magic Makers

EXPERIMENTER

J'apprends en me trompant.

EXPERIMENTER

J'apprends en me trompant.

PARTAGER

J'ai des idées et je les partage avec les autres.
partager

PARTAGER

J'ai des idées et je les partage avec les autres.

RAISONNER

Je suis fier de ce que je fais.

RAISONNER

Je suis fier de ce que je fais.

INVENTER

Je suis la pour créer.

INVENTER

Je suis la pour créer.

S'AMUSER

Je viens parce que j'en ai envie.

S'AMUSER

Je viens parce que j'en ai envie.
Menu
UP

 

Site en maintenance

 
Nous sommes actuellement entrain de mettre à jour les ressources de ce site.
Pendant la mise à jour vous pouvez retrouver tous les nouveaux contenus sur le site
 

https://lp-magicmakers.fr/

 
 

WEB - Bases CSS

La structure d'une page CSS

On va pouvoir modifier les éléments du fichier HTML dans le fichier CSS lié ! 

On note dans un premier temps l’élément qu’on veut modifier (la balise, class, id..) et entre des accolades on note nos modification. On sépare chaque modification par un ‘;’ !!

Quelques codes exemples

Sur cette fiche, tu trouveras toutes les infos dont tu as besoin pour commencer à personnaliser ton site :

— Ressources makers CSS —

Lier une page CSS a une page HTML : 
<link rel="stylesheet" href="style.css">
Attention : cette balise s'intègre entre les balises <head></head> !

Ecrire un commentaire en CSS :
/* Mon commentaire */

Modifier la taille d'une image en gardant les bonnes proportions : 
width : 30%;

Changer le texte (couleur et taille) :
color : black;
font-size : 20px;

Arrière-plan du body :
body {
  background-image: url("Halo.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Contour :
border: black 5px solid;

Ombre : 
box-shadow: 20px -10px 50px orange;

Border-radius : 
border-radius: 10px;

Les différents états des liens : 
:link       lien non visité
:visited  lien visité
:hover   curseur sur le lien   
:active   lien sélectionné

Exemple :

a:hover {
   color: red;
}

Mon lien devient rouge lorsque je le survole à la souris.

Changer le fond de mon site :
Mettre une couleur :
body {
   background-color: red;
}

Mettre une image comme fond :
body {
   background-image: url(“monImage.jpg”);
}

Insérer une police et la modifier : 
@font-face {
  font-family: "Lobster";
  src: url('fonts/Lobster.otf');
}

body {
  font-family: "Lobster";
  color: brown;
  font-size: 100px;
}
Tu peux aussi insérer une police avec @import (cf fiche ressources)

Web Design

Sur cette fiche, tu trouveras toutes les règles pour créer un site harmonieux :

— Ressources makers Web Design —