Site Web > CSS

CSS, donner du style à vos pages web

Le langage CSS est devenu le langage de référence pour la mise en page des sites Web. Durant ce cours, vous apprendrez à élaborer des feuilles de style permettant de gérer l'apparence et la disposition des éléments de vos pages web. Vous découvrirez également comment utiliser CSS conjointement avec Javascript.

2 jours

Au centre ou
dans vos locaux

Devis sur demande


Pré-requis :


Connaissances de base en HTML et en création de sites Web.

Objectifs :


  • Rappels

  • La base des CSS

  • Les boîtes et blocs

  • Les styles textuels

  • Les images

  • Les formulaires

  • Modifications des CSS en JavaScript

Programme :

Rappels

  • L’architecture client/serveur. Les navigateurs.
  • Les langages côté client XML, (X)HTML, CSS, JavaScript.
  • Le Web sémantique. L’accessibilité. L’encoding.

 La base des CSS

  • Les avantages des feuilles de style.
  • Les différentes versions de CSS (CSS1, CSS2, CSS3).
  • La cascade CSS. Le stockage des feuilles CSS.
  • Le support par les navigateurs.
  • Les types de sélecteurs (id, class et balises).
  • L’ordre de priorité. Les propriétés.
  • Les unités de mesure (em, px, pt…).
  • Les couleurs (RVB vs de base).

Les boîtes et blocs

  • Les balises de bloc vs en ligne.
  • Le flux CSS. Les marges (margin, padding).
  • Positionnement dans le flux (relatif, flottant), positionnement hors flux (absolu, fixe).
  • Le z-index (altitude). La propriété box-sizing. Les contextes de formatage.
  • Fonds et bordures (couleurs, transparence, coins arrondis, ombres portées).
  • Le contenu (déroulement/scrolling).
  • Cas particulier des tableaux.

 Les styles textuels

  • Modification des fontes (tailles, polices, couleurs…).
  • Alignement du texte.
  • Les pseudo-classes.
  • Les effets visuels (clignotement…).
  • Listes et menus horizontaux et verticaux.

Les images

  • De contenu (img) vs d’apparence (background).
  • Redimensionnement. Rollover.
  • Liens et images.

Les formulaires

  • Design de champs de saisie, liste de sélection, zone de texte, case à cocher…
  • Mise en forme des étiquettes (labels), des légendes, groupes de champs (fieldset)…

Modifications des CSS en JavaScript

  • Modification des styles en JavaScript (les interfaces style et className).
  • Effets : apparition, cliqué-glissé, menu déroulant…

 

Vous êtes*
Société
Numéro de SIRET
Code NAF
Votre prénom*
Votre nom*
Adresse Email*
Téléphone*
Sujet*
Message*

* Champs obligatoires