Hazır Site Kodları Web Siteniz İçin Hazır Site Kodları

  • Onur YURT
  • iletisim@hazirsitekodlari.com
  • 57

    Makale

  • 3

    Yorum

  • 8

    Kategori

Webmaster adına tüm bilgi ve paylaşım platformudur.

Senin Kodun

Ana Sayfa / Css / CSS Kodlarını Ekleme Yöntemleri Ders#3

CSS Kodlarını Ekleme Yöntemleri Ders#3

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.

BENZER KONULAR

Css | Kategorisine Ait Yazıların Daha Fazlası...

KONU HAKKINDA (Yorum Yapılmamış) | SENDE YORUM YAP DESTEK OL!

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

BEN KİMİM?

Onur YURT

Web Developer And Coder

Merhaba arkadaşlar Adım Onur YÜRT Bursada doğdum ve yaşıyorum 2009 yılından itibaren web hayatına adım attım ve şuanda bulunduğum sayfayı açtım amaçım sizlere birşeyler öğretmek ve kazandırmak Web tasarım konusunda kendimi yeterince geliştirdiğime inanıyorum bu bilgileri zamanla siz değerli takipçilerime sunmak yeterince bildiğim kodlama diller Css3, Html5, Javascript ve Php dir.

POPULER KONULAR

Hazır Site Kodları Web Siteniz İçin Hazır Site Kodları...