Web Programlama

Web Programlama

DERS PROGRAMI
Web Programlama 201 Ders Programı
Sınava Gir

CSS Kodlarını Ekleme Yöntemleri

Lisans: Creative Commons 11.12.2020 tarihinde güncellendi
Bakabileceğiniz Etiketler: Eğitmen: Geleceği Yazanlar Ekibi

Bir biçim (style) sayfasını eklemenin üç farklı yolu mevcuttur: Dış stil sayfası (External Style Sheet), İç stil sayfası (Internal Style Sheet), Çevrimiçi (Inline) stil.

 

Dış Stil Sayfası

Stil çok sayıda sayfaya uygulanacaksa, dış stil sayfası kullanmak uygun bir yöntemdir. Dış stil sayfasıyla, bütün web sayfasının görünümünü sadece bir tek dosyayla oynayarak gerçekleştirebilirsiniz. Her sayfa, <link> etiketiyle, stil sayfasına gönderen bir bağlantı içermelidir; <link> etiketi head bölümünün içinde olmalıdır.

<head>

<link rel="stylesheet" type="text/css" href="stil.css">

</head>

Dış stil sayfası herhangi bir metin düzenleyicisinde (text editor) yazılabilir. CSS dosyası herhangi bir HTML etiketi içermemelidir ve .css uzantısı ile saklanmalıdır.

"stil.css":

body {
    background-color: lightgreen;
}

h1 {
    color: red;
    padding-left: 15px;
}

 

İç Stil Sayfası

Bir iç stil sayfası, tek bir belgenin kendine özgü tek bir biçimde stil tanımı olacaksa kullanılmalıdır. İç stiller, HTML sayfasının head kısmında yer almalıdır. Burada <style> etiketi içine yerleştirilir.

<head>

<style>
body {
    background-color: white;
}

h1 {
    color: blue;
    padding-left: 30px;
}
</style>
</head>
<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background-color: white;
            }

        h1 {
            color: blue;
            padding-left: 30px;
        }

        </style>
    </head>

    <body>
        <h1>BASLIK-STIL TANIMI VAR</h1>
        <p>PARAGRAF-STIL TANIMI YOK</p>
    </body>
</html>

 

Inline Stiller

Bu yöntem CSS dosyalarının avantajını ortadan kaldıran bir yöntemdir; içerik ile stil karıştırılır. Bu nedenle kullanılması tavsiye edilmez.

<h1 style="color:red;padding-left:40px;">BASLIK </h1>

 

Çoklu Stil Sayfaları (Multiple Style Sheets)

Şayet bazı özellikler aynı seçici için farklı stil sayfalarına yerleştirilmişse, değerler en özel stile göre oluşturulur. Örneğin, h1 seçicisi için aşağıdaki özellikler bir dış stil sayfasına yüklenmiş olsun:

h1 {
    color: green;
    padding-left: 30px;
}

Ayrıca, bir iç stil sayfası da h1 için aşağıdaki atamaları yapmış olsun:

h1 {
    color: blue;   
}

Şayet iç stil sayfası olan web sayfası aynı zamanda dış stil sayfasına bağlantı veriyorsa, h1 elemanına atama aşağıdaki gibi olacaktır:

color: blue;
padding-left: 30px;

Sol marjin dış stil sayfasından, renk iç stil sayfasından miras alınır.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="stil.css">
            <style>
                h1 {
                    color: navy;
                }
            </style>
    </head>
    <body>
        <h1>BASLIK</h1>
        <p>DIS-IC STIL KOMBINASYONU</p>
    </body>
</html>

 

Farklı ortamlarda tanımlanan stil özelliklerinin önceliği

Stiller,

  • Bir HTML5 elemanının içinde,
  • Bir HTML5 sayfasının başlığı içinde,
  • Bir dış CSS dosyasında tanımlanabilir.

Burada önemli soru şudur: Bir HTML elemanında birden fazla stil tanımlanmışsa hangi stil kullanılacaktır? Bu konuda aşağıdaki sırayı bilmek önemlidir:

  1. Web tarayıcı varsayılan arama.
  2. Dış stil sayfası
  3. İç stil sayfası (head bölümü içinde)
  4. Inline stil. (HTML elemanı içinde)

Sonuçta, inline stil (HTML elemanı içinde) en yüksek önceliğe sahiptir ve diğerlerinin önüne geçecektir.

Sınava Gir