CSS tanımlama biçimleri Inline-Internal-External

21 Ekim 2020 0 Css

 

Merhaba, bu yazımızda “Css nasıl tanımlanır?”,  “Css kaç farklı şekilde tanımlanabilir?” , “Css nasıl tanımlanmalıdır?”  sorularına cevap aradık.

Css, 3 şekilde tanımlanabilir.

 

1) Satır içi (Inline CSS)

Yerel css olarak da belirtilir.  Css’in uygulanması istenen elemanın tag’leri arasına style=”css kodu“ şeklinde tanımlama yapılarak kullanılır.

<h2 style=”color:red;”> BİLİŞİM TEKNOLOJİLERİ </h2>

Yukarıdaki örnekteki yazının rengi, kırmızı olacaktır.

2) Sayfa içinde stil belirtme (HEADER STYLE) (INTERNAL CSS)

CSS kodları, <head> </head> etiketlerinin arasında <style> </style> etiketlerinin içinde tanımlanır.

<html> 
    
    <head>                               
        <style> 
            h1 {color:blue; font-size:2rem;} 
            .pbody {font-family: arial;} 
            #hellodiv {background-color:blue;}                              
        </style> 
    </head>                                            

    <body>               
        <h1> Kod90.com - Sitemize Hoşgeldiniz.< h1 >              
        <p class="pbody" > Kod90.com - Sitemize Hoşgeldiniz.<p>              
        <p class="pbody" > Kod90.com - Sitemize Hoşgeldiniz.<h1>               
        <div id="hellodiv" > Hello World </div>               
    </body>  
    
</html>

 

Bu tip tanımlamalarda elemanlar; etiketleriyle (örneğin: h1,div), id’siyle, class’ıyla (Çeviri: class-sınıf) belirtilirler.

 

3) Sayfa dışında stil belirtme (EXTERNAL CSS)

3.1) Css kodları ayrı bir dosyaya yazılır.

  • Dosyanın uzantısı ” .css” olarak olmalıdır.
  • Dosya içerisinde css’in çalışması için ek tanımlamalara gerek yoktur, düz css yazılır.

 site.css dosyası:

h1 {color:blue; font-size:2rem;}
.pbody {font-family: arial;}
#hellodiv {background-color:blue;}

 

3.2) Ayrıca tasarımın uygulanacağı sayfada link ile CSS dosyasına bağlantı verilir.

  • Bağlantı, head tag’leri arasında verilmelidir.

Tasarımın uygulanacağı sayfa; örneğin,  index.html olabilir:

<html>

    <head>
        <link rel="stylesheet" src="site.css"/>
    </head>             

    <body>
        <h1> Kod90.com - Sitemize Hoşgeldiniz.<h1>
        <p class="pbody"> Kod90.com - Sitemize Hoşgeldiniz.<p>
        <p class="pbody"> Kod90.com - Sitemize Hoşgeldiniz.<h1>
        <div id="hellodiv"> Hello World </div>
    </body>             

</html>

Sonuç:

Evet, 3 şekilde css tanımlanabildiğini gördük.

 

Peki hangisini kullanmalıyız?  hepsini kullanacağız.

Projeler; genellikle performans ve kodların okunması, rahatlıkla değiştirilebilmesi amacıyla 3. yöntem öncülüğünde (temel alınarak) oluşturulur. 

 

Örnek kullanım

1) site.css dosyasında: Genel css tanımlamaları; tüm sayfalarda olması, çalışması gereken kodlar tanımlanır.

2) Sayfaya özel tanımlamalar için ek css dosyası oluşturulur.

  • iletisim.css (contact.css)
  • anasayfa.css (home.css)

 

Tamam anladım, 1. ve 2. tanımlamalar?

1.Satır içi tanımlamalar (inline css): Etiket sitili belirttik. Örneğin tüm p etiketleri kırmızı olacak ancak sayfa içerisindeki bir p etiketi, mavi olmak istiyor.

Yani genel tanımlamalar haricinde, bir etikette değişiklik yapmak istiyorsak 1.adımı kullanabiliriz.

site.css

p {color: red;}

index.html

<html>

    <head>
        <link rel="stylesheet" src="site.css"/>
    </head>             
          
    <body>
        <h1> Kod90.com - Sitemize Hoşgeldiniz.<h1>
        <p> Ben herkes gibi olacağım. <p> <!-- Tamam, olabilir. -->
        <p style="color: blue;"> Beni mavi yap. </p> <!-- Yaptım. -->
    </body>             

</html>

 

Not: Inline tanımlama, External tanımlamaya göre önceliklidir. Yani inline (satır içi) tanımlama varsa o css kodu geçeri olur.

Tanımlamalarda Öncelik, Geçerlilik Sırası: 

    1. Inline css (Satır içi Tanımlama)
    2. Internal css (Sayfa içi tanımlama)
    3. External css (Sayfa dışı tanımlama)

 

2.Sayfa içi tanımlamalar (internal css):

Belirli bir sayfaya özgü css kodları, az ise external tanımlamaya gerek yoktur. Sayfa içerisinde css tanımlayabiliriz.

Örneğin; contact.css (iletisim.css) dosyasının, 2 adet css kodu olduğunu düşünelim. Ek dosyada tanımlamaya ne gerek var?

 

Önemli Not: Örnek verilen durumlar haricinde durumlar olabilir. İlgili durumda hangi tanımlama gerekiyorsa (sorunu çözüyor, istenileni yapabiliyor) ise o tanımlama şekli kullanılır.

 

Faydalı olması dileğiyle…

Tags: