Articles
Pengenalan kepada CSS
Sifat-Sifat CSS Yang Berkaitan Dengan Rekaan Lajur

Sifat-Sifat CSS Yang Berkaitan Dengan Rekaan Lajur

Artikel ini menerangkan sifat-sifat CSS yang berkaitan dengan rekaan lajur.

Anda boleh mempelajari cara untuk menggambarkan rekaan lajur.

YouTube Video

HTML untuk Pratonton

css-columns.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-columns.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Columns</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Layout Related Properties</h2>
20        </header>
21        <article>
22            <h3>columns</h3>
23            <section style="width: 100%; height: 350px;">
24                <h4>Columns Example</h4>
25                <header><h4>columns: 100px 3; column-gap: 20px; column-rule: 2px solid #333;</h4></header>
26                <section class="sample-view">
27                    <section class="columns-container">
28                        <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</h5>
29                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
30                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
31                        <p>Pellentesque malesuada diam eu sem finibus scelerisque.</p>
32                        <p>Integer eget dolor nec est dignissim fermentum ut eget nunc.</p>
33                        <p>Morbi in nibh in lorem vestibulum sollicitudin.</p>
34                    </section>
35                </section>
36            </section>
37        </article>
38        <article>
39            <h3>order</h3>
40            <section style="height: 300px;">
41                <header><h4>column-width: 250px</h4></header>
42                <section class="sample-view">
43                    <div class="container">
44                        <div class="item item-1">Item 1</div>
45                        <div class="item item-2">Item 2</div>
46                        <div class="item item-3">Item 3</div>
47                    </div>
48                </section>
49            </section>
50        </article>
51    </main>
52</body>
53</html>

Rekaan Lajur

lajur 

1.columns-container {
2    columns: 100px 3;
3    column-gap: 20px;
4    column-rule: 2px solid #333;
5}
6
7h5 {
8  column-span: all;
9}

Sifat CSS columns menyediakan cara yang mudah untuk memaparkan kandungan yang dibahagi kepada pelbagai lajur. Dengan satu deklarasi, anda boleh dengan mudah menetapkan lebar lajur dan bilangan lajur, menjadikannya sesuai untuk reka bentuk responsif. Ia amat berkesan apabila diperlukan rekaan di mana teks dipaparkan panjang secara menegak dan diatur dalam pelbagai lajur, seperti di surat khabar atau majalah.

  • Dalam contoh ini, kandungan dibahagi kepada 3 lajur dengan jurang 20px dan garis 2px di antara lajur. Sebagai tambahan, elemen h5 merentasi beberapa lajur.

columns adalah ringkasan untuk sifat-sifat column-width dan column-count.

Sintaks Sifat columns 

1columns: <column-width> <column-count>;

columns mengikuti format ini.

  • <column-width>: Menetapkan lebar setiap lajur. Anda boleh menggunakan auto atau mana-mana unit panjang (contohnya, px, em, %, dll.) sebagai nilai.
  • <column-count>: Menetapkan bilangan lajur. Dinyatakan sebagai nilai berangka.
Sifat column-width 
1.container {
2  column-width: 250px;
3}

column-width adalah sifat yang menetapkan lebar minimum setiap lajur. Apabila digunakan dengan column-count, penempatan dan pelarasan lajur secara automatik menjadi mungkin. Pelayar mengambil kira lebar bekas dan mengira secara automatik bilangan lajur yang diperlukan.

  • Dalam contoh ini, lebar setiap lajur adalah 250px, dan bilangan lajur optimal dikira berdasarkan lebar bekas.
column-count Properti 
1.container {
2  column-count: 3;
3}

column-count ialah satu properti yang secara eksplisit menetapkan berapa banyak lajur elemen yang dinyatakan dibahagikan. Tidak seperti column-width, ini menetapkan jumlah lajur.

  • Dalam contoh ini, kandungan dalam bekas dibahagikan kepada tiga lajur.
column-gap Properti 
1.container {
2  column-gap: 20px;
3}

column-gap ialah satu properti yang menentukan ruang (jurang) antara setiap lajur. Terdapat juga satu properti umum dengan CSS Grid yang dipanggil gap, tetapi column-gap berguna apabila anda ingin mengubahsuai hanya margin di antara lajur.

  • Dalam contoh ini, terdapat margin 20px di antara setiap lajur. Nilai lalai ialah 16px.
column-rule Properti 
1.container {
2  column-rule: 2px solid #333;
3}

column-rule ialah satu properti untuk melukis garisan di antara lajur. Ia mempunyai sintaks yang serupa dengan properti border dan membolehkan anda menentukan lebar, gaya, dan warna garisan.

  • Dalam contoh ini, garisan hitam solid dengan lebar 2px ditunjukkan di antara lajur. column-rule boleh dipecahkan kepada tiga properti berikut.
    • column-rule-width: Menentukan lebar garisan.
    • column-rule-style: Menentukan gaya garisan. Sebagai contoh, terdapat solid, dashed, dotted, dan sebagainya.
    • column-rule-color: Menentukan warna garisan.
column-span Properti 
1h5 {
2  column-span: all;
3}

column-span ialah satu properti yang menetapkan elemen tertentu untuk merentasi pelbagai lajur. Ia biasanya digunakan untuk elemen seperti tajuk utama atau tajuk. Terdapat dua nilai yang mungkin:. - none: Elemen tidak merentasi lajur dan sesuai dalam satu lajur. Ini adalah nilai lalai. - all: Elemen dipaparkan merentasi semua lajur.

  • Dalam contoh ini, elemen h5 dipaparkan merentasi pelbagai lajur.
column-fill Properti 
1.container {
2  column-fill: balance;
3}

column-fill ialah satu properti yang mengawal cara kandungan diagihkan di antara kolum. Biasanya, kolum akan diisi sekata mungkin, tetapi properti ini membolehkan anda menetapkan susunan yang berbeza. Nilai-nilai berikut tersedia:. - balance: Kandungan diatur untuk mengisi kolum dengan sekata. Ini adalah nilai lalai. - auto: Kolum akan diisi secara automatik. Kolum terakhir mungkin menjadi lebih panjang.

  • Tetapan ini melaraskan supaya kandungan diagihkan secara sekata.
Penggunaan dengan Media Queries 
1.container {
2  columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6  .container {
7    columns: 1;
8  }
9}

Properti columns boleh digabungkan dengan media queries untuk menyokong reka bentuk responsif. Anda boleh mengubah bilangan kolum dan lebar kolum dengan fleksibel bergantung pada saiz skrin yang berbeza.

  • Dalam contoh ini, apabila lebar skrin adalah 600px atau kurang, akan ada 1 kolum. Untuk skrin yang lebih luas, ia akan dibahagikan kepada 3 kolum dengan lebar 200px setiap satu.

Ringkasan

Properti columns CSS ialah alat yang kuat untuk melaksanakan susun atur menggunakan pelbagai kolum dengan mudah. Ia amat berguna untuk reka bentuk responsif dan susun atur teks yang mementingkan kebolehbacaan. Dengan menggabungkan properti berkaitan, anda boleh menyesuaikan bilangan dan lebar kolum, jarak, hiasan, dan lain-lain dengan fleksibel.

Ini membolehkan pelaksanaan reka bentuk yang lebih canggih dengan mudah, jadi sila manfaatkannya.

order 

 1.container {
 2    all:initial;
 3    display: flex;
 4}
 5.item {
 6    padding: 10px;
 7    background-color: lightblue;
 8    margin: 5px;
 9}
10.item-1 {
11    order: 3;
12}
13.item-2 {
14    order: 1;
15}
16.item-3 {
17    order: 2;
18}

Properti order CSS digunakan untuk mengawal susunan paparan elemen apabila menggunakan susun atur Flexbox atau Grid. Biasanya, elemen dipaparkan mengikut markup HTML, tetapi anda boleh menukar susunan visualnya dengan menggunakan properti order. Properti ini membantu dalam mereka bentuk antara muka pengguna yang fleksibel dan membina reka bentuk responsif.

  • Dalam contoh ini, item-item ditanda dalam HTML sebagai Item 1, Item 2, Item 3, tetapi susunan paparan berubah kepada Item 2, Item 3, Item 1 disebabkan oleh properti order CSS.

Asas Properti order

Properti order digunakan pada item-item dalam kontena Flexbox atau Grid. Anda menentukan susunan penempatan dengan menetapkan nilai integer untuk setiap item. Secara lalai, order untuk semua item ditetapkan kepada 0. Dengan menukar nilai ini, anda boleh menentukan susunan item dipaparkan.

Sintaks Asas 
1.item {
2  order: <integer>;
3}
  • Anda boleh menentukan sebarang nilai integer untuk order. Nilai positif, negatif, atau sifar boleh digunakan. Semakin kecil nilai, semakin awal elemen dipaparkan, dan semakin besar nilai, semakin lewat ia dipaparkan.

Menggunakan Nilai Positif dan Negatif

Anda juga boleh menetapkan nilai negatif kepada sifat order. Elemen dengan nilai negatif dipaparkan sebelum susunan lalai.

1.item-1 {
2    order: -1;
3}
4.item-2 {
5    order: 2;
6}
7.item-3 {
8    order: 1;
9}

Dalam contoh ini, Item 1 ditetapkan kepada order: -1, jadi ia dipaparkan terlebih dahulu. Sebaliknya, Item 3 ditetapkan kepada order: 1, dan Item 2 ditetapkan kepada order: 2, jadi ia dipaparkan mengikut susunan tersebut.

order dalam Reka Bentuk Responsif

Dalam reka bentuk responsif, adalah mungkin untuk menukar susunan elemen mengikut saiz skrin. Sebagai contoh, dalam pandangan mudah alih, anda boleh menukar susunan elemen untuk memaparkan maklumat penting dahulu.

 1.item-1 {
 2    order: 1;
 3}
 4.item-2 {
 5    order: 2;
 6}
 7.item-3 {
 8    order: 3;
 9}
10
11/* Change the order on screens with a width of 800px or less */
12@media (max-width: 800px) {
13    .item-1 {
14        order: 3;
15    }
16    .item-2 {
17        order: 1;
18    }
19    .item-3 {
20        order: 2;
21    }
22}

Dalam contoh ini, dalam pandangan biasa, item dipaparkan dalam susunan Item 1, Item 2, Item 3, tetapi apabila lebar skrin kurang daripada 600px, Item 2 muncul terlebih dahulu, kemudian Item 3, dan Item 1 terakhir.

Pertimbangan untuk order

Penggunaan sifat order boleh menghasilkan susunan visual yang berbeza daripada susunan dalam pokok DOM. Ini boleh mempengaruhi alat aksesibiliti, seperti pembaca skrin. Apabila susunan berubah, navigasi papan kekunci dan teknologi bantuan lain mungkin tidak berfungsi seperti yang dijangkakan. Oleh itu, adalah perlu untuk mempertimbangkan dengan teliti impak kepada pengalaman pengguna apabila menggunakan order.

Kesimpulan

Sifat order dalam CSS adalah alat yang berguna yang membolehkan anda mengawal susunan paparan elemen dalam susun atur Flexbox atau Grid dengan mudah. Dengan menggunakan nilai positif atau negatif, anda boleh mengubah susunan elemen dengan fleksibel, yang sangat berguna dalam reka bentuk responsif. Walau bagaimanapun, perhatian mesti diberikan kepada aksesibiliti dan perbezaan antara susunan visual dan struktur HTML. Jika perkara ini dipertimbangkan dengan betul, sifat order boleh berguna untuk mencipta susun atur yang lebih dinamik dan fleksibel.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Hartanah CSS yang berkaitan dengan susun atur grid