Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
public:asca:spip:xhtml-et-css [2009/11/14 08:38] pielo |
public:asca:spip:xhtml-et-css [2013/01/22 10:36] pielo |
||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
- | ====== Formation | + | ~~ODT~~ |
+ | |||
+ | |||
+ | ====== Formation xhtml et css ====== | ||
===== Fichier xhtml ===== | ===== Fichier xhtml ===== | ||
+ | |||
+ | |||
==== Une page minimale mais vide ==== | ==== Une page minimale mais vide ==== | ||
Ligne 12: | Ligne 17: | ||
< | < | ||
< | < | ||
+ | <meta http-equiv=" | ||
</ | </ | ||
Ligne 25: | Ligne 31: | ||
+ | ==== Une page avec un paragraphe et une feuille de style attachée ==== | ||
<code html> | <code html> | ||
Ligne 38: | Ligne 45: | ||
</ | </ | ||
- | < | + | < |
- | <div id=" | + | < |
+ | ce texte est à la ligne dans mon premier paragraphe. | ||
+ | </p> | ||
- | </ | ||
</ | </ | ||
</ | </ | ||
</ | </ | ||
- | ===== Fichier CSS ===== | ||
- | < | + | |
- | body { | + | |
- | | + | |
+ | |||
+ | ===== Un exemple complet ===== | ||
+ | < | ||
+ | < | ||
+ | <html xmlns=" | ||
- | } | + | < |
+ | < | ||
+ | <link rel=" | ||
+ | <meta http-equiv=" | ||
+ | | ||
+ | < | ||
+ | <div id=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | Je suis à la ligne | ||
+ | Je suis à la suite | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | <br /> | ||
+ | Ce bout de texte est < | ||
+ | <br /> | ||
+ | Ce qui suit est < | ||
+ | Ce qui suit est < | ||
+ | </ | ||
+ | </ | ||
+ | <div id=" | ||
+ | <p style=" | ||
+ | Ce texte prend la couleur du paragraphe mais | ||
+ | <span style=" | ||
+ | <span style=" | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | Ceci est une citation | ||
+ | </ | ||
+ | <a href=" | ||
+ | <a href=" | ||
+ | <img src=" | ||
+ | </ | ||
+ | <div id=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
- | .asca { | + | <code css> |
- | font-variant:small-caps; | + | body { |
- | | + | background-color: black; |
- | | + | color: |
- | | + | width: 1008px; |
- | | + | margin: |
- | font-weight:bold; | + | } |
- | border:1px solid red; | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | /*margin: | + | |
- | } | + | |
- | + | ||
- | #page_accueil | + | div#navigation{ |
- | | + | width: |
- | height: 758px; | + | padding:0 10px; |
- | | + | float: left; |
- | background-image: url(./ | + | |
} | } | ||
+ | div# | ||
+ | width: 548px; | ||
+ | padding:0 10px; | ||
+ | float: left; | ||
+ | } | ||
+ | div# | ||
+ | width: 200px; | ||
+ | padding:0 10px; | ||
+ | float: | ||
+ | } | ||
+ | |||
+ | p { | ||
+ | border: 2px dotted blue; | ||
+ | padding: 5px 20px; | ||
+ | margin: 0 10px; | ||
+ | } | ||
+ | |||
+ | h1, h2 { | ||
+ | font-family: | ||
+ | } | ||
+ | |||
+ | h1 { | ||
+ | font-size: 30px; | ||
+ | font-variant: | ||
+ | } | ||
+ | |||
+ | h2 { | ||
+ | font-size: 25px; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | ===== Une mise en page avec des flottants ===== | ||
+ | |||
+ | Voici le code commenté xhtml et css : | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | <html xmlns=" | ||
+ | < | ||
+ | <meta http-equiv=" | ||
+ | < | ||
+ | Formation xhtml et css | ||
+ | </ | ||
+ | <link rel=" | ||
+ | </ | ||
+ | < | ||
+ | <div id=" | ||
+ | <div id=" | ||
+ | <div class=" | ||
+ | </ | ||
+ | <div class=" | ||
+ | </ | ||
+ | <div class=" | ||
+ | </ | ||
+ | < | ||
+ | <hr /> | ||
+ | < | ||
+ | </ | ||
+ | <div id=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | <div id=" | ||
+ | <div class=" | ||
+ | </ | ||
+ | <div class=" | ||
+ | </ | ||
+ | <div class=" | ||
+ | </ | ||
+ | </ | ||
+ | <div id=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | **style.css** | ||
+ | |||
+ | <code css> | ||
+ | body { | ||
+ | font-family: | ||
+ | font-size: 80%; | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | #conteneur { | ||
+ | width: 1000px; | ||
+ | margin: 0 auto; | ||
+ | /* | ||
+ | Ce bloc n'a pas la propriété float: left -> Il est dans le flux. | ||
+ | La propriété suivante fait en sorte que la hauteur de ce block s' | ||
+ | Sans cette propriété, | ||
+ | */ | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | Tous les blocs qui suivent ont la propriété float: left | ||
+ | Si bien que leur hauteur s' | ||
+ | */ | ||
+ | |||
+ | #bandeau { | ||
+ | float: left; | ||
+ | width: 100%; | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | div.blockbandeau { | ||
+ | float: left; | ||
+ | width: 25%; | ||
+ | height: 100px; | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | #menu { | ||
+ | float: left; | ||
+ | width: 100%; | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | #contenu { | ||
+ | float: left; | ||
+ | width: 100%; | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | div.blockcontenu { | ||
+ | float: left; | ||
+ | width: 300px; | ||
+ | margin-left: | ||
+ | height: 150px; | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | #pied { | ||
+ | float: left; | ||
+ | width: 100%; | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | La définition suivante pour la balise hr sert à supprimer le flottement du contenu qui suit directement cette balise | ||
+ | */ | ||
+ | |||
+ | hr { | ||
+ | clear: both; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | height: 0; | ||
+ | visibility: | ||
+ | } | ||
</ | </ |