La lecture à portée de main
Description
Informations
Publié par | Force_IT |
Nombre de lectures | 286 |
Licence : |
En savoir + Paternité, pas d'utilisation commerciale, partage des conditions initiales à l'identique
|
Langue | Français |
Extrait
Cours Web
Aide-mémoire XHTML & CSS
Semaine du 5 octobre 2009
1 XHTML
– <!−−Commentaire−−>
1.1 Prologue
– <!DOCTYPE htmlPUBLIC "−//W3C//DTD XHTML 1.0 Strict//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1−strict.dtd">
– <html xmlns="http://www.w3.org/1999/xhtml"xml:lang="fr"lang="fr">
. . .
</html>
1.2 En-tête
– <head</. .> .head>
– <meta http−equiv="Content−Type"content="text/html; charset=utf−8" />
– <title</. .> .title>
– <link rel="stylesheet"href="style.css "type="text/css" />
1.3 Corps
– <body. .> .</body>
– <p</. .> .p>
– <h1> .. .</h1>, <h6. .> .</h6>
– <div> .. .</div>
– <br/>
– <hr/>
– <em. .> .</em>, <strong. .> .</strong>
– <span> .. .</span>
1
1.3.1 Listes
– <ol><li> .</. .li. .</> .ol>
– <ul><li</. .> .li</. .> .ul>
– <dl><dt</. .> .dt><dd. .</> .dd. .</> .dl>
1.3.2 Tables
– <table</> .. .table>
– <caption> .. .</caption>
– <tr</. .> .tr>
– <th> .. .</th>
– <td</. .> .td>
1.3.3 Images
– <img src="image.png"alt" />="texte alternatif
1.3.4 Lienset ancres
– <a href</. .="http://www.cnrs.fr/"> .a>
– <baliseid="toto"> .. .</balise>
– <a href</. .="#toto"> .a>
1.3.5 Attributscommuns à toutes les balises
–style
–class
–id
1.3.6 Formulaires
– <form method="post"action="script.php"enctype="multipart/form−data">
. . .
</form>
(enctypepeut être omis, il vaut alors application/x−www−form−urlencoded).
– <fieldset. .> .</fieldset>
– <legend</. .> .legend>
– <label for</="id_champ"> .. .label>
– <input type="text"name="nom"value="défaut"maxlength="42" />
– <input type="password"name="nom"value="défaut"maxlength="42" />
– <input type="checkbox"name="nom[]"value="valeur"checked="checked" />
– <input type="radio"name="nom"value="valeur"checked="checked" />
– <input type="file"name="nom" />
2
– <input type="hidden"name="nom"value="valeur" />
– <input type="reset"value="étiquette" />
– <input type="submit"value="étiquette" />
– <textarea name="nom"cols="80"rows. .</="5"> .textarea>
– <select name="nom">
<option value="valeur1"> .</. .option>
<option value="valeur2"selected="selected"> .. .</option>
</select>
– <select name="nom[]"multiple="multiple"size="5">
<option value="valeur1"> .</. .option>
<option value="valeur2"selected</. .="selected"> .option>
</select>
2 CSS
–/∗Commentaire∗/
–@importurl(feuille_annexe.css);
–sélecteur{propriété:valeur; }
2.1 Sélecteurs
sélecteur simple :balise
sélecteur multiple :sel1,sel2
sélecteur universel :∗
sélecteur de classe :,. classebalise. classe
sélecteur d’identifiant :#identifiant#identifiant, balise
sélecteur contextuel :sel1 sel2
pseudo-élément :balise: first−line ,balise: first−letter
pseudo-classes :a: visited ,a: link,activea:hover, a:
2.2 Valeurs
2.2.1 Longueurs
– %
– em,ex
– px
– mm,cm, in, pt, pc
3
2.2.2 Couleurs
–aqua,black,blue, fuschia,gray,green,lime,maroon,navy,olive,purple,red,
silver,teal,white,yellow
– rgb(255,255,255)
– rgb(100%,100%,100%)
– #FFFFFF
2.3 Propriétés
2.3.1 Miseen forme du texte
–font−family:serif|sans−serif|cursive|fantasy|monospace|police
–font−size:taille
–font−style:italic|oblique|normal
–font−variant:normal|small−caps
–font−weight:normal|bold
–line−height:taille
–text−decoration:none|underline|overline|blink|line−through
–letter−spacing:taille
–word−spacing:taille
2.3.2 Alignementet indentation
–text−align:left|right|center|justify
–vertical−align:super|sub|baseline|top|bottom
–text−indent:taille
2.3.3 Listes
–list−style−type:none|disc|circle|square|decimal|
upper−alpha|lower−alpha|upper−roman|lower−roman
–list−style−image: url(monimage.png)
2.3.4 Bordures
– Ordre:haut droite bas gauche
–border−collapse:collapse
–border−style:none|dotted|dashed|solid|double|
groove|ridge|inset|outset
–border−color:couleur
–border−width:taille
4
2.3.5 Couleurset arrière-plan
–color:couleur
–background−color:couleur
–background−image: url(monimage.png)
2.3.6 Boîtes
–width:taille|auto
–height:taille|auto
–margin−top,margin−right,margin−bottom,margin−left:taille|auto
–margin:taille|auto(haut droite bas gauche)
–padding−top,padding−right,padding−bottom,padding−left:taille|auto
–padding:taille|auto(haut droite bas gauche)
–overflow:visible|hidden|scroll|auto
2.3.7 Flottementet positionnement
–float:left|right|none
–clear:left|right|both|none
–position:static|relative|absolute|fixed
–top,right,bottom,left:longueur|auto
2.3.8 Visibilité
–visibility:visible|hidden
2.3.9 Tableset CSS
–caption−side:top|bottom
–border−collapse:collapse|separate
–empty−cells:show|hide
5