Site Web > CSS

MG Formation > CSS, donner du style à vos pages web

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.

15 jours

Au centre ou
dans vos locaux

Devis sur demande

Certification
niveau III

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