Aide-mémoire XHTML & CSS
5 pages
Français

Aide-mémoire XHTML & CSS

Le téléchargement nécessite un accès à la bibliothèque YouScribe
Tout savoir sur nos offres

Description

Aide-mémoire d'intructions CSS et balises HTML (corps, listes, tables, images, liens et ances,...)

Sujets

Informations

Publié par
Nombre de lectures 285
Langue Français

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