”,„ ”,„

”,„
”,„
• ". Wszystkie nagłówki są przykładami elementu blokowego. Zajmują jak najwięcej przestrzeni i domyślnie zajmują przestrzeń. Kiedy używamy znacznika akapitu za każdym razem, gdy istnieje

  tag, rozpoczyna nową linię do tego akapitu. To samo dotyczy wszystkich elementów blokowych.

  W tym przewodniku użyjemy wszystkich tych elementów blokowych w naszych kodach i szczegółowo je wyjaśnimy. W tym przewodniku zadamy również kilka przykładów.

  Przykład 1

  Aby użyć tych elementów blokowych w naszym kodzie HTML, musimy utworzyć plik HTML. W tym celu musimy otworzyć kod Visual Studio, otworzyć nowy plik, wybrać język jako HTML i rozpocząć kodowanie w tym pliku. W tym przewodniku przedstawimy demo tych przykładów za pomocą oprogramowania Visual Studio Code. Więc piszemy kod HTML i zapisujemy go. Rozszerzenie pliku do użycia jest „.html ”.

  W tym przykładzie używamy dwóch elementów blokowych „

  " I "". Tworzymy dwa akapity i dwa elementy „Div” w pliku HTML. Ustawiamy nazwy akapitów jako „Element1” i „Element2”. Ustawiamy również nazwy klasy „Div” na „D1” i „D2”. Użyjemy tych nazw w kodzie CSS. Pierwszy "

  „Zajmuje pełną linię poziomą, a następny„ ”zaczyna się od nowej linii. Stosujemy pewne styl do tych elementów blokowych za pomocą właściwości CSS.

  Kod CSS:

  Poniższy kod to kod CSS, którego używamy do stylu poprzednich elementów blokowych. Używamy tutaj różnych właściwości stylizacji.

  Używamy nazwy pierwszego akapitu, który jest „element1” i piszemy jako „P.Element1 ”. Następnie stosujemy właściwości stylistyczne do tego akapitu. Gdy używamy „granicy” do zastosowania granicy wokół akapitu, zobaczysz, że granica ta jest renderowana na pełnej linii. Tutaj „3px” określa szerokość granicy, „stałe” określa rodzaj granicy, a „pomarańczowy” ma ustawić kolor graniczny akapitu. „Rodzina czcionki” akapitu jest ustawiona na „Algierskie”. A styl tej czcionki jest „kursywa”. Rozmiar czcionki jest ustawiony na „25px”.

  Używamy tych samych właściwości i tych samych wartości dla drugiego akapitu. Stosujemy te właściwości w „Div”. Najpierw ustawiamy nazwę Div na „Div.D1 ”, a następnie zastosuj właściwości tutaj. Tworzymy również granicę wokół klas DIV. W przypadku DIV mamy „kropkowaną” granicę „4px” w kolorze „czerwonym”. „Rodzina czcionki” tego „Div” to „Times New Roman”. Dostosowujemy również tekst „div” w „centrum”. Ustawiliśmy jego „rozmiar czcionki” na „30px”. Wszystkie te właściwości, które użyliśmy w „D1”, są również używane w „D2”. Tak więc styl obu klas DIV jest taki sam.

  Wyjście:

  Oba akapity w tym wyjściu wydają się takie same. Możesz zauważyć, że granica zajmuje pełną linię, a następny akapit i div zaczynają się od nowej linii. Oba elementy div są w tym samym stylu i pojawiają się w osobnej linii. Granica obu Div zajmuje również pełną przestrzeń poziomą. Tak więc oba akapity są elementami blokowymi.

  Przykład nr 2

  W przykładzie 2 znów mamy dwa akapity i dwa elementy div. Ale tutaj nazwy akapitów to „E1” i „E2”. A imiona elementów DIV to „div1” i „div2”.

  Kod CSS:

  Tło akapitu to „pomarańczowy”. „Rodzina czcionki”, której tu używamy, to „Cambria” o wielkości „30px”. Kolor jego tekstu jest „zielony”. Używamy właściwości i wartości tych właściwości do ust. 2. Po tym stylizujemy „div”. Dla Div używamy „fantasy” rodziny czcionki, a „kolor tła” Div jest ustawiony na „różowy”. Rozmiar tekstu jest ustawiony jako „Rozmiar czcionki: 32px”. Jego kolor jest ustawiony na „niebieski”. W przypadku drugiego div używane są wartości właściwości, które ustawiamy dla div 1.

  Wyjście:

  Tutaj kolory tła akapitów i elementów Div pokazują, że są to elementy blokowe. Kolor tła jest stosowany do pełnej linii poziomej i do przestrzeni pionowej.

  Przykład nr 3

  Używamy tutaj elementów blokowych. Tworzymy dwa różne nagłówki o nazwie „

  " I "

  ”Oraz dwa różne akapity o nazwie„ A1 ”i„ A2 ”. Po tym mamy klasę „”. W tej klasie „” używamy „

  " I "
  • „Aby utworzyć listę. Wszystkie te elementy są elementami blokowymi.

    Kod CSS:

    Ustawiliśmy granicę „div” na „2px”, który opisuje jej szerokość. Rodzaj granicy jest ustawiony na „solidny”. A kolor graniczny jest ustawiony na „fioletowy”. „H1” jest wyrównany w „centrum”. „Rodzina czcionki”, której używamy do nagłówków, to „Algierski”. „Kolor” opisuje kolor czcionki, który jest ustawiony na „niebieski”. Do drugiego nagłówka używamy „orchidei” jako koloru tekstu. Następnie mamy „Li”, który reprezentuje listę elementów. „Rodzina czcionki” tej listy jest „Arial” i ustawiona na rozmiar „18px”. Kolor tekstu listy jest ustawiony na „zielony”. Następnie stosujemy styl do akapitów, w których używamy „Times New Roman” jako „rodziny czcionki”. „19px” to „wielkości czcionki”, a „kolor” tekstu jest ustawiony na „pomarańczowy-czerwony”. Wszystkie te same właściwości są stosowane do drugiego akapitu.

    Wyjście:

    Przykład nr 4

    Tutaj mamy „” „List1”. Wewnątrz tego „” tworzymy „

    ”,„

    ", I "

  • ”, A następnie zamknij ten pierwszy„ ”. Po tym tworzymy kolejny „”, kolejny „

    ", i kolejny "

    ”Z nazwą„ P2 ”i„

  • ". Znowu, w drugim „”. Wszystkie te elementy, których tu używamy, są elementami blokowymi.

    Kod CSS:

    „Kolor tła” Div jest ustawiony na „światło zielone”. Granica jest ustawiona na „zielony” i „solidny” o szerokości „4px”. „H3” jest ustawione jako „kursywa”. W tym nagłówku ustawiamy „radość czcionki” na „Times New Roman”. „Kolor” „H3” jest „niebieski”. Teraz musimy zastosować styl na „Li” używany na liście. „Rodzina czcionki” z listy to „Sans-Serif”, ma rozmiar „20px” i w kolorze „bordowym”. Używamy tego samego „stylu czcionki” dla obu nagłówków, które są „algierskie” i wyrównujemy oba nagłówki do „środka”. „Kolor tła” drugiego „div” jest „różny światło”. Zewnętrzna granica to „magenta” i ma szerokość „4px”.

    Wyjście:

    Tutaj widać, że kolor tła, którego użyliśmy do DIV, jest również stosowany do akapitu, nagłówka i listy, ponieważ napisaliśmy wszystkie te elementy w „Div”. Kolor tła i granica są stosowane do wszystkich elementów. Możesz także zauważyć, że każdy akapit, nagłówek i lista elementów pojawiają się w nowej linii, podczas gdy każdy element zajmuje pełną przestrzeń poziomą i pionową. Tak więc wszystkie są elementy blokowe.

    Wniosek

    W tym przewodniku omówiliśmy koncepcję elementu bloków. Dowiedzieliśmy się, że elementy blokowe zawsze używają pełnej przestrzeni poziomej i pionowej, a następny element blokowy zawsze zaczyna się od nowej linii. Dowiedzieliśmy się również, że domyślnie zajmują przestrzeń. Zbadaliśmy cztery kody w tym przewodniku, w których użyliśmy właściwości HTML i CSS.W tym przewodniku szczegółowo omówiliśmy te kody. Pokazaliśmy również dane wyjściowe i szczegółowo wyjaśniliśmy elementy blokowe. Wspomnialiśmy o elementach blokowych i użyliśmy tych elementów blokowych w naszych kodach.