Web 2017-02-23 : Différence entre versions

Version actuelle en date du 6 mai 2019 à 20:57

Ressources en ligne

Tutoriels

• Interneting Is Hard (en): ultra progressif et pédagogique.
• Open Classroom (fr).
• Curly Braces (fr)

Référence

• Mozilla Developer Network: (en/fr)

Blogs

• HTML5 doctors (en)
• CSS tricks (en)
• HTML5 Rocks (en)

Intro aux CSS

• La guerre des navigateurs
• le mouvement pour les standards + CSS Zen Garden
• Intérêts
• Critiques
  • Skeleton Corset Skin
  • Same Content, Different Messages

Anatomie d'une règle

Fichier:Selecteurs.png

selecteurs css

* {
    margin: 0;
    padding: 0;
    font-family: comic;
}

• selecteur par nom de balise
• selecteur jocker
• selecteurs par classe
• selecteur par id

Ressources externes

• http://www.w3schools.com/cssref/default.asp
• http://css.mammouthland.net/selecteurs-css-class-id.php
• http://curlybraces.be/wiki/Ressources::CSS
• https://fr.wikibooks.org/wiki/Le_langage_CSS/Les_s%C3%A9lecteurs#Le_s.C3.A9lecteur_de_descendant

Exercice CSS quizz

• Aller sur le site du New York Times.
• À l'aide de l'inspecteur, trouver le css nécéssaire pour:
  • masquer tous les articles
  • n'afficher que les auteurs

Exercice: deface un site

Stylish est une extension pour Chrome (elle existe également pour Firefox) qui permet d'appliquer des styles personnalisés sur des pages spécifiques.

L'avantage de cette extension par rapport à la méthode utilisant l'inspecteur que nous avons utilisé en cours est que les styles sont persistants (ils continuent de s'appliquer à la page même après son rafraîchissement).

L'exemple ci-dessous masque tout le contenu à l'exception des liens sur la page Wikipédia sur Ada Lovelace.

300px

300px

L'exercice consiste à effectuer une intervention artistique simple. Pour cela, vous devez écrire une feuille de style personnalisée et l'appliquer l'aide de l'extension Stylish sur une page ou un site de votre choix. Le code CSS de cette intervention est à déposer sur votre compte FTP dans un fichier texte, accompagné d'une courte description de votre intention et de deux captures d'écran: une de la page originale et une de la page modifiée.

Durant le cours, nous gardons une trace de nos expérimentations sur le pad commun.

300px

Liens externes

• http://stdin.fr/Bazar/UserCSS