HTML & CSS

CSS – Syntaxe

Anne Coulombe4 weeks ago
3 minutes read

Un CSS comprend des règles de style qui sont interprétées par le navigateur puis appliquées aux éléments correspondants de votre document. Une règle de style est composée de trois parties −

  • Sélecteur − Un sélecteur est une balise HTML à laquelle un style sera appliqué. Cela pourrait être n’importe quelle balise comme

    ou

    etc.

  • Propriété − Une propriété est un type d’attribut de balise HTML. En termes simples, tous les attributs HTML sont convertis en propriétés CSS. Ils pourraient être couleur, frontière etc.

  • Valeur − Des valeurs sont attribuées aux propriétés. Par exemple, couleur la propriété peut avoir de la valeur soit rouge ou #F1F1F1 etc.

    • Vous pouvez mettre la syntaxe de la règle de style CSS comme suit –

    selector { property: value }

    Exemple − Vous pouvez définir une bordure de tableau comme suit −

    table{ border :1px solid #C00; }

    Ici, la table est un sélecteur et la bordure est une propriété et une valeur donnée 1px solide #C00 est la valeur de cette propriété.

    Vous pouvez définir des sélecteurs de différentes manières simples en fonction de votre confort. Permettez-moi de mettre ces sélecteurs un par un.

    Les sélecteurs de type

    C’est le même sélecteur que nous avons vu ci-dessus. Encore une fois, un exemple de plus pour donner une couleur à tous les titres de niveau 1 −

    h1 {
   color: #36CFFF; 
}

    Les sélecteurs universels

    Plutôt que de sélectionner des éléments d’un type spécifique, le sélecteur universel correspond tout simplement au nom de n’importe quel type d’élément –

    * { 
   color: #000000; 
}

    Cette règle rend le contenu de chaque élément de notre document en noir.

    Les sélecteurs descendants

    Supposons que vous souhaitiez appliquer une règle de style à un élément particulier uniquement lorsqu’il se trouve à l’intérieur d’un élément particulier. Comme indiqué dans l’exemple suivant, la règle de style s’appliquera à l’élément uniquement lorsqu’il se trouve à l’intérieur de la balise

      .

      ul em {
   color: #000000; 
}

      Les sélecteurs de classe

      Vous pouvez définir des règles de style basées sur l’attribut de classe des éléments. Tous les éléments ayant cette classe seront formatés selon la règle définie.

      .black {
   color: #000000; 
}

      Cette règle rend le contenu en noir pour chaque élément avec l’attribut de classe défini sur noir dans notre dossier. Vous pouvez le rendre un peu plus particulier. Par exemple –

      h1.black {
   color: #000000; 
}

      Cette règle rend le contenu en noir uniquement pour les éléments

      avec l’attribut class défini sur noir.

      Vous pouvez appliquer plusieurs sélecteurs de classe à un élément donné. Considérez l’exemple suivant –

      <p class = "center bold">
   This para will be styled by the classes center and bold.
</p>

      Les sélecteurs d’ID

      Vous pouvez définir des règles de style basées sur le identifiant attribut des éléments. Tous les éléments ayant cela identifiant sera formaté selon la règle définie.

      #black {
   color: #000000; 
}

      Cette règle rend le contenu en noir pour chaque élément avec identifiant attribut défini sur noir dans notre dossier. Vous pouvez le rendre un peu plus particulier. Par exemple –

      h1#black {
   color: #000000; 
}

      Cette règle rend le contenu en noir uniquement pour les éléments

      avec identifiant attribut défini sur noir.

      Le vrai pouvoir de identifiant sélecteurs, c’est quand ils sont utilisés comme base pour les sélecteurs descendants, par exemple –

      #black h2 {
   color: #000000; 
}

      Dans cet exemple, tous les en-têtes de niveau 2 seront affichés en noir lorsque ces en-têtes se trouveront dans des balises ayant identifiant attribut défini sur noir.

      Les sélecteurs enfants

      Vous avez vu les sélecteurs descendants. Il existe un autre type de sélecteur, qui est très similaire aux descendants mais qui a des fonctionnalités différentes. Considérez l’exemple suivant –

      body > p {
   color: #000000; 
}

      Cette règle affichera tous les paragraphes en noir s’ils sont des enfants directs de l’élément . D’autres paragraphes placés à l’intérieur d’autres éléments comme

      ou

      Les sélecteurs d’attributs

      Vous pouvez également appliquer des styles aux éléments HTML avec des attributs particuliers. La règle de style ci-dessous correspondra à tous les éléments d’entrée ayant un attribut de type avec une valeur de texte −

      input[type = "text"] {
   color: #000000; 
}

      L’avantage de cette méthode est que l’élément n’est pas affecté et que la couleur s’applique uniquement aux champs de texte souhaités.

      Les règles suivantes s’appliquent au sélecteur d’attributs.

      • p[lang] − Sélectionne tous les éléments de paragraphe avec un langue attribut.

      • p[lang=”fr”] − Sélectionne tous les éléments de paragraphe dont langue l’attribut a une valeur exactement “fr”.

      • p[lang~=”fr”] − Sélectionne tous les éléments de paragraphe dont langue l’attribut contient le mot “fr”.

      • p[lang|=”en”] − Sélectionne tous les éléments de paragraphe dont langue L’attribut contient des valeurs qui sont exactement “en” ou commencent par “en-“.

      Règles de style multiples

      Vous devrez peut-être définir plusieurs règles de style pour un seul élément. Vous pouvez définir ces règles pour combiner plusieurs propriétés et les valeurs correspondantes dans un seul bloc comme défini dans l’exemple suivant –

      h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

      Ici, toutes les paires de propriétés et de valeurs sont séparées par un point-virgule (;). Vous pouvez les conserver sur une seule ligne ou sur plusieurs lignes. Pour une meilleure lisibilité, nous les conservons sur des lignes séparées.

      Pendant un certain temps, ne vous souciez pas des propriétés mentionnées dans le bloc ci-dessus. Ces propriétés seront expliquées dans les chapitres à venir et vous pouvez trouver des détails complets sur les propriétés dans les références CSS

      Grouper les sélecteurs

      Vous pouvez appliquer un style à plusieurs sélecteurs si vous le souhaitez. Séparez simplement les sélecteurs par une virgule, comme indiqué dans l’exemple suivant –

      h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

      Cette règle de style définie s’appliquera également aux éléments h1, h2 et h3. L’ordre de la liste est sans importance. Tous les éléments du sélecteur se verront appliquer les déclarations correspondantes.

      Vous pouvez combiner les différents identifiant sélecteurs ensemble comme indiqué ci-dessous −

      #content, #footer, #supplement {
   position: absolute;
   left: 510px;
   width: 200px;
}

      #CSS #Syntaxe

      Tags
      Anne Coulombe4 weeks ago
      3 minutes read

      Anne Coulombe

      Related Articles

      CSS – Utilisation d’images

      2 weeks ago

      CSS – Contours

      2 days ago

      CSS – Marges

      1 week ago

      CSS – Unités de mesure

      3 weeks ago
      Check Also
      Close
      Back to top button