Introduction aux CSS

Et la couleur fût...

Maintenant que nos pages sont bien structurées, nous pouvons enfin leur donner un mise en page convenable.

Pour ce faire, nous allons utiliser des feuilles de styles, des règles CSS et des propriétés CSS.

Quelques apprentissages qui nous serviront et qu'il faudra garder en tête.

• Nous savons qu'un site Web est constitué de plusieurs pages.
  • On doit le plus possible garder une mise en page consistante voire identique sur chacune des pages.
  • Il peut parfois être très ardu de maintenir cette consistance.
  • Il est donc primordial de pouvoir identifier les éléments de mise en page qui reviendra sur chaque page afin de bâtir une feuille de styles efficace.
• Nous savons appliquer une syntaxe pour créer un élément
  • Par exemple, avec la syntaxe balise/balise, on peut créer toutes les balises au monde en remplaçant le mot balise par le vrai nom d'une balise
  • Également, avec la syntaxe attribut=valeur nous pouvons composer tous les attributs nécessaires.
• Nous savons qu'une page est remplie de balises.
• Nous savons qu'une balise occupe habituellement un espace (rectangulaire) à l'écran.

Les CSS à la rescousse

Le nouveau langage que nous allons voir à partir de maintenant est uniquement dédié à la mise en page des éléments de la page.

Ce langage s'appelle Cascading Style Sheets (Feuilles de style en cascade), et sa syntaxe est complètement différente du HTML.

Avec les CSS, on peut...

• ajouter des bordures
• ajouter de la couleur et des images d'arrière-plan
• changer la police de caractères, sa taille et sa couleur
• changer la marge des éléments
• changer la hauteur et la largeur
• positionner des éléments dans la page

Depuis l'arrivée des CSS, la vie des designers WEB s'est grandement simplifiée. Parallèlement, cette nouvelle liberté a soulevé des ambitions encore plus grandes...

Ensuite s'est ajouté...

• des effets de survol de souris
• l'opacité des éléments
• la semi-transparence des couleurs
• les coins arrondis
• les pseudo-elements
• les compteurs personnalisés
• les images de bordures
• les ombres de boîtes et de texte

Nouveau sur votre écran...

• texte en colonne
• transformations 2d (rotation, translation...)
• transformations 3d
• effets de transition
• animations

À venir...

• masques