In vielen Tags sind Attribute, die Tag-Eigenschaften beschreiben. Zwei gemeinsame Attribute sind die Tag-ID (id) und CSS-Klassifizierung (Klasse). Allerdings CSS3 ermöglicht es, Objekte gewünscht durch ein beliebiges Attribut auszuwählen. Die folgende Liste informiert Sie über Attributselektoren, die Sie häufig verwenden, wenn Sie Formatvorlagen erstellen.

• .Klassenname: Wählt alle Objekte, die eine Klasse Attributwert mit dem angegebenen Namen haben. Zum Beispiel würde wählen .StdPara jedes Objekt, das eine class = "StdPara" Attribut ohne Rücksicht auf Objekttyp hat.

• #Ich würde: Wählt alle Objekte, die ein id-Attribut-Wert mit dem angegebenen Namen haben. Zum Beispiel würde wählen #ThirdHeader jedes Objekt, das eine id = "ThirdHeader" Attribut ohne Rücksicht auf Objekttyp hat.

• : Lang (language Identifier): Wählt ein beliebiges Objekt mit der angegebenen Sprache Wert. Zum Beispiel: lang (en) würde wählen Sie ein Objekt, das Englisch als Sprache verwendet. Sie können eine Liste von gemeinsamen Sprachkennungen finden Sie unter w3schools.com.

• [Attribut]: Wählt alle Objekte, die ein bestimmtes Attribut unabhängig von der Attributwert verwenden. Zum Beispiel: [lang] würden alle Objekte auswählen, die das Attribut lang verwenden.

• [Attribut=Wert]: Wählt alle Objekte, die ein Attribut mit einem bestimmten Wert haben. Der Wert muss genau übereinstimmen. Zum Beispiel: [lang = "en-us"] jedes Objekt auswählen würde, die eine Sprache Attribut mit einem Wert von Englisch hat.

• [Attribut~ =Wert]: Wählt alle Objekte, die ein Attribut haben, die einen bestimmten Wert enthält. Der Wert suchen muss nur innerhalb des Wertes als Ganzes erscheinen irgendwo. Zum Beispiel [title ~ = "Secondary"] wählt alle Objekte mit dem Titel Attribute, die das Wort Sekundär als diskrete Wort enthalten. Dieser Selektor arbeitet mit ganzen Wörtern.

  Es ist möglich, weiter viele dieser Attributselektoren einschränken, indem sie mit Tag-Selektoren kombinieren. Zum Beispiel p [title ~ = "Secondary"] wählt nur die

  Tag-Objekte mit dem Titel Attribute, die das Wort Sekundär als diskrete Wort enthalten. Es ist oft möglich, Selektoren auf einzigartige Weise zu kombinieren, genau den gewünschten Effekt zu erzeugen.

• [Attribut| =Wert]: Wählt alle Objekte, die ein Attribut haben, die mit einem bestimmten Wert beginnt. Der Suchwert muss am Anfang des Wertes als Ganzes zu erscheinen, muss aber nicht der gesamte Wert sein. Zum Beispiel [title | = "Sub"] wählt alle Objekte mit dem Titel Attribute, die mit dem Wort Sub starten. Dieser Selektor arbeitet mit Bindestrichen Bedingungen.

• [Attribut^ =Wert]: Wählt alle Objekte, die ein Attribut haben, die mit einem bestimmten Wert beginnt. Zum Beispiel [title | = "Sub"] wählt alle Objekte mit dem Titel Attribute, die mit dem Wort Sub starten. Diese Form des Selektors unterscheidet sich von dem [Attribut | = Value] -Attribut, dass es weniger restriktiv ist. Mit diesem Formular wird title = "subheader", title = "Sub Header" oder title = "Sub-Header" mit der gleichen Zuverlässigkeit aus.

• [Attribut$ =Wert]: Wählt alle Objekte, die ein Attribut haben, die mit einem bestimmten Wert endet. Zum Beispiel [title $ = "Secondary"] wählt alle Objekte mit dem Titel das Ende mit dem Wort Sekundärattribute. Diese Form des Attributs ist nicht einschränkende - es erfordert keine spezielle Formatierung.

• [Attribut* =Wert]: Wählt alle Objekte, die ein Attribut haben, die einen bestimmten Wert enthält. Zum Beispiel [title $ = "Secondary"] wählt alle Objekte mit dem Titel Attribute, die das Wort Sekundär enthalten. Diese Form des Wählers ist weniger restriktiv als die [Attribut ~ = Wert] Attribut. Mit diesem Formular wird title = "SecondaryParagraph", title = "Secondary Absatz" oder title = "Secondary-Paragraph" mit der gleichen Zuverlässigkeit aus.

Nun, da Sie eine Vorstellung davon haben, wie Attributselektoren arbeiten, ist es Zeit, um zu sehen, sie in Aktion. Das folgende Verfahren hilft Ihnen zu verstehen, was Attributselektoren tun und wie Sie sie verwenden können bestimmte Objekte innerhalb eines Dokuments für die Formatierung wählen.

1. erstellen Sie ExternalCSS.HTML und ExternalCSS.CSS Dateien und kopieren Sie sie in einen neuen Ordner.

2. Öffnen Sie ExternalCSS.HTML.

3. Geben Sie den folgenden Code nach dem bestehenden

   in der Datei markieren und die Änderungen auf der Festplatte speichern.

   Eine weitere Überschrift
   Mehr Text
   Eine weitere Überschrift Noch
   Noch mehr Text
   Noch mehr Text

   Dieser Code fügt einfach Tags in spezifischen Regelungen, so dass Sie die verschiedenen Selektoren testen können. Wenn Sie die resultierende Datei jetzt öffnen, sehen Sie, dass jeder von der

   und

   Tags wurde wie das Original automatisch formatiert

   und

   Tags- das Ergebnis dieser ähnlich ist:

   

4. Öffnen Sie ExternalCSS.CSS.

5. Geben Sie den folgenden Code nach den bestehenden Designs und die Änderungen auf der Festplatte speichern.

   .Subhead {border: double-border-width: thick-border-color: Green-}

6. Laden Sie die Testseite.

   Sie sehen den Effekt des Stils Änderung. Jedes Objekt, das einen Klassenwert von Subhead hat jetzt eine dicke Doppel-Grenze grün gefärbt.

   

   Es gibt viele Möglichkeiten, um die Farben, die Sie verwenden möchten, zu definieren. Viele Entwickler verwenden die Hexadezimal-Format bisher gezeigt, weil es präzise und flexibel. Allerdings # 008000 ist ein wenig schwer zu lesen. Mit den Farbnamen, Grün, ist viel einfacher. Natürlich bedeutet dies, Sie den Namen der Farbe wissen müssen. Glücklicherweise können Sie eine Liste von Namen finden, die Browser verstehen zu w3schools.com.

7. Geben Sie den folgenden Code nach den bestehenden Designs und die Änderungen auf der Festplatte speichern.

   #ThirdHeader {Text-decoration: line-Durch}

8. Laden Sie die Testseite.

   Sie sehen den Effekt des Stils Änderung. Jedes Objekt, das einen ID-Wert von ThirdHeader hat nun einen text-decoration Wert von line-through, anstatt unterstrichen. Beachten Sie, dass der neue Wert den alten Wert überschreibt. Wenn Sie den ursprünglichen Wert zu erhalten möchten, müssen Sie es wieder an.

   

9. Geben Sie den folgenden Code nach den bestehenden Designs und die Änderungen auf der Festplatte speichern.

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

10. Laden Sie die Testseite.

    Sie sehen den Effekt des Stils Änderung. Jedes Objekt, das das Wort Sub irgendwo in seinem Titel-Attribut wird geändert. Beachten Sie, dass diese besondere Änderung sowohl beeinflusst

    und

    Tags. Dieses Beispiel zeigt auch einen anderen Weg Farbauswahl zu definieren. Jede Farbe: rot, grün, blau (RGB) wird durch einen Wert zwischen 0 und 255 dargestellt.

    Sie können mehr über die rgb () Ansatz zu lesen Schaffung Farben an w3schools.com.