Merhabalar, bu yazımda teorik konularımızdan biri olan CSS için Html’de Parent-Child konusuna bakacağız.

Html’de etiketler belli bir hiyerarşide yazılırlar.

Örneğin <html> etiketi Html belgesi içinde  tüm etiketler için bir Parent durumundadır.

Yine Html etiketleri içinde yazılan <head> ve <body> etiketleri ise Html’in Child’larıdır. Aynı zamanda birbirleriyle de kardeştirler.

Bu bu şekilde iç içe yazabildiğimiz kadar Parent-Child-Sibling durumu yaratılarak devam eder.

CSS yazarken de belli durumlarda sadece Parent’a uygula ya da ilgili Parent’ın Child’ına uygula ya da onun Child’lardan biri Parent kabul et onun Child’larına uygula gibi seçiciler kullanarak CSS kodlarını tam olarak nereye uygulamak istersek oraya uygulayabiliriz.

Teorik olarak bu durumdan haberdar olmanız şimdilik yeterli yeri geldiğinde kodlarla olaya bakıyor olacağız.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>Murat Bilginer</h1>

    <div>
        <div>
            <p></p>
            <p>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </p>
        </div>
    </div>
    
    
</body>
</html>

Bu gördüğümüz yapıda örneğin Html içindeki bütün li etiketlerine uygulamak istemediğim sadece div > div > p > ul > li ye uygulamak istediğim bir CSS olabilir.

Burada CSS’i uyguladığımızda kimlerin bundan etkileneceğini Parent-Child olayını kavradığımızda daha rahat anlıyoruz.

Bir sonraki yazımda görüşmek üzere.


What's Your Reaction?

love
0
love
hate
0
hate
win
0
win
geeky
0
geeky
omg
0
omg
lol
0
lol
fail
0
fail
fun
0
fun
Murat Bilginer
21 Şubat 1992'de doğdum. Endüstri Mühendisi olarak lisansımı 2016 yılında tamamladım. Industryolog Akademi - NGenius oluşumlarının kurucusuyum. Şu anda kendi şirketim Brainy Tech ile Web ve Mobil Geliştirme, AWS, Google Cloud Platform Sistemleri İçin DevOps, Big Data Analiz ve Görselleştirme hizmetleri sunmakta ve Online Eğitimler vermekteyiz.