Menggunakan Tampilan CSS untuk Mengontrol Tata Letak Situs Web

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">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline {
display: inline;
font-size: 3rem;
}
background-color: yellow;
padding: 10px 0px 10px 10px;
}
background-color: lightgreen;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<h1>CSS Display Inline</h1>
<div class="inline" id="inline-1">This is text</div>
<div class="inline" id="inline-2">with the inline property value.</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">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.block {
display: block;
font-size: 3rem;
width: fit-content;
}
background-color: yellow;
padding: 10px 10px 10px 10px;
}
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Block</h1>
<div class="block" id="block-1">This is text</div>
<div class="block" id="block-2">with the block property value.</div>
</body>
</html>

See also  Cara Membuat Website Dari Awal Dengan Dreamweaver

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">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-block {
display: inline-block;
font-size: 3rem;
width: fit-content;
}
background-color: yellow;
padding: 10px 10px 10px 10px;
}
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Block (width set)</h1>
<div class="inline-block" id="inline-block-1">This is text</div>
<div class="inline-block" id="inline-block-2">with the inline-block property
value.</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.

Sembunyikan Elemen Situs Web Dengan tampilan CSS: tidak ada

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. Sebaiknya pelajari tentang flexbox HTML/CSS sebelum Anda memulai.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.flex {
display: flex;
font-size: 3rem;
}
background-color: yellow;
width: 40%;
height: 100px;
}
background-color: lightgreen;
width: 25%;
height: 100px;
}
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Flex</h1>
<div class="flex">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html>

See also  7 Aplikasi Meditasi untuk Membantu Anda Berhenti sejenak saat Berlibur di Perjalanan

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">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-flex {
display: inline-flex;
font-size: 3rem;
width: 49.8%;
}
background-color: yellow;
width: 40%;
height: 100px;
}
background-color: lightgreen;
width: 25%;
height: 100px;
}
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="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

elemen HTML. Sebagai induk dari elemen dengan nilai sel tabel, itu akan membagi tabel Anda menjadi baris horizontal.

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">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.table {
display: table;
font-size: 3rem;
}
.header {
display: table-header-group;
font-size: 3rem;
}
display: table-column-group;
background-color: yellow;
}
display: table-column-group;
background-color: lightgreen;
}
display: table-column-group;
background-color: lightblue;
}
display: table-row;
}
display: table-row;
}
display: table-row;
}
display: table-cell;
padding: 10px;
width: 20%;
}
</style>
</head>
<body>
<h1>CSS Display Table</h1>
<div class="table">
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>
<div class="header">
<div id="cell">Name</div>
<div id="cell">Age</div>
<div id="cell">Country</div>
</div>
<div id="row-1">
<div id="cell">Jeff</div>
<div id="cell">21</div>
<div id="cell">USA</div>
</div>
<div id="row-2">
<div id="cell">Sue</div>
<div id="cell">34</div>
<div id="cell">Spain</div>
</div>
<div id="row-3">
<div id="cell">Boris</div>
<div id="cell">57</div>
<div id="cell">Singapore</div>
</div>
</div>
</body>
</html>

See also  Cara Mengubah Tingkat Enkripsi untuk Koneksi Berbagi File di Home windows

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 grid 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">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.grid {
display: grid;
font-size: 3rem;
grid-template-areas:
'header header header header'
'left-sidebar content content right-sidebar'
'footer footer footer footer';
gap: 10px;
}
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
grid-area: footer;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Display Grid</h1>
<div class="grid">
<div id="grid-1">Header</div>
<div id="grid-2">Left Sidebar</div>
<div id="grid-3">Content</div>
<div id="grid-4">Right Sidebar</div>
<div id="grid-5">Footer</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.