Properti tampilan CSS adalah alat yang ampuh untuk desainer web. Ini memungkinkan Anda mengontrol tata letak elemen situs web dengan gaya minimal, dengan nilai sederhana yang mudah diingat.
Tapi apa yang dilakukan masing-masing nilai ini, dan bagaimana cara kerjanya? Mari kita cari tahu.
Apa itu Properti tampilan CSS?
Properti tampilan menentukan jenis rendering kotak yang digunakan untuk elemen HTML pada halaman web. Hal ini mengakibatkan berbagai perilaku, termasuk tidak muncul sama sekali. Anda dapat mengedit nilai-nilai ini di situs web Anda melalui lembar gaya atau bagian penyesuaian CSS yang sesuai di Alat CMS seperti WordPress.
Pertahankan Elemen Sejalan Dengan tampilan CSS: sebaris
Nilai lebar dan tinggi tidak berlaku untuk elemen dengan tampilan sebaris; konten di dalamnya menetapkan dimensinya. Elemen HTML sebaris dapat duduk berdampingan dengan elemen lain, berperilaku seperti. Tampilan sebaris paling sering digunakan untuk teks.
<!DOCTYPE html>
<html lang="en">
<kepala>
<rangkaian meta =
"utf-8">
<judul>Nilai Tampilan CSS</title>
<gaya>
.Di barisan {
tampilan: sebaris;
ukuran font: 3rem;
}
#sebaris-1 {
warna latar: kuning;
bantalan: 10px 0px 10px 10px;
}
#sebaris-2 {
warna latar belakang: hijau muda;
bantalan: 10px 10px 10px 0px;
}
</style>
</head>
<tubuh>
<h1>Tampilan CSS Sebaris</h1>
<kelas div="Di barisan" id="sebaris-1">Ini adalah teks</div>
<kelas div="Di barisan" id="sebaris-2">dengan nilai properti sebaris.</div>
</body>
</html>
Markup HTML dan CSS di atas berfungsi sebagai contoh yang baik untuk menampilkan nilai sebaris. Saat digunakan bersama, ini akan menampilkan satu baris teks yang dibuat dengan dua elemen HTML yang berbeda.
Kontrol Tata Letak Situs Web Dengan tampilan CSS: blok
Dalam beberapa hal, nilai blok tampilan adalah kebalikan dari nilai inline. Dimensi tinggi dan lebar dapat diatur, dan elemen dengan nilai ini tidak dapat duduk bersebelahan. Contoh di atas menunjukkan dua elemen dengan nilai blok. Elemen dengan nilai tampilan blok default pada lebar maksimum elemen induknya.
<!DOCTYPE html>
<html lang="en">
<kepala>
<rangkaian meta ="utf-8">
<judul>Nilai Tampilan CSS</title>
<gaya>
.memblokir {
tampilan: blok;
ukuran font: 3rem;
lebar: fit-konten;
}
#blok-1 {
warna latar: kuning;
bantalan: 10px 10px 10px 10px;
}
#blok-2 {
warna latar belakang: hijau muda;
bantalan: 10px 10px 10px 10px;
}
</style>
</head>
<tubuh>
<h1>Blok Tampilan CSS</h1>
<kelas div="memblokir" id="blok-1">Ini adalah teks</div>
<kelas div="memblokir" id="blok-2">dengan nilai properti blok.</div>
</body>
</html>Berbeda dengan contoh gaya sebaris, contoh nilai blok tampilan ini membagi baris teks menjadi dua baris yang berbeda. Nilai lebar konten-pas mengatur lebar elemen agar sesuai dengan panjang teks.
Elemen HTML Berdampingan Dengan tampilan CSS: inline-block
Nilai inline-block tampilan CSS berfungsi seperti nilai inline biasa, hanya dengan kemampuan untuk menambahkan dimensi tertentu. Ini memungkinkan untuk membuat tata letak seperti kisi tanpa memiliki elemen induk. Kembali ke contoh sebelumnya, menambahkan nilai inline-block memungkinkan elemen untuk duduk bersebelahan.
<!DOCTYPE html>
<html lang="en">
<kepala>
<rangkaian meta ="utf-8">
<judul>Nilai Tampilan CSS</title>
<gaya>
.inline-block {
tampilan: blok sebaris;
ukuran font: 3rem;
lebar: fit-konten;
}
#inline-block-1 {
warna latar: kuning;
bantalan: 10px 10px 10px 10px;
}
#inline-block-2 {
warna latar belakang: hijau muda;
bantalan: 10px 10px 10px 10px;
}
</style>
</head>
<tubuh>
<h1>CSS Display Inline-Block (set lebar)</h1>
<kelas div="blok sebaris" id="inline-blok-1">Ini adalah teks</div>
<kelas div="blok sebaris" id="inline-blok-2">dengan properti inline-block
nilai.</div>
</body>
</html>
Nilai inline-block tampaknya tidak jauh berbeda dengan nilai inline. Penting untuk dicatat bahwa Anda dapat mengatur dimensi elemen dengan nilai ini, membuatnya lebih mudah untuk digunakan dalam kasus tertentu.
Nilai tampilan paling sederhana adalah "tidak ada". Nilai ini menyembunyikan elemen dan elemen turunan apa pun, bersama dengan margin dan properti spasi lainnya. Elemen dengan nilai tidak ada tampilan CSS masih terlihat di dalam pemeriksa browser.
Buat Elemen Fleksibel dan Responsif Dengan tampilan CSS: flex
Tampilan fleksibel adalah salah satu mode tata letak CSS terbaru. Ketika tampilan flex berada pada elemen induk, semua elemen di dalamnya menjadi elemen CSS yang fleksibel. Elemen induk dalam konfigurasi ini adalah flexbox.
Flexbox membuat desain responsif dengan variabel yang telah ditentukan sebelumnya, seperti lebar dan tinggi. Ini layak belajar tentang flexbox HTML/CSS sebelum Anda memulai.
<!DOCTYPE html>
<html lang="en">
<kepala>
<rangkaian meta ="utf-8">
<judul>Nilai Tampilan CSS</title>
<gaya>
.melenturkan {
tampilan: fleksibel;
ukuran font: 3rem;
}
#fleksi-1 {
warna latar: kuning;
lebar: 40%;
tinggi: 100 piksel;
}
#flex-2 {
warna latar belakang: hijau muda;
lebar: 25%;
tinggi: 100 piksel;
}
#flex-3 {
warna latar belakang: biru muda;
lebar: 35%;
tinggi: 100 piksel;
}
</style>
</head>
<tubuh>
<h1>Tampilan CSS Fleksibel</h1>
<kelas div="melenturkan">
<id div ="fleksibel-1"></div>
<id div ="fleksibel-2"></div>
<id div ="fleksibel-3"></div>
</div>
</body>
</html>Posisikan Flexbox Berdampingan Dengan tampilan: inline-flex
Inline-flex berperilaku seperti flexbox biasa, dengan manfaat tambahan dari elemen yang dapat duduk di sebelah elemen lain.
<!DOCTYPE html>
<html lang="en">
<kepala>
<rangkaian meta ="utf-8">
<judul>Nilai Tampilan CSS</title>
<gaya>
.inline-flex {
tampilan: inline-flex;
ukuran font: 3rem;
lebar: 49.8%;
}
#inline-flex-1 {
warna latar: kuning;
lebar: 40%;
tinggi: 100 piksel;
}
#inline-flex-2 {
warna latar belakang: hijau muda;
lebar: 25%;
tinggi: 100 piksel;
}
#inline-flex-3 {
warna latar belakang: biru muda;
lebar: 35%;
tinggi: 100 piksel;
}
</style>
</head>
<tubuh>
<h1>Tampilan CSS Inline-Flex</h1>
<kelas div="inline-flex">
<id div ="inline-flex-1"></div>
<id div ="inline-flex-2"></div>
<id div ="inline-flex-3"></div>
</div>
<kelas div="inline-flex">
<id div ="inline-flex-1"></div>
<id div ="inline-flex-2"></div>
<id div ="inline-flex-3"></div>
</div>
</body>
</html>Buat Tabel Kompleks Dengan tampilan CSS: table
Nilai tabel tampilan mengingatkan pada masa lalu desain situs web. Meskipun sebagian besar situs web tidak menggunakan tabel untuk tata letaknya saat ini, tabel tersebut masih valid untuk menampilkan data dan konten dalam format yang dapat dibaca.
Menambahkan nilai tabel ke elemen HTML akan membuatnya bertindak seperti elemen tabel, tetapi Anda memerlukan nilai tambahan untuk membuat tabel Anda berfungsi dengan baik.
Tampilan CSS: sel tabel
Elemen dengan nilai sel tabel bertindak sebagai sel individual dalam tabel utama. Dan nilai tabel-kolom dan baris-tabel mengelompokkan sel-sel individual ini bersama-sama.
Tampilan CSS: baris-tabel
Nilai tabel-baris berfungsi seperti a
Tampilan CSS: tabel-kolom
Nilai tabel-kolom bekerja mirip dengan nilai baris tabel, hanya saja tidak membagi tabel Anda. Sebagai gantinya, Anda dapat menggunakan nilai ini untuk menambahkan aturan CSS tertentu ke kolom berbeda yang sudah ada.
<!DOCTYPE html>
<html lang="en">
<kepala>
<rangkaian meta ="utf-8">
<judul>Nilai Tampilan CSS</title>
<gaya>
.meja {
tampilan: meja;
ukuran font: 3rem;
}
.header {
tampilan: tabel-tajuk-grup;
ukuran font: 3rem;
}
#kolom-1 {
tampilan: tabel-kolom-grup;
warna latar: kuning;
}
#kolom-2 {
tampilan: tabel-kolom-grup;
warna latar belakang: hijau muda;
}
#kolom-3 {
tampilan: tabel-kolom-grup;
warna latar belakang: biru muda;
}
#baris-1 {
tampilan: baris-tabel;
}
#baris-2 {
tampilan: baris-tabel;
}
#baris-3 {
tampilan: baris-tabel;
}
#sel {
tampilan: sel tabel;
bantalan: 10 piksel;
lebar: 20%;
}
</style>
</head>
<tubuh>
<h1>Tabel Tampilan CSS</h1>
<kelas div="meja">
<id div ="kolom-1"></div>
<id div ="kolom-2"></div>
<id div ="kolom-3"></div>
<kelas div="header">
<id div ="sel">Nama</div>
<id div ="sel">Usia</div>
<id div ="sel">Negara</div>
</div>
<id div ="baris-1">
<id div ="sel">Jeff</div>
<id div ="sel">21</div>
<id div ="sel">Amerika Serikat</div>
</div>
<id div ="baris-2">
<id div ="sel">Menuntut</div>
<id div ="sel">34</div>
<id div ="sel">Spanyol</div>
</div>
<id div ="baris-3">
<id div ="sel">Boris</div>
<id div ="sel">57</div>
<id div ="sel">Singapura</div>
</div>
</div>
</body>
</html>Buat Tabel Berdampingan Dengan tampilan CSS: inline-table
Seperti varian sebaris lainnya yang telah kita lihat, tabel sebaris memungkinkan untuk menempatkan elemen tabel di sebelah elemen lain.
Bangun Tata Letak Situs Web Responsif Dengan tampilan CSS: kisi
Nilai kisi tampilan CSS mirip dengan nilai tabel, hanya kolom dan baris kisi yang dapat memiliki ukuran fleksibel. Ini membuat kisi-kisi ideal untuk membuat tata letak utama untuk halaman web. Mereka meninggalkan ruang untuk header dan footer lebar penuh sementara juga memungkinkan untuk memiliki area konten dengan ukuran berbeda.
<!DOCTYPE html>
<html lang="en">
<kepala>
<rangkaian meta ="utf-8">
<judul>Nilai Tampilan CSS</title>
<gaya>
.grid {
tampilan: kisi;
ukuran font: 3rem;
grid-templat-area:
'tajuk tajuk tajuk'
'konten sidebar kiri konten sidebar kanan'
'footer footer footer footer';
celah: 10 piksel;
}
#kisi-1 {
area kisi: header;
warna latar: kuning;
tinggi: 100 piksel;
bantalan: 20 piksel;
perataan teks: tengah;
}
#kisi-2 {
area kisi: bilah sisi kiri;
warna latar belakang: hijau muda;
tinggi: 200 piksel;
bantalan: 20 piksel;
perataan teks: tengah;
}
#kisi-3 {
grid-area: konten;
warna latar belakang: biru muda;
tinggi: 200 piksel;
bantalan: 20 piksel;
perataan teks: tengah;
}
#kisi-4 {
area kisi: bilah sisi kanan;
warna latar belakang: hijau muda;
tinggi: 200 piksel;
bantalan: 20 piksel;
perataan teks: tengah;
}
#kisi-5 {
grid-area: footer;
warna latar: kuning;
tinggi: 100 piksel;
bantalan: 20 piksel;
perataan teks: tengah;
}
</style>
</head>
<tubuh>
<h1>Kotak Tampilan CSS</h1>
<kelas div="kisi-kisi">
<id div ="kisi-1">Tajuk</div>
<id div ="kisi-2">Bilah Sisi Kiri</div>
<id div ="kisi-3">Isi</div>
<id div ="kisi-4">Bilah Sisi Kanan</div>
<id div ="kisi-5">catatan kaki</div>
</div>
</body>
</html>
Grid mirip dengan flexbox, hanya saja mereka dapat menempatkan elemen di bawah dan di samping satu sama lain. Properti grid-template-areas sangat penting untuk ini. Seperti yang Anda lihat dari kode, header dan footer kami mengambil empat spasi dalam array, karena lebarnya penuh. Bilah sisi masing-masing mengambil satu slot, sementara konten mengambil dua, secara efektif membagi baris tengah kisi menjadi tiga kolom.
Tampilan CSS: inline-grid
Menggunakan nilai inline-grid akan memungkinkan grid Anda untuk duduk di sebelah elemen lain, seperti nilai inline lainnya dalam panduan ini.
Menggunakan Tampilan CSS untuk Desain Web
Properti tampilan CSS menawarkan cara praktis untuk menyesuaikan struktur elemen situs web tanpa harus mengubah markup HTML. Ini sangat ideal bagi mereka yang menggunakan platform pengiriman konten seperti Shopify atau WordPress, tetapi juga berguna untuk desain web umum.