Web 2017-02-23
Sommaire
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
Anatomie d'une règle
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.
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.
