CSS KODLARI NEREYE YAZILIR ? (GENEL, YEREL ve HARİCİ CSS)

Merhaba..

HTML sayfaları ve elemanlarını biçimlendiren CSS özellikleri farklı yerlerde yazılabiliyor. Bunun için önce CSS ekleme yöntemlerine bakalım...

CSS EKLEME YÖNTEMLERİ

HTML sayfalarda 3 ayrı şekilde CSS özellikleri ekleyebiliyoruz.

GENEL CSS ( head bölümünde yazılır )
YEREL CSS (etiketin parametresi olarak yazılır )
HARİCİ CSS (.css uzantılı farklı bir sayfada yazılır)

GENEL CSS

Dahili yada Sayfa içi CSS olarakta adlandırılır.. Sayfa içinde , head bölümünde yazılan CSS özellikleridir. Özellikler style etiketleri arasında yazılır. Burada yazılan özellikler sayfayı , sayfadaki elermanları biçimlendirebilir. Dolayısıyla tüm sayfa için geçerlidir..

<head>

      <style type="text/css">

		p {
			background-color:#222;
			color: #ddd;
			font-family: calibri;
			padding: 2rem;
		}

      </style>

</head>

Yukarıda P etiketi için belirtilen özellikler sayfadaki tüm P etiketleri için geçerli olacaktır...

GENEL CSS, çok fazla CSS özelliği eklendiğinde HTML sayfayı şişireceği ve CSS - HTML takibi zorlaşacağı için tercih edilmez..

YEREL CSS

Satır içi CSS olarakta adlandırılır.. Doğrudan CSS özelliğnin uygulanması istenen etiketin içinde style parametresi iile yazılır.. Burada yazılan özellikler sadece yazıldığı etiketi biçimlendirebilir..

<body>
      <h1 style=" color:#f00 ; font-size:30px "> YEREL CSS </h1>
</body>

Yukarıda H1 etiketi için satır içinde belirtilen özellikler sadece bu H1 etiketi için geçerli olacvaktır. Sayfdaki varsa diğer H1 etiketleri bu biçimlendirmeden etkilenmeyecektir...

YEREL CSS ile fazla CSS özelliği eklendiğinde HTML ve CSS kod takibini zorlaştıracağı için tercih edilmemelidir.

HARİCİ CSS

CSS öelliklerinin .css uzantılı ayrı bir dosyada yazıldığı CSS kullanım yöntemidir. CSS dosyası, head bölümünde <link> etiketi ile sayfa dahil edilir.

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

LINK

HTML syfanın diğer dosyalarla bağlantı kurmasını sağlar..

REL (RELATION)

HTML sayfa ile bağlantı kurulacak dosya arasındaki bağlantı türünü belirler.. Stylesheet, bunun bir stil dosyası olduğunu belirtir.

HREF

HTML sayfanın bağlantı kuracağı dosyayı belirtir.

Yukarıda site.css isimli CSS dosyaı sayfaya dahil edilmiş olur. CSS dosyası içinde yazılan özellikler ve tanımlar sayfayı , sayfadaki elermanları biçimlendirebilir. Dolayısıyla GENEL CSS'te olduğu gibi tüm sayfa için geçerlidir..

CSS dosyalarında style etiketi kullanılmaz. CSS özellikleri doğrudan yazılır..

/*  site.css  dosya içeriği */

       
		p {
			background-color:#222;
			color: #ddd;
			font-family: calibri;
			padding: 2rem;
		}

CSS dosyaları aynı anda birden fazla sayfaya dahil edilebileceği ve CSS kodlarını bir yerde derli toplu tutacağı için web sitesi tasarımlarında tercih edilir.

Görüşmek üzere...

Son Güncelleme : 04 Kasım 2024 20:05, Pazartesi

BENZER İÇERİK