Kaskadowe arkusze stylów, znane powszechnie jako CSS, to język służący do definiowania wyglądu i formatowania dokumentów HTML i XML. Dzięki CSS programiści mają możliwość precyzyjnego sterowania stylem, prezencją wizualną oraz układem poszczególnych składników stron internetowych.
Przykładowo, za pomocą CSS można modyfikować czcionki, palety kolorów, tła, efekty animacji przy najechaniu kursorem, a także tworzyć responsywne strony, które dostosowują się do różnych rozmiarów ekranów i urządzeń. Co więcej, CSS umożliwia projektantom i programistom zachowanie spójności stylistycznej na wszystkich stronach, dopasowując wygląd witryny do identyfikacji wizualnej marki.
W standardowym procesie renderowania dokumentu HTML, poszczególne elementy są wyświetlane w kolejności, w jakiej występują w kodzie źródłowym. To domyślne zachowanie nazywa się normalnym przepływem.
W przypadku gdy układ elementów HTML nie jest modyfikowany, możemy wyróżnić dwie główne kategorie elementów w oparciu o sposób ich prezentacji na stronie.
Są to elementy liniowe (inline) oraz elementy blokowe. Przyjrzyjmy się bliżej obu grupom, aby lepiej zrozumieć, jak elementy HTML są wyświetlane w przeglądarce.
Zanim przejdziemy dalej, stwórz nowy folder, a w nim dwa pliki: „index.html” oraz „app.css”. Nazwy plików są dowolne, ale ważne jest, aby zachować odpowiednie rozszerzenia.
Otwórz plik HTML w wybranym edytorze kodu i wklej poniższy szablon:
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Display Property</title> <link rel="stylesheet" href="https://wilku.top/which-css-display-style-is-best-for-you/app.css"> </head> <body> </body> </html>
Powyższy kod tworzy szkielet dokumentu HTML, od którego możemy rozpocząć budowę stron internetowych. Dodatkowo, plik „index.html” jest połączony z plikiem „app.css”, co umożliwi nam modyfikację i kontrolę nad wyglądem elementów HTML za pomocą CSS.
Cały kod HTML, który będzie prezentowany w dalszej części artykułu, zostanie umieszczony wewnątrz tagów . Nasz plik CSS na początku będzie pusty.
Elementy blokowe
Elementy blokowe zajmują całą dostępną przestrzeń w poziomie, tworząc nową linię przed i po elemencie. Ich wysokość jest dostosowana do zawartości, tworząc w ten sposób odrębne bloki.
Do przykładowych elementów blokowych należą między innymi: <div>, <p> (akapit), <ul> (lista nieuporządkowana), <ol> (lista uporządkowana), <li> (element listy) oraz nagłówki <h1>, <h2>, <h3> i kolejne.
Poniżej znajduje się przykład użycia elementów blokowych:
<body>
<h1>newsblog.pl</h1>
<p>newsblog.pl to publikacja internetowa, która tworzy wysokiej jakości artykuły o
technologii, biznesie i fintechu, pomagając
firmom i ludziom w rozwoju. Niektóre z omawianych tematów to:</p>
<p>Niektóre tematy poruszane na newsblog.pl to:</p>
<ul>
<li>Programowanie</li>
<li>Cyberbezpieczeństwo</li>
<li>Informatyka śledcza</li>
<li>Produktywność</li>
<li>Gry</li>
</ul>
</body>
Po otwarciu tego kodu HTML w przeglądarce, wynik będzie wyglądał następująco:
Zauważ, że element <h1> z nagłówkiem „newsblog.pl” zajmuje całą dostępną szerokość, a kolejny po nim akapit został przeniesiony do następnej linii. W ten sposób zachowują się elementy blokowe.
Elementy liniowe
Elementy liniowe umieszczają się w tej samej linii z innymi elementami i zajmują jedynie niezbędną przestrzeń. Nie rozpoczynają nowej linii i nie wymuszają przeniesienia innych elementów do nowej linii.
Elementy liniowe nie zakłócają przepływu treści. Dopasowują się do istniejącego tekstu, nie tworząc odrębnych bloków. Do przykładowych elementów liniowych należą m.in. <span>, <a> (odsyłacz), <input> oraz <time>.
Spójrzmy na poniższy przykład, który modyfikuje wcześniejszy kod, dodając elementy liniowe:
<body>
<h1>newsblog.pl</h1>
<p>newsblog.pl <span>JESTEM ELEMENTEM SPAN</span> to publikacja internetowa, która tworzy wysokiej jakości artykuły o
technologii, biznesie i fintechu, pomagając
firmom i ludziom w rozwoju. Niektóre <a href="https://wilku.top/which-css-display-style-is-best-for-you/newsblog.pl.com">tematy</a> omawiane to:</p>
<p>Niektóre tematy poruszane na newsblog.pl to:</p>
<ul>
<li>Programowanie</li>
<li>Cyberbezpieczeństwo</li>
<li>Informatyka śledcza</li>
<li>Produktywność</li>
<li>Gry</li>
</ul>
</body>
Po sprawdzeniu nowej strony HTML, wynik będzie następujący:
Zwróć uwagę, jak element <span> dopasowuje się do tej samej linii z pozostałą treścią, nie przerywając przepływu tekstu. Tak właśnie zachowują się elementy liniowe.
Właściwość display
Jak widzieliśmy, elementy HTML domyślnie są elementami blokowymi lub liniowymi, co determinuje sposób ich wyświetlania oraz wpływ, jaki wywierają na przepływ treści w dokumencie HTML.
Jako twórca stron internetowych, możesz chcieć zmienić domyślne zachowanie elementów. Oznacza to, że element, który jest domyślnie elementem blokowym, powinien być traktowany jak element liniowy i odwrotnie. Na przykład, możesz chcieć, aby <h1>, domyślnie element blokowy, zachowywał się jak element liniowy, lub <span>, domyślnie liniowy, jak element blokowy.
Aby zmienić domyślne zachowanie elementów, stosujemy właściwość `display` w CSS. Ta właściwość pozwala określić, czy element ma być traktowany jako blokowy, czy liniowy.
Za pomocą właściwości `display`, możemy zmienić element, który domyślnie jest blokowy na liniowy i na odwrót.
Aby to zobaczyć w praktyce, dodaj poniższy kod do utworzonego pliku CSS i odśwież stronę HTML w przeglądarce:
h1 {
display: inline;
background-color: paleturquoise;
}
p {
display: inline;
background-color: palevioletred;
}
span {
display: block;
background-color: darkolivegreen;
}
ul {
background-color: yellow;
}
Powyższy kod wykorzystuje właściwość `display`, aby zmienić elementy <h1> i <p>, domyślnie blokowe, na liniowe. Dodatkowo, zmienia element <span>, domyślnie liniowy, na blokowy. Do elementów zostały też dodane różne kolory tła dla lepszej widoczności. Końcowy wygląd strony po wprowadzeniu zmian w CSS prezentuje się następująco:
Zauważ, że element <h1>, który wcześniej zajmował cały blok, teraz znajduje się w tej samej linii co element <p>, który również zajmował cały blok. Natomiast element <span> z zielonym tłem zajmuje teraz cały blok, mimo że jego domyślne zachowanie to umieszczanie w tej samej linii z innymi elementami.
Istotne różnice między elementami liniowymi i blokowymi
Oprócz wpływu na przepływ treści, istnieją jeszcze inne ważne rozróżnienia między elementami liniowymi i blokowymi.
W przypadku elementów liniowych, jeśli element ma właściwości `width` i/lub `height`, zostaną one zignorowane. Nie można więc zmienić szerokości ani wysokości elementu liniowego.
Ponadto, jeśli dodasz margines do elementu liniowego, będzie on brany pod uwagę tylko w poziomie. Margines pionowy elementu liniowego jest ignorowany.
Jeżeli dodasz padding (dopełnienie) do elementu liniowego, będzie on respektowany jedynie w poziomie. Chociaż dopełnienie będzie widoczne również w pionie, nie będzie oddziaływać na położenie reszty elementów. Zatem dopełnienie nie wpłynie na treść znajdującą się powyżej lub poniżej elementu liniowego.
Aby zobaczyć to w praktyce, usuń lub zakomentuj cały kod w pliku CSS i dodaj poniższy kod:
span {
height: 500px;
width: 400px;
margin: 20px;
background-color: darkolivegreen;
}
a {
padding: 20px;
border: 1px solid black;
}
Oto wynik na stronie HTML:
Zauważ, że pomimo ustawienia właściwości `height` i `width`, wysokość i szerokość elementu <span> nie uległy zmianie. Margines, dodany ze wszystkich stron, jest widoczny tylko w poziomie.
W przypadku elementu <a>, chociaż dopełnienie zostało zastosowane dookoła, wpływa ono tylko na treść w tej samej linii. Elementy znajdujące się wyżej nie zostały w żaden sposób naruszone.
W przypadku elementów blokowych, właściwości `width` i `height` są respektowane. Marginesy i dopełnienie są również respektowane i oddziałują we wszystkich kierunkach.
Aby to zademonstrować, dodaj poniższy kod do istniejącego pliku CSS:
h1 {
height: 50px;
width: 200px;
border: 1px solid black;
padding: 50px;
margin: 35px;
background-color: aquamarine;
}
Tak wygląda rezultat na stronie HTML:
Zauważ, że szerokość, wysokość, margines i dopełnienie dodane do <h1>, elementu blokowego, są przestrzegane we wszystkich kierunkach.
Z różnic w stosowaniu szerokości, wysokości, marginesów i dopełnienia do elementów liniowych i blokowych, wyłania się trzecia wartość `display`, której można użyć w celu zmiany sposobu wyświetlania elementów. Jest nią `inline-block`.
Elementy liniowo-blokowe
Element `inline-block` zachowuje się jak element liniowy – umieszcza się w tej samej linii co inne elementy, nie wymuszając przełamania linii. Jednakże, w przeciwieństwie do elementów liniowych, szerokość, wysokość, margines i dopełnienie elementu `inline-block` są respektowane.
Dlatego opcję `display: inline-block` stosuje się, gdy chcemy, aby element zachowywał się jak liniowy, ale jednocześnie chcemy mieć możliwość dodawania szerokości, wysokości, marginesów i dopełnienia, które będą traktowane jak w elemencie blokowym. Oznacza to, że właściwości będą stosowane we wszystkich kierunkach.
Aby to zademonstrować, usuń lub zakomentuj cały kod z pliku CSS i dodaj poniższy kod:
span {
display: inline-block;
background-color: darkolivegreen;
height: 50px;
width: 200px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
Powyższy kod CSS ustawia właściwość `display` elementu <span> na `inline-block`. Element <span> jest domyślnie liniowy. Kod dodaje także szerokość, wysokość, margines i dopełnienie. Oto rezultat:
Zwróć uwagę, że szerokość, wysokość, margines i dopełnienie, które zostały dodane do <span>, są brane pod uwagę, a element wciąż jest wyświetlany jako element liniowy.
Tak właśnie zachowują się elementy `inline-block`. Wcześniej, gdy próbowaliśmy dodać te same właściwości do <span>, nie były one respektowane, ponieważ <span> był wówczas elementem liniowym.
Inline vs. Inline-Block
Poniżej znajduje się porównanie różnic między elementami `inline` i `inline-block`:
| Charakterystyka | Inline | Inline-Block |
|---|---|---|
| Zachowanie wyświetlania | Podatne na właściwość `line-height`. | Przestrzega marginesów i dopełnienia. |
| `Width` i `height` | Ignoruje właściwości szerokości i wysokości. | Respektuje właściwości szerokości i wysokości. |
| Marginesy i dopełnienie | Ignoruje poziome marginesy i dopełnienie. | Przestrzega marginesów i dopełnienia. |
| Przepływ treści | Nie powoduje rozpoczęcia nowej linii. | Nie powoduje rozpoczęcia nowej linii. |
| Wysokość linii | Podatne na właściwość `line-height`. | Podatne na właściwość `line-height`. |
| Układ poziomy | Ignoruje właściwości wyrównywania i justowania tekstu. | Reaguje na właściwości wyrównywania i justowania tekstu. |
Jak widać, elementy `inline` i `inline-block` różnią się zachowaniem niektórych właściwości CSS.
Kiedy używać Inline i Inline-Block
Jako programista użyj opcji `inline`, jeśli chcesz, aby treść HTML płynęła w jednej linii bez tworzenia nowych wierszy. Na przykład, podczas pracy z elementami w tekście, takimi jak <a>, <strong> i <span>, naturalne jest użycie opcji `inline`, która jest ich domyślnym zachowaniem.
Z drugiej strony, użyj `inline-block`, jeśli chcesz, aby element zachowywał się jak element blokowy, ale jednocześnie płynął w tekście bez tworzenia nowych wierszy. Oznacza to, że użyj `inline-block`, gdy chcesz mieć kontrolę nad szerokością, wysokością, marginesem i dopełnieniem elementu, ale jednocześnie element ma być częścią przepływu liniowego.
Podsumowanie
CSS oferuje trzy opcje wyświetlania: `inline`, `block` i `inline-block`, które można wykorzystać do zmiany lub kontroli sposobu, w jaki elementy prezentują się na stronie internetowej. Za pomocą właściwości `display` ustawiamy element jako liniowy, blokowy lub liniowo-blokowy.
Jako twórca stron internetowych, kluczowe jest zrozumienie różnic pomiędzy elementami `inline`, `block` i `inline-block`. Skorzystaj z tego artykułu, aby poznać te elementy i zacznij używać właściwości `display` w swoich projektach, aby zdobyć więcej doświadczenia.
W dalszej kolejności warto zapoznać się z generatorami siatek CSS, aby wizualnie tworzyć bardziej skomplikowane układy.
newsblog.pl