Informatique au lycee

Les bases du CSS

(Cascading Style Sheet)

Les bases du CSS (Cascading Style Sheet)

Mise en place

Les CSS ont vu le jour en 1996. Elles ont été constamment remaniées, aujourd'hui on est invité à utiliser les CSS3.

Il existe trois méthodes pour appliquer des CSS à une page web :

Dans le corps du code HTML :
```
<div style="color:blue;">…</div>
```
Dans l'entête de la page ou n'importe où dans la page:
```
<head>
  <style>
    div{
       color:blue;
       }
  </style>
</head>
```
Ce style sera appliqué à toutes les div contenues dans le document.
En utilisant un fichier dédié relié à la page, il s'agit de la méthode la plus répandue et fortement recomandée:
```
<link rel="stylesheet" href="css/style.css">
```

Le fichier CSS

Le fichier CSS se compose d'un ensemble de règles qui seront appliquées aux balises du fichier HTML :

Dans le fichier nous avons une succession de règles :
```
div{
   color:blue;
   }
p  {	
   color:blue;
   }
```
Dans le fichier HTML, on précise où est placé le fichier CSS :
```
<head>
  <link rel="stylesheet" href="css/style.css">
</head>
```

Méthodes d'utilisation des CSS

Règle :

selecteur {propriété1 : valeur;
           propriété2 : valeur;
           ...
          }

Les classes class et les identifiants id permettent d’identifier les balises sur lesquelles on souhaite agir.
Les classes ont des identificateurs qui peuvent être utilisés sur plusieurs balises d’une même page alors que les id (identifiant) définissent une balise unique au sein d’une page (elles sont principalement utilisées pour le traitement d’une page par le langage JavaScript).
L’id est prioritaire sur la classe quelque soit l’ordre.

Les `class`

Dans le fichier HTML on crée la classe :
```
<balise class="mon-style">…</balise>
```

Dans le fichier CSS, on définit une classe en mettant un « . » devant le sélecteur. Ex :

.mon-style {propriété1 : valeur;
            propriété2 : valeur;
            ...
           }

En cas de classes multiples, on les sépare par des espaces. En cas de redéfinition de style, c’est celui qui est le plus proche de la donnée qui sera appliqué.

Les `id`

Dans le fichier HTML on crée l'identifiant :
```
<balise id="mon-style">…</balise>
```

Dans le fichier CSS, on définit une classe en mettant un « # » devant le sélecteur. Ex :

#mon-style {propriété1 : valeur;
            propriété2 : valeur;
            ...
           }

Les sélecteurs avancés

balise1 balise2: sélecteur universel, permet de sélectionner toutes les balises balise1 "espace" balise2 : Une balise contenue dans une autre.

Exemple :

p a {propriété1 : valeur;
     propriété2 : valeur;
     ...
    }

/* toutes balises de lien contenues dans un paragraphe */

balise1,balise2 : sélectionne toutes les balises.

Exemple :

article,section {propriété1 : valeur;
                 propriété2 : valeur;
                 ...
                }

/* toutes balises article et section */

balise1 + balise2 : un enchainement de balises, sélectionne la balise2 situé juste après la balise1.

Exemple :

article+section {propriété1 : valeur;
                 propriété2 : valeur;
                 ...
                }

/* toutes balises section situées juste après une balise article */

Pour plus d'infos

Les médias queries

Les médias queries permettent d’appliquer une feuille de style en fonction du support matériel qui l’affiche. On parle souvent de site web responsive design dans ce contexte.

Pour plus d'infos

Les FlexBox

Les FlexBox permettent d’organiser les blocs de contenu au sein d’une page.

Les anciennes méthodes utilisaient :

Les tableaux ;
La propriété float ;
La propriété inline-block.

Les deux dernières citées sont encore couramment utilisées pour la structuration visuelle d’une page Web.

Renvez vous sur le iste Mozilla pour bien comprendre le système flexbox qu'il faut savoir utiliser.

Liste des principales propriétées CSS

Propriété	Valeurs (exemples)	Description
`font-family`	police1, police2, police3, serif, sans-serif, monospace	Nom de police
`@font-face`	Nom et source de la police	Police personnalisée
`font-size`	1.3em, 16px, 120%...	Taille du texte
`font-weight`	bold, normal	Gras
`font-style`	italic, oblique, normal	Italique
`text-decoration`	underline, overline, line-through, blink, none	Soulignement, ligne au-dessus, barré ou clignotant
`font-variant`	small-caps, normal	Petites capitales
`text-transform`	capitalize, lowercase, uppercase	Capitales
`font`	-	Super propriété de police. Combine : `font-weight`, `font-style`, `font-size`, `font-variant`, `font-family`.
`text-align`	left, center, right, justify	Alignement horizontal
`vertical-align`	baseline, middle, sub, super, top, bottom	Alignement vertical (cellules de tableau ou éléments `inline-block` uniquement)
`line-height`	18px, 120%, normal...	Hauteur de ligne
`text-indent`	25px	Alinéa
`white-space`	pre, nowrap, normal	Césure
`word-wrap`	break-word, normal	Césure forcée
`text-shadow`	5px 5px 2px blue (horizontale, verticale, fondu, couleur)	Ombre de texte

Propriétés de couleur et de fond

Propriété	Valeurs (exemples)	Description
`color`	nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence), #CF1A20...	Couleur du texte
`background-color`	Identique à color	Couleur de fond
`background-image`	url('image.png')	Image de fond
`background-attachment`	fixed, scroll	Fond fixe
`background-repeat`	repeat-x, repeat-y, no-repeat, repeat	Répétition du fond
`background-position`	(x y), top, center, bottom, left, right	Position du fond
`background`	-	Super propriété du fond. Combine : `background-image`, `background-repeat`, `background-attachment`, `background-position`
`opacity`	0.5	Transparence

Propriétés des boites

Propriété	Valeurs (exemples)	Description
`width`	150px, 80%...	Largeur
`height`	150px, 80%...	Hauteur
`min-width`	150px, 80%...	Largeur minimale
`max-width`	150px, 80%...	Largeur maximale
`min-height`	150px, 80%...	Hauteur minimale
`max-height`	150px, 80%...	Hauteur maximale
`margin-top`	23px	Marge en haut
`margin-left`	23px	Marge à gauche
`margin-right`	23px	Marge à droite
`margin-bottom`	23px	Marge en bas
`margin`	23px 5px 23px 5px (haut, droite, bas, gauche)	Super-propriété de marge. Combine : `margin-top`, `margin-right`, `margin-bottom`, `margin-left`.
`padding-left`	23px	Marge intérieure à gauche
`padding-right`	23px	Marge intérieure à droite
`padding-bottom`	23px	Marge intérieure en bas
`padding-top`	23px	Marge intérieure en haut
`padding`	23px 5px 23px 5px (haut, droite, bas, gauche)	Super-propriété de marge intérieure. Combine : `padding-top`, `padding-right`, `padding-bottom`, `padding-left`.
`border-width`	3px	Épaisseur de bordure
`border-color`	nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence), #CF1A20...	Couleur de bordure
`border-style`	solid, dotted, dashed, double, groove, ridge, inset, outset	Type de bordure
`border`	3px solid black	Super-propriété de bordure. Combine `border-width`, `border-color`, `border-style`. Existe aussi en version `border-top`, `border-right`, `border-bottom`, `border-left`.
`border-radius`	5px	Bordure arrondie
`box-shadow`	6px 6px 0px black (horizontale, verticale, fondu, couleur)	Ombre de boîte

Propriétés de positionnement et d'affichage

Propriété	Valeurs (exemples)	Description
`display`	block, inline, inline-block, table, table-cell, none...	Type d'élément (`block`, `inline`, `inline-block`, `none`…)
`visibility`	visible, hidden	Visibilité
`clip`	rect (0px, 60px, 30px, 0px) rect (haut, droite, bas, gauche)	Affichage d'une partie de l'élément
`overflow`	auto, scroll, visible, hidden	Comportement en cas de dépassement
`float`	left, right, none	Flottant
`clear`	left, right, both, none	Arrêt d'un flottant
`position`	relative, absolute, static	Positionnement
`top`	20px	Position par rapport au haut
`bottom`	20px	Position par rapport au bas
`left`	20px	Position par rapport à la gauche
`right`	20px	Position par rapport à la droite
`z-index`	10	Ordre d'affichage en cas de superposition. La plus grande valeur est affichée par-dessus les autres.

Propriétés des listes

Propriété	Valeurs (exemples)	Description
`list-style-type`	disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none	Type de liste
`list-style-position`	inside, outside	Position en retrait
`list-style-image`	url('puce.png')	Puce personnalisée
`list-style`	-	Super-propriété de liste. Combine `list-style-type`, `list-style-position`, `list-style-image`.

Propréités des tableaux

Propriété	Valeurs (exemples)	Description
`border-collapse`	collapse, separate	Fusion des bordures
`empty-cells`	hide, show	Affichage des cellules vides
`caption-side`	bottom, top	Position du titre du tableau

Informatique au lycée Faustin Fleret

Créer un site Web :

Les bases du CSS

Les bases du CSS (Cascading Style Sheet)

Mise en place

Le fichier CSS

Méthodes d'utilisation des CSS

Les `class`

Les `id`

Les sélecteurs avancés

Les médias queries

Les FlexBox

Liste des principales propriétées CSS

Propriétés de couleur et de fond

Propriétés des boites

Propriétés de positionnement et d'affichage

Propriétés des listes

Propréités des tableaux

Liens pour les Logiciels

Liens pour les cours

Restons en contact

Informatique au lycée Faustin Fleret

Créer un site Web :

Les bases du CSS (Cascading Style Sheet)

Mise en place

Le fichier CSS

Méthodes d'utilisation des CSS

Les class

Les id

Les sélecteurs avancés

Les médias queries

Les FlexBox

Liste des principales propriétées CSS

Propriétés de couleur et de fond

Propriétés des boites

Propriétés de positionnement et d'affichage

Propriétés des listes

Propréités des tableaux

Liens pour les Logiciels

Liens pour les cours

Restons en contact

Les `class`

Les `id`