Éléments 2

Script externe

Cette page contient un script externe qui est un syntax highlighter.
C'est ce qui permet de colorer syntaxiquement du code.
Il en existe plusieurs, ici j'ai utilisé PrismJS

Si vous consultez le code source de cette page (F12 ou Ctrl-U dans Firefox), vous allez voir le code suivant au début de la page :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Éléments (2)</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="./assets/syntax-hl/prism.css">

Et le code suivant en fin de page :

  <script src="./assets/syntax-hl/prism.js"></script>
</body>
</html>

Feuille de style interne

Cette balise <div> :

Salut

Est stylisée via le code suivant (intégré dans la balise <head>) :

<style>
#internal-stylesheet-div {
  color: floralwhite;
  background-color: lightsalmon;
  font-family: "Lobster", sans-serif;
  font-size: 2em;
  padding: .4em;
}
</style>

L'attribut style

Il est aussi possible de mettre du style directement dans une balise, comme ceci :

Salut

Code correspondant :

<div style="color: floralwhite; background-color: lightsalmon; font-family: 'Lobster', sans-serif; font-size: 2em; padding: .4em;">Salut</div>

On peut constater que c'est tout de suite moins lisible.
Il est généralement conseillé d'utiliser plutôt des feuilles de styles externes (ce qui permet également de mieux modulariser son code)

Positionnement absolu

Le positionnement absolu est utilisé dans le menu déroulant.
Consulter le code source de la page (F12 ou Ctrl-U dans Firefox)

Superposition de blocs

z-index auto :

z-index modifié pour changer l'ordre de superposition :