CSS

11 April 2020

CSS

CSS désigne Cascading Style Sheets (pour Feuilles de style en cascade). Il s'agit d'un langage de style dont la syntaxe est extrêmement simple mais son rendement est remarquable. En effet, le CSS s’intéresse à la mise en forme du contenu intégré avec du HTML.
Donc, si vous voulez changer la couleur de votre arrière plan, la police de vos textes ou l'alignement et les marges de vos objets et bien réussir d'autres prouesses, CSS est là pour vous servir.

---

1. Début d'une page.

• Page CSS :

---

2. Mettre en place le CSS :

• Tout les paragraphes en rouge :



p{

    color: red;

}




• Tout les paragraphes + h1 en rouge :



p, h1{

    color: red;

}




• Toute les balises de la page en rouge :



*{

    color: red;

}




• Uniquement le paragraphe qui suis h1 en rouge



h1 + p{

    color: red;

}




• Version HTLM non recommandée



tout se paragraphe en rouge




---





Pour les balises em




• Tout les em qui se trouve dans h1


HTML


Mon super site




Pour le moment, mon site est pas très beau. dsl


CSS


h1 em{

    color: red;

}




---





Avec un attribut CLASS




• Mettre toute les balises avec attributs introduction


CODE HTML


se paragraphe en rouge
        /* "introduction" exemple chosir un nom */




se titre en rouge


CODE CSS


.introduction{

    color: red;

}




---





Avec un attribut ID



CODE HTML


se paragraphe en rouge



CODE CSS


#introduction{

    color: red;

}




Différence entre attribut CLASS / ID



ID: Ont peut pas avoir 2x le même ID sur la même page Fichier CSS #


CLASS: Peut avoir 2x la même CLASS sur la même page Fichier CSS .

---

Balise générique SPAN / DIV

SPAN

Bonjour et bienvenue sur mon site

DIV

    Texte

---

Ecrire un commentaire

/* Commentaire */

---

3. Le Texte :

• Le texte :



font-size: 14px;                            /* taille du texte */

font-size: 1.5em;                           /* taille du texte */



font-famyly: Impact, "Arial Black";         /* la police si l'ordinateur ne possède pas impact passe a la suivante */



font-style: italic;                         /* italique */

font-weight: bold;                          /* Gras */



text-decoration: underline;                 /* souligne le texte */

text-decoration: overline;                  /* ligne au dessu du texte */

text-decoration: line-through;              /* barre le texte */



text-align: left;                           /* le texte a gauche par defaut */

text-align: center;                         /* centre le texte */

text-align: right;                          /* le texte a droite */

text-align: justify;                        /* pour avoir un texte aligné a droite et au gauche */



• Les Polices :

---

4. Les marges :

Marge intérieur = padding
Marge extérieur = margin




• Si 4 chiffres :



padding: 1px 2px 3px 4px;




marge de 1 pixel en haut

marge de 2 pixel a droite

marge de 3 pixel en bas

marge de 4 pixel a gauche

Sens des aiguilles d'une montre




• Si 3 chiffres :



padding: 1px 2px 3px;




marge de 1 pixel en haut

marge de 2 pixel marge droite et gauche

marge de 3 pixel en bas



• Si 2 chiffres :



padding: 1px 2px;




marge de 1 pixel en haut et en bas

marge de 2 pixel marge droite et gauche



• Si 1 chiffre :



padding: 1px;




marge de 1 pixel de chaque côter (haut,droite,bas,gauche)

---

5. La couleur et le fond :

• Fichier CSS : la couleur :





Valeur RGB


• Tout les paragraphes en rouge :



p{

    color: red;

}





• Tout les h1 avec un fond du texte :



h1

{

    background-color: red;

}





• Le fond de la page en rouge :



body

{

    background-color: red;

}





• Avec une image de fond :



body

{

    background-image: url("nom.jpg");

    background-attachement: fixed;

    background-repeat: no-repeat;

    background-position: top right;

}




ou




body

{

    background-image: url("nom.jpg") fixed no-repeat;

}





• Le rendre transparant :



h1

{

    background-color: black;

    color: white;

    opacity: 0.6;

}




opacity: valeur 1 = visible

opacity: valeur 0 = non visible

background-couleur: rgba(255, 0, 0, 0.5)

0.5 = valeur visible.