SELEKTORY

SELEKTORY
Selektor typu
Odnosi się do wszystkich wystąpień elementu HTML, którym został przypisany.
<p>zawartość</p>
p {deklaracje}
Selektor uniwersalny
Deklaracje selektora uniwersalnego odnoszą się do wszystkich elementów języka HTML.
wszystkie elementy języka HTML
* {deklaracje}
Zastosowanie selektora uniwersalnego
Deklaracje wskazanego selektora uniwersalnego odnoszą się do potomków (elementów) zawartych we wskazanym elemencie języka HTML.
<div>
<h1>zawartość</h1>
<p>zawartość</p>
<div>
div *{deklaracje}
Ćwiczenie 1 - Selektor typu
1. Utwórz dokument html5.
2. Zapisz dokument - „01-selektor-typu.html”
3. W sekcji nagłówka dokumentu napisz arkusz CSS formatujący nagłówek stopnia
pierwszego (h1) oraz akapit (p).
• W sekcji nagłówka dokumentu utwórz nową linijkę kodu.
• Z górnego menu programu Style CSS wybierz polecenie Znacznik <style>.
<style type=”text/css”>
<!--->
</style>
•
W pustej linijce wpisz definicje wyglądu selektora h1 oraz p.
<style type=”text/css”>
<!-h1 {color:red}
p {color:navy}
-->
</style>
4. W sekcji body, napisz kod tworzący: nagłówek stopnia pierwszego, dwa akapity oraz
listę punktowaną złożoną z trzech punktów.
5. Zapisz zmiany wprowadzone do dokumentu.
6. Przetestuj dokument.
Ćwiczenie 2 - Selektor uniwersalny
1. Utwórz dokument html5.
2. Zapisz dokument - „02-selektor-uniwersalny.html”
3. W sekcji nagłówka dokumentu napisz arkusz CSS narzucający niebieski kolor tekstu.
<style type=”text/css”>
<!-*{color:blue;}
-->
</style>
4. W sekcji body, napisz kod tworzący: nagłówek stopnia pierwszego, dwa akapity oraz
listę punktowaną złożoną z trzech punktów.
5. Zapisz zmiany wprowadzone do dokumentu.
6. Przetestuj dokument.
Ćwiczenie 3 - Selektor uniwersalny
1. Utwórz dokument html5.
2. Zapisz dokument - „03-selektor-uniwersalny.html”
3. W sekcji nagłówka dokumentu napisz arkusz CSS formatujący kolor czerwony dla tekstu znaczników zebranych w sekcji <div>.
<style type=”text/css”>
<!-div *{color:red;}
-->
</style>
4. W sekcji body, napisz kod tworzący: nagłówek stopnia pierwszego, dwa akapity oraz
listę punktowaną złożoną z trzech punktów.
5. Zaznacz i skopiuj do schowka systemowego utworzoną przed chwilą zawartość strony.
6. Za zamykającym znacznikiem listy punktowanej utwórz nową linijkę kodu.
7. Wpisz kod tworzący znacznik <div></div>.
8. Pomiędzy znaczniki wklej zawartość schowka systemowego.
9. Zapisz zmiany wprowadzone do dokumentu.
10.Przetestuj dokument.
Identyfikator
Odnosi się do wystąpienia elementu HTML, któremu został przypisany.
<div id=”identyfikator”>
zawartość
</div>
#identyfikator {deklaracje}
Klasa
Deklaracje selektora uniwersalnego odnoszą się do wszystkich elementów języka HTML.
<p class=”klasa-1”>
zawartość
</p>
.klasa-1 {deklaracje}
Grupowanie klas
<p class=”klasa-1 klasa-2”>
zawartość
</p>
.klasa-1 {deklaracje}
.klasa-2 {deklaracje}