Articles
Pengenalan kepada CSS
Pewarisan dalam CSS

Pewarisan dalam CSS

Artikel ini menerangkan pewarisan dalam CSS.

Anda boleh menyemak sifat yang diwarisi dan yang tidak diwarisi.

YouTube Video

HTML untuk Pratonton

css-inheritance.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 Inheritance</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-inheritance.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Inheritance</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header><h2>CSS Inheritance</h2></header>
19        <article>
20            <h3>Example of Inheritance</h3>
21            <section>
22                <p>
23                    Example of P Element.<br>
24                    <span>Example of Span Element</span>
25                </p>
26            </section>
27            <div>
28                Example of Div Element
29            </div>
30            <ul>
31                <li>List Item 1</li>
32                <li>List Item 2</li>
33                <li>List Item 3</li>
34            </ul>
35        </article>
36        <article>
37            <h3>all</h3>
38            <section>
39                <h4>Initial</h4>
40                <div class="all-initial">This is an initial element</div>
41            </section>
42            <section>
43                <h4>Inherit</h4>
44                <div class="parent-inherit">
45                    <div class="all-inherit">This is an inherited element</div>
46                </div>
47            </section>
48            <section>
49                <h4>Unset All</h4>
50                <div class="parent-unset">
51                    <div class="all-unset">This is an unset element</div>
52                </div>
53            </section>
54            <section>
55                <h4>all and !important</h4>
56                <div class="important-style">
57                    <div class="all-with-important">
58                        This is an initial element with !important
59                    </div>
60                </div>
61            </section>
62        </article>
63    </main>
64</body>
65</html>

Pewarisan dalam CSS

Dalam CSS, beberapa sifat diwarisi secara automatik dari elemen induk ke elemen anak. Ini adalah mekanisme yang berguna kerana apabila anda menetapkan sifat tertentu, elemen anak juga akan mempunyai gaya yang sama, menghapuskan keperluan untuk menetapkannya berulang kali. Walau bagaimanapun, tidak semua sifat diwarisi; beberapa sifat diwarisi sementara yang lain tidak. Sebagai contoh, color dan font-family diwarisi, tetapi sifat model kotak seperti margin dan padding tidak diwarisi.

Sifat yang Diwarisi

Sifat yang boleh diwarisi terutamanya berkaitan dengan teks dan fon.

Sifat yang biasa diwarisi

  1. color: Warna Teks
1body {
2    color: black;
3}
  • Dalam kes ini, semua elemen anak dalam body akan mempunyai warna teks hitam.
  1. font-family: Keluarga Fon
1body {
2    font-family: "Times New Roman", cursive;
3}
  • Semua elemen anak menggunakan fon Arial.
  1. font-size: Saiz Teks
1body {
2    font-size: 16px;
3}
  • Semua teks dalam body akan menjadi 16px secara lalai.
  1. line-height: Jarak Baris
1p {
2    line-height: 1.5;
3}
  • Teks dalam elemen <p> akan ditampilkan dengan 1.5 kali tinggi baris, mempengaruhi elemen anaknya juga.
  1. text-align: Penjajaran Teks
1div {
2    text-align: center;
3}
  • Teks dan elemen sebaris dalam elemen div ditampilkan pada tengah.
  1. visibility: Keterlihatan Elemen
1div {
2    visibility: hidden;
3}
  • visibility adalah sifat yang mengawal keterlihatan elemen. Apabila ditetapkan kepada tersembunyi, elemen tersebut menjadi tidak kelihatan.
  • Dalam kes ini, elemen kanak-kanak dalam div juga akan tersembunyi.
  1. list-style: Gaya Senarai (penanda senarai untuk <ul> dan <ol>)
1ul {
2    list-style: square;
3}
  • Dalam kes ini, item senarai dalam tag ul akan dipaparkan dengan penanda segi empat.

Contoh:

Sifat yang Tidak Diwarisi

Sifat yang berkaitan dengan susun atur dan model kotak biasanya tidak diwarisi. Sifat-sifat ini perlu ditetapkan secara individu untuk setiap elemen.

Hartanah Biasa Tidak Diwarisi

  1. margin, padding: Margin luar dan dalam sesuatu elemen
1div {
2    margin: 10px;
3    padding: 20px;
4}
  • Walaupun anda menetapkan margin luar atau dalam untuk elemen div, ini tidak mempengaruhi elemen anaknya.
  1. border: Sempadan elemen
1div {
2    border: 1px solid black;
3}
  • Walaupun sempadan ditetapkan pada elemen induk, ia tidak mempengaruhi elemen anak.
  1. width, height: Lebar dan tinggi elemen
1div {
2    width: 100px;
3    height: 50px;
4}
  • Lebar dan tinggi elemen induk tidak secara automatik mempengaruhi elemen anak.
  1. background: Gaya latar belakang
1body {
2    background-color: lightblue;
3}
  • Warna latar belakang yang ditetapkan pada body tidak secara langsung mempengaruhi elemen anak. Namun, jika elemen anak mempunyai latar belakang telus, warna latar belakang elemen induk mungkin kelihatan melaluinya.

Contoh:

Kawalan pewarisan

Pewarisan boleh dikawal menggunakan kata kunci inherit, initial, atau unset.

  • Jika anda ingin membolehkan pewarisan: Anda boleh secara eksplisit memaksa pewarisan menggunakan kata kunci inherit.
1div {
2    color: inherit;  /* Inherit the color from its parent element */
3}
  • Jika anda tidak mahu pewarisan: Anda boleh menetapkan semula sifat kepada nilai asalnya menggunakan kata kunci initial atau unset.
1p {
2    color: initial;  /* Reset the color to its initial/default value */
3}

Contoh:

Hartanah all

Sifat all ialah sifat yang boleh menetapkan semula hampir semua sifat CSS, termasuk sifat yang boleh diwarisi, untuk elemen tertentu sekaligus. Khususnya, anda boleh menggunakan tiga kata kunci berikut untuk menetapkan sifat-sifat elemen:.

  • initial: Menetapkan semula semua sifat kepada nilai asalnya.
  • inherit: Mewarisi semua sifat dari elemen induk.
  • unset: Mewarisi sifat jika ia boleh diwarisi, jika tidak ia akan ditetapkan semula ke nilai asalnya.

all sangat berguna apabila anda ingin menetapkan semula atau menetapkan pelbagai sifat sekaligus, berbanding hanya menetapkan sifat tertentu secara individu.

Contoh menetapkan semula kepada nilai asal 

1.all-initial {
2    all: initial;
3    background-color: lightskyblue;
4}

  • Apabila anda ingin menetapkan semula semua gaya yang sebelumnya ditetapkan untuk elemen tertentu dan mengembalikannya ke keadaan asal, gunakan all: initial seperti ini.

  • Dalam contoh ini, semua sifat elemen <div> dengan kelas .all-initial ditetapkan semula kepada nilai asal lalai pelayar.

Contoh Pewarisan 

 1.parent-inherit {
 2    color: blue;
 3    font-size: 20px;
 4    border: 1px solid blue;
 5}
 6
 7.all-inherit {
 8    all: inherit;
 9    background-color: lightskyblue;
10}
  • Menggunakan all: inherit membuatkan semua sifat diwarisi dari elemen induk.
  • Dalam contoh ini, elemen dengan kelas .all-inherit mewarisi semua sifat, seperti color dan font-size, daripada elemen induk.

Contoh Menentukan Nilai Awal atau Pewarisan Berdasarkan Syarat 

 1.parent-unset {
 2    color: blue;
 3}
 4
 5.all-unset {
 6    font-weight: bold;
 7}
 8
 9.all-unset {
10    all: unset;
11}
  • Menggunakan all: unset menyebabkan sifat diwarisi jika ia boleh diwarisi; jika tidak, ia akan ditetapkan semula ke nilai asalnya.
  • Dalam kes ini, color diwarisi, manakala font-weight ditetapkan semula ke nilai asalnya, biasanya normal.

Hubungan dengan Kekhususan (Keutamaan) 

1.all-with-important {
2    color: red !important;
3    background-color: lightskyblue;
4}
5
6.all-with-important {
7    all: initial;
8}

  • Sifat all ialah mekanisme tetapan semula yang kuat, tetapi ia dipengaruhi oleh kekhususan CSS. Jika elemen tertentu mempunyai spesifikasi gaya yang kuat, sifat all mungkin tidak dapat menggantikan gaya tersebut. Sebagai contoh, sifat yang dinyatakan dengan !important tidak boleh terjejas.

  • Dalam contoh ini, walaupun anda cuba menetapkan semula gaya dengan all: initial, sifat color tidak akan ditetapkan semula kerana spesifikasi color: red !important.

Elemen peringkat blok dan elemen sebaris

Elemen peringkat blok

  • Contoh: <div>, <p>, <h1> 〜 <h6>, <ul>, <li>, <section>
  • Ciri-ciri:
    • Ia sentiasa muncul pada baris baharu dan berkembang untuk memenuhi lebar penuh elemen induk mereka.
    • Lebar (width) dan tinggi (height) boleh ditetapkan dengan bebas.
    • Margin (margin) dan padding (padding) boleh ditetapkan mengikut semua arah dan akan mempengaruhi semua sisi.
1div {
2    width: 80%;  /* Set the width to 80% of its parent element's width */
3    padding: 20px;  /* Add a padding of 20 pixels on all sides */
4    margin: 10px 0; /* Add a margin of 10 pixels top and bottom, 0 pixels left and right */
5}

Elemen sebaris

  • Contoh: <span>, <a>, <strong>, <em>, <img>, <label>
  • Ciri-ciri:
    • Mereka muncul bersama elemen sebaris lain pada garisan yang sama.
    • Lebar (width) dan tinggi (height) tidak boleh ditetapkan secara langsung (kecuali jika display: block diterapkan).
    • Penetapan margin (margin) atau padding (padding) secara menegak mempunyai kesan terhad (margin dan padding mendatar adalah berkesan).
1a {
2    padding: 5px;  /* Padding for inline elements */
3    margin-right: 10px;  /* Set margin to the right */
4    color: blue;
5}

Perbezaan antara elemen peringkat blok dan elemen dalam talian

  • Tetapan lebar dan tinggi:

    • Elemen tahap blok: Lebar dan tinggi boleh ditetapkan.
    • Elemen sebaris: Lebar dan tinggi biasanya tidak boleh ditetapkan.

  • Margin dan Padding:

    • Elemen tahap blok: Margin dan padding diterapkan pada semua sisi.
    • Elemen sebaris: Margin dan padding di bahagian atas dan bawah tidak berkesan atau mempunyai kesan terhad.

  • Kaedah Susun Atur:

    • Elemen tahap blok: Diletakkan secara automatik pada garisan baharu.
    • Elemen sebaris: Dijajarkan pada garisan yang sama dengan elemen sebaris lain.

Seperti yang anda lihat, terdapat perbezaan dalam cara gaya CSS digunakan pada elemen tahap blok dan elemen sebaris. Dalam elemen tahap blok, sifat CSS berkaitan tata letak seperti lebar, tinggi, margin, dan padding digunakan seperti yang ditentukan. Sebaliknya, untuk elemen sebaris, penetapan sifat CSS berkaitan susun atur seperti lebar, tinggi, margin, atau padding mungkin tidak diterapkan atau mungkin diterapkan secara terhad.

Pengurusan CSS untuk elemen tahap blok dan sebaris 

1span {
2    display: block;  /* Display the span element as a block-level element */
3    width: 100px;
4    height: 50px;
5}

Walau bagaimanapun, dengan menetapkan sifat display kepada block atau inline-block, anda boleh menyesuaikan gaya seperti lebar dan tinggi untuk elemen sebaris seolah-olah ia adalah elemen blok.

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

YouTube Video

Asas CSSButiran Pemilih Atribut dalam CSS