Wartość domyślna

W dziale przeznaczonym na szczegółowy opis właściwości CSS możemy dostrzec informacje na temat wartości domyślnej danej właściwości CSS.

W świecie realnym elementy, które nas otaczają mają swoje pewne cechy domyślne, np. słońce jest koloru żółtego, dojrzałe truskawki koloru czerwonego itp. Niektóre elementy z reguły posiadają te same cechy domyślne, jednak nie zawsze tak jest, np. kartki zeszytu są w większości przypadków koloru białego, lecz czasami możemy natrafić na zeszyt z kolorowymi kartkami.

W świecie wirtualnym elementy HTML również posiadają w sobie pewne cechy domyślne. Istnieją elementy HTML różniące się od pozostałych elementów swoimi cechami domyślnymi.


Przykładowo, wartością domyślną właściwości text-align jest wartość left. Oznacza to, że prawie każdy element HTML posiada "na starcie" tą właściwość i wartość, a więc nie musimy dodawać jej do danego elementu HTML, jeżeli chcemy, aby tekst, który zostanie umieszczony we wspomnianym elemencie HTML, został wyrównany do lewego marginesu elementu HTML, ponieważ tekst umieszczony w większości elementów HTML, domyślnie jest wyrównywany do ich lewej strony, czyli domyślnie, elementy HTML z reguły zawierają w sobie właściwość text-align wraz z wartością left.

A więc po co nam wartość left, skoro jest ona prawie w każdym elemencie HTML, do którego możemy wpisać tekst?

Odpowiedź znajduje się w przykładzie, który zostanie zaprezentowany i omówiony poniżej.

Dla danej grupy elementów p określmy regułę CSS, która zmieni kierunek wyrównania tekstu w tych elementach.

p {
  text-align:right;
  background-color:lightblue;
}

Od tej pory tekst we wszystkich elementach p będzie wyrównywany do prawej strony.

tekst w tym elemencie - p - jest wyrównywany do prawej strony

tekst w tym elemencie - p - jest wyrównywany do prawej strony

tekst w tym elemencie - p - jest wyrównywany do prawej strony

Aby z powrotem wyrównać tekst do lewej strony, w którymś elemencie p przedstawionym powyżej, należy dodać do takiego elementu HTML właściwość text-align wraz z wartością left. Możemy uczynić to, na przykład za pomocą atrybutu style, który dodajemy wraz z właściwością text-align oraz wartością left do wspomnianego elementu p.

Wspomniana czynność została wykonana w kodzie HTML, który został umieszczony poniżej:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      p {
        text-align:right;
        background-color:lightblue;
      }
    </style>
  </head>

  <body>

    <p>tekst w tym elemencie - p - jest wyrównywany do prawej strony</p>
  
    <p style="text-align:left;">
      tekst w tym elemencie - p - jest wyrównywany do lewej strony
    </p>
  
    <p>tekst w tym elemencie - p - jest wyrównywany do prawej strony</p>

  </body>
</html>

A tak teraz będą prezentować się nasze elementy p, wyświetlone w oknie przeglądarki internetowej:

tekst w tym elemencie - p - jest wyrównywany do prawej strony

tekst w tym elemencie - p - jest wyrównywany do lewej strony

tekst w tym elemencie - p - jest wyrównywany do prawej strony

Dodatkowo analizując to co wydarzyło się z elementami po wyświetleniu ich w oknie przeglądarki internetowej, możemy dostrzec, że właściwości CSS, które są umieszczone w atrybucie style mają "pierwszeństwo" przed regułami CSS, które znajdują się w części head dokumentu HTML, dlatego tekst w drugim elemencie p jest wyrównany do lewej strony, a nie do prawej. Czasami możemy uznać to za zaletę atrybutu style.

Ponadto należy pamiętać, że niektóre elementy HTML posiadają nieco inne wartości domyślne od pozostałych elementów HTML.

Przykładowo, wartością domyślną właściwości font-weight jest wartość normal, czyli w większości elementów HTML czcionka tekstu nie jest pogrubiona, lecz ta reguła nie tyczy się elementu b, ponieważ zadaniem elementu b jest pogrubianie czcionki tekstu, który zostanie umieszczony we wspomnianym elemencie b, a więc wartością domyślną właściwości font-weight dla elementu b nie jest wartość normal. Dlatego warto zwrócić uwagę jaki element HTML chcemy użyć w naszym kodzie, jakie jest jego przeznaczenie oraz jaki jest jego domyślny wygląd po wyświetleniu w oknie przeglądarki internetowej.

W następnej części kursu CSS zapoznamy się z ważnymi zagadnieniami, które będą dotyczyły dziedziczenia właściwości CSS przez kolejne elementy w kodzie dokumentu HTML.