CSS ilk adım

Ne biliyor olmalısınız?

CSS dersine devam etmeden önce :

  • HTML / XHTML

Bunları zaten biliyorsanız dersimize devam edebilirsiniz. Hafızanızı kontrol etmek ya da bu konulara çalışmak için lütfen menüyü kullanın.


CSS nedir?

  • Cascading Style Sheets kelimelerinin kısaltmasıdır.
  • Stiller HTML elemanlarının nasıl görüntüleneceğini tanımlar
  • Stiller normal şartlarda harici Stil Kataloglarında tutulurlar.
  • Stiller bazı sorunları çözmek için HTML 4.0 ile gelmiştir.
  • Harici Stil Katalogları işinize büyük kolaylık sağlarlar
  • Harici Stil Katalogları CSS uzantılı dosyalardır.
  • Birden çok stil tanımlaması tek bir dosyada tutulabilir.
  • Stil dosyası sayesinde tek bir dosyayı değiştirerek, web sitenizin tamamının görünümünü kolay bir şekilde değiştirebilirsiniz.

Stil doyaları bazı sorunları, nasıl çözmüştür?

HTML etiketleri normal şartlarda bir dokümanı biçimlendirmek için gerekli kodları bulundurmazlar. HTML etiketlerinde bir belgenin içeriğini tanımlamak amaçlanmıştır.Örneğin

<p>Burası paragraftır.</p>

<h1>Burası bir başlık belirtir</h1>

Etiketler <font> şeklindeyken HTML 3.2 ile renk seçeneği ve bir kaç biçimlendirme seçeneği de etiketler içerisinde yerini almıştır( <font color=”…” > gibi). Bu durum Web gelişitiricileri için bir kabus olmaya başlamıştır. Büyük çaplı web projeleri geliştirmek metin ve renk seçenekleri ile her sayfaya tek tek bu kodların eklenmesi uzun zaman almakta, pahalı (zaman yönünden) ve can sıkıcı bir süreç halini almaya başlamıştır.

Bu problemi çözebilmek için World Wide Web Konsorsiyumu (W3C) – HTML de standartlaşma yoluna gitmiş ve HTML 4.0 ile CSS gelmiştir.

HTML 4.0 ile, HTML sayfalarından tüm biçimlendirme ifadeleri silinmiş ve ayrı bir CSS dosyasında tutulmaya başlanmıştır. Günümüzde tüm tarayıcıların CSS desteği mevcuttur.


Stiller zamanımızı başka şeyler için ayırmamıza yardım eder

Stil dosyaları HTML elemanlarının nasıl gösterileceğini belirtir.

Stiller normal şartlarda harici bir .css dosyasında saklanırlar. Harici stil dosyaları sayesinde web sitenizin tamamını tek bir dosyanın içeriğini değiştirerek  değiştirebilirsiniz. Günümüzde kullandığımız Visual Studio, Dreamweaver, Front Page gibi programlar; arayüzleri sayesinde bizleri bu biçimlendirmelerden soyutlamıştır. 


Birçok stil tek bir dosyada yer alabilir

Stiller farklı şekillerde tanımlanabilirler:

  • Bir HTML elemanı içerisinde
  • HTML sayfası head etiketleri içerisinde
  • Haricin CSS dosyalarında

İPUCU: Hatta birden fazla dış stil dosyasına tek bir HTML belgesi içinden çağrıda bulunulabilir.

Stil sıralaması – Bir HTML elemanı için birden fazla stil tanımlanmışsa hangisi kullanılır?

Genel olarak şöyle diyebiliriz; tüm stil dosyaları tarayıcı tarafından arka planda yeni ve sanal bir stil dosyasında toplanır ve 1 numaralı madde en yüksek önceliğe sahip olacak şekilde uygulanır:

  1. Etiket içi stiller (HTML etiketleri içerisinde kalanlar)
  2. Tarayıcı varsayılanları
  3. Harici stil dosyaları (css dosyaları)
  4. Dahili stil dosyaları (head etiketi içerisinde)

Bu sıralamaya göre eğer bir HTML etiketi içerisinde bir biçimlendirme kullanılmışsa altında kalanlar geçersiz kılınır.

  • Bunu şu şekilde yorumlamamalısınız, sadece etiket içi biçimlendirme kodları değerlendirmeye alınır ve diğerleri atılır. Bu özellik aynı biçimlendirmenin farklı yerlerde tanımlanması durumunda geçerlidir. (örneğin metin rengi)
  • Harici stil dosyası <head> etiketleri içerisinde tanımlanan dahili stillerden sonra tanımlanırsa harici biçimlendirmeler geçerlidir. Yani harici biçimlendirmeler dahililerin üzerine yazılır.

harun Hakkında

Matematikçi...Bilgisayar Yüksek Mühendisi... Bir zamanlar Adli Bilişim uzmanı...

İlginizi Çekebilir

Port Tarama

Bu makalede port taramanın ne olduğuna değinip, farklı port tarama yöntemleri ve güvenlik açıklarını nasıl …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir