Memento HTML CSS
Upcoming SlideShare
Loading in...5
×
 

Memento HTML CSS

on

  • 1,679 views

 

Statistics

Views

Total Views
1,679
Views on SlideShare
1,677
Embed Views
2

Actions

Likes
0
Downloads
44
Comments
0

1 Embed 2

http://www.slideee.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Memento HTML CSS Memento HTML CSS Document Transcript

  • XHTML 1.0 Page XHTML 1.0 transitional <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1­transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>Ma page</title> <!­­ type de document et de caractères ­­> <meta http­equiv="content­type" content="text/html; charset=UTF­8" /> <!­­ meta donnees pour les moteurs de recherche ­­> <meta name="description" content="Titre" /> <meta name="author" content="P. VINCENT" /> <meta name="keywords" lang="fr" content="mot1, mot2" /> <meta name="robots" content="all" /> <!­­ feuilles de style ­­> <link rel="stylesheet" type="text/css" media="screen" href="feuille.css" /> <style type= "text/css"> /*Mes styles*/ </style> <!­­ javascript ­­> <script type="text/javascript" src="script.js" /> <script type="text/javascript"> /*Mon script*/ </script> <!­­ flux rss ­­> <link rel="alternate" type="application/rss+xml"  href="spip.php?page=backend" title="mon site" /> <!­­ favicon ­­> <link rel="shortcut icon" type="image/png" href="/dist/favicon.png" /> </head> <body> <div id="conteneur"> <div id="entete"></div> <div id="col_gauche"> </div> <div id="col_droite"> </div> <div id="bas_page"></div> </div> </body> </html>
  • Les balises de type bloc Les balises de type bloc Balise Signification  Exemple  Balise bloc mère du corps de la  <body> page, c'est le conteneur  <body>...</body> principal <div> Conteneur de blocs  <div>...</div> <p> Paragraphe  <p>to be<br />or not to be ?</p> <h1> ... <h6> Titre de niveau 1 à 6 <h1>titre</h1> <blockquote lang="fr" cite="De l'âme,  Aristote"> <blockquote> Marque une citation  Texte texte texte </blockquote> <pre> Affiche exactement ce qu'on y  to be <pre> mets (tabulations,sauts) or not to be </pre> <ul> ou <ol>      <li>Le XHTML est accessible</li> Liste énumérative <ul> et liste  <ul>,<ol>,<li>      <li>Le XHTML est bien  numérotée <ol> structuré</li> </ul> ou </ol> <dl>      <dt>Développeur</dt>      <dd>Un développeur développe</dd> <dl>,<dd>,<dt> Liste de définition       <dt>Web</dt>      <dd>Réseau maillé de serveurs</dd> </dl> <table border="1" width="90%"  height="300px">      <tr>           <th>Poisson</th>           <td>20 euros</td>           <td>500 grammes</td> <table>,<th>,<tr>,<td> Tableaux      </tr>      <tr>           <th>Viande</th>           <td>15 euros</td>           <td>900 grammes</td>      </tr> </table> <form action="form_action.asp"  method="get">   First name: <input type="text"  <fieldset>, <form> Formulaire interactif  name="fname" /><br />   <input type="submit" value="Submit" / > </form> <img src ="planets.gif" width="145"  height="126" alt="Planets"  usemap="#planetmap" /> <map id ="planetmap" name="planetmap">   <area shape="rect"  <map> image réactive (nécessite <area>) coords="0,0,82,126" href="sun.htm"  alt="Sun" />   <area shape="circle" coords="90,58,3"  href="mercur.htm" alt="Mercury" /> </map>
  • Liste des balises de type en-ligne Liste des balises de type en-ligne Balise Signification  Exemple <span> Conteneur en­ligne <span>texte</span> <a> Liens <a href="url_destination" title="info">texte</a> <img src="url_source" alt="texte alternatif"  <img /> Images title="info"/> <br /> Saut de ligne <br /> Mise en intonation du  <em>texte important</em> , <strong>texte  <em>, <strong> texte important2</strong> <abbr>, <acronym>,  Info­bulle, citation  <acronym title="info">texte</acronym> <cite>, <q>, <dfn> et définition Suppression / ajout  <del>, <ins> <del>texte</del> de texte <kbd>, <code>,  Instruction et code <code>texte</code> <samp>, <var> <sub>, <sup> Indices et exposants <sup>texte</sup> <object type="application/x­shockwave­flash"  data="s.swf" width="" height=""> Animation multimédia  <object> <param name="movie" value="s.swf" /> embarquée <param name="quality" value="high" />" </object>
  • CSS 2 Les sélecteurs ● Identification : bal avec id="nom_id" bal#nom_id { } bal#nom_id ● Collectif : bal1,bal2 et bal3 bal1, bal2, bal3 { } ● Hiérarchie : bal3 dans bal2 dans bal1 bal1 bal2 bal3 { } ● Adjacent : bal2 directement derrière bal1 bal1 + bal2 { } ● Enfants : bal2 directement dans bal1 bal1 > bal2 { } Typographie Action Propriété Valeur Description  "Trebuchet MS", arial,  applique les polices par ordre  Choix de la police font­family : décroissant ; mettre les noms avec  sans­serif; espace entre "" préférer em et % pour hériter des  Taille de la police font­size : 10px; 1.2em; 90%; valeurs des éléments parents silver; #0033FF;  Couleur color : transparent; Orientation de la  font­style : normal; italic; oblique; police Epaisseur font­weight : bold; bolder; normal; none; underline;  Soulignement text­decoration : overline; line­through; none; capitalize;  capitalize: première lettre  Mise en majuscule text­transform : uniquement. uppercase; lowercase; left; right; center;  Alignement du texte text­align : justify; normal; 1.2em; 90%;  Hauteur de ligne line­height : 10px; Espacement entre les  letter­spacing : normal; ­2px; lettres Espacement entre les  word­spacing : normal; 3px; mots font­style, font­variant, font­ Raccourci font : weight, fontsize/line­height,  p { font: bold 12px/24px verdana } font­family
  • Arrières plans Action Propriété Valeur Notes Couleur d'arrière­plan background­color : "#RRGGBB"; Image d'arrière­plan background­image : url(http://url); Répétition de l'arrière­ repeat; repeat­x;  background­repeat : plan repeat­y; no­repeat; Spécifie si l'image  reste fixe avec les  background­attachment : scroll; fixed; déplacements de l'écran Position de l'image par  possibilité  top; middle; bottom;  rapport au coin  background­position : d'indiquer des  left; center; right; supérieur gauche pixels #000000 url(test.jpg)  Raccourci global vers  background : no­repeat scroll center  les propriétés des AP top; Marges Description Propriété Exemple Marge supérieure margin­top : 5px; Marge de droite margin­right : 0.5em; Marge inférieure margin­bottom : 2pt; Marge de gauche margin­left : 0;  ­5px 0.5em 2pt 0; auto;  Raccourci pour les marges margin : (alignement centré du  bloc) Espace intérieur entre  l'élément et la bordure  padding­top : 3px; supérieure Espace intérieur entre  l'élément et la bordure  padding­right : 0.25em; droite Espace intérieur entre  l'élément et la bordure  padding­bottom : 0; inférieure Espace intérieur entre  l'élément et la bordure  padding­left : 2pt; gauche Raccourci vers l'ensemble  des propriétés d'espace  padding : 3px 0.25em 0 2pt; intérieur
  • Bordures Description Propriété Valeur border[­top ­left ­bottom  Epaisseur de la bordure 10px; 2em; ­right]­width : Epaisseur de la bordure border­width : 10px 15px 15px 10px; (HDBG) border[­top ­left ­bottom  Couleur de la bordure #RRGGBB; ­right]­color : solid; (pleine) dashed; (en  border[­top ­left ­bottom  tirets) dotted; (en pointillés)  Style de la bordure ­right]­style : double; (double) ridge; inset;  outset; (en 3D)            10px; 2em;            Effet arrondi (Mozzilla)  ­moz­border­radius :    10px 10px 10px 10px; (HDBG) Raccourci global les propriétés  border: 1px 0 0 2px dotted  border : de bordure green; Position Description Propriété Valeur   none; (n'affiche pas le bloc)           block;  (force la propriété bloc)      inline; (force la  Propriétés display : propriété en­ligne)     list­item; (force la  propriété en­ligne) table; (force la propriété  tableau) visible; hidden; (cache l'élément mais réserve un  Affichage visibility : espace pour son affichage) static; (default ­ dans le flux) relative;  Position position : (décalage ­ dans le flux) absolute; (fixe ­ hors  du flux)   fixed; (fixe ­ hors du flux – noscroll) top : / right : /  Distance au parent  ­10px; 30%; 2em; (pas pour static) bottom : / left : Profondeur d'affichage  z­index : auto; 1000; (calque) Positionnement flottant float : left; right; none; (default) Efface le flottement clear : left; right; both; none; (default)
  • Listes Action Propriété Valeur decimal, upper­roman,  Type de puces et de  list­style­type : lower­latin, disc,  numérotation circle, square ou none Permet de personnaliser  list­style­image : url(image.png); les puces avec une image Spécifie le retrait des  list­style­position : inside; outside; puces Raccourci global vers  les propriétés des  list­style : type position url(); listes Curseurs Action Propriété Valeur default, pointer,  Apparence du curseur cursor : crosshair, help, wait,  text, move
  • Blocs ­ Flux de document ­ Marges BORDER MARGIN margin top texte texte texte texte texte texte texte texte texte  PADDING margin  texte texte texte texte texte texte texte texte texte  left texte texte texte texte texte texte texte texte texte  left bloc A (marges)  top HEIGHT texte texte texte texte texte texte texte texte texte  texte texte texte texte texte texte texte texte texte  texte texte texte texte texte texte texte texte texte  texte texte texte texte texte texte texte texte texte  bloc A (marges + relatif) texte texte texte texte texte texte texte texte texte  WIDTH texte texte texte texte texte texte texte texte texte  texte texte texte texte texte texte texte texte texte  parent  texte texte texte texte texte texte texte texte texte  bloc B texte texte texte texte texte texte texte texte texte  PADDING MARGIN bloc A bloc C bloc A bloc C { width :  { width :  { width : 60% ;  { width :  200px ;  200px ;  float: left; } 40% ;  float: left; } float: right; } float:  right; } bloc B { width : 100% ; } bloc B { width : 100% ; clear: both; } parent  top bloc B bloc B top { width : 100% ;} { width : 100% ;} bloc A bloc A { position : absolute;  { position : fixed;  left left : 20px; top : 20  bloc C left left : 20px; top : 20  bloc C px; } { width : 100% ;} px; } { width : 100% ;}