Pas facile de dessiner des formes !

JS Bin

calc : pour calculer une valeur sur une propriété

Voici comment définir en CSS des valeurs de largeurs calculées.

JS Bin

Test CSS

http://flukeout.github.io/

Un site à référencer

http://css-tricks.com/how-css-selectors-work/

Création d'une page HTML

L’objectif de ce TD est d’écrire une page de base. 

Nous allons écrire

1. le code HTML puis 
2. le code CSS.

Nous allons apprendre les balises de base et le style de base d'une page HTML.

HTML

HTML

HTML W3C Alsacréation

Apprendre le langage HTML, c’est d’abord apprendre les balises  Notre objectif est d’apprendre par l’exemple les balises de base. La structure et les données du document

cours code ++

Editeur Nous allons utiliser l’éditeur  jsbin. Structure de base La structure de base est donné par défaut à la création d’un nouveau bean Vous écrirez le code à partir de la ligne 8. Ecriture de code Après chaque ajout de code, créér une nouvelle version. Exemple de création d’un entête Ecrire le code html suivant, puis créer une version. Création d’un menu de navigation Création d’un article Ajouter dans cet article deux sessions. Ajouter un pied de page Ajouter un formulaire Créer une section et ajouter un formulaire

CSS

CSS

Navigateur

Du style

Résumé Nous allons apprendre à écrire des règles CSS Les sélecteurs Les propriétés Exemple : Dans Jsbin tapez dans l’onglet HTML <!DOCTYPE html> <html> <head>  <meta charset="utf-8">  <title>JS Bin</title> </head> <body>  header>ul.header>.item*2//tapez TAB  nav>ul>#item$*2//tapez TAB </body> </html> Completer pour obtenir <!DOCTYPE html> <html> <head>  <meta charset="utf-8">  <title>JS Bin</title> </head> <body>  <header> <ul class="header">   <li class="item">1</li>   <li class="item">2</li> </ul>  </header>  <nav> <ul>   <li id="item1">a</li>   <li id="item2">b</li> </ul>  </nav> </body> </html> Nous allons taper dans l’onglet CSS, quelques régle de Base. Structure de base : sélecteur {propriété : valeur;} Tapez : Nous allons apprendre comment selectionner tous les selecteurs : ul {list-style-type:circle; color :red;} Nous allons apprendre à selectionner certains selecteurs en fonction de la structure nav li {display:inline-block;} Nous allons apprendre à selectionner certains selecteurs en fonction de l’appartenance à une classe .header {color :blue;} Nous allons apprendre à selectionner un selecteur unique #item1 {color :green;} Comprendre CSS Nous allons créer un fichier de base HTML et un fichier de base CSS avec le Bloc-Notes. Observons les différents cas pour mieux comprendre les priorités entre fichiers de style. Un fichier de style HTML : index.html CSS style1.css <!DOCTYPE html> <html> <head>  <meta charset=utf-8 />  <title>JS Bin</title>  <link rel="stylesheet" type="text/css" href="style1.css"> </head> <body>  <h1>CSS</h1> </body> </html> h1{ color: #F78; } Plusieurs fichiers de style HTML : index.html CSS <!DOCTYPE html> <html> <head>  <meta charset=utf-8 />  <title>JS Bin</title>  <link rel="stylesheet" type="text/css" href="style1.css"> <link rel="stylesheet" type="text/css" href="style2.css"> </head> <body>  <h1>CSS</h1> </body> </html> style1.css style2.css h1{ color: #F78; } h1{ color: blue; } Style dans le fichier HTML HTML : index.html CSS <!DOCTYPE html> <html> <head>  <meta charset=utf-8 />  <title>JS Bin</title>  <link rel="stylesheet" type="text/css" href="style1.css"> <link rel="stylesheet" type="text/css" href="style2.css"> </head> <body>    <style>         h1{            color: black;         }    </style>  <h1>CSS</h1> </body> </html> style1.css style2.css h1{ color: #F78; } h1{ color: blue; } Exemple de style Connectez vous sur votre compte jsbin pour récuperer  les différentes version créée lors du TD HTML

Il ne vous reste plus qu’à ecrire le code css dans la partie CSS de l’éditeur Centrer la page Tapez le code suivant La page devrait être centrée. Transformer la liste en menu Rechercher la version 2 correspondant à la création du menu dans le td HTM et ajouter les codes suivant et regarder le resultat. puis ajouter le code et finalement Etude de la position float Rechercher la version 3 correspondant à la création d’un article dans le td HTM et ajouter les codes suivant et regarder le resultat. puis tapez les codes