ATRYBUT CLASS

W naszej książce napisaliśmy o tym, że za pomocą atrybutu class można wybrać fragmenty strony o określonym znaczeniu. Nanonauci chcieli na przykład móc zmienić styl swoich „Wskazówek” tak, by się wyróżniały, bez potrzeby zmiany tego stylu dla każdej wskazówki z osobna. Aby to zrobić, utworzyli klasę o nazwie top-tip, którą mogą przypisywać do dowolnego elementu akapitu, czyli elementu <p>. 


p.top-tip {
  border:4px solid #00AFEB;
  border-radius:10px;
  padding:16px;
  background-color:#C5EBFB;
}
  p.top-tip::before {
  color:black;
  content:"WSKAZÓWKA: ";
  font-weight:bold;
}

Następnie dodali ten styl do elementu <p> w kodzie HTML.

<p class="top-tip">Wszystko, co znajduje się w tym elemencie, otrzymało klasę o nazwie top-tip.</p>

Przyjrzyjmy się działaniu tego kodu.

W pierwszej regule powyżej zadeklarowaliśmy:

  • jednolite niebieskie obramowanie o grubości 4 pikseli wokół akapitu;
  • zaokrąglone rogi obramowania;
  • pewien odstęp między tekstem a obramowaniem;
  • jaśniejsze, niebieskie tło wewnątrz obramowania.

Druga reguła zawiera coś, z czym wcześniej się nie zetknęliśmy — pseudoelement ::before. Pseudoelementy można poznać po poprzedzających je dwóch dwukropkach.

Pseudoelement informuje przeglądarkę, by wstawiła zawartość reguły przed treścią elementu <p>. Ta zawartość to tekst „WSKAZÓWKA”, wypisany czarnymi, pogrubionymi literami. To oznacza, że nie musimy wpisywać „WSKAZÓWKA” w kodzie HTML — ten napis zostanie dodany automatycznie przez klasę top-tip.

Są inne pseudoelementy, których można użyć w podobny sposób:

  • ::first-line stosuje regułę tylko dla pierwszego wiersza tekstu elementu <p>;
  • ::first-letter stosuje regułę tylko dla pierwszej litery elementu <p>;
  • ::after wstawia treść reguły po treści elementu <p>;
  • ::selection stosuje regułę względem tekstu zaznaczonego przez użytkownika.

A gdybyśmy chcieli dodać do elementu więcej niż jedną klasę? To proste — można ich dodać, ile dusza zapragnie. Powiedzmy, że mamy zdefiniowane dwie klasy:

  • duzyNapis jest powiązany z regułą CSS powiększającą rozmiar znaków.
  • wielkieLitery jest powiązany z regułą, która powoduje zmianę wszystkich liter na duże.

Obie te klasy możesz dodać do elementu <p>, umieszczając je w atrybucie class. Wystarczy rozdzielić je spacją:

<p class="duzyNapis wielkieLitery">Ten napis będzie większy i wyświetlony dużymi literami.</p>