Web 2017-02-23

De an
Aller à : navigation, rechercher

Ressources en ligne

Tutoriels

Référence

Blogs


Intro aux CSS

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

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