CSS Türleri: Satır İçi, Dahili ve Harici CSS Açıklaması
CSS Türleri
Bu derste size Satır İçi, Harici ve Dahili olmak üzere 3 tip CSS stili arasındaki farkı öğreteceğiz ve ayrıca her yöntemi bir arada kullanmanın avantajlarını ve dezavantajlarını inceleyeceğiz. Bu eğitimin ve kısa makalenin sonuna kadar bizimle kalın.
Bölümün başında bu yazımızda inceleyeceğimiz konular:
- CSS nedir?
- Dahili CSS nedir?
- Harici CSS nedir?
- Satır içi CSS nedir?
CSS nedir?
Basamaklı Stil Sayfaları (CSS), web sayfalarınızın görünümünden sorumlu olan ve web sitesi öğelerinizin renklerini, yazı tiplerini ve düzenlerini kontrol eden bir işaretleme dilidir.
Bir web sitesi veya web sayfası oluşturulduğunda, içeriğin yapısını belirlemek için HTML kullanılır, ancak CSS bu içeriğin nasıl görüntüleneceğiyle ilgilenir. CSS’yi kullanarak çeşitli sayfa öğelerinin renklerini, yazı tiplerini, kenarlıklarını, boyutlarını, sırasını ve görünümünü kontrol edebilirsiniz. Ayrıca CSS, farklı cihazlar (cep telefonları veya tabletler gibi) için farklı görüntü özellikleri ayarlamanıza olanak tanır. Bu dil stili aynı zamanda web sitenize efekt veya animasyon eklemenize de olanak tanır. Ayrıca tıklama düğmeleri, döndürücü veya yükleyici efektleri ve hareketli arka planlar gibi bazı CSS animasyonlarını görüntülemek için de kullanabilirsiniz.
CSS olmadan web siteniz düz bir HTML sayfası olarak görünecektir. Örneğin Twitter web sitesinin kodlamasından CSS’yi çıkarırsak aşağıdaki görsele benzeyecektir:
CSS’yi uygulamak için üç yöntem ve stil kullanabilirsiniz:
- İç stil
- Dış stil
- Satır içi stil
Dahili CSS nedir?
Dahili CSS, HTML dosyanızın <head> bölümüne <style> etiketini eklemenizi gerektirir.
Bu CSS stili, bir sayfaya stil vermenin etkili bir yoludur. Ancak bu stili birden fazla sayfa için kullanmak zaman alıcıdır çünkü web sitenizin her sayfasına CSS kuralları koymanız gerekir.
Harici CSS nedir?
Harici CSS ile web sayfalarınızı, cihazınızdaki herhangi bir metin düzenleyici (örneğin Notepad++ ) tarafından oluşturulabilecek harici bir .css dosyasına bağlarsınız .
Bu tür CSS, özellikle büyük bir web sitesini şekillendirmek için daha etkili bir yöntemdir. Bir .css dosyasını düzenleyerek sitenizin tamamını bir kerede değiştirebilirsiniz.
Harici CSS kullanmak için şu adımları izleyin:
1. Bir metin düzenleyiciyle yeni bir .css dosyası oluşturun ve bu dosyaya stil kuralları ekleyin.
Harici CSS’nin avantajları
CSS kodu ayrı bir belgede olduğundan HTML dosyalarınız daha temiz bir yapıya sahip olur ve boyutları daha küçüktür.
Oluşturduğunuz aynı .css dosyasını birkaç sayfa için kullanabilirsiniz.
Harici CSS’nin dezavantajları
Harici CSS yüklenene kadar sayfalarınız düzgün yüklenmeyebilir.
Birden fazla CSS dosyasını yüklemek veya bunlara bağlantı vermek sitenizin yükleme süresini artırabilir.
Satır içi CSS nedir?
Satır içi CSS, belirli bir HTML öğesine stil vermek için kullanılır. Bu CSS stili için seçicileri kullanmadan her HTML etiketine yalnızca stil niteliğini eklemeniz gerekir.
Satır içi CSS, CSS stillerinin doğrudan HTML etiketlerine yerleştirildiği bir HTML stillendirme yöntemidir. Başka bir deyişle, HTML etiketinin içindeki belirli bir öğenin stil özelliklerini tanımlayabilirsiniz. Satır İçi CSS’nin bu kullanımı, CSS kodunu HTML etiketlerinin içine yerleştirmek anlamına gelir.
Bu tür CSS genellikle önerilmez çünkü her HTML etiketinin ayrı ayrı stillendirilmesi gerekir ve yalnızca satır içi CSS kullanıyor olsanız bile web sitenizi yönetmek çok zor hale gelebilir.
Ancak HTML’deki satır içi CSS bazı durumlarda yararlı olabilir. Örneğin CSS dosyalarına erişiminizin olmadığı veya yalnızca tek bir öğeye stil uygulamanız gerektiği durumlarda bu stil türü işinize yarar.
Satır içi CSS’nin avantajları
HTML sayfasına CSS kurallarını kolayca ve hızlı bir şekilde girebilirsiniz. Bu nedenle bu yöntem, değişiklikleri test etmek veya önizlemek ve web sitenizde hızlı değişiklikler yapmak için kullanışlıdır.
Harici stil gibi ayrı bir belge oluşturup yüklemenize gerek yoktur.
Satır içi CSS’nin dezavantajları
Her HTML öğesine CSS kuralları eklemek zaman alır ve HTML yapınızı dağınık ve çirkin hale getirir.
Farklı öğelerin şekillendirilmesi sayfa boyutunuzu ve yükleme sürenizi etkileyebilir.
