Exercice CSS : Consolider les connaissances

De Centre de Ressources Numériques - Labomedia
Aller à : navigation, rechercher

Exercice 1 :

1. ouvrir deux onglets contenant ces pages :


2. créer un document HTML et insérer les élements suivants:

Il faut avoir recours à HTML IPSUM dans la plupard des cas.

  • un titre de premier niveau ( titre assez court )
  • une liste non ordonnée ( HTML IPSUM : 'standard list navigation' )
  • un titre de second nouveau ( assez court )
  • deux paragraphes courts ( HTML IPSUM : 'medium paragrapĥ' )
  • un titre de second niveau ( assez court )
  • une liste non ordonnée ( HTML IPSUM : 'Unordered list - long items' )
  • un paragraphe long ( HTML IPSUM : 'long paragraph' )


3. créer un nouveau document CSS et faire le lien entre le document HTML et le document CSS :

Pour rappel la balise suivante doit ê ajoutée dans la section 'head' du document HTML:

<link type="text/css" rel="stylesheet" href="le_nom_de_mon_fichier.css">

NB :

  • à partir d'ici on ne travaille ( quasiment ) plus que sur le fichier CSS. 
  • !!! ne pas oublier le point virgule après chaque propriétés.


4. sélectionner l'element 'body' et lui attribuer les propriétés suivantes :

  • une couleur d'arrière plan ( au choix  - background-color:...;)
  • un type de police: ( une police au choix, un exemple ici : http://www.w3schools.com/CSS/pr_font_font-family.asp )
  • une taille de police à 12px;
  • une largeur de 800px;
  • ajouter une bordure de 5px, de type 'solid' et de couleur noire ( un exemple : border: 50px solid red; )
  • ajouter une marge interne ( padding ) de 10px.


5. sélectionner tous les titres et leur attribuer les propriétés suivantes :

  • le texte des titres doit ê en capitale ou en majuscule au choix ( text-transform:capitalize|uppercase );
  • ajuster la marge externe ( 'margin') ou interne (padding) si vous le souhaitez.


6. sélectionner tous les liens et leur attribuer les propriétés suivantes :

  • ne doivent pas ê soulignés par défaut ( text-decoration: none; );
  • leur attribuer une couleur spécifique;
  • ajouter une règle pour les liens survolés avec la souris : doivent ê soulignés ( a:hover {..}).


7. Selectionner tous paragraphes et leur attribuer les propriétés suivantes :

  • justifier le texte ajouter une marge externe de qques pixels (margin);
  • ajouter une marge interne de quelques pixels (padding).


NB : attention allez devoir utiliser les attributs id et class.


8. Ajouter un attribut 'id' dont la valeur est 'navigation' à la première liste ( celle située sous le titre de premier niveau ).

Au niveau du CSS vous attribuerez les propriétés suivantes :

  • une marge externe et interne à 0px ( margin / padding ).


9. Vous selectionnerez tous les elements de cette liste ( 'li') auquelles vous ajouterez les propriétés suivantes :

  • une marge externe droite de 20px ( pour rappel, margin : 0 20px 0 0; );
  • une marge interne de 2px ( top et bottom ) et 5px ( left et right ) une bordure de 1px, type 'solid' et couleur au choix
  • la propriété suivante : display avec une valeur 'inline' ( Que se passe t'il ?)

11. Dans les paragraphes, ajouter une image 150x150 ( au tout début du paragraphe)

  • faire flotter l'image à gauche ( Que se passe t'il ? );
  • ajouter une marge externe ( à droite ) sur l'image pour la décoller du texte;
  • augmenter légèrement l'écart entre les lignes ( line-height );
  • ajouter une bordure à l'image (border: 1px solid #aaa) - vous pouvez modifier la couleur.
  • résoudre le problème occasionné par le flottement de l'image ( utiliser la classe 'clearfix' ) - me demander si besoin. 


12. Quelques finitions :


  • ajouter une bordure aux images;
  • utiliser l'outil suivant pour séléctionner une palette de couleur que vous aller appliquer aux éléents de votre choix :http://colorschemedesigner.com/;
  • insérer une police pour les titres ( rechercher une police sur le Google Font Directory ) me demander si besoin.

13. Centrer la page

tous les éléments HTML doivent être encapsulés dans un conteur: 

<body>
  <div id="conteneur>
    ...
  </div> 
</body>
  • l'élément 'body' doit prendre toute la larguer de l'écran (  width:100%; );
  • le conteur doit avoir une taille fixe ( width:800px;  - que se passe t'il ?);
  • les marges gauche et droite doivent avoir la même margeur, celle çi est ajustée automatiquement par le navigateur ( margin: 0 auto 0 auto;).



EXERCICE 2

Le but est de reproduire ce template : http://safe.tumblr.com/theme/preview/12051

Vous devez avoir un onglet ouvert sur Lorem Ipsum et également de ceci http://www.pxleyes.com/blog/wp-content/uploads/2010/03/css-cheatsheet-portrait.pdf

1 Les éléments de l'entête:

    -  Ecrire un titre de premier niveau

     - Ecrire un titre de deuxième niveau.


2 La navigation
    - Ecrire une liste non ordonnée comprenant 4 items de liste ( LI ). Pour rappel, au niveau du CSS, on ajoute la propriété "display:none" à chaque 'LI' afin qu'elle se placent horizontalement.

3 Les Articles

  • Ecrire un conteneur de type 'block' ( il s'agit ici d'écrire une balise DIV bien sûr ) auquel vous ajouterez un atttribut "class" dont la valeur est "post". Ce bloc contiendra un article, il faudra donc répété ce bloc pour chaque article. Vous constatez que chaque article contient une date de publication ainsi que le nombres de notes / commentaires. Vous utiliserez un paragraphe pour insérer ces infos. Ce paragraphe aura un attribut "class" dont la valeur est  "post-date". 

  • Le premier article comprend une citation, vous écrirez donc un paragraphe qui contiendra un attribut "class" dont la valeur est "quote" ( qi signifie "citation" en anglais"). Le fait d'ajouter une classe à ce paragraphe permettra de lui assigner un style particulier qui vous. Si vous regardez bien le thème vous constaterez qu'il faut un second paragraphe contenant la référence de la citation, vous ajouterez donc un nouveau paragraphe, avec un attribut "class" dont la valeur est "quote-reference".     

        

  • Le second article est une image contenant une légende, il vous faut donc un paragraphe pour insérer l'image et un autre pour insérer la légende de la photo. Pour ce dernier paragraphe, vous pourrez ajouter un  attribut "class" dont la valeur est "image-caption".


  • Le troisième article contient un titre avec une note très courte. Vous ajouterez donc un titre de niveau 3 ( car nous avons déjà utilisé un titre de niveau 1 et 2 précédemment ) pour le titre de cet article, et un paragraphe pour le texte.


  • La quatrième article est  un extrait de chat/ discussion contenant 6 lignes. Cette lignes doivent être contenues dans un paragraphe. Attention, chaque début de ligne correspond au nom de l'un des interlocuteurs, ces noms doivent être encapsulés avec une balise "span" ( qui est un conteneur de type "inline"). Cette balise "span" devra contenir un attribut "class" dont la valeur est "chat-contact".  


  • Le cinquième article correspond à un fichier audio, vous passez au suivant.


  • Le sixième article est un article classique, comprenant un titre, quelques paragraphes, une liste et une ligne en retrait ( avec bordure verticale à gauche). Vous utiliserez la balise "blockquote" pour codifier la ligne en retrait.


  • Vous ajouterez ensuite une section qui contiendra le nombre de pages, une balise "DIV" peut servir à cet effet, qui contiendra un attribut "id" dont la valeur est "page-navigation". A vous de voir comment vous souhaitez codifier le contenu de cette section.


  • Enfin, vous ajouterez un pied de page sous la forme d'une "DIV" dont attribut 'id' aura pour valeur '"footer". A vous de voir comment vous codifierez le contenu.


Ce qui est possible de faire en plus :



EXERCICE 3

http://www.leemunroe.com/css-button/

Récupérée de « https://wiki.labomedia.org/index.php?title=Exercice_CSS_:_Consolider_les_connaissances&oldid=24674 »