Pages

CSS

CSS

Navigateur

Du style



Résumé


Nous allons apprendre à écrire des règles CSS
  1. Les sélecteurs
  2. 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



Libellés :