CSS Başlangıç Eğitimi

Gerekli temel bilgiler

Devam etmeden önce, aşağıdaki bilgilerin temel bir anlayışına sahip olmanız gerekmektedir:

  • HTML
  • XHTML

Bu projeleri ilk olarak öğrenmek istiyorsanız, Ana Sayfa İlgili dersleri ziyaret edin.

CSS Özeti
  • CSS, katmanlı stil tabloları (CAscading STyle SSheets)
  • Stil tanımlarıNasıl görüntüleneceğini HTML elementleri
  • Stil genellikleStil tablolarıİçinde
  • HTML 4.0'ya stil eklenmesi,İçerik ve görünümün ayrılmasını çözümlemek
  • Dış stil tablosuÇok büyük ölçüde verimliliği artırabilir
  • Harici stil tabloları genellikle CSS dosyasıİçinde
  • Çok sayıda stil tanımıKatmanlıBir

Stil, yaygın bir sorunu çözmüştür.

HTML etiketleri, belge içeriğini tanımlamak için tasarlanmıştır. <h1>, <p>, <table> gibi etiketlerin kullanımı, HTML'nin başlangıçta 'Bu başlık', 'Bu paragraf', 'Bu tablo' gibi bilgileri ifade etmek için umulmuştur. Belgenin düzeni, biçimlendirme etiketleri kullanmadan tarayıcı tarafından tamamlanması beklenmiştir.

İki ana tarayıcı (Netscape ve Internet Explorer) sürekli olarak yeni HTML etiketleri ve özellikleri (örneğin yazı etiketleri ve renk özellikleri) HTML normlarına ekledikleri için, içerik ve görünüm katmanlarının bağımsız olarak ayrılmış sitelerin oluşturulması giderek zorlaşmaktadır.

Bu sorunu çözmek için, kar amacı gütmeyen bir standartlaştırma birliği olan World Wide Web Consortium (W3C), HTML standartlaştırma misyonunu üstlenmiş ve HTML 4.0'nın dışında STYLES (stil) yaratmıştır.

Tüm popüler tarayıcılar, katmanlı stil tablolarını destekler.

Stil tabloları, verimliliği büyük ölçüde artırır.

Stil tabloları, HTML elementlerinin nasıl görüntüleneceğini tanımlar, HTML 3.2 stillerindeki yazı etiketleri ve renk özellikleri genellikle harici .css dosyalarında saklanır. Yalnızca basit bir CSS belgesini düzenlemek, tüm sayfa düzenlerinin görünümünü aynı anda değiştirmenize olanak tanır.

Birden fazla sayfanın stillerini ve düzenini aynı anda kontrol etme yeteneğiyle, CSS, WEB tasarım alanında bir atılım olarak kabul edilebilir. Web geliştiricisi olarak, her HTML elementi için stiller tanımlayabilir ve bunları dilediğiniz her sayfaya uygulayabilirsiniz. Genel bir değişiklik yapmak için sadece stili değiştirmeniz yeterlidir ve web sitesindeki tüm elementler otomatik olarak güncellenecektir.

Çoklu stiller katmanlanarak

Stil tabloları, stil bilgilerini çeşitli yöntemlerle belirlemeyi sağlar. Stiller, tek bir HTML elementinde, HTML sayfasının baş etiketinde veya bir dış CSS dosyasında belirlenebilir. Ayrıca, tek bir HTML belgesi içinde birden fazla dış stil tablosu da kullanılabilir.

Katmanlama sırası

Aynı HTML elementi birden fazla stil tarafından tanımlandığında hangi stili kullanacaktır?

Genel olarak, tüm stiller aşağıdaki kurallara göre yeni bir sanal stil tablosunda katmanlanır, numara 4 en yüksek önceliğe sahiptir.

  1. Tarayıcı varsayılan ayarları
  2. Dış stil tablosu
  3. İç stil tablosu (<head> etiketi içinde)
  4. İç bağlantılı stiller (HTML elementi içinde)

Bu yüzden, HTML elementi içindeki iç bağlantılı stiller (HTML elementi içinde) en yüksek önceliğe sahiptir, bu da aşağıdaki stiller beyanlarının öncelikli olacağı anlamına gelir: <head> etiketi içindeki stiller beyanı, dış stil tablosundaki stiller beyanı veya tarayıcıdaki stiller beyanı (varsayılan değer).