70-480 – Określanie właściwości elementu HTML
„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"]
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.