Articles
Panimula sa CSS
Pamana sa CSS

Pamana sa CSS

Ang artikulong ito ay nagpapaliwanag ng inheritance sa CSS.

Maaari mong suriin ang mga karaniwang minana at hindi minanang mga katangian.

YouTube Video

HTML para sa Preview

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>

Pamana sa CSS

Sa CSS, ang ilang katangian ay awtomatikong minamana mula sa mga elemento ng magulang patungo sa mga elemento ng anak. Ito ay isang kapaki-pakinabang na mekanismo dahil kapag nakatakda ka na ng isang partikular na katangian, ang mga elemento ng anak ay magkakaroon din ng parehong estilo, na nag-aalis ng pangangailangan na itakda ito nang paulit-ulit. Gayunpaman, hindi lahat ng katangian ay minamana; ang ilang katangian ay minamana habang ang iba naman ay hindi. Halimbawa, ang color at font-family ay minamana, ngunit ang mga katangian ng box model tulad ng margin at padding ay hindi.

Namamanang mga Katangian

Ang mga namamanang katangian ay pangunahing may kinalaman sa teksto at mga font.

Karaniwang namamanang mga katangian

  1. color: Kulay ng Teksto
1body {
2    color: black;
3}
  • Sa kasong ito, lahat ng mga elemento ng anak sa loob ng body ay magkakaroon ng itim na kulay ng teksto.
  1. font-family: Pamilya ng Font
1body {
2    font-family: "Times New Roman", cursive;
3}
  • Lahat ng elemento ng anak ay gumagamit ng font na Arial.
  1. font-size: Laki ng Teksto
1body {
2    font-size: 16px;
3}
  • Lahat ng teksto sa loob ng body ay magiging 16px bilang default.
  1. line-height: Espasyo sa Linya
1p {
2    line-height: 1.5;
3}
  • Ang teksto sa loob ng isang <p> na elemento ay ipapakita na may 1.5 beses na taas ng linya, na apektado rin ang mga elemento ng anak nito.
  1. text-align: Pagkaka-ayos ng Teksto
1div {
2    text-align: center;
3}
  • Ang teksto at inline na elemento sa loob ng isang div na elemento ay ipinapakita na gitnang-gitna.
  1. visibility: Kakayahang Makita ng Elemento
1div {
2    visibility: hidden;
3}
  • Ang visibility ay isang katangian na kumokontrol sa visibility ng isang elemento. Kapag itinakda sa nakatago, ang elemento ay nagiging hindi nakikita.
  • Sa kasong ito, ang mga elemento ng bata sa loob ng div ay magiging nakatago din.
  1. list-style: Estilo ng Listahan (mga marka ng listahan para sa <ul> at <ol>)
1ul {
2    list-style: square;
3}
  • Sa kasong ito, ang mga item sa listahan sa loob ng ul tag ay ipapakita na may mga parisukat na marka.

Halimbawa:

Mga Katangiang Hindi Namamana

Ang mga katangian na may kaugnayan sa layout at ang modelo ng kahon ay karaniwan nang hindi namamana. Ang mga katangiang ito ay kailangang itakda ng isa-isa para sa bawat elemento.

Karaniwang Mga Katangiang Hindi Namamana

  1. margin, padding: Panlabas at panloob na mga margin ng isang elemento
1div {
2    margin: 10px;
3    padding: 20px;
4}
  • Kahit magtakda ng panlabas o panloob na mga margin para sa isang div na elemento, hindi ito nakakaapekto sa mga child na elemento nito.
  1. border: Hangganan ng elemento
1div {
2    border: 1px solid black;
3}
  • Kahit magtakda ng border sa isang parent na elemento, hindi ito nakakaapekto sa mga child na elemento.
  1. width, height: Lapad at taas ng elemento
1div {
2    width: 100px;
3    height: 50px;
4}
  • Ang lapad at taas ng isang parent na elemento ay hindi awtomatikong nakakaapekto sa mga child na elemento.
  1. background: Estilo ng background
1body {
2    background-color: lightblue;
3}
  • Ang kulay ng background na itinakda sa body ay hindi direktang nakakaapekto sa mga child na elemento. Gayunpaman, kung ang isang child na elemento ay may transparent na background, ang kulay ng background ng parent na elemento ay maaaring makita sa pamamagitan nito.

Halimbawa:

Pag-kontrol sa pagmamana

Ang pamamana ay maaaring kontrolin gamit ang inherit, initial, o unset na mga keyword.

  • Kung nais mong paganahin ang inheritance: Maaari mong tahasang pilitin ang inheritance gamit ang inherit na keyword.
1div {
2    color: inherit;  /* Inherit the color from its parent element */
3}
  • Kung ayaw mo ng inheritance: Maaari mong i-reset ang katangian sa orihinal nitong halaga gamit ang initial o unset na mga keyword.
1p {
2    color: initial;  /* Reset the color to its initial/default value */
3}

Halimbawa:

Ang property na all

Ang katangiang all ay isang katangian na maaaring i-reset halos lahat ng CSS properties, kabilang ang mga pwedeng mamana, para sa isang tiyak na elemento nang sabay-sabay. Partikular, maaari mong gamitin ang sumusunod na tatlong mga keyword upang itakda ang mga katangian ng isang elemento:.

  • initial: Ire-reset lahat ng katangian sa kanilang orihinal na halaga.
  • inherit: Ipinapamana lahat ng katangian mula sa parent na elemento.
  • unset: Ipinapamana ang katangian kung ito ay maaaring mamana, kung hindi, ire-reset sa orihinal nitong halaga.

Ang all ay napaka-kapaki-pakinabang kung nais mong i-reset o itakda ang maraming katangian nang sabay-sabay, sa halip na isa-isang itakda ang mga katangian.

Halimbawa ng pag-reset sa orihinal na mga halaga 

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

  • Kung nais mong i-reset ang lahat ng dati nang naitakdang styles para sa isang tiyak na elemento at ibalik ito sa orihinal nitong estado, gumamit ng all: initial tulad nito.

  • Sa halimbawa na ito, lahat ng katangian ng <div> na elemento na may .all-initial na klase ay nare-reset sa orihinal na halaga ng browser.

Halimbawa ng Mana 

 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}
  • Ang paggamit ng all: inherit ay ipinapamana lahat ng katangian mula sa parent na elemento.
  • Sa halimbawa na ito, ang mga elemento na may .all-inherit na klase ay ipinapamana lahat ng katangian, tulad ng color at font-size, mula sa parent na elemento.

Halimbawa ng Pagpapasiya ng Paunang Halaga o Pamana Batay sa mga Kondisyon 

 1.parent-unset {
 2    color: blue;
 3}
 4
 5.all-unset {
 6    font-weight: bold;
 7}
 8
 9.all-unset {
10    all: unset;
11}
  • Ang paggamit ng all: unset ay nagiging sanhi na ang mga katangian ay mamamana kung maaari; kung hindi, ire-reset ito sa orihinal nitong halaga.
  • Sa kasong ito, ang color ay namamana, habang ang font-weight ay ire-reset sa orihinal nitong halaga, kadalasang normal.

Relacion sa Espesipisidad (Prayoridad) 

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

  • Ang katangiang all ay isang makapangyarihang mekanismo ng pag-reset, ngunit naaapektuhan ito ng specificity ng CSS. Kung ang isang tiyak na elemento ay may malalakas na style specifications, maaaring hindi kayang lampasan ng katangiang all ang mga estilo na iyon. Halimbawa, ang mga katangian na tinukoy gamit ang !important ay hindi maaaring maapektuhan.

  • Sa halimbawa na ito, kahit subukan mong i-reset ang istilo gamit ang all: initial, ang color na katangian ay hindi mare-reset dahil sa color: red !important na espesipikasyon.

Mga elementong block-level at mga elementong inline

Mga elementong block-level

  • Halimbawa: <div>, <p>, <h1> 〜 <h6>, <ul>, <li>, <section>
  • Katangian:
    • Palagi silang lumalabas sa isang bagong linya at umaabot upang punan ang buong lapad ng kanilang parent na elemento.
    • Ang lapad (width) at taas (height) ay maaaring malayang itakda.
    • Ang mga margin (margin) at padding (padding) ay maaaring itakda sa lahat ng direksyon at maaapektuhan ang lahat ng gilid.
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}

Mga elementong inline

  • Halimbawa: <span>, <a>, <strong>, <em>, <img>, <label>
  • Katangian:
    • Lumilitaw ang mga ito kasabay ng iba pang inline na element sa parehong linya.
    • Ang lapad (width) at taas (height) ay hindi maaaring direktang itakda (maliban kung ang display: block ay gagamitin).
    • Ang pagtatakda ng mga margin (margin) o padding (padding) sa patayo ay may limitadong epekto (epektibo ang mga margin at padding nang pahalang).
1a {
2    padding: 5px;  /* Padding for inline elements */
3    margin-right: 10px;  /* Set margin to the right */
4    color: blue;
5}

Mga pagkakaiba sa pagitan ng block-level na mga elemento at inline na mga elemento

  • Mga setting ng lapad at taas:

    • Mga element na block-level: Maaaring itakda ang lapad at taas.
    • Mga element na inline: Karaniwan ay hindi maaaring itakda ang lapad at taas.

  • Margin at Padding:

    • Mga element na block-level: Ang margin at padding ay inilalapat sa lahat ng gilid.
    • Mga element na inline: Ang margin at padding sa itaas at ibaba ay hindi epektibo o may limitadong epekto.

  • Pamamaraan ng Layout:

    • Mga element na block-level: Awtomatikong inilalagay sa isang bagong linya.
    • Mga element na inline: Naka-align sa parehong linya kasama ang iba pang inline na element.

Tulad ng makikita mo, may mga pagkakaiba sa kung paano inilalapat ang mga estilo ng CSS sa mga block-level na elemento at inline na mga elemento. Sa mga block-level na elemento, ang mga CSS na katangian nauugnay sa layout tulad ng lapad, taas, margin, at padding ay inilalapat ayon sa tinukoy. Sa kabilang banda, para sa mga inline na element, ang pagtatakda ng mga layout-related na properties ng CSS tulad ng lapad, taas, margin, o padding ay maaaring hindi mailapat o mailapat nang may limitasyon.

Pag-handle ng CSS sa block-level at inline na elemento 

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

Gayunpaman, sa pamamagitan ng pagtatakda ng display property sa block o inline-block, maaari mong i-adjust ang mga estilo tulad ng lapad at taas para sa mga inline na element na parang mga block na element.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Mga Batayan ng CSSMga Detalye ng mga Attribute Selector sa CSS