Cours IT Bases CSS 019_HelloCSS
Qu’est-ce que CSS ?
CSS (Cascading Style Sheets, Feuilles de style en cascade) est similaire à HTML, CSS n’est pas un vrai langage de programmation, ni même un langage de balisage. CSS est un langage de feuilles de style, utilisé pour ajouter des styles aux éléments HTML, décrire l’apparence des documents HTML et contrôler la couleur, la taille, la police, la mise en page, etc. des éléments du document HTML.
CSS est une partie importante du développement web, il peut vous aider à créer des pages web esthétiques et faciles à utiliser.
Structure de base de CSS
Les styles CSS se composent de sélecteurs et de propriétés. Les sélecteurs sélectionnent les éléments HTML auxquels les styles seront appliqués. Les propriétés spécifient les valeurs des styles.
Exemple :
p { color: red;}Résultat :
Analyse de la structure :
[!Résumé]
Sélecteur (Selector) Le nom de l’élément HTML se trouve au début de l’ensemble de règles. Il sélectionne un ou plusieurs éléments auxquels ajouter des styles (dans cet exemple, l’élément
<p>). Pour ajouter des styles à différents éléments, il suffit de changer le sélecteur.Déclaration (Declaration) Une règle individuelle, comme color: red; spécifie les propriétés des éléments à styliser. Les déclarations CSS se terminent toujours par un point-virgule ; et sont entourées d’accolades {} :
Propriétés (Properties) Le moyen de modifier les styles des éléments HTML (dans cet exemple, color est la propriété de l’élément
<p>). En CSS, l’auteur décide quelle propriété modifier.Valeur de la propriété (Property value) À droite de la propriété, après les deux-points, se trouve la valeur de la propriété, qui sélectionne une valeur parmi les nombreuses apparences possibles (outre red, il existe de nombreuses autres valeurs pour color).
Comment inclure CSS ?
Inclusion en ligne :
Le code CSS est écrit directement dans les balises HTML, en utilisant l’attribut style.
L’inclusion en ligne consiste à écrire le code de style directement dans les balises HTML, une méthode simple et rapide. Avantages : pratique et rapide, adapté à peu de styles. Inconvénients :
- Défavorable à la réutilisation des styles, difficile à maintenir.
- Fichiers HTML désordonnés, ne respecte pas le principe de séparation.
- Défavorable au cache du navigateur, affecte les performances.
Exemple :
<div style="color: red; font-size: 16px;">Ceci est un texte rouge</div>Résultat :
Inclusion interne :
Le code CSS est écrit dans les balises <style>, placées dans la balise <head>.
L’inclusion interne consiste à écrire le code de style dans les balises style du fichier HTML, une approche relativement équilibrée. Avantages : les styles sont séparés du fichier HTML, facile à maintenir. De plus, le cache du navigateur peut améliorer la vitesse de chargement. Inconvénients :
- Des requêtes réseau supplémentaires sont nécessaires au chargement, relativement inefficace.
- Les styles et le fichier HTML ont encore un certain couplage.
Exemple :
div { color: red; font-size: 16px;} <div>Ceci est un texte rouge</div>Résultat :
Inclusion externe :
Le code CSS est écrit dans un fichier CSS séparé, puis inclus avec la balise link.
L’inclusion externe consiste à écrire le code de style dans un fichier CSS séparé, une méthode standard. Avantages : les styles et le fichier HTML sont complètement séparés, facile à maintenir. De plus, l’accélération CDN peut améliorer la vitesse de chargement. L’inclusion externe supporte aussi la compression et la fusion pour réduire la taille des fichiers. Inconvénients :
- Des requêtes réseau supplémentaires sont nécessaires au chargement, mais optimisable.
- Dépendance aux ressources externes, peut causer un blocage ou un échec de chargement.
- Pendant le développement, plusieurs requêtes aux fichiers externes peuvent être nécessaires.
Exemple :
<head>
<!-- Dans le répertoire courant, référence au fichier de styles dans le sous-dossier styles --><link rel="stylesheet" href="style.css" />
<!-- Dans le répertoire courant, référence au fichier de styles dans styles/general --><link rel="stylesheet" href="/style.css" />
<!-- Dans le répertoire parent, référence au fichier de styles dans le sous-dossier styles --><link rel="stylesheet" href="../styles/style.css" />
</head>div { color: red; font-size: 16px;}Résultat :
Ordre de cascade et priorité
L’ordre de cascade CSS (Cascading Order) et la spécificité (Specificity) sont deux facteurs clés qui déterminent l’effet de style CSS affiché.
Ordre de cascade : L’ordre de cascade CSS définit le poids des règles de style, du plus élevé au plus bas :
- Importance (!important) : Les règles de style déclarées avec !important ont la plus haute priorité. À utiliser avec modération car l’abus complique la maintenance.
- Styles d’auteur (Author Styles) : Styles définis par le développeur web, incluant feuilles de style externes, internes et styles en ligne. Priorité entre les styles utilisateur et les styles de l’agent utilisateur.
- Styles utilisateur (User Styles) : Styles définis par l’utilisateur via des plugins ou paramètres du navigateur, priorité supérieure aux styles de l’agent utilisateur, ex : plugins de polices.
- Styles de l’agent utilisateur (User Agent Styles) : Les styles par défaut du navigateur, priorité la plus basse, ex : polices.
Priorité : Lorsqu’il y a plusieurs règles de style du même niveau ou des règles conflictuelles, CSS affiche les styles selon la priorité.
- Styles en ligne (Inline Styles) : Styles spécifiés dans les balises HTML, priorité la plus élevée.
- Sélecteur ID (id) : Styles spécifiés par sélecteur ID, ex : #header.
- Sélecteurs de classe, d’attribut et de pseudo-classe (class) : Par sélecteur de classe, ex :
.container. Par sélecteur d’attribut, ex :[type="text"]. Par sélecteur de pseudo-classe, ex ::hover. - Sélecteur d’élément : Sélecteur avec nom d’élément HTML, ex :
div,p.
À priorité égale, la règle définie en dernier a la précédence.
Exemple :
#header { color: red;}
.container p { color: blue;}
p { color: green;}Héritage CSS
L’héritage CSS signifie que les éléments enfants héritent de certaines valeurs de propriétés des éléments parents. L’héritage est une caractéristique importante en CSS qui simplifie l’écriture des styles et améliore la maintenabilité du code. Toutes les propriétés CSS ne sont pas héritables, seule une partie est définie comme héritable.
Les propriétés CSS héritables comprennent principalement :
- Propriétés de texte : font-family, font-size, font-weight, font-style, color, text-decoration, text-align, line-height, letter-spacing, word-spacing
- Propriétés de couleur : background-color, border-color, color, outline-color
- Propriétés de bordure : border-width, border-style, border-color
- Propriétés du modèle de boîte : margin, padding, width, height, display, float, position, z-index
Les propriétés CSS non héritables incluent par exemple width, height, margin, padding et autres propriétés du modèle de boîte, le positionnement (position), le flottement (float), le nettoyage de flottement (clear) et autres propriétés de mise en page.
Propriétés CSS courantes et leurs fonctions :
Propriétés de base width, height : Définir la largeur et la hauteur de l’élément. margin : Définir la marge de l’élément. padding : Définir le remplissage de l’élément. color, background-color : Définir la couleur et la couleur de fond de l’élément. font-size, font-family, font-weight, font-style : Définir la taille, la famille, le poids et le style de police.
Propriétés de mise en page display : Définir le mode d’affichage de l’élément. float : Définir le comportement de flottement de l’élément. position : Définir la position de l’élément. top, left, right, bottom : Définir les positions haut, gauche, droite et bas. z-index : Définir l’ordre d’empilement de l’élément.
Propriétés de texte text-align : Définir l’alignement du texte. text-decoration : Définir la décoration du texte. line-height : Définir la hauteur de ligne. font-variant : Définir la variante de police. text-transform : Définir la transformation du texte. letter-spacing, word-spacing : Définir l’espacement des caractères et des mots.
Propriétés de bordure border : Définir le style de bordure de l’élément. border-width : Définir la largeur de bordure. border-style : Définir le style de bordure. border-color : Définir la couleur de bordure. border-radius : Définir le rayon des coins de bordure.
Propriétés de fond background : Définir le fond de l’élément. background-color : Définir la couleur de fond. background-image : Définir l’image de fond. background-repeat : Définir le mode de répétition de l’image de fond. background-position : Définir la position de l’image de fond. background-size : Définir la taille de l’image de fond.
Propriétés de transition transition : Définir l’effet de transition de l’élément. transition-property : Définir la propriété de transition. transition-duration : Définir la durée de transition. transition-timing-function : Définir la fonction de transition. transition-delay : Définir le délai de transition.