Autor publikacji
Virtual Patriot - Administrator

Poznajemy czym są style CSS, czyli reguły CSS

Data publikacji
Ostatnio edytowano

W poprzedniej części kursu CSS poznaliśmy atrybut style, za pomocą którego dodaliśmy właściwości CSS do różnych elementów HTML, dzięki czemu zmieniliśmy domyślny wygląd wspomnianych elementów HTML.

Jednak do zmiany wyglądu elementów HTML, które znajdują się w dokumencie HTML, w dużej mierze wykorzystuje się style CSS, czyli reguły CSS, dzięki którym możemy stworzyć unikalny styl wyglądu dla danego elementu HTML bądź też grupy takich elementów HTML.

Wyobraź sobie, że przed Tobą znajduje się stos białych, czystych kartek, a Twoim zadaniem jest pokolorowanie każdej z nich. Dodatkowo każdą kartkę koloru czerwonego musisz przeciąć na pół. Pierwsza czynność, czyli pokolorowanie kartek, oczywiście nie jest niczym trudnym. Druga czynność, czyli przecięcie na pół kartek koloru czerwonego, wymaga od Ciebie odszukania danej kartki, czyli selekcji spośród danej grupy kartek.

Reguła CSS działa podobnie do czynności, które zostały opisane w poprzednim akapicie, ponieważ reguła CSS określa wygląd elementu HTML, który został przez nią odszukany na podstawie pewnych kryteriów wyboru.

Reguła CSS składa się z:

  • selektora - służy on do wyszukania elementu bądź grupy elementów w danym dokumencie HTML, które mają otrzymać dany styl CSS, czyli dane właściwości CSS, które odpowiadają za zmianę wyglądu odszukanych elementów HTML. Przykładowo, selektor p > span odszuka wszystkie elementy span umieszczone w elemencie p.
  • nawiasu klamrowego { }, który występuje zaraz po selektorze i w którym należy umieścić właściwości CSS jakie mają otrzymać dane elementy HTML, wyselekcjonowane przez dany selektor.
  • właściwości CSS - za pomocą nich możemy określić co chcemy zmienić w wyglądzie danego elementu HTML, umieszczamy je w nawiasie klamrowym. Przykładowo, właściwość background-color określa kolor tła elementu HTML.
  • wartości właściwości CSS - występują po właściwości, są podawane po dwukropku i określają w jaki sposób chcemy zmienić daną właściwość wyglądu elementu HTML. Na końcu wartości należy postawić średnik ; Przykładowo, wartość lightblue określa kolor jasnoniebieski.

Ponadto, jeżeli dany styl CSS ma zawierać więcej niż jeden selektor, to kolejne selektory należy oddzielić od siebie przecinkiem ,

Prosty wzór reguł CSS wygląda następująco: 

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

Bardziej złożony wzór reguł CSS wygląda następująco: 

selektor, selektor {
  właściwość:wartość;
  właściwość:wartość;
  właściwość:wartość;
}

Pod spodem zostały przedstawione przykładowe elementy HTML, umieszczone w części body dokumentu HTML, których wygląd zmienimy za pomocą reguł CSS. 

<body>

  <p>to jest element - p - umieszczony w elemencie - body</p>
  <div>to jest element - div - umieszczony w elemencie - body</div>

</body>

Elementy po wyświetleniu w oknie przeglądarki prezentują się następująco:

to jest element - p - umieszczony w elemencie - body

to jest element - div - umieszczony w elemencie - body

Naszym celem będzie dodanie nowego koloru tła do elementu div, jak również obramowania do elementu p. Aby tego dokonać posługujemy się wcześniej poznanym wzorem reguł CSS, który uzupełniamy odpowiednimi selektorami, właściwościami i wartościami. 

div {
  background-color:lightblue;
}

p {
  border:1px solid black;
}

Pierwsza reguła CSS, którą stworzyliśmy powyżej, odszuka wszystkie elementy div w danym dokumencie HTML i doda do nich właściwość background-color wraz z wartością lightblue, dzięki czemu tło w tych elementach będzie koloru jasnoniebieskiego.

Druga reguła CSS, którą stworzyliśmy powyżej, odszuka wszystkie elementy p w danym dokumencie HTML i doda do nich właściwość border wraz z wartością 1px solid black, dzięki czemu po każdej stronie odszukanego elementu p zostanie utworzone obramowanie o następujących cechach:

  • 1px - oznacza szerokość obramowania, czyli szerokość o wartości 1 piksel
  • solid - oznacza styl obramowania, czyli styl solid
  • black - oznacza kolor obramowania, czyli kolor czarny

Po tym jak dodamy nasze reguły CSS, które stworzyliśmy w tej części kursu CSS, do kodu dokumentu HTML, to nasze przykładowe elementy div oraz p będą prezentować się następująco:

to jest element - p - umieszczony w elemencie - body

to jest element - div - umieszczony w elemencie - body

W tej części kursu CSS nie został omówiony sposób na dodanie reguł CSS do kodu dokumentu HTML, ponieważ tym zagadnieniem zajmiemy się w następnej części tego kursu CSS.