Takip Edin

CSS

HTML Belgelerine CSS Ekleme Yolları

Bir HTML belgesine CSS eklemenin 3 yolu vardır:

Satır İçi CSS: HTML başlangıç etiketinde style özelliğini kullanır.

Dahili CSS: Bir belgenin <head> bölümünde <style> elemanını kullanır.

Harici CSS: Harici bir CSS dosyasını belirten <link> elemanını kullanır.

Satır İçi CSS

Satır içi stiller, CSS kurallarını doğrudan başlangıç etiketine yerleştirerek bir elemana özgün stil kuralları uygulamak için kullanılır. Satır içi stiller,   style  özelliğini kullanarak bir elemana yerleştirilir.

style özelliği, bir dizi CSS özelliği ve değer çifti içerir. Her  özellik : değer  çifti, “ ; ile ayrılır.

Satır içi stillerin kullanılması, genelde kötü bir yöntem olarak görülmektedir çünkü stil kuralları doğrudan HTML etiketinin içine gömülmektedir, bu da sunum biçimlerinin dokümanın içeriğiyle karışmasına sebep olur, sonuç olarak kodun sürdürülebilirliği zorlaşır ve CSS’in kullanım amacı ortadan kalkmış olur.

Dahili CSS

Dahili CSS, yalnızca yerleştirildiği belgeyi etkiler. <style> elemanını kullanarak bir HTML belgesinin <head> bölümünde tanımlanırlar.

Harici CSS

Bir web sitesinin birçok sayfasına stil uygulanacaksa harici CSS kullanmak ideal olanıdır.

Harici bir stil sayfası, tüm stil kurallarını sitenizdeki herhangi bir HTML dosyasından bağlayabileceğiniz ayrı bir belgede tutar.

Harici CSS, en esnek CSS ekleme metoduna sahiptir çünkü harici bir stil sayfasıyla yalnızca bir dosyayı değiştirerek tüm web sitesinin görünümünü değiştirebilirsiniz.

Harici bir stil sayfası, <link> elemanını kullanarak bir HTML belgesine bağlanabilir. <link> elemanı ise <head> bölümünün içerisinde yer almalıdır.

  • Harici stil sayfası herhangi bir metin editöründe yazılabilir ve .css uzantısıyla kaydedilmelidir.
  • Harici .css dosyası HTML etiketi içermemelidir.

Çoklu Stil Sayfaları

Eğer aynı eleman için farklı stil sayfalarında özellikler tanımlanmışsa son okunan stil sayfasındaki değer kullanılır.

Yukarıdaki örnekte dahili stil, harici stil sayfasına bağlanan <link> elemanından sonra tanımlandığından <style> elemanının içindeki stil kuralları uygulanmıştır.

Bu örnekte ise dahili stil, harici stil sayfasına bağlanan <link> elemanından önce tanımlandığından harici stil sayfasındaki stil kuralları uygulanmıştır.

Not : Bir HTML elemanı için birden fazla stil belirtildiğinde öncelik sırası şu şekildedir:

  • Satır içi stil(herhangi bir HTML elemanının içinde belirtilirler),
  • Dahili ve harici stil sayfaları(head bölümünde belirtilirler),
  • Tarayıcı varsayılanı

Bu duruma örnek verecek olursak bir eleman için hem satır içi stil hem de harici stil sayfasında stil belirtilmişse satır içi stilin sahip olduğu stil kuralları harici stil sayfasındakileri geçersiz kılar.

Devamını oku

Popüler

error: Content is protected !!