Articles
CSS'e Giriş
CSS'de Kalıtım

CSS'de Kalıtım

Bu makale, CSS'de kalıtımı açıklar.

Temsilci miras alınan ve alınmayan özellikleri kontrol edebilirsiniz.

YouTube Video

Önizleme için HTML

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>

CSS'de Kalıtım

CSS'de bazı özellikler, üst elementlerden alt elementlere otomatik olarak devralınır. Bu yararlı bir mekanizmadır, çünkü bir özelliği bir kez ayarladığınızda, alt öğeler de aynı stile sahip olur ve tekrar tekrar ayarlamanıza gerek kalmaz. Ancak, tüm özellikler devralınmaz; bazı özellikler devralınırken, diğerleri devralınmaz. Örneğin, color ve font-family devralınırken, margin ve padding gibi kutu modeli özellikleri devralınmaz.

Devralınan Özellikler

Devralınabilir özellikler genellikle metin ve yazı tipleriyle ilgilidir.

Genellikle devralınan özellikler

  1. color: Metin Rengi
1body {
2    color: black;
3}
  • Bu durumda, body içindeki tüm alt öğeler siyah metin rengine sahip olur.
  1. font-family: Yazı Tipi Ailesi
1body {
2    font-family: "Times New Roman", cursive;
3}
  • Tüm alt öğeler Arial yazı tipini kullanır.
  1. font-size: Metin Boyutu
1body {
2    font-size: 16px;
3}
  • body içindeki tüm metinler varsayılan olarak 16px olur.
  1. line-height: Satır Aralığı
1p {
2    line-height: 1.5;
3}
  • <p> elemanı içindeki metin 1.5 kat satır yüksekliği ile görüntülenir ve bu alt öğeleri de etkiler.
  1. text-align: Metin Hizalaması
1div {
2    text-align: center;
3}
  • div elemanı içindeki metin ve satır-içi öğeler ortalanmış olarak görüntülenir.
  1. visibility: Öğe görünürlüğü
1div {
2    visibility: hidden;
3}
  • visibility, bir öğenin görünürlüğünü kontrol eden bir özelliktir. Gizli olarak ayarlandığında, öğe görünmez olur.
  • Bu durumda, div içindeki alt öğeler de gizlenecektir.
  1. list-style: Liste stili (<ul> ve <ol> için liste işaretçileri)
1ul {
2    list-style: square;
3}
  • Bu durumda, ul etiketindeki liste öğeleri kare işaretlerle görüntülenecektir.

Örnek:

Miras alınmayan özellikler

Düzen ve kutu modeli ile ilgili özellikler genellikle miras alınmaz. Bu özelliklerin her bir öğe için ayrı ayrı ayarlanması gerekir.

Yaygın Miras Alınmayan Özellikler

  1. margin, padding: Bir öğenin dış ve iç kenar boşlukları
1div {
2    margin: 10px;
3    padding: 20px;
4}
  • div öğesi için dış veya iç kenar boşluklarını ayarlasanız bile, bu alt öğeleri etkilemez.
  1. border: Öğe kenarlığı
1div {
2    border: 1px solid black;
3}
  • Bir üst öğeye kenarlık ayarlansa bile, bu alt öğeleri etkilemez.
  1. width, height: Öğe genişliği ve yüksekliği
1div {
2    width: 100px;
3    height: 50px;
4}
  • Bir üst öğenin genişliği ve yüksekliği, alt öğeleri otomatik olarak etkilemez.
  1. background: Arka plan stili
1body {
2    background-color: lightblue;
3}
  • Body öğesinde ayarlanan arka plan rengi, alt öğeleri doğrudan etkilemez. Ancak, bir alt öğe şeffaf bir arka plana sahipse, üst öğenin arka plan rengi bu öğe aracılığıyla görülebilir.

Örnek:

Miras kontrolü

Miras, inherit, initial veya unset anahtar kelimeleri kullanılarak kontrol edilebilir.

  • Mirası etkinleştirmek istiyorsanız: inherit anahtar kelimesini kullanarak mirası açıkça zorlayabilirsiniz.
1div {
2    color: inherit;  /* Inherit the color from its parent element */
3}
  • Miras istemiyorsanız: Özelliği initial veya unset anahtar kelimelerini kullanarak başlangıç değerine sıfırlayabilirsiniz.
1p {
2    color: initial;  /* Reset the color to its initial/default value */
3}

Örnek:

all özelliği

all özelliği, belirli bir öğe için miras alınabilenler dahil, neredeyse tüm CSS özelliklerini bir kerede sıfırlayabilen bir özelliktir. Özellikle bir öğenin özelliklerini ayarlamak için aşağıdaki üç anahtar kelimeyi kullanabilirsiniz:.

  • initial: Tüm özellikleri başlangıç değerlerine sıfırlar.
  • inherit: Tüm özellikleri üst öğeden miras alır.
  • unset: Özellik miras alınabilirse miras alır, aksi takdirde başlangıç değerine sıfırlar.

Yalnızca belirli özellikleri bireysel olarak ayarlamak yerine, birden çok özelliği toplu olarak sıfırlamak veya ayarlamak istediğinizde all çok kullanışlıdır.

Başlangıç değerlerine sıfırlama örneği 

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

  • Belirli bir öğe için önceden ayarlanmış tüm stilleri sıfırlayıp başlangıç durumuna döndürmek istediğinizde, şu şekilde all: initial kullanabilirsiniz.

  • Bu örnekte, .all-initial sınıfına sahip <div> öğesinin tüm özellikleri tarayıcının varsayılan başlangıç değerlerine sıfırlanır.

Miras örneği 

 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}
  • all: inherit kullanmak, tüm özellikleri üst öğeden miras alır hale getirir.
  • Bu örnekte, .all-inherit sınıfına sahip öğeler, color ve font-size gibi tüm özellikleri üst öğeden miras alır.

Koşullara göre Başlangıç Değeri veya Mirası Belirleme Örneği 

 1.parent-unset {
 2    color: blue;
 3}
 4
 5.all-unset {
 6    font-weight: bold;
 7}
 8
 9.all-unset {
10    all: unset;
11}
  • all: unset kullanımı, özelliklerin miras alınabilirse miras alınmasını sağlar; aksi takdirde başlangıç değerlerine sıfırlanır.
  • Bu durumda, color miras alınır, font-weight ise genellikle normal olan başlangıç değerine sıfırlanır.

Özgüllük (Öncelik) ile İlişki 

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

  • all özelliği güçlü bir sıfırlama mekanizmasıdır, ancak CSS özgüllüğünden etkilenir. Belirli bir öğenin güçlü stil spesifikasyonları varsa, all özelliği bu stilleri geçersiz kılmayabilir. Örneğin, !important ile belirtilen özellikler etkilenmez.

  • Bu örnekte, all: initial ile stili sıfırlamaya çalışsanız bile, color: red !important spesifikasyonu nedeniyle color özelliği sıfırlanmaz.

Blok düzeyinde ve satır içi öğeler

Blok düzeyindeki öğeler

  • Örnek: <div>, <p>, <h1> 〜 <h6>, <ul>, <li>, <section>
  • Özellikler:
    • Her zaman yeni bir satırda görünürler ve üst öğelerinin tam genişliğini dolduracak şekilde genişlerler.
    • Genişlik (width) ve yükseklik (height) serbestçe ayarlanabilir.
    • Kenarlıklar (margin) ve dolgu (padding) her yönde ayarlanabilir ve tüm kenarları etkiler.
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}

Satır içi öğeler

  • Örnek: <span>, <a>, <strong>, <em>, <img>, <label>
  • Özellikler:
    • Aynı satırdaki diğer satır içi öğelerin yanında görünürler.
    • Genişlik (width) ve yükseklik (height) doğrudan ayarlanamaz (display: block uygulanmadıkça).
    • Kenarlıklar (margin) veya dolgu (padding) dikey olarak ayarlandığında etkisi sınırlıdır (yatay kenarlıklar ve dolgular etkilidir).
1a {
2    padding: 5px;  /* Padding for inline elements */
3    margin-right: 10px;  /* Set margin to the right */
4    color: blue;
5}

Blok düzey öğeler ile satır içi öğeler arasındaki farklar

  • Genişlik ve yükseklik ayarları:

    • Blok düzeyindeki öğeler: Genişlik ve yükseklik ayarlanabilir.
    • Satır içi öğeler: Genişlik ve yükseklik genellikle ayarlanamaz.

  • Kenar Boşluğu ve Dolgu:

    • Blok düzeyindeki öğeler: Kenar boşluğu ve dolgu tüm kenarlara uygulanır.
    • Satır içi öğeler: Üst ve alt kenar boşluğu ve dolgular etkisiz veya sınırlı bir etkiye sahiptir.

  • Düzen Yöntemi:

    • Blok düzeyindeki öğeler: Otomatik olarak yeni bir satıra yerleştirilir.
    • Satır içi öğeler: Diğer satır içi öğelerle aynı satırda hizalanır.

Görüldüğü gibi, blok düzeyindeki öğelere ve satır içi öğelere CSS stillerinin nasıl uygulandığı arasında farklılıklar vardır. Blok düzeyindeki öğelerde genişlik, yükseklik, kenar boşluğu ve dolgu gibi düzenle ilgili CSS özellikleri belirtildiği şekilde uygulanır. Öte yandan, satır içi öğeler için genişlik, yükseklik, kenar boşluğu veya dolgu gibi düzenle ilgili CSS özelliklerinin ayarlanması uygulanamayabilir veya sınırlı bir şekilde uygulanabilir.

Blok düzeyindeki ve satır içi öğelerin CSS ile yönetimi 

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

Bununla birlikte, display özelliğini block veya inline-block olarak ayarlayarak, satır içi öğelerin genişlik ve yükseklik gibi stillerini tıpkı blok öğeler gibi düzenleyebilirsiniz.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

CSS TemelleriCSS'teki Özellik Seçicilerinin Detayları