CSS Nedir? Nasıl Kullanılır ?

0
17
Css kodları..

CSS , Basamaklı Stil Sayfası dili olarak adlandırılır ve HTML  dilinde yazılmış öğeleri stilize etmek için kullanılır . .

CSS, 1996 yılında W3C ( World Wide Web Consortium ) tarafından sayfanın biçimlendirilmesine yardımcı olacak etiketler içerecek şekilde tasarlanmıştır.

<font> gibi etiketler HTML sürüm 3.2’de tanıtıldı ve geliştiriciler için oldukça fazla sorun yarattı. Web siteleri farklı yazı tiplerine, renkli arka planlara ve stillere sahip olduğundan, kodu yeniden yazmak uzun ve acı verici bir süreçti. Böylece, CSS bu sorunu çözmek için W3C tarafından oluşturuldu.

HTML ve CSS arasındaki ilişki güçlü bir şekilde birbirine bağlıdır. HTML bir bir sitenin temelini  ve CSS bir web sitesinin tüm estetiği vurgular.

CSS teknik olarak bir zorunluluk değildir, ancak çıplak görünen bir HTML siteye bakmak istemezsiniz.

CSS Avantajları

CSS uygulayan bir web sitesi ile olmayan bir web sitesi arasındaki fark çok büyük ve kesinlikle fark edilir.

Tamamen yüklenemeyen ve metnin çoğunun mavi veya siyah olduğu beyaz bir arka plana sahip bir web sitesi görmüş olabilirsiniz. Bu, sitenin CSS bölümünün doğru yüklenmediği veya tamamen mevcut olmadığı anlamına gelir. Yalnızca HTML içeren bir site böyle görünür ve  bunun çok çekici olmadığını kabul edersiniz.

CSS, her şeyi farklı bir dosyada stilize etmenize olanak tanır, böylece CSS dosyasını HTML işaretlemesinin üzerine entegre ederek orada stil oluşturur. Bu, gerçek HTML işaretlemesini daha temiz ve bakımı daha kolay hale getirir.

Kısacası, CSS ile stil elemanlarını nasıl göründüğünü tekrar tekrar tanımlamanız gerekmez. Bu zaman kazandırır, hata yapma ihtimalinizi düşürür ve  kodu kısaltır.

CSS, bir HTML sayfasında birden fazla stilinizin olmasını sağlar, böylece özelleştirme olanaklarını neredeyse sınırsız hale getirir. Günümüzde bu, bir metadan daha fazla bir zorunluluk haline geliyor.

CSS Nasıl Çalışır?

CSS, onu yöneten bir dizi kurala sahip basit bir İngilizce tabanlı söz dizimi kullanır. Daha önce de belirttiğimiz gibi, HTML asla stil öğelerini kullanmak için tasarlanmamıştı sadece tanımlamak için oluşturuldu.  Örneğin: <p> Bu bir paragraf. </p> .

Ama paragrafı nasıl şekillendiriyorsunuz?  CSS sözdizimi yapısı oldukça basittir. Bir seçici ve bir bildirim bloğu vardır. Bir öğe seçer ve ardından onunla ne yapmak istediğinizi bildirirsiniz. Oldukça açık, değil mi?

Ancak hatırlamanız gereken kurallar vardır. Yapı kuralları oldukça basittir, bu yüzden endişelenmeyin.

Seçici, stil vermek istediğiniz HTML öğesini işaret eder. Bildirim bloğu, noktalı virgülle ayrılmış bir veya daha fazla bildirim içerir.

Her bildirim, iki nokta üst üste işareti ile ayrılmış bir CSS özellik adı ve değeri içerir. Bir CSS bildirimi her zaman noktalı virgülle biter ve bildirim blokları kıvırcık parantezlerle çevrilidir.

Bir örneğe bakalım:

<p> öğelerinin tümü kırmızı renkte ve kalın olacaktır.

Başka bir örnekte, tüm <p> elemanları ortaya hizalanır, 16x genişliğinde ve yeşil olur.

Şimdi farklı CSS stilleri hakkında konuşalım. Bunlar Satır İçi, Harici ve Dahili’dir.

Dahili, Harici ve Satır İçi CSS Stilleri

Her bir stili kısaca inceleyeceğiz, her yöntemin derinlemesine bir açıklaması için genel bakışın altında bir bağlantı olacak.

Dahili stil hakkında konuşarak başlayalım . Bu şekilde yapılan CSS stilleri, bir web sitesi her yenilendiğinde yüklenir, bu da yükleme süresini artırabilir. Ayrıca, aynı CSS stilini tek bir sayfada olduğu gibi birden çok sayfada kullanamazsınız. Ancak, bunun da faydaları vardır. Tek bir sayfada her şeyin olması, önizleme için şablonu paylaşmayı kolaylaştırır.

Harici yöntemi sizin için en uygunu olabilir. Her şey harici olarak bir .css dosyasına yazılır. Bu, tüm stilleri ayrı bir dosyada yapabileceğiniz ve CSS’yi istediğiniz herhangi bir sayfaya uygulayabileceğiniz anlamına gelir. Harici stil, yükleme sürelerini de iyileştirebilir.

Son olarak, CSS’nin Satır İçi stili hakkında konuşacağız . Satır içi, <style> etiketine sahip belirli öğelerle çalışır. Benim verdiğim örnekler bu stil tarzına giriyor. Her bileşenin stilize edilmesi gerekir, bu nedenle CSS ile başa çıkmanın en iyi veya en hızlı yolu olmayabilir. Ama işe yarayabilir. Örneğin, tek bir öğeyi değiştirmek istiyorsanız, değişiklikleri hızlı bir şekilde ön izlersiniz.

Sonuç

Burada öğrendiklerimizi özetleyelim:

  • CSS, HTML gibi biçimlendirme dilleriyle birlikte çalışmak üzere oluşturuldu. Bir sayfayı stilize etmek için kullanılır.
  • CSS uygulamanın üç stili vardır ve aynı anda birden fazla sitede değişiklik yapmak için Harici Stili kullanabiliriz.
  • CSS uygulaması, biçimlendirme dilinin kendisi kadar bir gereklilik olduğundan CSS öğrenmeden ilerlemenin zor olduğunu.

Sonuç olarak, bu makaleyi yararlı bulduğunuzu umuyoruz ve herhangi bir sorunuz varsa, lütfen aşağıdaki yorumlar bölümünde bırakın.