Selektory CSS

Karta pracy 2016/2017

Adres:
http://plotkarka.eu/KP/css3-selectors.html
Autor:
Radosław Kowaluk

Selektory podstawowe

Czynności wstępne

Utwórz plik css3-selectors.html z podstawową strukturą strony WWW w standardzie HTML5.

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <meta charset="utf-8"/>
 </head>
 <body>

 </body>
</html>

Selektor uniwersalny1

W elemencie head dodaj kod:

  <title>Selektory CSS</title>
  <meta charset="utf-8"/>
  <style>
* {
color: olive;
}
  </style>
 </head>

W elemencie body dodaj kod.

<body>
Domyślny kolor strony
<p>Akapit.</p>
</body>

Zapisz zmiany i odśwież podgląd.

Selektor elementu2

W elemencie style dodaj kod:

  <style>
h1 {
color: red;
}
  </style>

W elemencie body dodaj kod.

<body>
<h1>Nagłówek h1.</h1>
<h1>Nagłówek h1.</h1>
</body>

Zapisz zmiany i odśwież podgląd.

Selektor atrybutu3

W elemencie style dodaj kod:

  <style>
h2[title] {
color: silver;
}
  </style>

W elemencie body dodaj kod.

<body>
<h2 title="test">Nagłówek h2.</h2>
<h2 title="test">Nagłówek h2.</h2>
<h2>Nagłówek h2.</h2>
</body>

Zapisz zmiany i odśwież podgląd.

Selektor klasy4

W elemencie style dodaj kod:

  <style>
.zielona {
color: rgb(0,255,0);
}
  </style>

W elemencie body dodaj kod.

<body>
<h3 class="zielona">Nagłówek h3.</h3>
<h3 class="zielona">Nagłówek h3.</h3>
<h3>Nagłówek h3.</h3>
</body>

Zapisz zmiany i odśwież podgląd.

Selektor identyfikatora5

W elemencie style dodaj kod:

  <style>
#niebieski {
color: rgb(0,0,255);
}
  </style>

W elemencie body dodaj kod.

<body>
<h4 id="niebieski">Nagłówek h4.</h4>
<h4>Nagłówek h4.</h4>
</body>

Zapisz zmiany i odśwież podgląd.

Sprawdzanie poprawność reguł CSS

W przeglądarce internetowej wpisz adres jigsaw.w3.org/css-validator

Wybierz zakładkę poprzez załadowanie pliku

Za pomocą przycisku Przeglądaj... otwórz plik css3-selectors.htm

Naciśnij przycisk Sprawdź

  1. Selektor uniwersalny - * - wybiera wszystkie elementy strony.
  2. Selektor typu - element - wybiera wszystkie elementy danego typu.
  3. Selektor atrybutu - element[atrybut] - wybiera wszystkie elementy posiadające dany atrybut.
  4. Selektor klasy - .klasa - wybiera wszystkie elementy posiadające atrybut class o wartości klasa.
  5. Selektor identyfikatora - #identyfikator - wybiera element posiadający atrybut id o wartości identyfikator.

Grupowanie selektorów

Selektor grupy elementów1

W elemencie style dodaj kod.

h5, h6 {
color: hsl(60,60%,60%);
}

W elemencie body dodaj kod.

<h5>Nagłówek h5.</h5>
<h6>Nagłówek h6.</h6>

Zapisz zmiany i odśwież podgląd.

Selektory pseudoklas

Pseudoklasa linków2, linków odwiedzonych3, elementów wskazanych4 i aktywnych5

W elemencie style dodaj kod.

a:link {
color: coral;
}
a:visited {
color: goldenrod;
}
a:hover {
color: magenta;
}
a:active {
color: maroon;
}

W elemencie body dodaj kod.

<a href="#">Hiperłącze</a>

Zapisz zmiany i odśwież podgląd.

Selektory pseudoelementów

Pierwszy znak6

W elemencie style dodaj kod.

h1::first-letter {
opacity: 0.5;
}

Zapisz zmiany i odśwież podgląd.

Pierwsza linia7

W elemencie style dodaj kod.

p::first-line {
opacity: 0.75;
}

Zapisz zmiany i odśwież podgląd.

W elemencie body dodaj kod (skopiuj tekst).

<p>Lorem ipsum dolor sit amet, consectetur adipisicing
 elit. Proin nibh augue, suscipit a, scelerisque sed,
 lacinia in, mi. Cras vel lorem. Etiam pellentesque
 aliquet tellus.</p>

Zapisz zmiany i odśwież podgląd.

Kombinatory

Selektor potomka8

W elemencie style dodaj kod.

p b {
opacity: 0.25;
}

Zapisz zmiany i odśwież podgląd.

W elemencie body dodaj kod (skopiuj tekst).

<p>Lorem <b>ipsum</b> dolor.</p>

Zapisz zmiany i odśwież podgląd.

Selektor dziecka9

W elemencie style dodaj kod.

p>i {
opacity: 0;
}

Zapisz zmiany i odśwież podgląd.

W elemencie body dodaj kod (skopiuj tekst).

<p>Lorem <b><i>i</i>psum</b> dolor <i>i</i>.</p>

Zapisz zmiany i odśwież podgląd.

Wgrywanie plików na serwer

Umieść plik css3-selectors.html na serwerze po sprawdzeniu poprawności.

Sprawdzenie poprawności

Sprawdź poprawność reguł CSS i kodu HTML za pomocą odpowiednich walidatorów.

Zadanie

Zastosuj poznane wiadomości w pliku index.html .

  1. Selektor grupy selektor1, selektor2, ..., selektorn - wybiera wszystkie elementy wybrane przez selektory od 1 do n odzielone przecinkiem.
  2. Selektor a:link - wybiera wszystkie hiperłącza.
  3. Selektor a:visited - wybiera wszystkie hiperłącza odwiedzone.
  4. Selektor element:hover - wybiera wszystkie elementy wskazane.
  5. Selektor element:active - wybiera wszystkie elementy aktywne.
  6. Selektor element::first-letter - wybiera pierszą literę elementów.
  7. Selektor element::first-line - wybiera pierszą linię elementów.
  8. Selektor potomka element1 element2 - wybiera wszystkie elementy2 zawarte w elemencie1.
  9. Selektor dziecka element1>element2 - wybiera wszystkie elementy2 zawarte bezpośrednio w elemencie1.