Sélecteurs CSS
Syntaxe
Tous les styles CSS sont constituées de 3 parties: un sélecteur, une propriété et une valeur. Pour rester en conformité avec les règles de formatage XHTML CSS tout le code doit être écrit en minuscules.
La syntaxe CSS
- Selector: Définit quelles balises HTML vont recevoir les règles CSS. Pour changer le style de tous vos paragraphes, vous pouvez écrire
p {property:value}. - Propriété: C'est le style CSS que vous souhaitez appliquer. Pour changer la couleur du texte de tous les paragraphes, vous pouvez écrire
p {color:value}. - Valeur: La valeur de la propriété. Pour mettre tout le texte du paragraphe en rouge, vous pouvez écrire
p {color:red}.
Déclarations CSS peut avoir plus d'une propriété: la paire de valeur en les séparant par un point-virgule ; .
La propriété multiple: paires de valeurs
Propriétés voulez vous pour lui fournir au moins une valeur mai, mais parfois en accepter davantage. Plusieurs valeurs peuvent être séparés par des espaces qui signifie que toutes les valeurs sont utilisées pour la propriété. Ou ils peuvent être séparés par des virgules qui signifie qu'une série de valeurs est proposée et celle applicable premier est utilisé.
Space-separated values
Ci-dessus énoncé CSS utilise tous les 3 valeurs de rendre les paragraphes avec une bordure de 5 pixels de large rouge.
Comma-separated values
Ci-dessus énoncé CSS propose 3 polices à utiliser pour les paragraphes, de gauche à droite. En cas Verdana n'est pas disponible sur le système de l'utilisateur, il essaiera d'utiliser Arial et si cela échoue encore, il aura recours à un générique sans-serif.
Plusieurs sélecteurs
Au lieu d'écrire la même règle CSS pour chaque balise HTML, vous Whish de l'appliquer, vous pouvez regrouper et de sélecteurs de les séparer par des virgules. Cela rend le code CSS extrêmement compact et efficace.
Même style pour chaque sélecteur (mauvais)
h2 {color:black}
h3 {color:black}
h4 {color:black}
h5 {color:black}
h6 {color:black}
Sélecteurs groupés (bien)
Contextuelles sélecteurs
Si vous demandez simplement à un sélecteur de styles de paragraphe, tous les points seront affectés. Que faire si vous souhaitez changer seulement les paragraphes à l'intérieur des éléments de liste? Dans ce cas, vous devez les sélecteurs contextuels qui ne s'appliquent qu'à une règle CSS si une balise se produit dans un certain contexte. Un sélecteur contextuel est créé par l'énumération des balises dans l'ordre imbriquées dans lequel ils doivent apparaître dans votre document.
Contextuelles sélecteurs
h1 em {background:gray}
En exemple ci-dessus uniquement des éléments du paragraphe <p> à l'intérieur des éléments de liste <li> Récupérer du texte rouge et souligné que le texte <em> dans <h1> rubriques obtient un fond gris.
Commentaires
Parfois, il peut être utile de mettre des commentaires CSS côté de quelques déclarations pour expliquer ce qu'ils font. Ces commentaires sont ignorés par les navigateurs Web, mais encore ajouter jusqu'à la taille du fichier final (à la différence des langages de programmation tels que PHP, où les commentaires ne font pas partie de la production finale).
CSS commentaire
p {font-weight:bold} /* this makes all paragraphs bold */
Compatibilité des navigateurs
Tous les navigateurs web majeurs actuels de ces deux types de sélecteurs pour que vous puissiez les utiliser en toute sécurité. Il ya quelques sélecteurs CSS plus avancé qui ne sont pas toutes supportées par les navigateurs tels que Internet Explorer (voir une signature?). Ils seront couverts dans le code CSS didacticiel avancé.