CSS : Syntaxe et Règles
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 faite de trois parties -
Sélecteur - Un sélecteur est une balise HTML à laquelle un style sera appliqué. Cela pourrait être n'importe quel tag comme <h1> ou <table> etc.
Propriété - Une propriété est un type d'attribut de la balise HTML. En d'autres termes, tous les attributs HTML sont convertis en propriétés CSS. Ils pourraient être la couleur, la frontière, etc
Valeur - Les valeurs sont affectées aux propriétés. Par exemple, la propriété de couleur peut avoir une valeur soit rouge ou # F1F1F1, etc.
Vous pouvez mettre la syntaxe de la règle de style CSS comme suit:
Exemple: Vous pouvez définir une bordure de tableau comme suit:
Table {border: 1px solide # C00; }
Ici table est un sélecteur et la bordure est une propriété et la valeur donnée 1px solide # C00 est la valeur de cette propriété.
Vous pouvez définir des sélecteurs de différentes façons simples en fonction de votre confort. Permettez-moi de mettre ces sélecteurs un par un.
Les types des Sélecteurs :
C'est le même sélecteur que nous avons vu plus haut. Encore une fois, un autre exemple 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 tout 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 vouliez 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 ne s'appliquera à l'élément <em> que s'il se trouve à l'intérieur de la balise <ul>.
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 dont l'attribut de classe est défini en noir dans notre document. 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 <h1> dont l'attribut de classe est défini en noir.
Vous pouvez appliquer plusieurs sélecteurs de classe à un élément donné. Prenons l'exemple suivant:
<p class="center bold">
Ce paragraphe sera dessiné par le centre des classes et en gras.
</p>
Les sélecteurs ID :
Vous pouvez définir des règles de style basées sur l'attribut id des éléments. Tous les éléments ayant cet identifiant seront formatés selon la règle définie.
#black {
color: #000000;
}
Cette règle rend le contenu en noir pour chaque élément dont l'attribut id est défini à noir dans notre document. 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 <h1> dont l'attribut id est défini sur noir.
La véritable puissance des sélecteurs id est lorsqu'ils sont utilisés comme base pour les sélecteurs descendants. Par exemple:
#black h2 {
color: #000000;
}
Dans cet exemple, tous les titres de niveau 2 seront affichés en couleur noire lorsque ces titres se trouveront dans des balises dont l'attribut id est défini sur noir
Les sélecteurs enfants : The Child Selectors
Vous avez vu les sélecteurs descendants. Il existe un autre type de sélecteur, qui est très similaire aux descendants mais qui ont des fonctionnalités différentes. Considérons l'exemple suivant –
body > p {
color: #000000;
}
Cette règle rendra tous les paragraphes en noir s'ils sont fils directs de l'élément <body>. D'autres paragraphes placés dans d'autres éléments comme <div> ou <td> n'auraient aucun effet de cette règle.
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 correspond à 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 <input type = "submit" /> 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 attribut lang.
- p[lang = "fr"] - Sélectionne tous les éléments de paragraphe dont l'attribut lang a une valeur exactement "fr".
- p[lang ~ = "fr"] - Sélectionne tous les éléments de paragraphe dont l'attribut lang contient le mot "fr".
- p[lang | = "en"] - Sélectionne tous les éléments de paragraphe dont l'attribut lang 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 valeurs correspondantes en 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, toute la paire propriété et valeur sont séparées par un point-virgule (;). Vous pouvez les conserver en une ou plusieurs lignes. Pour une meilleure lisibilité, nous les conservons dans des lignes séparées.
Pendant un certain temps, ne vous embêtez pas sur les 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.
Sélecteurs de regroupement :
Vous pouvez appliquer un style à plusieurs sélecteurs si vous le souhaitez. Il suffit de séparer les sélecteurs avec 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 sera également applicable aux éléments h1, h2 et h3. L'ordre de la liste n'est pas pertinent. Tous les éléments du sélecteur auront les déclarations correspondantes qui leur sont appliquées.
Vous pouvez combiner les différents sélecteurs de classe comme illustré ci-dessous –
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Aucun commentaire