CSS

11 Avril 2020

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.

Table des matières

1. Début d'une page
2. Mettre en place
3. Le Texte
4. Les marges
5. La couleur et le fond

1. Début d'une page.

Page CSS :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Titre de la page</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="monfichier.css" />
    </head>
    <body>

    </body>
</html>

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

<p style="color: red;">tout se paragraphe en rouge</p>

Pour les balises em

Tout les em qui se trouve dans h1

HTML

<h1>Mon <em>super</em> site</h1>

<p>Pour le moment, mon site est pas très <em>beau</em>. dsl</p>

CSS

h1 em{
    color: red;
}

Avec un attribut CLASS

Mettre toute les balises avec attributs introduction

CODE HTML

<p class="introduction">se paragraphe en rouge</p>        /* "introduction" exemple chosir un nom */

<h1 class="introduction">se titre en rouge</h1>

CODE CSS

.introduction{
    color: red;
}

Avec un attribut ID

CODE HTML

<p id="introduction">se paragraphe en rouge</p>

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

<p>Bonjour et <span class="introduction">bienvenue</span> sur mon site</p>

Juste bienvenue en rouge

DIV

<div>
    Texte
</div>

Pour la mise en page du site pour créer des blocs qui enveloppe la page

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

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.