70-480 – Określanie właściwości elementu HTML

70-480

Stosowanie stylów do zmiany atrybutów wyglądu (rozmiar, obramowanie i zaokrąglanie narożników obramowania, kontur, dopełnienie, margines); stosowanie stylów do zmiany efektów graficznych (przezroczystość, krycie, obraz tła, gradienty, cień, przycinanie); stosowanie stylów do określania i zmiany pozycji elementu (statyczna, względna, bezwzględna, ustalona).



Definicja rozdziału ze strony Microsoft (widoczna wyżej) jest dość rozbudowana, a najważniejsze to fakt, że zajmiemy się dzisiaj stylowaniem elementów blokowych. Tym razem również posłużę się przykładami. To (według mnie) najlepszy sposób na szybkie zrozumienie kodu, który odpowiedzialny jest taką, a nie inną prezentację. Zawsze też możemy go łatwo zmienić na swój sposób i eksperymentować.

Model blokowy

box-model

w3schools.com

  • content – najbardziej wewnętrzna warstwa, w której znajduje się tekst oraz obrazki
  • padding – tzw. warstwa dopełnienia, która stanowić może dodatkową przestrzeń dla warstwy kontentu
  • border – obramowanie kontentu oraz części dopełnienia
  • margin – dodatkowa przestrzeń, stanowiąca o wielkości elementu blokowego poza jego treścią i dopełnieniem

Model blokowy przedstawiony powyżej, powinien zostać jeszcze uzupełniony o właściwość outline, która znajduje się zupełnie w zewnętrznej warstwie modelu i okala margines. Zewnętrzne linie przerywane mogą zostać uznane za warstwę outline.

Rozmiar elementu

Obramowanie elementu

Zaokrąglenie narożników

Kontur elementu

Dopełnienie

Margines

Cień elementu

Dodatkowo można tym poeksperymentować na stronie demo od Microsoft.

Pozycja elementu

Tło elementu