ESILV - WebDev

Français

English

Français

English

Appearance

Introduction à CSS ​

CSS (Cascading Style Sheets) permet de mettre en forme le HTML, et donc de séparer le contenu (HTML) de la forme (CSS).

Pour un exemple de ce qu'on peut faire en gardant le même HTML (rigoureusement) et ne changer que le CSS, on peut passer un moment sur le site CSS Zen garden.

CSS est un standard ouvert, standardisé par le W3C. Il y a eu plusieurs versions. Depuis "CSS 3", les spécifications sont séparées en modules, et chaque module suit son versionnement.

CSS permet aussi de produire des animations.

Bref Historique de CSS ​

  1. 1994 - Création de CSS
    • Håkon Wium Lie propose CSS en octobre 1994 comme moyen d'améliorer la présentation du web.
  2. 1996 - CSS 1
    • Le W3C (World Wide Web Consortium) publie la première version officielle de CSS, CSS1, en décembre 1996.
    • CSS1 introduit des concepts fondamentaux tels que les sélecteurs, les propriétés, les valeurs, et la cascade.
  3. 1998 - CSS 2
    • Publication de CSS2 par le W3C.
    • Cette version étend les capacités de CSS1 avec des fonctionnalités supplémentaires comme le positionnement absolu, les z-index, et une meilleure prise en charge des médias.
  4. 2000s - Diversification et Évolution
    • CSS commence à être divisé en différents modules (tels que CSS3 Color, Backgrounds and Borders, Text Effects, etc.).
    • Cette approche modulaire permet d'innover et de standardiser plus rapidement.
  5. 2005 et au-delà - CSS3 et Innovations
    • CSS3, développé en modules, introduit de nombreuses nouvelles fonctionnalités comme les animations, les transitions, les transformations, les grilles, et les flexbox.
    • Améliorations continues avec des spécifications telles que les variables CSS, le grid layout, et les media queries pour le design réactif.
  6. Présent et Futur
    • CSS continue d'évoluer avec des mises à jour et des améliorations régulières.
    • Focus sur la compatibilité, l'accessibilité, les performances, et l'interaction avec les autres technologies du web (HTML, JavaScript).

CSS a joué un rôle crucial dans le développement du web, permettant une séparation claire entre la structure (HTML) et la présentation (CSS), et continue d'être un élément essentiel dans la conception de sites web modernes et réactifs.

Syntaxe de CSS ​

Chaque règle CSS commence par un sélecteur (ou plusieurs, séparés par des virgules), puis une paire d'accolades {}.

À l'intérieur de cette paire d'accolades se trouveront une ou plusieurs déclarations, formée d'une propriété, suivie du signe deux points : suivie de la ou des valeur(s) de la propriété.

Les commentaires sont possible dans le code uniquement avec les signes /* pour commencer un commentaire et */ pour le terminer.

css
/* Règle */
.classe { /* Sélecteur */
  /* Première déclaration */
  /* propriété: valeurs; */
  background-color: #555;

  /* propriété: valeurs; */
  /* plusieurs valeurs séparées par des espaces */
  background: #555 url(/chemin/de/croix.png) no-repeat center center;
}

Les sélecteurs ​

Il existe un certain nombre de sélecteurs CSS. Les plus importants à connaître sont les suivants :

  • Sélecteurs d'ID : #un-id sélectionnera l'élément html qui aura dans l'attribut id la valeur un-id, par exemple <p id="un-id"> (à connaître surtout pour les accès au DOM, qu'on verra plus loin, c'est une mauvaise pratique de l'utiliser pour des règles CSS) ;
  • Sélecteurs de classe : .une-classe sélectionnera tous les éléments html qui auront dans l'attribut class la valeur une-classe, par exemple <p class="une-classe une-autre-classe"> ;
  • Sélecteur de type : p sélectionnera tous les élements dont la balise sera <p>.

Ces sélecteurs sont combinables, mais c'est une mauvaise pratique d'en combiner trop.

Exemple :

html
<html>
  <h1 class="titre">
    Le titre
  </h1>
</html>

<style>
.titre { /* Tous les éléments qui ont la classe titre */
  font-size: 3em; /* De grande taille */
  font-weight: bold; /* En gras */
  color: #fff; /* Couleur de l'avant-plan : blanc */
  background-color: #2980b9; /* Couleur de l'arrière-plan : belize hole */
}
</style>

Il y a aussi :

Les pseudo-classes de lien

  • a:link pour les liens pas encore visités
  • a:visited pour les liens visités

Les pseudo-classes dynamiques

  • a:active pour le lien sur lequel on est en train de cliquer
  • a:hover pour le lien sur lequel on est en train de passer la souris
  • a:focus pour le lien sur lequel est actif le clavier (après utilisation de la touche tab)

Les pseudo-éléments

  • :first-line pour la première ligne de l'élément
  • :first-letter pour la première lettre de l'élément
  • :before pour le contenu au tout début de l'élément
  • :after pour le contenu à la toute fin de l'élément

Exemples :

html
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .bg-nephritis {
      background: #27ae60;
    }
    .fg-white {
      color: #fff;
    }
    
    .with-before:before {
      content: "---";
    }
    
    .with-after:after {
      content: "***";
    }
    
    .test-first-letter:first-letter {
      font-size: 1.2em;
      color: #599;
    }
    
    .test-first-line:first-line {
      font-size: 1.2em;
      color: #559;
    }
    </style>
</head>

<body>
  <p style="color: grey;">
    Ici, tout le paragraphe est dans une police grise.
    Je ne suis pas un simple danseur car c'est un très, très gros travail et parfois c'est bon parfois c'est pas bon. Il y a un an, je t'aurais parlé de mes muscles.
  </p>

  <p class="test-first-line">
    Ici, la première ligne est dans une police plus grande et violette. Je me souviens en fait, si vraiment tu veux te rappeler des souvenirs de ton perroquet, en vérité, la vérité, il n'y a pas de vérité et cette officialité peut vraiment retarder ce qui devrait devenir... C'est cette année que j'ai eu la révélation !
  </p>

  <p class="test-first-letter">
    Et là c'est uniquement la première lettre. Cliquer sur le triangle ci-dessous permet de voir le code qui a généré cette vue.
  </p>

  <p>
    <a class="fg-white  bg-nephritis  with-before  with-after">
      Ici du texte avant et après le contenu html est rajouté en CSS : les tirets au début et les étoiles à la fin.
    </a>
  </p>
</body>
</html>

Ajouter des styles CSS à un document ​

On peut ajouter du CSS sur un élément directement en HTML mais c'est déconseillé :

html
  <p style="font-weight: bold;">
    Texte en gras (NE PAS FAIRE ÇA)
  <p>

Le mieux est de le faire depuis une balise <style> ou depuis un fichier externe avec la balise <link rel="stylesheet" src="chemin/ver/fichier.css">.

html
<html>
<head>
    <title>Titre qui apparaître dans l’onglet</title>
    <style>
    .bg-nephritis {
        background: #27ae60;
    }
    .fg-white {
        color: #fff;
    }
    </style>
</head>
<body>
    <p style="font-weight: bold;">
        <span class="fg-white  bg-nephritis">
            Blanc sur vert
        </span>
    </p>
</body>
</html>