CSS ile HTML Elementlerine Müdahale Etmek

by trustix


Eklenme Tarihi : 11 Aralık 2020 15:51 Views:     343



Merhaba arkadaşlar. Bir HTML elementine CSS ile müdahale etmenin, elementi şekillendirmenin birçok farklı yolu var. Burada üzerinde duracağımız nokta bir HTML elementine en temel olarak nasıl müdahale edebiliriz ya da şekillendirebiliriz bunun üzerinde durmak. 

Öncelikle HTML'de element yapısına bakalım. HTML'de element ifadesi, belli bir amacı olan ve standart olarak bu amaç için kullanılan önceden tanımlanmış kodları tanımlar. Bir paragraf için HTML'de <p> </p> etiketi/elementi kullanılırken bir başlık için <h1> </h1> etiketi/elementi kullanılmaktadır.

Bir örnek üzerinden incelemeye çalışalım.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Test</title>

    <!--
        CSS ile HTML elementine direkt element adı
        belirtilerek müdahale edilebilir.
        Burada dahili CSS kullanarak
        paragrafı mavi renk ve kalın font olacak
        şekide ayarlamak için p elementinin
        style etiketlerinin arasında olduğu gibi kullanabiliriz.
        Ancak unutulmaması gereken nokta şudur. Eğer elementin
        adı ile müdahale edilirse bu sayfadaki bütün elementlere
        aynı CSS kodlarını uygulayacaktır.
        Yani bu sayfada kaç tane p elementi varsa 
        hepsi mavi ve kalın olacaktır.
    -->
<style>
    p{
        color:blue;
        font-weight: bold;
    }
</style>

</head>
<body>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore illum, distinctio facilis dignissimos quae minus ducimus architecto reprehenderit tempore quos veritatis ratione consequatur deserunt iure nam assumenda, consectetur nesciunt voluptatem!
        Omnis saepe placeat asperiores illum provident. Quia consequuntur aspernatur asperiores nobis illo exercitationem cumque velit, cupiditate eum alias nesciunt quod illum similique omnis reprehenderit iusto rem? Est sapiente dolor ullam.
        Nemo asperiores obcaecati, voluptatem, ratione porro beatae nostrum quibusdam tenetur, doloribus enim ex voluptate illo ea temporibus. Possimus iusto expedita nobis commodi eum debitis, dignissimos velit dolore reprehenderit quia ad?
        Vel non doloribus nihil doloremque, velit veniam architecto et animi reiciendis, ullam, labore praesentium soluta repellendus quibusdam deserunt aliquid cumque? Quas aliquam placeat in neque. Nobis illo debitis eveniet maxime!
        Blanditiis distinctio animi dolor porro deserunt cum. Voluptate ullam, aliquam, nesciunt dolorem sunt accusamus repudiandae deserunt temporibus aperiam, libero amet inventore repellat eos voluptatum totam eius autem illo! At, sunt.
        Ut a veritatis, obcaecati eum iusto doloremque cupiditate deleniti tempore nam modi, hic eos ex est laboriosam perferendis odit omnis blanditiis adipisci impedit id perspiciatis ipsam? Delectus accusamus recusandae qui.
        Vel perferendis dicta, id vero error ipsa molestiae animi eius dolorum ducimus, ad ullam ut ex dolores, fugit distinctio esse quia facilis ab exercitationem eligendi! Sed vitae molestias ad corporis.</p>
  
</body>
</html>

 

Yukarıdaki örnekte dahili CSS kullanarak HTML'deki <p> </p> elementine mavi renk ve kalınlık verdik. Bu durumda renk ve kalınlık bütün sayfadaki HTML elementlerine aynı şekilde uygulanacaktır.

 

Şimdi biraz daha detaylı örnek üzerinde çalışalım ve HTML elementlerine 'class' adını verdiğimiz sınıf yapısı ile müdahale edelim.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Test</title>

    <!--
        Her HTML elementine class özniteliğini kullanarak
        farklı bir sınıf adı belirttik.
        Bu şekilde her elemente ayrı ayrı müdahale etme
        ve şekillendirme imkanına sahip oluyoruz.

    -->
<style>
    .b1{
        color:red;
    }
    .b2{
        color:blue;
    }
    .b3 {
        color:blueviolet;
    }
</style>

</head>
<body>
    <!--Aşağıdaki h1 elementlerine görüldüğü gibi farklı class isimleri verdik.-->
        <h1 class="b1">Merhaba</h1>
        <h1 class="b2">Sayın</h1>
        <h1 class="b3">Seyirciler</h1>
</body>
</html>

 

Output: 

 

Bir HTML elementine CSS ile direkt adı ile daha sonra class değeri ile nasıl müdahale edilir bunları inceledik. Şimdi de üçüncü seçenek olan ID değeri ile müdahale etmeyi inceleyelim.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Test</title>

    <!--
        Her HTML elementine id özniteliğini kullanarak
        farklı bir id adı belirttik.
        Bu şekilde her elemente ayrı ayrı müdahale etme
        ve şekillendirme imkanına sahip oluyoruz.


        Burada dikkat edilmesi gereken noktalar şunlardır.

        1- Direkt HTML elementine adı ile müdahale edeceksek herhangi bir ön ek kullanmıyoruz.
        2- Class adı ile müdahale edeceksek . işaretini CSS tanımlamasında bir ön ek olarak kullanıyoruz.
        3- ID değeri ile müdahale edeceksek # işaretini CSS tanımlamamızda kullanıyoruz.

    -->
<style>

    /*
        Burada id değeri ile eriştiğimiz için
        id değerini yazmadan önce # işareti koyuyoruz: Daha sonra id değerimizi yazıyoruz. 
        Eğer class değeri ile müdahale ediyor olsaydık bir önceki örnekte olduğu gibi
        öncesinden nokta(.) işareti koymalıydık. 
    
    */
    #b1{
        color:tomato;
    }
    #b2{
        color:mediumseagreen;
    }
    #b3 {
        color:salmon;
    }
</style>

</head>
<body>
    <!--Aşağıdaki h1 elementlerine görüldüğü gibi farklı id isimleri verdik.-->
        <h1 id="b1">Merhaba</h1>
        <h1 id="b2">Sayın</h1>
        <h1 id="b3">Seyirciler</h1>
</body>
</html>

 

Output: 

 

Evet arkadaşlar. CSS ile HTML elementlerine nasıl müdahale edilir sorusuna cevap bulmaya çalıştık. Yukarıdaki örneklerde görüldüğü gibi bunun birden fazla yolu bulunmaktadır. Hangisi daha kullanışlıdır bu yöntemlerden hangisi duruma göre tercih edilir zaman içinde bunları daha iyi detaylandırmaya çalışacağız.

Herkese İyi Kodlamalar




Önceki İçerik

Sonraki İçerik


0

Yorum Formu

vikikod.com    © 2019