docfiche html/css.pages
download 
Plainte Transcription
fiche html/css.pages
Balises structuration texte
<pre>
Affichage formaté (pour les
codes sources)
Listes
<abbr>
abréviation
<progress>
Barre de progression
<ul>
Liste à puces, non numérotée
<blockquote>
Citation (longue)
<time>
Date ou heure
<ol>
Liste numérotée
<cite>
Citation tire oeuvre ou
évènement
<li>
Élément de la liste à puces
<dl>
Liste de définitions
<q>
Citation (courte)
<dt>
Terme à définir
<sup>
Exposant
<dd>
Définition du terme
<sub>
Indice
<strong>
Mise en valeur forte
<em>
Emphase
<script>
Code javascript
<mark>
Mise en valeur visuelle
<style>
Code CSS
<hi> (1 ≤ i ≤ 6)
Titres
<title>
Titre de la page
<img />
Image
<figure>
Figure
<figcaption>
Description figure
<html>
Balise principale
<audio>
Son
<head>
En-tête de la page
<video>
Vidéo
<body>
Corps de la page
<source>
Format source pr les balises
<audio> et <video>
<a>
Lien hypertexte
<br />
Retour à la ligne
<header>
En-tête
<p>
Paragraphe
<nav>
Liens principaux de navigation
<hr />
Ligne de séparation
horizontale
<footer>
Pied de page
<section>
Section de page
<address>
Adresse de contact
<article>
Article (contenu autonome)
<del>
Texte supprimé
<aside>
Informations complémentaires
<ins>
Texte inséré
<dfn>
Définition
<kbd>
Saisie clavier
Header
<link />
<meta />
Liaison avec une feuille de
style
Métadonnées de la page
web (charset, mot-clés,etc.)
Structure λ
Balises 1er niv
Sectionnantes
Génériques
<span>
Balise générique de type inline
<div>
Balise générique de type block
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"/>
<title> Titre onglet </title>
</head>
<!-- Je suis un commentaire -->
<body>
</body>
</html>
Mise en forme du texte
font
-
font-family
@font-face
Super prop. de police.
Formulaire html
police1, police2,…, serif, sansserin, monospace
Nom de police
Nom et source de la police
Police pers.
font-size
1.3em, 16px, 120%…
Taille du texte
font-weight
bold, normal
Gras
font-style
italic, oblique, normal
italique
text-decoration
underline, overline, line-though,
blink, none
soulignement, ligne au-dessus,
barré ou clignotant
font-variant
small-caps, normal
Petites capitales
text-transform
capitalize, lowercase, uppercase
Capitales
text-align
left, center, right, justify
Alignement horizontal
vertical-align
baseline, middle, sub, super, top,
bottom
Alignement vertical (cellules de
tableau ou éléments inlineblock uniquement)
line-height
18px, 120%, normal…
Hauteur de ligne
text-indent
25px
Hauteur de ligne
white-space
pre, nowrap, normal
Césure
word-wrap
break-world, normal
Césure forcée
text-shadow
5px 5px 2px blue (horizontale,
verticale, fondu, couleur)
Ombre de texte
Couleur/fond
color
nom, rgb, rgba, #CF1A20…
Couleur du texte
backgroung
-
Super prop. du fond
backgroung-color
identique à color
backgroungimage
Boîtes
(min/max)-width
150px, 80%…
Largeur
(min/max)-height
150px, 80%…
Hauteur
margin
23px 5px 23px 5px
T
R B
L
Super prop. marge
(ext.)
23px 5px 23px 5px
T
R B
L
Super prop. marge
(int.)
3px solid black
Super prop. de
bordure
padding
-top
-right
-bottom
-left
border
border-width
3px
Épaisseur de
bordure
border-color
identique à color
Couleur de bordure
border-style
solid, dotted,
dashed, double,
groove, ridge, inset,
outset
Type de bordure
boder-radius
5 px
Bordure arrondie
box-shadow
idem text-shadow
Ombre de boîte
Tableaux
bodercollapse
collapse, separate
Fusion des bordures
empty-cells
hide, show
Affichages des
cellules vides
captionside
bottom, top
Position du titre du
tableau
Curseur
cursor
block, inline, inlineblock, table, table-cell,
none…
Type d’éléments
(block, inline, inlineblock, none…)
visibility
visible, hidden
Visibilité
clip
rect(0px, 60px, 30, 0px)
T
R
B L
Affichage d’1 partie
de l’élément
Curseur de
souris
Syntaxe
balise[attribut]:pseudo-format
{
prop1:valeur;
prop2:valeur;
}
/* Je suis un commentaire */
.class
{
}
#id
{
}
Positionnement et affichage
display
crosshair, default, help, move,
pointer, progress, text, wait, e-resize,
ne-resize, auto…
Agencement balises
b1, b2, b3…
applique propriétés pour b1 et b2
et b3
b1 b2
pour tous les b2 inclus dans b1
overflow
auto, scroll, visible,
hidden
Comportement en cas
de dépassement
b1 + b2
pour tous les premiers b2 inclus
dans b1
Couleur de fond
float
left, right, none
Flottant
*
pour toutes les balises
url(‘image.png’)
Image de fond
clear
left, right, both, none
Arrête d’1 flottant
b1[attribut1]
toutes les balises b1 ayant
attribut1 comme attribut
backgroundattachment
fixed, scroll
fond fixe
position
relative, absolute,
static
Positionnement
b1[attribut1 *=“jnut”]
toutes les balises b1 dont
l’attribut1 contient le terme “jnut”
backgroungrepeat
repeat-x, repeat-y, no-repeat,
repeat
Répétition du fond
top (right,
bottom, left)
20px
Position par rapport au
haut (droite, bas,
gauche)
backgroundposition
(x y), top, center, bottom, left,
right
Position du fond
z-index
10
opacity
0.5 (1 = opaque, 0 = invisible)
Transparence
Ordre d’affichage en
cas de superposition.
La + gde est affichée
par -dessus les autres
Pseudo-format :
:hover
:active
:focus
:visited
action en survolant
en cliquant
en restant appuyé
une fois avoir cliquer (liens)
b = balise
Audio & Vidéo html
<audio
src=“musique.mp3”
controls
width
loop (musique jouée en boucle)
autoplay
preload=“auto”/“metadata”/“non” >
<form>
<fieldset>
<legend>Texte</legend>
<p>
<label>
for="pointeur"
</label>
<textarea>
name
=“nom”
id
=“pointeur”
</textarea>
<input>
name=“nom”
type="valeurType"
id="pointeur"
min="int"
max="int"
step="int"
checked
autofocus
required
src
</input>
Veuillez mettre à jour navigateur !
<source src=“musique.mp3”>
<source src=“musique.ogg”>
<select>
name =“nom”
id =“categorie”
</audio>
<optgroup>
label =“valeur”
<option>
value =“valeur”
selected
</option>
</optgroup>
</select>
</p>
</fieldset>
</form>
<video
src=“video.webm”
poster (img chargement vidéo)
controls
width & height
loop (vidéo jouée en boucle)
autoplay
preload=“auto”/“metadata”/“non” >
Veuillez mettre à jour navigateur !
<source src=“video.mp4”>
<source src=“video.webm”>
valeurType
text/password /email/url/tel/number/range/
color/date/time/week/mouth/datetime/
datetime-local/search/checkbox(name ≠)/
radio(name =)/submit/reset/image/button(js)
html - fiche form, audio & vidéo,
by mathland
</video>
