CSS nedir?

Yayınlanan: 2019-03-08

Son Güncelleme 22 Nisan 2020

Cascading Style Sheets for the web World Wide Web'de (www), CSS, Basamaklı Stil Sayfalarının kısaltmasıdır. CSS, genellikle HTML olan bir biçimlendirme dilinde yazılmış bir belgenin sunumunu tanımlamak için kullanılan bir stil sayfası dilidir. CSS, bir web sayfasının düzeninin ve içeriğinin bir ekranda, kağıtta veya başka bir ortamda nasıl görüntüleneceğini belirler. CSS, aynı anda birden çok web sayfasının düzenini kontrol ettiği için çok fazla iş tasarrufu sağlar.

Belge, genellikle HTML gibi bir biçimlendirme dili kullanılarak yapılandırılmış bir metin dosyasıdır. Bir belgeyi sunmak, onu Chrome, Firefox, Opera, Microsoft Edge ve diğerleri gibi bir web tarayıcısı aracılığıyla bir bilgisayar ekranında görsel olarak sunulan kullanılabilir bir forma dönüştürmek anlamına gelir. Web tarayıcıları, nasıl görüntülendiklerini etkilemek için bir belgeye CSS kuralları uygular.

Bu blog, ne olduklarını ve Web'de ne için kullanıldığını tanımlayan Basamaklı Stil Sayfalarına (CSS) genel bir giriş niteliğindedir. Bu, CSS'nin harika ve ilginç dünyasının derinliklerine girmeden, bununla ilgili temel soruları yanıtlayan bir giriştir.

O! Şirket, dünya çapındaki ajanslar için büyüleyici ve etkili web tasarım hizmetleri sunmaktadır. Beyaz Etiket Web Tasarım Hizmetlerimiz ve size ve müşterilerinize web varlıklarını oluşturma veya geliştirme konusunda nasıl yardımcı olabileceğimiz hakkında daha fazla bilgi edinin. Bu gün başlayacağım!

CSS, 1994'te başlatıldı. W3C tarafından oluşturuldu ve sürdürüldü. W3C'nin CSS Çalışma Grubu, spesifikasyon adı verilen belgeler oluşturur. Spesifikasyonlar tartışıldıktan ve W3C üyeleri tarafından resmi olarak onaylandıktan sonra bir tavsiye haline gelirler.

Basamaklı Stil Sayfaları düzey 1 (CSS1), Aralık 1996'da W3C'den bir öneri olarak çıktı. CSS2, Mayıs 1998'de bir W3C önerisi oldu. 1998'de başlatılan CSS düzey 3, halen geliştirme aşamasındadır. CSS3, CSS2 spesifikasyonları ile modüller adı verilen yeni spesifikasyonların birleşimidir. Bir CSS özelliği, HTML içeriğinin nasıl görüntülendiğini güncellemek için ayarlanmış değerlere sahip bir dizi özellikten oluşturulur.

CSS, biçimlendirme dili belgelerimizi sunma sürecini basitleştirmek için geldi. Aşağıdakiler gibi çeşitli özellikleri kontrol edebilirsiniz:

  • metnin rengi,
  • yazı tipi stili,
  • paragraflar arası boşluk,
  • sütunların nasıl boyutlandırıldığı ve düzenlendiği,
  • arka plan resimleri veya renkleri,
  • düzen tasarımları,
  • ekran boyutlarına göre gösterimdeki farklılıklar (Medya Sorguları).

CSS'yi nasıl uygularız?

Cascading Style Sheets for the web HTML belgelerimize stil uygulamanın dört yolu vardır. En sık kullanılan yöntemler, HTML belgemizin içindeki bir <style> öğesine gömülü olan Harici CSS dosyalarıdır. Farklı sayfa stilleri belirtilirse, stiller aşağıdaki önceliğe sahip yeni stillere basamaklanır (sayı ne kadar yüksekse daha az önemlidir):

Öncelik 4: Tarayıcı varsayılanı

Tarayıcılar, bizim için önceden yazılmış bazı stiller içerir. Bazen bu önceden yüklenmiş stilleri istemiyoruz, bu yüzden onları geçersiz kılabiliriz. Modern CSS özelliklerini desteklemeyen veya kendi CSS özelliklerini kullanma biçimine sahip olan bazı tarayıcılar vardır. Bu nedenle CSS'imizi bir HTML belgesine yazarken dikkatli olmalıyız.

That! Company White Label Services

Öncelik 3: Harici stil sayfası dosyası

<link> öğesi, HTML belgenize harici bir stil sayfası dosyası eklemek için kullanılabilir. Harici stil sayfası, “.css” uzantılı ayrı bir metin dosyasıdır. Tüm stil kurallarını bu metin dosyasında tanımlıyoruz ve ardından bu dosyayı <link> öğesini kullanarak <head>…</head> etiketlerinin içindeki herhangi bir HTML belgesine dahil ediyoruz.

 <link rel="stylesheet" type="text/css" href="style.css" />

Öncelik 2: HTML belgesine gömülü

Kuralları içermek için <style> öğesini kullanarak CSS kurallarımızı bir HTML belgesine koyabiliriz. <style>…</style> etiketleri, <head>…</head> etiketlerinin içine yerleştirilir.

 <stil>
 seçici {
 mülk değeri;
 }
 </style>

Öncelik 1: HTML öğelerimizde satır içi

Stil kurallarını tanımlamak için herhangi bir HTML öğesinin stil niteliğini kullanabiliriz. Bu kurallar yalnızca o öğeye uygulanacaktır.

 <p>Merhaba Dünya!</p>

CSS Kurallarını Geçersiz Kılma

HTML belgemize stil sayfası kurallarını uygulamanın dört yolunu açıkladık. Herhangi bir Stil Sayfası Kuralını geçersiz kılma kuralı:

Herhangi bir satır içi stil sayfası en yüksek önceliği alır. Bu nedenle, <style>…</style> etiketlerinde tanımlanan herhangi bir kuralı veya herhangi bir harici stil sayfası dosyasında tanımlanan kuralları geçersiz kılar.

<style>…</style> etiketlerinde tanımlanan herhangi bir kural, herhangi bir harici stil sayfası dosyasında tanımlanan kuralları geçersiz kılar.

Harici stil sayfası dosyasında tanımlanan herhangi bir kural en düşük önceliği alır ve bu dosyada tanımlanan kurallar yalnızca yukarıdaki iki kural geçerli olmadığında uygulanacaktır.

CSS Seçiciler

Bir CSS kuralı tarayıcı tarafından yorumlanır ve ardından HTML belgemizdeki karşılık gelen öğelere uygulanır. Bir stil kuralı üç bölümden oluşur:

  • Seçici - HTML öğelerini öğe adına, kimliğine, sınıfına, niteliğine ve daha fazlasına göre "bulmak" (veya seçmek) için kullanılır.
  • Özellik - CSS'nin bir stil türüdür. Renk, kenarlık, arka plan, yazı tipi, görüntü, metin hizalaması, kenar boşlukları, satır aralığı vb. olabilir.
  • Değer - özelliklere atanır. Örneğin, arka plan rengi özelliği, kırmızı veya yeşil bir değere sahip olabilir.

CSS Kuralı Sözdizimi

Bir CSS kuralının sözdizimi, bir seçiciden ve bir özellik ve değer bildiriminden oluşur:

 seçici { özellik: değer; }

Seçici, stil için HTML öğesini işaret eder.

Bildirim bloğu (kıvrımlı parantez içinde), noktalı virgülle ayrılmış bir veya daha fazla bildirim içerir.

Her bildirim, iki nokta üst üste ile ayrılmış bir CSS özellik adı ve bir değer içerir.

Bir CSS kuralı yazabilir ve ardından aynı kuralı birden çok HTML öğesi ve belgesinde yeniden kullanabiliriz. CSS kullanarak, her seferinde yalnızca stili yapılan öğe için geçerli olan HTML satır içi etiket niteliklerini yazmamız gerekmez. Sadece bir CSS kuralı yazıp onu o etiket öğesinin tüm oluşumlarına uygularız. Bu nedenle, daha az kod daha hızlı sayfalar anlamına gelir.

HTML belgemizin değiştirilmesi ve bakımı, harici veya gömülü stil kuralları kullandığımızda basittir. Biz sadece stil kuralını değiştiririz ve HTML belgelerimizdeki tüm öğeler otomatik olarak güncellenir. CSS ile Medya Sorguları aracılığıyla birden fazla cihaz ekran boyutuna erişebiliriz. Medya sorguları, HTML belgemizi birden fazla cihaz türü için optimize etmemize olanak tanır. Aynı HTML belgesini kullanarak web sayfalarımızın farklı versiyonlarını sunabiliriz.

Devamını oku

Yine, bu gönderi, okuyucunun CSS ve HTML belgelerimizi kontrol etmek için mevcut olan çeşitli şeyler hakkında bilgi edinme konusundaki ilgisini zar zor açıyor. Web'in süper güçlü ve çok önemli bir parçasıdır. Daha derine inebileceğiniz bazı ana kaynaklar şunlardır:

W3C Okulu

MDN

CSS Eğitimi