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

[caption id="attachment_5915" align="aligncenter" width="536"]box-model w3schools.com[/caption]
  • 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

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/9tfenrjk/4/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Obramowanie elementu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/9tfenrjk/5/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Zaokrąglenie narożników

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/9tfenrjk/6/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Kontur elementu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/9tfenrjk/8/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Dopełnienie

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/9tfenrjk/9/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Margines

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/9tfenrjk/10/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Cień elementu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/9tfenrjk/11/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

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

Pozycja elementu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/9tfenrjk/12/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Tło elementu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/9tfenrjk/14/" style="width:100%;height:400px;border:solid #4173A0 1px;"]