Cours développement web ESILV

# Introduction aux CSS

# Qu'est-ce que 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 (opens new window).

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.

# 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 codes uniquement avec les signes /* pour commencer un commentaire et */ pour le terminer.

/* 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 :

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 :

# Ajouter des styles CSS à un document

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

  <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">.

← Introduction au JavaScript →