Mémento HTML CSS

1. Structure de la page web

<html>
<head>
<title>Titre de la page</title>
</head>
<body>
Contenu de la page
</body>
</html>

2. Balises essentielles

<p></p> : Paragraphe
<h1></h1> : Titre 1
<h6></h6> : Titre 6
<strong></strong> : Forte emphase (en gras)
<em></em> : Emphase
<i></i> : Italique
<b></b> : Gras
<u></u> : Souligné
<br/> : Retour chariot

3. Insérer une feuille de style

<style type="text/css" title="mes_styles" media="all">
<!--

-->

media="screen" : écran d'ordinateur
media="print" : Impression
media="projection" : Projecteurs
media="handled" : Ecran de petites tailles
media="tv" : WebTV

</style>

4. Styliser le fond

background-color:#ffffff;  // Couleur d'arrière plan
margin: 10px; // Marge

5. Les écritures

font-family: Georgia, "Times New Roman", Times, serif;
font-size : 10px;
Tailles de caractères relatives:
em
%
Medium,  Larger, Smaller,  x-small, xx-small, x-large et xx-large
Tailles de caractères absolues:
px
Interlignage :
line-height: 180%
text-indent:10px  //Retrait du paragraphe (indentation)
&nbsp; Espace insécable
margin-top: 70px;   // Les marges externes
margin-left: 120px;
margin-right: 50px;
margin-bottom: 70px;
letter-spacing: 0.5em; // Espace entre les lettres
word-spacing:0.5em // Espace entre les mots

6. Les listes

Listes non numérotées:
<ul>
     <li>Item n°1</li>
     <li>Item n°2</li>
     <li>Item n°3</li>
     <li>Item n°4</li>
     <li>Item n°5</li>
</ul>

Résultats :
  • Item n°1
  • Item n°2
  • Item n°3
  • Item n°4
  • Item n°5
Listes numérotées :
<0l>
     <li>Item n°1</li>
     <li>Item n°2</li>
     <li>Item n°3</li>
     <li>Item n°4</li>
     <li>Item n°5</li>
</0l>

Résultats :
  1. Item n°1
  2. Item n°2
  3. Item n°3
  4. Item n°4
  5. Item n°5
Définir l'apparence des puces des éléments de listes :
list-style-type: box | check | circle | diamond | disc | hyphen | square | decimal
| decimal-leading-zero |lower-roman | upper-roman | lower-greek | lower-latin
| upper-latin | armenian | georgian |hebrew | lower-alpha | upper-alpha | none | inherit

Exemple :

ul {
   list-style-type:check;
}

Les glyphes :

box : □

check : ✓

circle :  ◦

diamond : ◆

disc :  Un cercle remplit de noir

hyphen : ⁃

square : ■

Les listes numérotés ou ordonnées:

décimal : 1,2,3...
decimal-leading-zero : 01,02,03...
lower-roman : i,ii,iii,iv
upper-roman : I, II, III, IV
lower-alpha : a,b,c,d
upper-alpha : A,B,C,D
lower-greek : alpha, beta, gamma, 

Espacer les lignes :

ul li { margin: 1em 0 1em 0}
ou
ol li { margin: 1em 0 1em 0}

utiliser ses images :

ul { list-style-image: url(images/image.gif) }

créer une image par item :

<ul id="menu">
     <li id="accueil">Accueil</li>
     <li id="ressources">Ressources</li>
     <li id="historique">Historique</li>
</ul>

ul #accueil {
list-style-image: url(images/accueil.gif); }

ul #ressources { url(images/ressources.gif);}

ul #historique { url(images/historique.gif);}

Espacer le texte des icones dans IE6 :

ajouter &nbsp; devant le texte

7. Les liens

Créer une ancre dans la page :

<a name="mon_ancre"></a>  //Ancre

Lien hypertexte vers l'ancre :

<a href="http://www.site.com/index.htm#mon_ancre">Lien</a> //Lien vers l'ancre

Changer les couleurs des liens :

a:link 
  {color: #696; 
  text-decoration: none; 
  background-color: transparent }
a:visited 
  { color: #699; 
  text-decoration: none; 
  background-color: transparent }
a:hover 
  { color: #c93; 
  text-decoration: underline; 
  background-color: transparent }
a:active 
  { color: #900; 
  text-decoration: underline; 
  background-color: transparent }

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :