CSS Dersleri 1 - CSS Nedir

Bu dersimiz ile CSS'e giriş yapıyoruz. Bakalım CSS nedir ne değildir öğrenelim. Tüm yazdıklarımı uygulamanızı tavsiye ederim.

Taha Furkan Bayar Taha Furkan Bayar
Kasım 4, 2022 - 16:19
0 115
CSS Dersleri 1 - CSS Nedir

CSS nedir?

CSS

CSS sadece arka plan rengini değiştirmek ve nesnelerin neden olması gerektiği gibi hizalanmadığını merak etmekle ilgili değildir. Ancak zamanımızı JavaScript çerçeveleri ve kitaplıkları gibi diğer araçlarla harcadığımız için CSS, genellikle gözden kaçan ve arka planda kalan bir görsel iletişim aracıdır. Genellikle temel çalışma yeterliliği CSS'sini alırız ve çok derine inmeden hemen hedefimize ulaştığımızda bırakırız. Bu nedenle, uygulama boyunca yapı, mimari ve uyum gibi şeyleri göz ardı etme eğilimindeyiz. Bu yazıda CSS hakkında bilmemiz gerekenleri ele alacağız, şimdi sıfırdan başlayalım.

CSS (Basamaklı Stil Katmanları) nedir?

CSS (Basamaklı Stil Katmanları), web sayfalarını biçimlendirmek için kullanılan bir kodlama türüdür. Web sayfalarının görünümünü ve düzenini değiştirmek için CSS kullanabiliriz. Web sitesinin görünümünün masaüstü, tablet, mobil cihaz gibi farklı ekranlarda nasıl değiştiğini de anlatabiliriz. CSS, C++ veya JavaScript gibi bir programlama dili değildir. Bunun nedeni, CSS'nin amacının web tarayıcıları için biçimlendirmeye (HTML) stil vermek olmasıdır. HTML yalnızca içeriği "işaretlemek" için kullanılan bir dildir - yani, bir belge için bazı görsel ve yapısal biçimler sağlar.

Hem HTML hem de CSS, doğası gereği bildirimseldir. Bu, herhangi bir işlem yapmadan sadece olayları açıkladığı anlamına gelir. Tarayıcı, görüntüleme için CSS'yi yorumladığında, bunu doğrusal bir biçimde yapar. Bunun nedeni, CSS'nin tarayıcıya dosyayı yukarıdan aşağıya okuması için talimatlar sağlamasıdır. Kural ayarlandığında ve ardından dizin aşağı değiştirildiğinde, tarayıcı ekranda görüntülenen nihai sonuç olarak nihai değerlendirmeyi alır. CSS'deki C'nin anlamı budur. CSS'nin basamaklı etkisi, tarayıcıyı, kuralların fiziksel olarak ne zaman oluştuğuna bağlı olarak, kuralları tekrar tekrar gösterecek ve geçersiz kılacak şekilde ayarlar. Basamaklama, öğenin birden çok CSS bildirimi ve birden çok stil sayfası birleştirildiğinde belirli bir öğeye uygulanan stiller arasındaki çakışmaları çözmek anlamına gelir. Yani CSS göründüğü kadar basit değil. Anlamadan kullanmaya çalışırsanız, web geliştirmede zorluk yaşarsınız. Bu sebep ile CSS öğrenmek programlama dili öğrenmek kadar önemlidir.

CSS Syntax Yapısı

İlk CSS kodumuzu yazalım mı ? Örnek olarak <p> etiketinin rengini değiştirelim.

<p>İlk CSS </p>

Şimdi <p> etiketimiz ile bir yazı yazdık ve CSS ile bu yazıyı kırmızı yapalım.

Öncelikle CSS içerisinde HTML elementini nasıl kullanacağız onu anlatalım. Bir selector yardımı ile HTML kodunu CSS içerisinde işliyoruz selector dediğim zaman bir program olarak sanmayalım. Selector'ü örnek ile gösterelim.

p { color: red;  }

Selector(seçici) "p" ise süslü parantezler ise selector(seçici) parantezleridir.

Bu kodun çıktısı şu şekil olacaktır : İlk CSS

Ayrıca nereye yazacağız bu CSS'i sesini duyar gibiyim. CSS kodlarımızı bir CSS dokümanında saklarız ve uzantısı da .css dir. Bu dosyayı HTML içerisinde bir kod ile çağırırız. Örnek olarak dosya adımız cilgin.css olsun ve aşağıda bulunan kod ile çağıralım.

<head> <link rel=”stylesheet” type=”text/css” href=”cilgin.css” /> </head>

Görüldüğü üzere <head> etiketlerinin içerisinde çağırdık CSS dosyamızı.

CSS seçicilerini tanımlamanın birçok yolu vardır, işte bazı seçici türleri örnekleri:

  • Sınıf seçici: HTML öğelerini sınıf özelliğine göre bulun.
  • Kimlik seçici: Öğeleri belirli bir kimliğe göre bulun.
  • Öğe seçici: Öğeleri etiket adına göre bulun.

CSS teknik olarak basittir. Anlamak için sınırlı sayıda kural vardır. Bununla birlikte, CSS'yi zorlaştıran şey, temeldeki kuralların birleşimidir. Görsel gereksinimler daha karmaşık hale geldikçe, CSS kurallarının sürdürülebilirliğini kontrol etmek için yaratıcı ve yapılandırılmış çözümlere ihtiyaç duyulmaktadır.

Etiketler: