Newsletter

Commentaires

Tout savoir sur la carte micro:bit

trend micro

Découvrir le codage avec Scratch 3

scratch 3

Trend Micro : Nouvelle offre gratuite via Préau

trend micro
Légendes

Il y a 15991 invités et aucun membre en ligne

Actualités

Codage, algorithmique

Apprendre les mises en page CSS

toutpublic

apprendrecsslogoCe site vise à vous apprendre les bases de CSS utilisées pour structurer n'importe quel site web. Ce site s'adresse aux personnes ayant une base (notions de sélecteurs, de propriétés et de valeurs). Le CSS ou Littéralement Cascading Style Sheets (feuilles de style en cascade), est un langage déclaratif simple pour mettre en forme des pages HTML ou des documents XML. Le langage CSS permet de préciser les caractéristiques visuelles et sonores de présentation d'une page Web : les polices de caractères, les marges et bordures, les couleurs, le positionnement des différents éléments, etc. Le terme de "Cascading" Style Sheets sous entend qu'il est possible de définir un style pour une page HTML puis, à l'intérieur de cette même page, de fournir des informations plus précises ou différentes pour présenter certains éléments plus distinctement.

 

Le but de CSS est de séparer la structure d'un document HTML et sa présentation. En effet, avec le HTML, on peut définir à la fois la structure (le contenu et la hiérarchie entre les différentes parties d'un document) et la présentation. Mais cela pose quelques problèmes. Avec le couple HTML/CSS, on peut créer des pages web où la structure du document se trouve dans le fichier HTML tandis que la présentation se situe dans un fichier CSS.

Avec CSS on peut par exemple définir un ensemble de règles stylistiques communes à toutes les pages d'un site internet. Cela facilite ainsi la modification de la présentation d'un site entier. CSS permet aussi de définir des règles différentes pour chaque support d'affichage (ordinateur, tablette, smartphone...). CSS permet aussi d'améliorer l'accessibilité des documents web.

 

Ce site est constitué de 19 leçons (écrans) :

  • pas de mise en page
  • la propriété "display"
  • margin: auto;
  • max-width
  • box model
  • box-sizing
  • position
  • Exemple de position
  • float
  • clear
  • le hack clearfix
  • exemple de mise en page avec float
  • Largeur en pourcent
  • media queries
  • inline-block
  • mise en page avec inline-block
  • colonne
  • flexbox
  • frameworks css

 

Exemple : 

 

apprendrecss ecran

 

Un sité intéressant pour apprendre, réviser ou se perfectionner dans le CSS.

Plus d'informations ici : http://fr.learnlayout.com/

Aucun commentaire

Devenir Membre

Pour vous informer sur l'école numérique (Tice), les applications pédagogiques, les outils, le codage, l'algorithmique, les objets connectés... Totalement Gratuit !

S'inscrire
L'iPad en classe : Quand la tablette devient le moteur de l'innovation pédagogique

L'iPad en classe : Quand la tablette devient le moteur de l'innovation pédagogique

Lire la suite
Découvrez les ressources ludo-pédagogiques sur les 3R pour les cycles 2, 3 et 4

Découvrez les ressources ludo-pédagogiques sur les 3R pour les cycles 2, 3 et 4

Lire la suite
À Educ@tech, Econocom met l’intelligence artificielle au service de l’apprentissage, de l’inclusion et de la créativité

À Educ@tech, Econocom met l’intelligence artificielle au service de l’apprentissage, de l’inclusion et de la créativité

Lire la suite
Découvrez les séquences pédagogiques Planète Energies !

Découvrez les séquences pédagogiques Planète Energies !

Lire la suite
Quand la réalité virtuelle réinvente la découverte des métiers de l'élevage

Quand la réalité virtuelle réinvente la découverte des métiers de l'élevage

Lire la suite
Choix utilisateur pour les Cookies
Nous utilisons des cookies afin de vous proposer les meilleurs services possibles. Si vous déclinez l'utilisation de ces cookies, le site web pourrait ne pas fonctionner correctement.
Tout accepter
Tout décliner
Essentiel
Ces cookies sont nécessaires au bon fonctionnement du site, vous ne pouvez pas les désactiver.
session
Accepter
Analytique
Outils utilisés pour analyser les données de navigation et mesurer l'efficacité du site internet afin de comprendre son fonctionnement.
Google Analytics
Mesure d'audience
Accepter
Décliner
Sauvegarder