CSS Kullanımı

CSS Nasıl Eklenir? Web sayfalarınıza Stil enjekte etme yolları nedir?

HTML sayfalarınıza CSS eklemenin birkaç farklı yolu vardır. Yani, HTML dökümanınıza CSS bildirimlerini nasıl enjekte etmeniz gerektiği ile ilgili yolları ele alacağız. Her birinin kendi avantajları ve dezavantajları vardır. Doğru yöntemi veya yöntemlerin kombinasyonunu seçmek, yapmanız gereken iş miktarını azaltabileceği gibi, ziyaretçilerin sayfalarınıza erişiminde hafif bir hız kazandıracağı için de önemlidir.

Stilleri HTML belgenize ilişkilendirmenin üç yolu vardır. Bunlar;

Satıriçi Stil (Inline style)
Dahili Stil Sayfası (Internal style sheet)
Harici Stil Sayfası (External style sheet)
İçe Aktarılan Stil Sayfası (Imported style sheet)

1- Satıriçi Stil

Stil kurallarını tanımlamak için herhangi bir HTML öğesinin style niteliğini kullanabilirsiniz . Bu kurallar yalnızca o öğeye uygulanır.

Genel Söz Dizimi;


<!DOCTYPE html>
<html>
  <head>
    <title>yazilimbilisim.net</title>
    <meta charset="utf-8">
    <meta name="description" content="CSS Dersleri">
    <meta name="keywords" content="css,html,inline">
  </head>
  <body style="background-color: aqua;">

    <h1 style="color: maroon; margin-left: 40px;">Dahili Stil Sayfası</h1>
    <p style="padding-left : 20px; font-size : 18px; color : brown;">Bu bir paragraftır.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>yazilimbilisim.net</title>

</head>

<h1 style="color: maroon; margin-left: 40px;">Dahili Stil Sayfası</h1>

<p style="padding-left : 20px; font-size : 18px; color : brown;">Bu bir paragraftır.</p>

</body>

</html>

Uygulamayı tarayıcı ile test ettiğimizde aşağıdaki gibi bir görünüm elde edilir.

Tek bir öğe için benzersiz bir stil uygulamak için satır içi stil kullanılabilir. Ancak satıriçi kullanımı, CSS ‘in sunduğu tüm avantajları neredeyse ortadan kaldırmak anlamına gelir. Muhtemelen aynı kodu tekrar tekrar yazmanızı gerektirecek durumlar ortaya çıkarabilir. Ayrıca kodunuzu okumayı zorlaştıracaktır. Bu açıdan değerlendirildiğinde kullanımı pek tavsiye edilmez!

2 – Dahili Stil Sayfası

Dahili Stil yönteminde, CSS bildirimleriniz ayrı bir dosyada bulunmaz, bunun yerine HTML belgesinin üst kısmına eklenir. CSS kurallarınızı <style> öğesini kullanarak bir HTML belgesine yerleştirebilirsiniz. Bu etiket <head> … </ head> etiketlerinin içine yerleştirilir. Bu söz dizimi kullanılarak tanımlanan kurallar, dokümanda bulunan tüm öğelere uygulanır.

Genel Sözdizimi;

index.html


<!DOCTYPE html>
<html>
  <head>
    <title>yazilimbilisim.net</title>
    <meta charset="utf-8">
    <meta name="description" content="CSS Dersleri">
    <meta name="keywords" content="css,html,link">
    <style>
      body {
         background-color: aqua;
      }
      h1 {
         color: maroon;
         margin-left: 40px;
      } 
    </style>
  </head>
  <body>

    <h1>Dahili Stil Sayfası</h1>
    <p>Bu bir paragraftır.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>yazilimbilisim.net</title>

<style>

body {

background-color: aqua;

}

h1 {

color: maroon;

margin-left: 40px;

}

</style>

</head>

<body>

<h1>Dahili Stil Sayfası</h1>

<p>Bu bir paragraftır.</p>

</body>

</html>

Uygulamayı tarayıcı ile test ettiğimizde aşağıdaki gibi bir görünüm elde edilir.

Dahili stil kullanımı, CSS’i sitenizin her sayfasına eklemek zorunda olduğunuz için ideal değildir. Genellikle tek bir sayfa eşsiz bir stile sahip olması gerektiği durumlarda dahili bir stil sayfası kullanılabilir.

3 – Harici Stil Sayfası (External Style Sheet)

CSS’yi dahil etmek için en popüler yöntemlerden biridir. Bu yöntem ile tüm CSS bildirimlerinizi harici bir dosyaya (genelde bir .css uzantılı dosya) yazdıktan sonra HTML belgenizin başlığında <head>…</head> etiketleri arasına <link> etiketi ile bağlantısı (ilişkilendirilmesi) aşağıdaki gibi yapılır.


<!DOCTYPE html>
<html>
   <head>
      <title>...<title>
      <link href="stil.css" rel="stylesheet" type="text/css" media="all">
   </head>
   <body>
   
   <body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</html>

<link> etiketi href niteliği ile birlikte, bağlanmak istediğiniz dosya için bir url yolu bildirmenizi ister. rel niteliği ile bağlanılacak linkin siteyle ilişkisi belirtilir. type niteliği dosyanın kaynağı hakkında tarayıcılara bilgi vermek için kullanılırken, media niteliğine atanan “all” değeri tüm cihazlar için geçerli olacak bir bağlantı bildirimini sağlamaktadır. Söz konusu .css uzantılı stil dosyası herhangi bir metin editöründe yazılabilir.

Gerekirse birden fazla stil sayfasına bağlanabilirsiniz. Bunu yapmak için her stil sayfası için ayrı bir bağlantı etiketi eklemelisiniz.

Örneğin;


<!DOCTYPE html>
<html>
   <head>
      <title>...<title>
      <link href="css_dosyasi1.css" rel="stylesheet" type="text/css" media="all">
      <link href="css_dosyasi2.css" rel="stylesheet" type="text/css" media="all">
      <link href="css_dosyasi3.css" rel="stylesheet" type="text/css" media="all">
   </head>
   <body>
   
   <body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</html>

Örnek bir CSS dosyasının içeriğine bir göz atalım.

stil.css


body {
    background-color : aqua;
}
h1 {
    text-decoration : underline;
    color : #4583c2;
}
p {
    padding-left : 20px;
    font-size : 18px;
    color : brown;
}

body {

background-color : aqua;

}

h1 {

text-decoration : underline;

color : #4583c2;

}

p {

padding-left : 20px;

font-size : 18px;

color : brown;

}

index.html


<!doctype html>
<html>
  <head>
    <title>yazilimbilisim.net</title>
    <meta charset="utf-8">
    <meta name="description" content="CSS Dersleri">
    <meta name="keywords" content="css,html,link">
    <link href="stil.css" rel="stylesheet">
  </head>
  <body>
    <h1>Harici Stil Sayfaları</h1>
    <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>
</body>
</html>

<!doctype html>

<html>

<head>

<title>yazilimbilisim.net</title>

</head>

<body>

<h1>Harici Stil Sayfaları</h1>

<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>

</body>

</html>

(Not: Burada stil.css dosyasının, index.html ile aynı dizinde bulunduğu varsayılmıştır. Aksi takdirde, URL’yi buna uygun olarak değiştirmeniz gerekir.)
Uygulamayı tarayıcı ile test ettiğimizde aşağıdaki gibi bir görünüm elde edilir.

Bağlı stil sayfalarını kullanmanın faydaları, tüm kurallarımızı tek bir dosyaya yazabilmemizin ardından bu dosyayı istediğimiz sayıda HTML belgesine bağlayabilmemizdir. Sonra tek bir dosyada değişiklikler yapabilir ve bu değişiklikleri tüm HTML dosyalarımızda gerçekleştiğini görebiliriz. Aynı CSS dosyanızı farklı web projelerinizde tekrar kullanabilirsiniz. Son kullanıcı için bir yararı da hız. Dış stil sayfası ilk kez indirildiğinde tarayıcı kendi önbelleğinde bir kopyasını saklayacaktır. Sonra diğer sayfaları ziyaret ettiğinizde tarayıcınız CSS kurallarının yeraldığı bu dosyayı tekrar indirmeyecektir. Diğer bir başka avantajı ise HTML bildirimleriniz ile stil bildirimlerinizin dosya olarak birbirinden ayrılmasıdır. Böylece .html uzantılı dosyalarınızda web sayfanızın mantıksal tasarımını ve içeriğini ön plana çıkarabilir, biçimlemeye yönelik bildirimlerinizi .css dosyalarınızda kontrol edebilirsiniz.

4- İçe Aktarılan Stil Sayfası

İçe aktarılan CSS ile bir CSS dosyasındaki kuralları, başka bir CSS dosyasındaki kurallarla birleştirebiliriz. Bunu yapmak için, stil sayfamızda @import anahtar kelimesini kullanıyoruz . @import, harici bir stil sayfasını <link> öğesine benzer şekilde içe aktarmak için kullanılır. İşte @import kuralının genel sözdizimi;


@import url ("stil.css") media-types;

@import url ("stil.css") media-types;

Bu satır CSS dosyasına herhangi bir kural bildiriminden önce en üste eklenmelidir.

Bir örnek inceleyelim. Burada, stil.css, daha sonra HTML dokümanına bağlanacak olan tema.css’in içine aktarılır.

stil.css


h1 {
   text-decoration: underline;
}
p {
   padding-left: 20px;
   font-size: 18px;
}

h1 {

text-decoration: underline;

}

p {

padding-left: 20px;

font-size: 18px;

}

tema.css


@import url("stil.css");
h2 {
   color: #4583c2;
}

@import url("stil.css");

h2 {

color: #4583c2;

}

İçe aktarma, CSS’nin HTML sayfalarımıza nasıl uygulandığına dair daha hassas kontrol elde etmek için yararlı olabilir. Web projelerinde büyük olasılıkla tüm sayfalarda genel stillerin uygulanmasını isteriz. Ancak bazı durumlarda projenin belirli bölümlerinin kendi özel stil düzenine sahip olması gerekebilir. Bunu yapmanın en iyi yolu, CSS dosyasını parçalara bölmek olacaktır. Genel olarak tüm ana stilleri içeren bir dosya oluşturduktan sonra, söz konusu belirli bölümler için özel CSS kurallar tanımlayan diğer stil dosyaları yaratılır. Ardından ana stil dosyası, bölümler için oluşturulan alt stil dosyalarına dahil edilerek sonunda bu bölüm stil dosyaları ilgili HTML sayfalarına bağlanabilir.

Sonuç olarak

En iyi yaklaşım genellikle Harici bir stil sayfasıdır. Tüm kuralları tek bir yerde tutmak iş yükümüzü azaltır (kaç tane sayfamız olursa olsun) ve son kullanıcı için indirme süresini biraz azaltacaktır. Sitemizin farklı bölümleri ile biraz daha farklı gösterilmesini istiyorsanız, içe aktarılan stil sayfaları da eklenmelidir.Harici Stil Sayfaları ile çalışmanız size CSS’in tüm gücünü kullanmanıza olanak verecektir. Birden fazla özel stile sahip projelerde ise İçe Aktarma yöntemini kullanarak CSS dosyalarını parçalamak projelerinizde çok fazla esneklik kazandıracaktır.

Tek bir sayfamız varsa (ve bunun değişmeyeceğini biliyoruz) Dahili olması daha iyi bir yol olabilir. Kullanıcı için iki yerine bir dosya indirmek biraz daha etkili olacaktır.

Satır İçi Stil yaklaşımından mümkün olduğunca kaçınılmalıdır.

CSS Kullanımı

CSS Nasıl Eklenir? Web sayfalarınıza Stil enjekte etme yolları nedir?

1- Satıriçi Stil

2 – Dahili Stil Sayfası

3 – Harici Stil Sayfası (External Style Sheet)

4- İçe Aktarılan Stil Sayfası

Sonuç olarak

İlgili

Yorum

Yorum Yap X

CSS Nasıl Eklenir? Web sayfalarınıza Stil enjekte etme yolları nedir?

1- Satıriçi Stil

2 – Dahili Stil Sayfası

3 – Harici Stil Sayfası (External Style Sheet)

4- İçe Aktarılan Stil Sayfası

Sonuç olarak

Bunu paylaş:

İlgili

İlginizi Çekebilir

Yorum

Yorum Yap X