Poznajemy właściwości CSS

W poprzednich częściach tego kursu CSS poznaliśmy sposoby, za pomocą których możemy dodać reguły CSS do dokumentu HTML. Poznaliśmy również do czego wykorzystywane są selektory CSS. Przyszedł czas abyśmy bliżej przyjrzeli się właściwościom CSS, bo to właśnie one mają wpływ na wygląd danego elementu HTML.

W realnym świecie, gdy chcielibyśmy zmienić wygląd białej, czystej kartki papieru, to moglibyśmy to uczynić za pomocą różnych czynności. Moglibyśmy zmienić jej kolor, kształt, rozmiar lub moglibyśmy namalować coś na niej.

W świecie wirtualnym za zmianę wyglądu danego elementu HTML odpowiadają właściwości CSS, które dzielą się na różne kategorie.


Właściwości CSS możemy podzielić na kilka grup kategorii. Każda z tych grup jest odpowiedzialna za zmianę konkretnych cech wyglądu elementu HTML, na przykład:

  • Tekst - właściwości odpowiedzialne za formatowanie cech wyglądu tekstu w danym elemencie HTML, np. text-align:center; wyśrodkuje tekst w elemencie.
  • Czcionka - właściwości odpowiedzialne za formatowanie wyglądu czcionki tekstu w danym elemencie HTML, np. font-size:15px; zmieni rozmiar wyświetlanej czcionki tekstu.
  • Rozmiary - właściwości odpowiedzialne za formatowanie szerokości i wysokości w danym elemencie HTML, np. width:200px; sprawi że szerokość elementu HTML będzie wynosić 200 pikseli.
  • Tło - właściwości odpowiedzialne za formatowanie cech wyglądu tła w danym elemencie HTML, np. background-color:lightblue; zmieni kolor tła elementu HTML na jasnoniebieski.
  • Marginesy - właściwości odpowiedzialne za formatowanie wartości marginesów wewnętrznych i zewnętrznych w danym elemencie HTML, np. margin:10px; sprawi że wszystkie marginesy zewnętrzne elementu HTML będą wynosić 10 pikseli.
  • Obramowanie - właściwości odpowiedzialne za formatowanie cech wyglądu obramowania w danym elemencie HTML, np. border-top-style:solid; doda do elementu HTML górne obramowanie, którego stylem będzie styl solid, czyli ciągła pojedyncza linia.

Reszta właściwości została opisana w w części przeznaczonej na szczegółowy opis właściwości CSS.

Przy poznawaniu właściwości CSS pierwszą informacją na jaką powinniśmy zwrócić uwagę jest to, czy dana właściwość jest poprawnie interpretowana przez wszystkie najnowsze wersje najpopularniejszych przeglądarek internetowych, takich jak: Firefox, Opera, Safari, Google Chrome, Internet Explorer.

O ile właściwości należące do specyfikacji CSS1 i CSS2 są w większości poprawnie interpretowane przez wszystkie najnowsze przeglądarki internetowe, tak właściwości CSS należące do specyfikacji CSS3, która jest ciągle rozwijana, już niekoniecznie (przynajmniej na dzień dzisiejszy, w przyszłości to się zmieni).

Co się stanie gdy dana przeglądarka internetowa nie interpretuje właściwości CSS, którą użyliśmy w naszym kodzie, do określenia wyglądu elementu HTML?

Nie powoduje to błędu, właściwości CSS, które są poprawnie interpretowane przez daną przeglądarkę internetową, zostaną przypisane do danego elementu HTML, a właściwości CSS, które nie są interpretowane przez daną przeglądarkę internetową, zostaną pominięte. Dlatego ważne jest to, aby właściwości CSS, które nie są interpretowane przez wszystkie najnowsze wersje najpopularniejszych przeglądarek internetowych, a które chcemy dodać do danego elementu HTML, nie psuły wyglądu strony internetowej, w przypadku gdy zostaną one "niezrozumiane", czyli pominięte przez daną przeglądarkę internetową.

Przykładowo, właściwość background-color:lightblue; doda do elementu jasnoniebieski kolor tła i będzie on poprawnie interpretowany przez wszystkie przeglądarki internetowe.

kolor tła w tym elemencie - div - jest jasnoniebieski

Natomiast właściwość box-shadow:4px 4px 0 black; doda do elementu HTML cień, lecz przeglądarka Internet Explorer w wersji wcześniejszej niż 9 nie interpretuje właściwości box-shadow, a więc zostanie ona pominięta we wspomnianej wersji przeglądarki Internet Explorer, jednak nie popsuje to wyglądu naszego elementu HTML.

ten element - div - posiada swój cień
a tak wygląda ten sam element - div - lecz bez cienia

Przy poznawaniu poszczególnych właściwości CSS należy również zwracać uwagę na inne rzeczy, o których powiemy sobie w dalszych częściach tego kursu CSS, gdy będziemy zapoznawać się z innymi zagadnieniami języka CSS.

W dalszych częściach tego działu przyjrzymy się bliżej niektórym grupom właściwości CSS, natomiast w następnej części kursu CSS poznamy do czego są wykorzystywane przedrostki, które są czasami dołączane do nazwy danej właściwości CSS.