Właściwość wyświetlania CSS jest potężnym narzędziem dla projektantów stron internetowych. Pozwala kontrolować układy elementów witryny przy minimalnym stylu i prostych wartościach, które są łatwe do zapamiętania.
Ale co robi każda z tych wartości i jak działają? Dowiedzmy Się.
Co to jest właściwość wyświetlania CSS?
Właściwość display określa typ renderowania pola używanego dla elementów HTML na stronie internetowej. Powoduje to różne zachowania, w tym brak pojawiania się w ogóle. Możesz edytować te wartości w swojej witrynie za pomocą arkusza stylów lub odpowiednich sekcji dostosowywania CSS w Narzędzia CMS, takie jak WordPress.
Utrzymuj elementy w linii z wyświetlaniem CSS: inline
Wartości szerokości i wysokości nie mają zastosowania do elementu z wbudowanym wyświetlaniem; zawartość wewnątrz ustawia swoje wymiary. Wbudowane elementy HTML mogą znajdować się obok innych elementów, zachowując się jak a. Wyświetlanie w tekście jest najczęściej używane w przypadku tekstu.
<!DOCTYPE html>
<html lang=
"en">
<głowa>
<zestaw znaków meta="utf-8">
<tytuł>Wyświetlane wartości CSS</title>
<styl>
.w linii {
wyświetlacz: wbudowany;
rozmiar czcionki: 3rem;
}
#w linii-1 {
kolor tła: żółty;
padding: 10px 0px 10px 10px;
}
#w linii-2 {
kolor tła: jasnozielony;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<ciało>
<h1>Wbudowany wyświetlacz CSS</h1>
<klasa div="wbudowany" id="wbudowany-1">To jest tekst</div>
<klasa div="wbudowany" id="wbudowany-2">z wbudowaną wartością właściwości.</div>
</body>
</html>
Powyższe znaczniki HTML i CSS stanowią dobry przykład wyświetlanej wartości wbudowanej. Używane razem, wyświetli pojedynczą linię tekstu utworzoną z dwóch różnych elementów HTML.
Kontroluj układy stron internetowych za pomocą wyświetlania CSS: blok
Pod pewnymi względami wartość bloku wyświetlania jest przeciwieństwem wartości wbudowanej. Można ustawić wymiary wysokości i szerokości, a elementy o tej wartości nie mogą leżeć obok siebie. Powyższy przykład pokazuje dwa elementy z wartością bloku. Elementy z wartością wyświetlania bloku domyślnie mają maksymalną szerokość elementu nadrzędnego.
<!DOCTYPE html>
<html lang="en">
<głowa>
<zestaw znaków meta="utf-8">
<tytuł>Wyświetlane wartości CSS</title>
<styl>
.blok {
Blok wyświetlacza;
rozmiar czcionki: 3rem;
szerokość: dopasowanie treści;
}
#blok-1 {
kolor tła: żółty;
padding: 10px 10px 10px 10px;
}
#blok-2 {
kolor tła: jasnozielony;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<ciało>
<h1>Blok wyświetlania CSS</h1>
<klasa div="blok" id="blok-1">To jest tekst</div>
<klasa div="blok" id="blok-2">z wartością właściwości bloku.</div>
</body>
</html>W przeciwieństwie do przykładu stylu wbudowanego, ten przykład wartości bloku wyświetlania dzieli wiersze tekstu na dwa różne wiersze. Wartość szerokości dopasowania treści ustawia szerokość elementów tak, aby odpowiadała długości tekstu.
Elementy HTML obok siebie z wyświetlaniem CSS: inline-block
Wartość wbudowanego bloku wyświetlania CSS działa tak samo, jak zwykła wartość wbudowana, tylko z możliwością dodawania określonych wymiarów. Umożliwia to tworzenie układów przypominających siatkę bez umieszczania elementów nadrzędnych. Wracając do poprzedniego przykładu, dodanie wartości inline-block pozwala elementom usiąść obok siebie.
<!DOCTYPE html>
<html lang="en">
<głowa>
<zestaw znaków meta="utf-8">
<tytuł>Wyświetlane wartości CSS</title>
<styl>
.inline-blok {
wyświetlacz: inline-block;
rozmiar czcionki: 3rem;
szerokość: dopasowanie treści;
}
#inline-block-1 {
kolor tła: żółty;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
kolor tła: jasnozielony;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<ciało>
<h1>CSS Display Inline-Block (zestaw szerokości)</h1>
<klasa div="wbudowany blok" id="wbudowany-blok-1">To jest tekst</div>
<klasa div="wbudowany blok" id="inline-block-2">z właściwością inline-block
wartość.</div>
</body>
</html>
Wartość inline-block nie różni się zbytnio od wartości inline. Ważne jest, aby pamiętać, że możesz ustawić wymiary elementów z tą wartością, co ułatwia pracę w niektórych przypadkach.
Najprostszą wyświetlaną wartością jest „brak”. Ta wartość ukrywa element i wszystkie elementy podrzędne wraz z marginesami i innymi właściwościami odstępów. Elementy z CSS nie wyświetlają żadnej wartości są nadal widoczne w inspektorach przeglądarki.
Twórz elastyczne i responsywne elementy za pomocą wyświetlania CSS: flex
Display flex to jeden z najnowszych trybów układu CSS. Kiedy display flex znajduje się na elemencie nadrzędnym, wszystkie elementy wewnątrz niego stają się elastycznymi elementami CSS. Elementem nadrzędnym w tej konfiguracji jest flexbox.
Flexboxy tworzą responsywne projekty z predefiniowanymi zmiennymi, takimi jak szerokość i wysokość. To jest warte nauka o flexboxach HTML/CSS zanim zaczniesz.
<!DOCTYPE html>
<html lang="en">
<głowa>
<zestaw znaków meta="utf-8">
<tytuł>Wyświetlane wartości CSS</title>
<styl>
.przewód {
wyświetlacz: elastyczny;
rozmiar czcionki: 3rem;
}
#flex-1 {
kolor tła: żółty;
szerokość: 40%;
wysokość: 100px;
}
#flex-2 {
kolor tła: jasnozielony;
szerokość: 25%;
wysokość: 100px;
}
#flex-3 {
kolor tła: jasnoniebieski;
szerokość: 35%;
wysokość: 100px;
}
</style>
</head>
<ciało>
<h1>Flex wyświetlania CSS</h1>
<klasa div="przewód">
<dziel id="giętki-1"></div>
<dziel id="elastyczny-2"></div>
<dziel id="giętki-3"></div>
</div>
</body>
</html>Ustaw Flexboxy obok siebie Z wyświetlaczem: inline-flex
Inline-flex zachowuje się jak zwykły flexbox, z dodatkową korzyścią polegającą na tym, że element może siedzieć obok innych elementów.
<!DOCTYPE html>
<html lang="en">
<głowa>
<zestaw znaków meta="utf-8">
<tytuł>Wyświetlane wartości CSS</title>
<styl>
.inline-flex {
wyświetlacz: wbudowany flex;
rozmiar czcionki: 3rem;
szerokość: 49.8%;
}
#inline-flex-1 {
kolor tła: żółty;
szerokość: 40%;
wysokość: 100px;
}
#inline-flex-2 {
kolor tła: jasnozielony;
szerokość: 25%;
wysokość: 100px;
}
#inline-flex-3 {
kolor tła: jasnoniebieski;
szerokość: 35%;
wysokość: 100px;
}
</style>
</head>
<ciało>
<h1>CSS Display Inline-Flex</h1>
<klasa div="wbudowany-flex">
<dziel id="wbudowany-flex-1"></div>
<dziel id="inline-flex-2"></div>
<dziel id="inline-flex-3"></div>
</div>
<klasa div="wbudowany-flex">
<dziel id="wbudowany-flex-1"></div>
<dziel id="inline-flex-2"></div>
<dziel id="inline-flex-3"></div>
</div>
</body>
</html>Twórz złożone tabele z wyświetlaniem CSS: table
Wartość wyświetlanej tabeli przypomina dawne czasy projektowania stron internetowych. Chociaż większość witryn nie używa obecnie tabel do swoich układów, nadal są one prawidłowe do wyświetlania danych i treści w czytelnym formacie.
Dodanie wartości tabeli do elementu HTML sprawi, że będzie on działał jak element tabeli, ale potrzebujesz dodatkowych wartości, aby tabela działała poprawnie.
Wyświetlanie CSS: komórka tabeli
Elementy z wartością komórki tabeli działają jak pojedyncze komórki w tabeli głównej. A wartości kolumna-tabela i wiersz-tabela grupują te poszczególne komórki razem.
Wyświetlanie CSS: table-row
Wartość w wierszu tabeli działa tak samo, jak a
Wyświetlanie CSS: tabela-kolumna
Wartość w kolumnie tabeli działa podobnie do wartości w wierszu tabeli, z tą różnicą, że nie dzieli tabeli. Zamiast tego możesz użyć tej wartości, aby dodać określone reguły CSS do różnych już istniejących kolumn.
<!DOCTYPE html>
<html lang="en">
<głowa>
<zestaw znaków meta="utf-8">
<tytuł>Wyświetlane wartości CSS</title>
<styl>
.stół {
wyświetlacz: stół;
rozmiar czcionki: 3rem;
}
.nagłówek {
wyświetlacz: tabela-nagłówek-grupa;
rozmiar czcionki: 3rem;
}
#kolumna-1 {
wyświetlacz: tabela-kolumna-grupa;
kolor tła: żółty;
}
#kolumna-2 {
wyświetlacz: tabela-kolumna-grupa;
kolor tła: jasnozielony;
}
#kolumna-3 {
wyświetlacz: tabela-kolumna-grupa;
kolor tła: jasnoniebieski;
}
#wiersz-1 {
wyświetlacz: tabela-wiersz;
}
#rząd-2 {
wyświetlacz: tabela-wiersz;
}
#rząd-3 {
wyświetlacz: tabela-wiersz;
}
#komórka {
wyświetlacz: komórka tabeli;
wypełnienie: 10px;
szerokość: 20%;
}
</style>
</head>
<ciało>
<h1>Tabela wyświetlania CSS</h1>
<klasa div="stół">
<dziel id="kolumna-1"></div>
<dziel id="kolumna-2"></div>
<dziel id="kolumna-3"></div>
<klasa div="nagłówek">
<dziel id="komórka">Nazwa</div>
<dziel id="komórka">Wiek</div>
<dziel id="komórka">Kraj</div>
</div>
<dziel id="rząd-1">
<dziel id="komórka">Jeff</div>
<dziel id="komórka">21</div>
<dziel id="komórka">USA</div>
</div>
<dziel id="rząd-2">
<dziel id="komórka">Pozwać</div>
<dziel id="komórka">34</div>
<dziel id="komórka">Hiszpania</div>
</div>
<dziel id="rząd-3">
<dziel id="komórka">Borys</div>
<dziel id="komórka">57</div>
<dziel id="komórka">Singapur</div>
</div>
</div>
</body>
</html>Twórz tabele obok siebie za pomocą wyświetlania CSS: inline-table
Podobnie jak inne warianty inline, które już omówiliśmy, inline-table umożliwia umieszczanie elementów tabeli obok innych elementów.
Twórz responsywne układy stron internetowych za pomocą wyświetlania CSS: siatka
Wartość siatki wyświetlania CSS jest podobna do wartości tabeli, tylko kolumny i wiersze siatki mogą mieć elastyczny rozmiar. Dzięki temu siatki są idealne do tworzenia głównego układu stron internetowych. Pozostawiają miejsce na nagłówki i stopki o pełnej szerokości, a jednocześnie umożliwiają tworzenie obszarów treści o różnych rozmiarach.
<!DOCTYPE html>
<html lang="en">
<głowa>
<zestaw znaków meta="utf-8">
<tytuł>Wyświetlane wartości CSS</title>
<styl>
.krata {
wyświetlacz: siatka;
rozmiar czcionki: 3rem;
obszary szablonów siatki:
'nagłówek nagłówek nagłówek nagłówek'
'zawartość lewego paska bocznego zawartość prawego paska bocznego'
'stopka stopka stopka stopka';
odstęp: 10px;
}
#siatka-1 {
obszar siatki: nagłówek;
kolor tła: żółty;
wysokość: 100px;
wypełnienie: 20px;
wyrównanie tekstu: środek;
}
#siatka-2 {
obszar siatki: lewy pasek boczny;
kolor tła: jasnozielony;
wysokość: 200px;
wypełnienie: 20px;
wyrównanie tekstu: środek;
}
#siatka-3 {
obszar siatki: treść;
kolor tła: jasnoniebieski;
wysokość: 200px;
wypełnienie: 20px;
wyrównanie tekstu: środek;
}
#siatka-4 {
obszar siatki: prawy pasek boczny;
kolor tła: jasnozielony;
wysokość: 200px;
wypełnienie: 20px;
wyrównanie tekstu: środek;
}
#siatka-5 {
obszar siatki: stopka;
kolor tła: żółty;
wysokość: 100px;
wypełnienie: 20px;
wyrównanie tekstu: środek;
}
</style>
</head>
<ciało>
<h1>Siatka wyświetlania CSS</h1>
<klasa div="krata">
<dziel id="siatka-1">nagłówek</div>
<dziel id="siatka-2">Lewy pasek boczny</div>
<dziel id="siatka-3">Zawartość</div>
<dziel id="siatka-4">Prawy pasek boczny</div>
<dziel id="siatka-5">Stopka</div>
</div>
</body>
</html>
Siatki są podobne do flexboxów, tylko mogą umieszczać elementy pod i obok siebie. Niezbędna do tego jest właściwość grid-template-areas. Jak widać z kodu, nasz nagłówek i stopka zajmują cztery spacje w tablicy, ponieważ mają pełną szerokość. Każdy z pasków bocznych zajmuje jedno miejsce, a zawartość zajmuje dwa, skutecznie dzieląc środkowy rząd siatki na trzy kolumny.
Wyświetlanie CSS: inline-grid
Użycie wartości inline-grid umożliwi umieszczenie siatki obok innych elementów, tak jak inne wartości inline w tym przewodniku.
Używanie wyświetlania CSS do projektowania stron internetowych
Właściwość wyświetlania CSS oferuje wygodny sposób dostosowywania struktur elementów witryny bez konieczności zmiany znaczników HTML. Jest to idealne rozwiązanie dla osób korzystających z platform dostarczania treści, takich jak Shopify lub WordPress, ale może być również przydatne do ogólnego projektowania stron internetowych.