Published using Google Docs
TD 4 CSS
Updated automatically every 5 minutes

CSS

Selecteurs

Style

Du style

Objectif

Nous allons apprendre à écrire des règles CSS[1].

Une règle CSS est un ensemble de propriétés associé à un sélecteur.

Etude de cas

Une règle CSS contient un ensemble de propriétés associé à un sélecteur.

A l'aide d'un exemple, nous allons donc étudier:

  1. Les sélecteurs
  2. Les propriétés

Code HTML

Commençons par écrire le code HTML source dans VS.

Nous devons écrire un fichier index.html.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <header>
  11.         <ul class="header">
  12.              <li class="item">1</li>
  13.              <li class="item">2</li>
  14.         </ul>
  15.       </header>
  16.       <nav>
  17.         <ul>
  18.              <li id="item1">1</li>
  19.              <li id="item2">2</li>
  20.         </ul>
  21.       </nav>
  22.    
  23. </body>
  24. </html>

Rappels sur les facilités d'écriture.

Nous allons utiliser les facilités offertes par les abréviations d'Emmet pour écrire le code HTML.

Emmet

Dans VS, créer un nouveau fichier index.html, ensuite il vous suffira de taper:

Dans la balise <body> tapez successivement:  

  •   header>ul.header>.item{$}*2⇄ 

puis 

  •   nav>ul>#item${item $}*2⇄     

Vous pouvez lancer le serveur avec l'extension  pour visualiser le résultat de l'affichage de votre page index.html. Il est temps de passer au code CSS.

Créer un fichier style.css

La figure suivante montre comment créer un fichier style.css. N'oubliez pas dans votre code HTML d'insérer un lien vers ce fichier de style. Pour cela, il vous suffit d'insérer le code suivant dans la balise <head>

<head>

    <meta charset="utf-8" />

    <title>HTML5 Demo</title>

    <link rel="stylesheet" href="styles.css" />

</head>

Le CSS

Nous allons taper dans notre fichier de style, quelques règles de base. Une règle CSS est un ensemble de propriétés associé à un sélecteur.

En voici la structure de base:  

sélecteur

{propriété[3]:  valeur;}

Rendez vous dans le fichier style.css et tapez à l'aide de votre éditeur. Vous pouvez vous aider de la touche tab pour compléter les valeurs.

Les sélecteurs de base

Voici quelques exemples d'écriture de sélecteurs associés avec des règles.

⏩ Sélectionner tous les ul : il suffit d'écrire le nom de la balise sans les chevrons.

ul

⏩ Sélectionner certains sélecteurs en fonction de la structure, l'espace permet de préciser la descendance.

Ainsi, pour indiquer que nous sélectionnons les <li> dans des <nav>, on insère un espace entre les deux sélecteurs. La règle s'applique au dernier sélecteur (ici li)

nav li

⏩ Sélectionner certains sélecteurs en fonction de l’appartenance à une classe. Pour sélectionner des balises de classe header ( <balise class="header">, on fait usage du sigle "." .

.header

⏩ Sélectionner un sélecteur unique. Pour sélectionner une balise d'identifiant unique item1( <balise id="item1">, on fait usage du sigle "#".

#item1

Comprendre CSS

Nous allons créer plusieurs fichiers pour tenter de comprendre la signification du C de CSS.

Le C vient tout simplement de Cascade. Ceci permet de préciser que le style prend en compte des règles de précédence.

Pour comprendre les priorités entre les différents fichiers de style,  observons différents cas de précédence.

Commençons par des règles CSS écrites dans un seul fichier CSS.

Fichier Unique

Modifier votre fichier  pour avoir une seule balise HTML :

<body>

    <h1>CSS</h1>

</body>

Créer un fichier de style style1.css avec pour seule règle:

  1. h1{
  2.  color: #F78;
  3. }

  index.html

 style1.css

Plusieurs fichiers de style

  index.html

 

<!DOCTYPE html>

<html>

<head>

  <meta charset=utf-8 />

  <title></title>

  <link rel="stylesheet" href="style1.css">

 <link rel="stylesheet" href="style2.css">

</head>

<body>

  <h1>CSS</h1>

</body>

</html>

style1.css

style2.css

h1{

 color: #F78;

}

h1{

 color: blue;

}

Il est important de modifier l'ordre de l'appel des fichiers.

  1.     <link rel="stylesheet" href="style2.css">
  2.     <link rel="stylesheet" href="./style1.css">

Il est clair que la dernière écriture applique son style.

On peut comprendre le processus de cascade en observant dans l'inspecteur que la première règle est barrée.

Style dans le fichier HTML

Nous allons mettre la règle également dans le fichier HTML.

Modifiez votre code HTML en introduisant une balise de style.

  index.html

 

<!DOCTYPE html>

<html>

<head>

  <meta charset=utf-8 />

  <title>JS Bin</title>

  <link rel="stylesheet" href="style1.css">

 <link rel="stylesheet" href="style2.css">

</head>

<body>

    <style>

         h1{

            color: black;

         }

    </style>

  <h1>CSS</h1>

</body>

</html>

style1.css

style2.css

h1{

 color: #F78;

}

h1{

 color: blue;

}

L'observation des priorités des règles est sans appel.

Nous allons voir deux autres priorités de règles.

Ecrire dans votre fichier, pour observer maintenant les priorités entre id et class.

  1. <body>
  2.     <style>
  3.         h1 {
  4.             color: black;
  5.         }
  6.     </style>
  8.     <h1 class="maClass" id="monId">CSS</h1>
  9. </body>

Dans le fichier style1.css définissez les règles suivantes:  

Voici ce que l'on observe avec l'inspecteur.

Vous pouvez également modifier dans le fichier l'ordre d'écriture

Nous pouvons également supprimer une règle en utilisant la valeur unset.[4]

Dans ce cas, le style de base est appliqué

Nous pouvons également forcer une propriété à l'aide de !important[5]

Ainsi cette règle prévaut sur toutes les autres.

En action

Nous allons créer nos premières règles sur le fichier  ( lien )

La règle universelle *

Nous pouvons utiliser * pour appliquer à l'ensemble des balises des règles.

Voici un exemple d'utilisation de la règle, où nous appliquons la font sur l'ensemble des balises[6].

Le sélecteur de type[7]

Le sélecteur de type permet de sélectionner toutes les balises du type.

Ainsi, pour sélectionner l'élément body, il suffit d'écrire le sélecteur de type body.

En action

Nous voulons centrer notre page, nous sélectionnons par un sélecteur de type body et nous appliquons des règles sur la marge et la largeur.

Pour centrer le body, nous utilisons la facilité d'écriture sur la marge.

Je vous rappelle l'équivalence des écritures[8]:

  • margin: 0px auto;
  1.    margin-top: 0px;
  2.    margin-right: auto;
  3.    margin-bottom: 0px;
  4.    margin-left: auto;

La magie semble opérer car quelque soit la largeur de votre fenêtre la page reste centrée. En fait, c'est la valeur auto qui divise l'espace restant à parts égales entre les marges gauche et droite.

Les sélecteurs d'éléments descendants

La notion de descendants se prête fort bien au structure de données en arbre. Pensez à un arbre généalogique dans lequel on affiche la liste des descendants.

En action

Mettre les règles suivantes sur les H1 et H2 qui sont descendants de Header.

La règle d'éléments descendants "header h1" vise uniquement les h1 dans les headers et non l'ensemble des h1.

Notez que nous aurions pu écrire une règle de factorisation[9]  en utilisant la virgule pour appliquer une règle à plusieurs sélecteurs.

header h1, header h2 {

   margin: 0px

}

En action

Nous avons vu dans le cours ( lien ) comment retirer le style de base avec la propriété

  • list-style: none;
  1.    list-style-position: initial;
  2.    list-style-image: initial;
  3.    list-style-type: none;

Pour changer l'affichage de base de la liste, nous utilisons la propriété

   display: inline[10];

Nous voyons l'utilisation de la pseudo classe[11]: hover; ( hover )

Allez plus loin[12].

La figure suivante montre l'inspection de la date du 12 Janvier.

Nous découvrons l'utilisation de la propriété float[13].

Pour mieux comprendre la propriété float, je vous propose de lire l'article sur les positions ( lien ).

Vous pourrez vous entraîner sur les simulateurs ( lien ) ( lien )

Si vous avez lu et compris l'article, répondez à la question suivante:  

Quelle valeur de marge à gauche faut-il mettre au paragraphe pour le décoller les deux textes ( lien ) ? Pourquoi des valeurs inférieures à 95px semblent sans effet.

Pour réduire la valeur trouvée, vous pouvez utiliser d'autres techniques factoriser la règle float:left aux deux balises.

  

[1] https://developer.mozilla.org/fr/docs/Glossaire/CSS

[2] ⇄ pour tabulation

[3] On parle aussi d'attribut. la propriété étant alors le couple attribut: valeur.

[4] https://developer.mozilla.org/fr/docs/Web/CSS/unset

[5] A utiliser avec parcimonie https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

[6] Toutes balises étant dans body, nous pu remplacer * par body.

[7] https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_de_type

[8] Pensez à tourner comme une aiguille d'horloge 🕒 margin : top,right,bottom,left.

[9] il y a peu d'intérêt dans ce cas précis.

[10] Il existe également display: inline block; qui prend en compte la taille du bloc.

Analysez la différence sur cet exemple ( lien )

[11] https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes

[12] Cette partie est laissée à titre d'information. Elle vise à montrer l'utilisation d'une règle moins utilisée aujourd'hui.

[13] https://developer.mozilla.org/fr/docs/Web/CSS/float