Teoria
Teoria

Selektory CSS

Gratulacje! Właśnie podłączyłeś zewnętrzne style CSS do swojej strony HTML.

Po określeniu stylów znacznika za pomocą atrybutu style, przeglądarka natychmiast wie, do którego znacznika zastosować te style. Ale gdy style są dołączane za pomocą pliku zewnętrznego lub znacznika <style>, przeglądarka wyszukuje stylizowane znaczniki za pomocą "selektorów".

Jesteś już trochę zaznajomiony z selektorami: w poprzednim zadaniu używałeś selektora p, który znajdował się przed nawiasami klamrowymi w kodzie CSS. Składnia reguł CSS wygląda następująco:

selektor {
  właściwość1: wartość1;
  właściwość2: wartość2;
  …
}

Język selektorów jest bardzo potężny i elastyczny. Najprostszymi selektorami są selektory według nazwy znacznika: p, h1 itd. Przeglądarka stosuje style z reguły z tym selektorem do wszystkich pasujących znaczników. Na przykład do wszystkich akapitów lub do wszystkich nagłówków pierwszego poziomu.

W naszym widoku selektor p podświetlił wszystkie akapityna zielono. Jak zmienić ich kolor? Możesz dodać inne znaczniki wewnątrz akapitów. Następnie możesz użyć selektorów dla różnych znaczników w CSS i nadać im różne kolory.

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <title>Selektory CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Zarys kursu</h1> Sparowane znaczniki. Pojedyncze znaczniki. Atrybuty znaczników. Wbudowane style. Style zewnętrzne. Stylizacja według klasy. </body> </html>

CSS

body { font-family: "Tahoma", serif; } /* Mała pomoc. Jesteś zdany na siebie. h1 { color: #999999; } */

ObiettiviFatto

Zapoznaj się z najprostszymi selektorami:

Dla h1 ustaw color: #999999;.
Dla strong, ustaw color: green;.
Dla em, ustaw color: red;.