Mes notes personnelles sur le développement Web

Les bases du CSS

CSS est un langage déclaratif qui précisent décrit le format d'affichage des différents éléments constituant un contenu Web à travers différentes règles de style. En d'autres termes, ce langage peut définir comment afficher un élément en bloc tel un paragraphe ou un élément en ligne tel une emphase :

p {
  color: red;
}

em {
  color: blue;
}

Anatomie d'une règle de style :

Une règle est constituée des éléments suivants :

sélecteur : nom de l'élément HTML sur lequel le style est appliqué (p ou em dans l'exemple précedent),
déclaration : règle qui précise la mise en forme qui doit être appliquée, elle est constituée d'une :
- propriété : nom de l'attribut de l'élément concerné par la règle (color dans l'exemple précédent),
- valeur : valeur de la propriété (red ou blue dans l'exemple précédent).

Convention typographiques :

sélecteur,
propriété,
valeur de propriété.

Une feuille de style est constituée d'une succession de règles de style.

CSS faciles est un site Web recensant toutes les propriétés CSS par ordre alphabétique ou par famille. De même, MDN web docs fournit une référence CSS.

Il est possible d'insérer des commentaires dans une feuille des styles en parenthésant le commentaire par /* et */.

Exemple : /*-- Ceci est un commentaire --*/

Quelques règles :

Chaque déclaration se termine par le symbole ;.
Le symbole : sépare la propriété et la valeur,
Une déclaration est parenthésée { … }.
Les valeurs possibles pour une propriété dépendent de son type.

Une règle peut peut-être composée de plusieurs déclarations :

p {
  color: red;
  width : 500px;
  border : 1px;
}

Il est possible d'associer le même ensemble de déclarations à plusieurs éléments en séparant ces éléments par des virgules.

h1, h2, p, li {
  color: red;
}

Quelques règles :

Les propriétés et les valeurs sont sensibles à la casse.
Si la propriété est inconnue ou si la valeur est invalide pour une propriété donnée, la déclaration est considérée comme invalide et elle est complètement ignorée par le moteur CSS du navigateur.

Définition des comportements

Les règles de style définissent le rendu attendu d'une page Web. Ceci peut nécessiter de changer le comportement par défaut des éléments, Il faut donc, dans un premier temps, définir tous les comportements des éléments HTML qui sont utilisés dans un site en leur associant une déclaration.

Règle : L'ordre d'apparition des règles dans le CSS a une importance ; quand deux règles applicables ont la même spécificité, c'est la dernière déclarée qui est utilisée pour la mise en forme.

En appliquant le fichier CSS ci-dessous, le titre <h1> est affiché en bleu :
h1 {
    color: red;
}
h1 {
    color: blue;
}

Cette approche implique que tous les éléments ont un même comportement dans un site ce qui est rarement le cas. Les classes offrent un moyen de sélectionner un sous-ensemble d'éléments pour leur assigner une mise en forme différentes des autres éléments de même type.

En appliquant ce fichier CSS 
.classe {
    color: red;
    font-weight: bold;
}
au document HTML ci-dessous, le deuxième item est affiché en rouge et en gras.
<ul>
    <li>Item un</li>
    <li class="classe">Item deux</li>
    <li>Item trois</li>
</ul>

Règle : Quand des règles avec des sélecteurs différents s'appliquent au même élément, c'est la règle avec la plus grande spécificité qui est appliquée. Par exemple, un sélecteur de classe est plus spécifique qu'un sélecteur d'élément.

En appliquant le fichier CSS ci-dessous, l'élément <h1 class="titre-principal"> est affiché en rouge:
.titre-principal {
    color: red;
}
h1 {
    color: blue;
}

Il est aussi possible d'associer une déclaration à un élément dont l'attribut class à une valeur donnée.

En appliquant ce fichier CSS 
li.classe {
    color: red;
}
au document HTML ci-dessous, seul l'élément <li> est affiché en rouge.
<p class = "classe">Ce texte est dans un paragraphe.</p>
<ul>
    <li class="classe">Ce texte est dans une énumération.</li>
</ul>

Il y a des situations où le style doit s'adapter en fonction de sa position dans le document. Il peut par exemple être intéressant de définir un comportement d'un élément différent lorsqu'il est englobé dans un autre élément.

En appliquant ce fichier CSS 
em {
    color: blue;
}
li em {
    color: red;
}
au document HTML ci-dessous, l'élément <em> dans <p> est affiché en bleu alors que celui qui est dans <li> en rouge.
<p>Ce texte est dans un <em>paragraphe</em>.</p>
<ul>
    <li>Ce texte est dans une <em>énumération</em>.</li>
</ul>

Cette exemple montre qu'il est possible d'associer et de combiner des sélecteurs.

Il peut être nécessaire de définir un comportement en fonction d'un état comme, par exemple, définir un comportement particulier sur les hyperliens <a>. Cet élément a différents états selon que le lient ait été visité (visited), survolé par la souris (hover), a le focus clavier (focus) et si l'utilisateur est en train de cliquer sur ce lien (active).

CSS:

a:link {
    color: pink;
}
a:visited {
    color: green;
}
a:hover {
    color: yellow;
}
a:focus {
    color: blue;
}
HTML:
<p><a href="https://web.entopan.fr">lien</a>.</p>
En appliquant ce fichier CSS au document HTML ci-dessus, le lien est affiché :
  en rose au premier affichage,
  en jaune lorsque la souris passe dessus,
  en bleu quand il est sélectionné
  en vert quand il a été visité.

Fonctions CSS :

Bien que la plupart des valeurs des propriétés sont des mots-clés ou des valeurs numérique, il est possible d'utiliser des fonctions pour calculer une valeur dans une déclaration CSS. Ils existe de nombreuses fonctions parmi lesquelles :

calc : calcul d'une valeur numérique
rotate() : rotation d'une figure,
opacity() : définition d'un niveau d'opacité,
url() : définition d'une URL.

Certains sites proposent une description des différentes fonctions CSS (Quackit ou Pierre Giraud)

Règles @ :

Les règles spéciales, @rules, sont des règles spéciales dictant un comportement CSS. Certaines de ces règles simples sont composées d'un nom et d'une valeur. Les règles @ les plus courantes :

@import : importation d'un feuille de style additionnelle.
@media : utilisation des requêtes média, media queries ou media queries sur MDN, pour appliquer CSS seulement lorsque certaines conditions sont vérifiées. Les requêtes média sont un outil de responsive design qui permet d'adapter la feuille de style CSS en fonctions de différents paramètres ou caractéristiques de l'appareil.

Par exemple, @media (min-width: 30em) { … } conditionne l'application de la section aux navigateurs dont la fenêtre est plus large que 30em.

body {
    background-color: pink;
}
@media (min-width: 30em) {
    background-color: blue;}

Raccourcis :

Lors de la définition de certaines propriétés (font, background, padding, margin, il est possible d'attribuer plusieurs valeurs en une seule ligne

Il est possible d'affecter plusieurs valeurs à un attribut :

p {
  border : 1px solid black;
}

Attention ! L'ordre dans la définition des valeurs à une importance.

Il faut consulter les spécifications pour connaître l'ordre dans lequel fournir les valeurs. Voici deux exemples proposés par MDN Web Docs :

Raccourci à 4 valeurs :
padding: 10px 15px 20px 5px;
équivaut à
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 5px;
L'ordre est donc : haut - droite - bas - gauche
Raccourci à 2 valeurs :
padding: 10px 15px
équivaut à
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
L'ordre est donc : haut/bas - droite/gauche
Autre raccourci :
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
équivaut à
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;