ESCEN 2018-11
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Titre apparaissant dans l'onglet</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
<!DOCTYPE html>
<!-- Balise html : Noeud racine du document HTML -->
<html lang="fr">
<!-- Balise head :
pour le titre du document,
les meta-données,
et les fichiers annexes (surtout CSS) -->
<head>
<!-- Jeu de caractère utilisé dans
l'éditeur de texte ayant édité ce fichier -->
<meta charset="utf-8" />
<!-- Compatibilité pour les navigateur IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Titre du document -->
<title>Titre apparaissant dans l'onglet</title>
<!-- Gestion du zoom du document -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Association d'une feuille de style -->
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<!-- Association d'un fichier JavaScript
/!\ selon la spec HTML il doit être ici... -->
<script src="main.js"></script>
</head>
<body>
<!-- Association d'un fichier JavaScript
/!\ selon la spec HTML il doit être ici... -->
<script src="main.js"></script>
</body>
</html>
/* Règle */
.classe { /* Sélecteur */
background-color: #555; /* Déclaration */
/* propriété: valeur(s); */
background: #555 url(/chemin/de/croix.png) no-repeat center center;
}
/* Sélecteur universel */
*
/* Sélecteurs de type */
div
/* Sélecteurs descendants */
div span
/* Sélecteurs d'enfant */
ul > li
/* Les sélecteurs adjacents */
h2 + p
/* La pseudo-classe */
li:first-child
/* Les pseudo-classes de lien */
a:link
a:visited
/* Les pseudo-classes dynamiques */
a:active
a:hover
a:focus
/* La pseudo-classe :lang() */
h1:lang(fr)
/* Sélecteurs d'attribut */
abbr[title]
/* Sélecteurs d'attribut */
fieldset[foo="warning"]
label[foo~="warning"]
aside[lang|="en"]
/*************************
* Seulement en HTML *
*************************/
/* Sélecteurs de classe */
/* Identique à DIV[class~="warning"] */
.warning
/* Sélecteurs d'ID */
#myid
/* Les pseudo-éléments */
:first-line
:first-letter
:before
:after
Contenu
Padding
Border
Margin
Requête (Request)
Réponse (Response)
Client
Serveur
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties