<phrase><sujet>Le chat</sujet> <verbe>mange</verbe>
<complement>la souris</complement>.</phrase>
<q><i>Le malade imaginaire</i> de <b>Molière</b>
c'est aussi… <br />l'imaginaire malade.</q>
<abc>
</abc>
<abc />
<img src="logo_ACME_XS.jpeg" alt="ACME SARL" />
entité | explication | valeur |
---|---|---|
< | plus petit que (less than) | < |
" | guillemets doubles | " |
& | esperluette (ampersand) | & |
| espace insécable | |
« | guillemet français ouvrant
(left angle quote) |
« |
é | e accent aigu (acute) | é |
ê | e accent circonflexe | ê |
ç | c cédille | ç |
€ | euro | € |
entité | explication | valeur |
---|---|---|
> | plus grand que (greater than) | > |
' | guillemet simple | ' |
­ | tiret conditionnel | - |
» | guillemet français fermant
(left angle quote) |
» |
è | e accent grave | è |
ë | e tréma (umlaut) | ë |
© | copyright | © |
http://…nom_serveur…/dossier1/dossier2/…/fichier
ou : https:…
/dossier1/dossier2/…/fichier
sous-dossier1/sous-dossier2/…/fichier
..
http://serveur/chemin?nom1=valeur1&nom2=val2&…
<a href="…?nom1=val1&nom2=…">…
<i>
balise une rupture de la langue ou du discours
<em>
ni
<cite>
:
<p>Le <i lang="en">web</i> est un outil fantastique.</p>
<p>Le <i class="taxonomie">Felis silvestris</i> mange la Souris.</p>
<p>Le terme <i class="glossaire">utilisabilité</i>, défini ci-après…</p>
<p>Ceci est en italiques : <i>exemple</i>.</p>
<b>
balise une rupture typographique
<strong>
<big>
,
<center>
,
<font>
,
<s>
,
<small>
,
<strike>
,
<tt>
,
<u>
<s>
Le fichier HTML ne comporte pas que son contenu :
<!DOCTYPE html>
<html lang="fr"><!-- code de langue ISO 639 -->
▏ <head>
▏ ▏ <meta charset="utf-8"><!-- encodage des caractères -->
▏ ▏ <title>…titre de la page…</title>
▏ ▏ <meta name="author" content="…nom / URL de l'auteur…">
▏ ▏ <meta name="description" content="…description du contenu…">
▏ ▏ <meta name="keywords" content="mot-clé,mot-clé,…">
▏ ▏ <link rel="stylesheet" href="…URL d'une feuille de style…">
▏ </head>
▏ <body>
▏ ▏ …contenu de la page…
▏ </body>
</html>
<!-- …commentaire… -->
<!-- <balise>… -->
<link rel="stylesheet" type="text/css" href="feuille.css" />
<style>
▏ /* règles CSS */
</style>
<element style="/* déclarations CSS */" …>…
Exemple : balises h3
<h3>Lorem ipsum</h3>
<p>Dolor sit amet…</p>
h3 {
▏ background: #B77E8D; /* */
▏ color: #411422; /* */
▏ font-size: 144%;
▏ margin: 10px 0 20px 0;
}
{background:url(decors/grille.png)} h3 {text-align:left}
balise1, balise2, … {
▏ propriété1: valeur1;
▏ propriété2: valeur2;
▏ …
}
Équivaut (presque) à :
balise1 {
▏ propriété1: valeur1; propriété2: valeur2; …
}
balise2 {
▏ propriété1: valeur1; propriété2: valeur2; …
}
…
Les classes équivalent à des catégories “personnelles” spécialisant des balises génériques.
Affectées à un élément par l'attribut class
en HTML
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="alinea">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Introduites par un point
en CSS
.alinea {
▏ text-indent: 50px;
}
black |
#000000 |
noir | |
gray |
#808080 |
gris foncé (50%) | |
silver |
#C0C0C0 |
gris foncé (75%) | |
white |
#FFFFFF |
blanc | |
maroon |
#800000 |
pourpre, rouge foncé | |
red |
#FF0000 |
rouge vif | |
purple |
#800080 |
violet, mauve | |
fuchsia |
#FF00FF |
fuchsia, rose |
green |
#008000 |
vert foncé | |
lime |
#00FF00 |
vert vif | |
olive |
#808000 |
marron, khaki | |
yellow |
#FFFF00 |
jaune vif | |
navy |
#000080 |
outremer, bleu foncé | |
blue |
#0000FF |
bleu vif | |
teal |
#008080 |
turquoise foncé | |
aqua |
#00FFFF |
turquoise clair |
transparent
hexadécimal | 00 |
33 |
66 |
99 |
CC |
FF |
---|---|---|---|---|---|---|
décimal | 0 | 51 | 102 | 153 | 204 | 255 |
proportion | 0% | 20% | 40% | 60% | 80% | 100% |
#3366CC
équivaut à rgb(51, 102, 204)
rgb(20%, 40%, 80%)
rgba(51, 102, 204, 0.25)
rgba(20%, 40%, 80%, 25%)
color
, background-color
<p class="abc">Test 1</p>
<p class="def">Test 2</p>
.abc {
▏ background-color: #0F2D40;
▏ color: #3E8C84;
}
.def {
▏ background-color:
▏ ▏ rgba(47, 0, 38, .6);
▏ color: rgb(168, 204, 132);
}
background-image
,
background-repeat
,
background-position
.ex {
▏ background-color: #C6D4D7;
▏ background-image: url(decors/logo-UP-2011.svg);
▏ background-repeat: no-repeat; /* repeat|repeat-x|repeat-y */
▏ background-position: 0 0; /* δx δy */
}
<p class="ex">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
font-family
font-family: Baskerville, 'Times New Roman', "Heisi Mincho W3", serif;
La sélection se fait caractère par caractère
font-size
et line-height
font-style
,
font-weight
,
font-variant
,
color
p {
▏ font-family: YanoneKaffeesatz, Arial, Helvetica, sans-serif;
▏ font-weight: 300; /* normal=400, bold=700 */
▏ font-size: 26pt;
}
h4 {
▏ font-family: Baskerville, 'Times New Roman', "Heisi Mincho W3", serif;
▏ font-weight: bold; /* habituellement par défaut */
▏ font-size: 32pt;
}
<h4>Lorem ipsum dolor sit amet ℏ 😎 万维网</h4>
<p class="ex">consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
width
× height
margin: haut droite bas gauche;
border: épaisseur style couleur;
padding: haut droite bas gauche;
ex
: hauteur d'x
,
hauteur des lettres sans “jambe”em
: largeur d'M
,
référence de la fonte (font-size
)rem
: font-size
de la racine du document
— référence à préférer pour les polices%
: pourcentage par rapport au conteneur de référencepx
: point d'écran de référence
— pixel sur un PCpt
: point “d'impression”
— en réalité 1px
= ¾pt
in
: pouce “d'impression”
— en fait 1in
= 72pt
= 96px
cm
: centimètre “d'impression”
— en fait 1in
= 2,54cm
p.alinea {…}
.highlight.css {…}
B.C
: un élément de balise B
et de classe C
A E
:
un élément E (enfant) qui est dans un élément A
(parent ou autre ascendant)
A E
≠
S1, S2
B.C
h1 { text-weight: bold; color: #800000; }
h1 b { text-weight: normal; }
.valeur { text-weight: bold; color: #800000; }
h1 .valeur { color: #336666; }
ul { list-style-image: url(puce-liste-12x12.png); }
ul ul { list-style-image: url(puce-liste-10x10.png); }
ul ul ul { list-style-image: url(puce-liste-8x8.png); }
em { font-style: italic; }
em em { font-style: normal; }
::before
: avant le contenu d'un élément::first-letter
: premier caractère d'un élément::first-line
: première ligne d'un bloc::after
: après le contenu d'un élément:visited
: est un lien visité:link
: est un lien pas encore visité:hover
: est survolé:active
: est activé:focus
: a le focus (saisie):target
: est la cible (#) de l'URI (CSS3):first-child
,
:last-child
,
:nth-child(…)
,
:nth-of-type(…)
,
:not(…)
…
!important
> normal
> config. utilisateur
> navigateur
#
identifiant > .
classe
> balise > *
*
: pronom personnel indéfini, “on”.
classe : adjectif qualificatif, complément de nom#
identifiant : nom propre (unique dans une page)* /* spécificité = 0 0 0 (pas spécifique) */
li {...} /* spécificité = 0 0 1 (faible : très général) */
li::first-line {...} /* spécificité = 0 0 2 */
ul li {...} /* spécificité = 0 0 2 */
ul ol li {...} /* spécificité = 0 0 3 */
li.plus {...} /* spécificité = 0 1 1 */
a:hover {...} /* spécificité = 0 1 1 */
nav ul li.plus {...} /* spécificité = 0 1 3 */
#x34y {...} /* spécificité = 1 0 0 */
#banner nav {...} /* spécificité = 1 0 1 (forte : très spécifique) */
style="…"
compte comme plus spécifique que tout.