-
selektor elementu – element selector
to nic innego jak selektor znacznika HTML, selektorem może być np. <p>, <h1>, <div> i każdy inny znajdujący się w specyfikacji tego języka:
h1 {color: blue;}
p {text-align: left;}
div {background-color: grey;}
-
selektor uniwersalny – universal selector
„*” pozwala ustalić określone cechy dla wszystkich elementów strony niezależnie czy są to <p>, <h1>, <div> czy jakikolwiek inny:
* {
color: blue;
text-align: left;
background-color: black;
}
powyższy zapis oznacza, że wszystkie elementy na stronie mają mieć niebieski tekst wyrównany do lewej oraz czarne tło.
-
selektor grupujący – grouping selector
Selektor grupujący organizuje wszystkie elementy z tym samym stylem np.
h1 {
color: blue;
text-align: left;
background-color: black;
}
p {
color: blue;
text-align: left;
background-color: black;
}
span {
color: blue;
text-align: left;
background-color: black;
}
elementy h1, p i span mają w powyższym przykładzie mają takie same style, możemy więc je „scalić”, oddzielając poszczególne elementy przecinkami:
h1, p, span {
color: blue;
text-align: left;
background-color: black;
}
-
selektor identyfikatora – id selector
Selektor identyfikatora wykorzystuje atrybut id elementu HTML do wyszczególnienia konkretnego elementu.
Id elementu jest unikalny w obrębie strony, więc selektor id jest używany do wybrania jednego unikalnego elementu!
Aby wybrać element o określonym id, należy wpisać znak skrótu (#), a następnie id elementu.
w pliku css dodajemy zapis:
#niebieski {
color: blue;
}
w pliku html dodajemy zapis:
<p id="niebieski">ta treść będzie w kolorze niebieskim</p>
Określony przez id styl tyczy się tylko tego elementu, który ma przypisany id=”nazwa”.
Nazwy id nie mogą zawierać polskich znaków i zaczynać się od cyfr.
-
selektor klasy – class selector
Selektor klasy wykorzystuje atrybut class elementu HTML do wyszczególnienia konkretnego elementu.
Klasa elementu nie jest unikalna w obrębie strony, więc selektor class może być używany wielokrotnie na stronie do różnych elementów!
Aby wybrać element o określonej klasie, należy wpisać znak skrótu (.), a następnie klasę elementu.
w pliku css dodajemy zapis:
.niebieski {
color: blue;
}
w pliku html dodajemy zapis:
<p class="niebieski">ta treść będzie w kolorze niebieskim</p>
<h1 class="niebieski">ten element też będzie miał kolor niebieski</h1>
Określony przez class styl tyczy się tylko każdego elementu, który ma przypisany class=”nazwa”.
Nazwy klas nie mogą zawierać polskich znaków i zaczynać się od cyfr.
Ćwiczenie:
W pliku, który rozbudowujesz na lekcjach, zastosuj poznane selektory:
1) za pomocą selektora uniwersalnego zmień tło i kolor czcionki dla strony
2) używając selektora grupującego, ustaw dla znaczników list i definicji kolor czcionki (inny niż dla całości strony)
3) ustaw id zmieniające tło dla znacznika <main>, który zastosuj poniżej <nav> (znacznik <main> ma obejmować treść na stronie poza <header> i <footer>)
4) zastosuj klasę, która zmieni kolor czcionki w nagłówkach występujących na stronie