Menggunakan Paparan CSS untuk Mengawal Reka Letak Laman Web

Menggunakan Paparan CSS untuk Mengawal Reka Letak Laman Web

Sifat paparan CSS ialah alat yang berkuasa untuk pereka web. Ia membolehkan anda mengawal reka letak elemen tapak web dengan penggayaan minimum, dengan nilai mudah yang mudah diingati.





Tetapi apakah yang dilakukan oleh setiap nilai ini, dan bagaimana ia berfungsi? Mari kita ketahui.





MAKEUSEOF VIDEO OF THE DAY

Apakah Harta paparan CSS?

Sifat paparan menentukan jenis pemaparan kotak yang digunakan untuk elemen HTML pada halaman web. Ini mengakibatkan pelbagai tingkah laku, termasuk tidak muncul langsung. Anda boleh mengedit nilai ini di tapak web anda melalui helaian gaya atau bahagian penyesuaian CSS yang sesuai Alat CMS seperti WordPress .





Pastikan Elemen Selaras Dengan paparan CSS: sebaris

  teks dengan nilai sebaris css

Nilai lebar dan ketinggian tidak digunakan pada elemen dengan paparan sebaris; kandungan di dalamnya menetapkan dimensinya. Elemen HTML sebaris boleh bersebelahan dengan elemen lain, berkelakuan seperti a . Paparan sebaris paling biasa 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;
}
#inline-1 {
background-color: yellow;
padding: 10px 0px 10px 10px;
}
#inline-2 {
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>

Penanda HTML dan CSS di atas berfungsi sebagai contoh yang baik bagi nilai sebaris paparan. Apabila digunakan bersama, ini akan memaparkan satu baris teks yang dibuat dengan dua elemen HTML yang berbeza.



Kawal Reka Letak Laman Web Dengan paparan CSS: blok

  elemen dengan blok paparan css

Dalam beberapa cara, nilai blok paparan adalah bertentangan dengan nilai sebaris. Dimensi ketinggian dan lebar boleh ditetapkan dan elemen dengan nilai ini tidak boleh duduk bersebelahan. Contoh di atas menunjukkan dua elemen dengan nilai blok. Elemen dengan nilai paparan blok lalai 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;
}
#block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#block-2 {
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>

Tidak seperti contoh gaya sebaris, contoh nilai blok paparan ini membahagikan baris teks kepada dua baris berbeza. Nilai lebar kandungan muat menetapkan lebar elemen agar sepadan dengan panjang teks.





Elemen HTML Bersebelahan Dengan paparan CSS: blok sebaris

  elemen html dengan nilai blok sebaris css

Nilai blok sebaris paparan CSS berfungsi sama seperti nilai sebaris biasa, hanya dengan keupayaan untuk menambah dimensi tertentu. Ini memungkinkan untuk membuat reka letak seperti grid tanpa mempunyai elemen induk di tempatnya. Berbalik kepada contoh sebelumnya, menambah nilai blok sebaris membolehkan elemen untuk duduk bersebelahan antara satu sama lain.

<!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;
}
#inline-block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
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 blok sebaris tidak kelihatan jauh berbeza daripada nilai sebaris. Adalah penting untuk ambil perhatian bahawa anda boleh menetapkan dimensi elemen dengan nilai ini, walaupun, menjadikannya lebih mudah untuk digunakan dalam kes tertentu.





Sembunyikan Elemen Laman Web Dengan paparan CSS: tiada

Nilai paparan yang paling mudah ialah 'tiada'. Nilai ini menyembunyikan elemen dan mana-mana elemen anak, bersama-sama dengan jidar dan sifat jarak lain. Elemen dengan paparan CSS tiada nilai yang masih kelihatan dalam pemeriksa penyemak imbas.

Cipta Elemen Fleksibel dan Responsif Dengan paparan CSS: flex

  css paparan flexbox

Fleksibel paparan ialah salah satu daripada mod susun atur CSS terbaharu. Apabila flex paparan berada pada elemen induk, semua elemen di dalamnya menjadi elemen CSS yang fleksibel. Elemen induk dalam konfigurasi ini ialah flexbox.

Flexboxes mencipta reka bentuk responsif dengan pembolehubah yang dipratentukan, seperti lebar dan tinggi. Ia berbaloi belajar tentang HTML/CSS flexboxes sebelum anda bermula.

4B8553AF011488B693BBC238B69A5F102CFFFFAF

Letakkan Kotak Flex Bersebelahan Dengan paparan: inline-flex

  css paparan flexbox dengan nilai sebaris

Inline-flex berkelakuan sama seperti kotak flex biasa, dengan faedah tambahan elemen yang boleh 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%;
}
#inline-flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#inline-flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#inline-flex-3 {
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>

Cipta Jadual Kompleks Dengan paparan CSS: jadual

  jadual html asas dibuat dengan css

Nilai jadual paparan mengingatkan zaman lama reka bentuk laman web. Walaupun kebanyakan tapak web tidak menggunakan jadual untuk reka letaknya hari ini, ia masih sah untuk memaparkan data dan kandungan dalam format yang boleh dibaca.

Menambah nilai jadual pada elemen HTML akan menjadikannya bertindak seperti elemen jadual, tetapi anda memerlukan nilai tambahan untuk menjadikan jadual anda berfungsi dengan betul.

Paparan CSS: sel jadual

Elemen dengan nilai sel jadual bertindak sebagai sel individu dalam jadual utama. Dan nilai lajur jadual dan baris jadual mengumpulkan sel individu ini bersama-sama.

Paparan CSS: table-row

Nilai baris jadual berfungsi sama seperti elemen HTML . Sebagai induk kepada elemen dengan nilai sel jadual, ia akan membahagikan jadual anda kepada baris mendatar.

Paparan CSS: lajur jadual

Nilai lajur jadual berfungsi sama dengan nilai baris jadual, cuma nilai itu tidak membahagikan jadual anda. Sebaliknya, anda boleh menggunakan nilai ini untuk menambah peraturan CSS khusus pada lajur berbeza yang sudah wujud.

<!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;
}
#column-1 {
display: table-column-group;
background-color: yellow;
}
#column-2 {
display: table-column-group;
background-color: lightgreen;
}
#column-3 {
display: table-column-group;
background-color: lightblue;
}
#row-1 {
display: table-row;
}
#row-2 {
display: table-row;
}
#row-3 {
display: table-row;
}
#cell {
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>

Cipta Jadual Sebelah Dengan paparan CSS: jadual sebaris

Seperti varian sebaris lain yang telah kami lihat, jadual sebaris memungkinkan untuk meletakkan elemen jadual di sebelah elemen lain.

Bina Reka Letak Tapak Web Responsif Dengan paparan CSS: grid

  elemen css dengan nilai grid

Nilai grid paparan CSS adalah serupa dengan nilai jadual, hanya lajur dan baris grid boleh mempunyai saiz yang fleksibel. Ini menjadikan grid sesuai untuk mencipta susun atur utama untuk halaman web. Mereka meninggalkan ruang untuk pengepala dan pengaki lebar penuh sambil juga memungkinkan untuk mempunyai kawasan kandungan dengan saiz yang berbeza.

<!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-1 {
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
#grid-2 {
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-3 {
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-4 {
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-5 {
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 adalah serupa dengan kotak fleksibel, hanya ia boleh meletakkan elemen di bawah dan bersebelahan antara satu sama lain. Harta kawasan templat grid adalah penting untuk ini. Seperti yang anda boleh lihat daripada kod, pengepala dan pengaki kami mengambil empat ruang dalam tatasusunan, kerana ia adalah lebar penuh. Bar sisi mengambil satu slot setiap satu, manakala kandungan mengambil dua, dengan berkesan membelah baris tengah grid kepada tiga lajur.

Paparan CSS: grid sebaris

Menggunakan nilai grid sebaris akan membolehkan grid anda berada di sebelah elemen lain, sama seperti nilai sebaris lain dalam panduan ini.

Menggunakan Paparan CSS untuk Reka Bentuk Web

Sifat paparan CSS menawarkan cara yang berguna untuk melaraskan struktur elemen tapak web tanpa perlu menukar penanda HTML. Ini sesuai untuk mereka yang menggunakan platform penghantaran kandungan seperti Shopify atau WordPress, tetapi ia juga boleh digunakan untuk reka bentuk web umum.

cara memuat turun rancangan di hulu