Dans de nombreux tags sont des attributs qui décrivent les propriétés des variables. Deux attributs communs sont l'identifiant de tag (id) et la classification des CSS (de classe). Cependant, CSS 3 permet de sélectionner des objets par tout attribut souhaité. La liste suivante vous indique sur les sélecteurs d'attributs que vous utilisez couramment lors de la création de styles.

• .Nom de la classe: Sélectionne tous les objets qui ont une valeur d'attribut de classe avec le nom donné. Par exemple, .StdPara serait sélectionner chaque objet qui a une class = attribut "StdPara" sans égard pour le type d'objet.

• #Id: Sélectionne tous les objets qui ont une valeur d'attribut id avec le nom donné. Par exemple, #ThirdHeader serait sélectionner chaque objet qui a une id = "ThirdHeader" attribut sans égard pour le type d'objet.

• : lang (Langue Identificateur): Sélectionne un objet avec la valeur de langue spécifié. Par exemple,: lang (en) serait de sélectionner un objet qui utilise l'anglais comme langue. Vous pouvez trouver une liste des identificateurs de langue ordinaires au w3schools.com.

• [Attribut]: Sélectionne tous les objets qui utilisent un attribut particulier, indépendamment de la valeur de l'attribut. Par exemple, [lang] serait sélectionner tous les objets qui utilisent l'attribut lang.

• [Attribut=Valeur]: Sélectionne tous les objets qui ont un attribut avec une valeur particulière. La valeur doit correspondre précisément. Par exemple, [lang = "fr-fr"] serions sélectionner chaque objet possède un attribut de langue avec une valeur de l'anglais.

• [Attribut~ =Valeur]: Sélectionne tous les objets qui ont un attribut qui contient une valeur particulière. La valeur de recherche ne doit figurer quelque part dans la valeur dans son ensemble. Par exemple, [title = ~ "secondaire"] sélectionne tous les objets avec des attributs de titre qui contiennent le mot secondaire comme un mot discret. Ce sélecteur fonctionne avec des mots entiers.

  Il est possible de limiter davantage la plupart de ces sélecteurs d'attributs en les combinant avec des sélecteurs d'étiquette. Par exemple, p [title = ~ "secondaire"] sélectionne uniquement les

  tag des objets avec des attributs de titre qui contiennent le mot secondaire comme un mot discret. Il est souvent possible de combiner les sélecteurs de façon unique de créer précisément l'effet que vous voulez.

• [Attribut| =Valeur]: Sélectionne tous les objets qui ont un attribut qui commence avec une valeur particulière. La valeur de recherche doit apparaître au début de la valeur dans son ensemble, mais ne doit pas être la valeur entière. Par exemple, [titre | = "Sub"] sélectionne tous les objets avec titre attributs qui commencent par le mot Sub. Ce sélecteur fonctionne avec termes composés.

• [Attribut^ =Valeur]: Sélectionne tous les objets qui ont un attribut qui commence avec une valeur particulière. Par exemple, [titre | = "Sub"] sélectionne tous les objets avec titre attributs qui commencent par le mot Sub. Cette forme de la sélection diffère de la [Attribut | = Valeur] attribut en ce qu'il est moins restrictive. Utilisation de ce formulaire sélectionnez title = "Sous-en", title = "Sous-tête", ou title = "Sous-tête" avec la même fiabilité.

• [Attribut$ =Valeur]: Sélectionne tous les objets qui ont un attribut qui se termine avec une valeur particulière. Par exemple, [titre $ = "secondaire"] sélectionne tous les objets avec des attributs de titre cette fin avec le mot secondaire. Cette forme de l'attribut est non limitative - il ne requiert aucun formatage spécial.

• [Attribut* =Valeur]: Sélectionne tous les objets qui ont un attribut qui contient une valeur particulière. Par exemple, [titre $ = "secondaire"] sélectionne tous les objets avec des attributs de titre qui contiennent le mot secondaire. Cette forme de la sélection est moins restrictive que la [Attribut ~ = Valeur] attribut. Utilisation de ce formulaire sélectionnez title = "SecondaryParagraph", title = "Paragraphe secondaire", ou title = "secondaire-paragraphe" avec la même fiabilité.

Maintenant que vous avez une idée de la façon dont fonctionnent les sélecteurs d'attributs, il est temps de les voir en action. La procédure suivante vous aide à comprendre ce que les sélecteurs d'attribut font et comment vous pouvez les utiliser pour choisir des objets spécifiques dans un document pour le formatage.

1. Créez le ExternalCSS.HTML fichiers et ExternalCSS.CSS et les copier dans un nouveau dossier.

2. Ouvrir ExternalCSS.HTML.

3. Tapez le code suivant après l'existant

   tag dans le fichier et enregistrer les modifications sur le disque.

   Une autre rubrique
   Plus texte
   Encore une autre rubrique
   Encore plus Texte
   Encore plus de texte

   Ce code ajoute simplement des tags dans des accords spécifiques de sorte que vous pouvez tester les différents sélecteurs. Si vous ouvrez le fichier résultant maintenant, vous voyez que chacun des

   et

   balises a été automatiquement formatée comme l'original

   et

   étiquettes- le résultat est similaire à ceci:

   

4. Ouvrir ExternalCSS.CSS.

5. Tapez le code suivant après les styles existants et enregistrer les modifications sur le disque.

   .Subhead {border: double border-width: couleur épaisse frontière: Groenland}

6. Recharger la page de test.

   Vous voyez l'effet de rendre le changement de style. Chaque objet qui a une valeur de classe de sous-titre a maintenant une épaisse bordure double de couleur verte.

   

   Il ya beaucoup de façons de définir les couleurs que vous souhaitez utiliser. Beaucoup de développeurs utilisent le format hexadécimal montré jusqu'ici parce qu'il est précis et flexible. Cependant, # 008000 est un peu difficile à lire. Utilisation du nom de la couleur, verte, est beaucoup plus facile. Bien sûr, cela signifie que vous devez connaître le nom de la couleur. Heureusement, vous pouvez trouver une liste de noms que les navigateurs comprennent au w3schools.com.

7. Tapez le code suivant après les styles existants et enregistrer les modifications sur le disque.

   #ThirdHeader {Text-decoration: line-Through-}

8. Recharger la page de test.

   Vous voyez l'effet de rendre le changement de style. Chaque objet qui a une valeur id de ThirdHeader a maintenant une valeur text-decoration de line-through, plutôt que de soulignement. Notez que la nouvelle valeur remplace l'ancienne valeur. Si vous souhaitez conserver la valeur d'origine, vous devez spécifier à nouveau.

   

9. Tapez le code suivant après les styles existants et enregistrer les modifications sur le disque.

   [titre | = "Sub"] {text-align: right; background-color: rgb (128, 255, 128) -}

10. Recharger la page de test.

    Vous voyez l'effet de rendre le changement de style. Chaque objet qui a le mot Sous quelque part dans son attribut de titre est modifié. Notez que ce changement particulier affecte à la fois

    et

    balises. Cet exemple montre également une autre façon de définir des sélections de couleur. Chaque couleur: rouge, vert, bleu (RVB) est représenté par une valeur comprise entre 0 et 255.

    Vous pouvez en savoir plus sur l'approche rgb () pour créer des couleurs à w3schools.com.