CSS'nin Yapısı – Hızlı ve Kolay 2 Dakikada Okuma
CSS'nin Yapısı – Kod Örnekleriyle Bir Kullanım Kılavuzu
CSS'nin (Basamaklı Stil Sayfaları), istediğiniz gibi çalışması için doğru şekilde yapılandırılması ve düzenlenmesi gerekir…
CSS , modern web sayfası tasarımının kalbinde yer alır.
Aslında her sayfanın içeriğini ve yapısını tanımlayan ve sağlayan HTML olsa da , dünya çapında web'de görüntülediğimiz her sayfanın düzenini, sunumunu ve nihayetinde tasarımını ve verdiği hissi belirleyen CSS'dir .
CSS kullanarak, web tasarımcıları, web sitelerinin tam olarak istedikleri gibi bize sunulmasını sağlamak için renkleri, yazı tiplerini, boyutları, düzenleri, arka planları, döndürme efektlerini ve diğer her türlü geliştirmeyi hızlı ve kolay bir şekilde atayabilir.
WhatFreelancer.com gibi bir blog sitesinde görebileceğiniz tüm stil, metin yerleşimi, şekiller, yazı tipi renklendirmeleri ve daha fazlası - CSS tarafından kontrol edilir.
HTML'den farklı olarak CSS, işaretlemesini ve amacını belirtmek için etiketler veya açılı ayraçlar kullanmaz. Bunun yerine, CSS , web sayfası içeriğinin belirli bölümlerini belirlemek ve özelliklerini (renk, görünüm, biçim, boyut, konumlandırma vb.) değiştirmek için bir seçiciden ve buna karşılık gelen bir bildirimden oluşan CSS Kurallarını kullanır .
Herhangi bir CSS kuralının ilk kısmı, her zaman değiştirilecek veya buna göre şekillendirilecek HTML öğelerini tanımlar . Bu kısım seçici olarak bilinir . Herhangi bir CSS kuralının ikinci kısmı olan bildirim , seçilen bu öğelerin nasıl stillendirileceğini veya biçimlendirileceğini belirtir.
Tipik bir bildirimin kendisi iki bölümden oluşur. Birincisi, değiştirilecek öğenin yönlerini veya CSS özelliklerini belirten bir özelliktir (örn. renk, yazı tipi boyutu). İkincisi ise bu özelliğin veya stilin alması gereken değeri belirten bir değerdir .
CSS Yapısı – CSS ile yazılmış bir örnek
ÖRNEK KOD:
p {yazı tipi boyutu: 12 piksel;}
AÇIKLAMA:
Tek bir CSS kuralı bildirildi.
Selektör bu durumda, “p”, hangi belirler ve seçer <p> </ p> değiştirilecek olan bağlantılı HTML belgesinde öğesi.
Bu durumda, stillendirilecek tek özellik , 12 piksel değeri verilen yazı tipi boyutudur. Böylece web tarayıcısı, herhangi bir <p></p> paragraf öğesindeki tüm metni 12 pikselde görüntülemeyi bilecektir.
Not: Öğe seçici kendi başına yazılır, oysa bildirim küme parantezleri içinde yer alır.
CSS'nin Yapısı – CSS ile Yazılmış İkinci Bir Örnek
ÖRNEK KOD:
h1, h2, h3 {yazı tipi ailesi: Arial; renk: mavi;}
h1 {yazı tipi boyutu: 18 piksel;}
h2 {yazı tipi boyutu: 16 piksel;}
h3 {yazı tipi boyutu: 14 piksel;}
AÇIKLAMA:
Burada, dört farklı kural kullanılarak üç farklı HTML öğesi stillendirilir.
İlk kural, seçilen üç başlık öğesinin tümü için ortaktır (<h1>,<h2> ve <h3>). Bir kural birden fazla öğe için ortaksa, her öğe seçici kuralın önüne yerleştirilir ve tek bir virgül ve bir boşlukla ayrılır.
İlk kural, biri üç başlık türünün yazı tipi ailesini Arial olarak değiştiren, ikincisi üçünün de rengini mavi olarak değiştiren iki farklı bildirimden oluşur. Tek bir kuralda birden fazla beyan yapılacaksa; aynı anda birden fazla özellik değiştirilecekse, her bildirim noktalı virgül ve boşlukla ayrılır.
İkinci, üçüncü ve dördüncü kurallar, üç farklı başlık türünün her birine özgüdür ve her birinin diğerlerinden farklı bir boyutta (sırasıyla 18, 16 ve 14 piksel) olacağını tanımlar.
CSS'nin Yapısı – Tarayıcı Farklılıklarının Hesaplanması
Her web tarayıcısının, aksi söylenmediği sürece, bir web sayfasını stillendireceği ve görüntüleyeceği kendi doğal ve varsayılan CSS stil kuralları olacaktır.
Her CSS dosyası içinde, birçok HTML öğesinin birden çok kez seçilmesi ve tümü birbiriyle çelişebilecek ve farklı sonuçlar üretebilecek çok sayıda CSS kuralıyla ilişkilendirilmesi de mümkündür ve aslında yaygın bir durumdur.
Bunu hesaba katmak için CSS, öncelik şeması olarak bilinen şeyi çalıştırır.
Bu, kendilerine atanmış birden çok kuralı olabilecek tüm öğeleri tanımlar ve hangi kuralın geçersiz kılınan kural olduğunu ve yürütülmesi gerektiğini belirler. En yaygın olarak bu, CSS dosyasında karşılaşılan son kuraldır, bu nedenle bu dosyalara "basamaklı" özellik denir.
Bu sayede hem nihai sonucu hem de hangi kuralın uygulanacağını tahmin etmek mümkündür.
CSS'nin Yapısı – Web Tarayıcısının Rolü
Bir web tarayıcısı, HTML işaretlemesiyle aynı şekilde CSS kodunu okuyacak, yorumlayacak ve yürütecektir .
Ancak her iki durumda da web tarayıcısı gerçek CSS veya HTML kodunu kullanıcıya göstermez. Bir web sitesinin CSS'sini görüntülemek isterseniz (o web sitesi tarafından engellenmediğini veya gizlenmediğini varsayarak), bir web sayfasına sağ tıklayıp "Sayfa Kaynağını Görüntüle"yi (veya alternatif web tarayıcılarındaki benzer eşdeğerini) seçerek bunu yapabilirsiniz. .
Ardından, HTML belgesinin başındaki <link> öğesine yerleştirilen bağlantıyı kullanarak .css dosyasına gidebilirsiniz.
