BİL205U-WEB ARAYÜZ PROGRAMLAMA
Ünite 2: CSS (Cascade Style Sheets) Temel Bilgiler
Giriş
HTML sayfalarının görsel açıdan yetersiz olması nedeniyle geliştirilen CSS günümüzde tüm tarayıcı ve cihazlarda kullanılabilmektedir. Yaygın kullanımı nedeniyle web arayüz programlamanın önemli basamaklarındandır.
CSS Nedir?
HTML standartlarını belirleyen W3C topluluğu 1996 yılında Türkçesi Basamaklı Stil Şablonu olan ve CSS (Cascade Style Sheets) olarak bilinen yapıyı duyurdu. Zamanla gelişen CSS’nin, günümüzde CSS3 olarak adlandırılan versiyonu kullanılmaktadır. CSS birçok özelliği bulunan güçlü bir dildir. Web sayfalarına renk, düzen ve tasarım eklenmesine ve stilleri ögeden öğeye ve sayfadan sayfaya paylaşmaya olanak tanır. Web sayfalarının sunumunu tamamlayan dildir. Sunumun büyük ekran, küçük ekran, yazıcı gibi farklı türdeki cihazlara uygulanabilmesine olanak tanır. CSS, HTML dokümanı içerisinde yazılabildiği gibi HTML’den ayrı dosyada da yazılabilir. Bu sayede farklı sayfalarda da kullanılabilir.
CSS Söz Dizimi
CSS kural tabanlı bir dildir. Web sayfamızdaki eleman veya eleman gruplarına uygulanması gereken stilleri tanımlarız. Örnek olarak bir başlığı kırmızı yapabilir veya sayfadaki bütün başlıkları kırmızı yapabiliriz. HTML etiketlerini seçerek süslü parantezler içerisindeki özellikleri uygular. Süslü parantezler içerisinde bulunan color ve font-size property olarak adlandırılan özelliklerdir. Özelliklerin sağ tarafında : işaretinden sonra yazılanlar ise değerlerdir. Tanımlanan içeriklerin hepsi ; ile sonlandırılmalıdır.
h1 {color: red; font-size: 25px;}
CSS’yi Sayfaya Ekleme
index.js dosyasının iskeletini ! işareti yazdıktan sonra tab tuşuna basarak oluşturabilirsiniz. Bu iskeletin body bloğuna aşağıdaki kod bloğunda gördüğünüz kod ve içerikleri girerek CSS eklemeye hazır hâle getirelim.
HTML kodlarını incelediğinizde (bakınız Sayfa 34) kısmında komutunu göreceksiniz. Bu CSS dosyasının HTML dosyasına dahil edildiği komuttur.
CSS Yazım Yöntemleri
İlk CSS dosyamızı harici bir dosyaya tanımlayarak oluşturduk. Bu yöntemden başka CSS tanımlama yöntemleri de vardır. İlk örnekte uyguladığımız yöntem External (Harici) CSS olarak adlandırılır. Bu yöntemde farklı bir dosyada oluşturulan CSS kodları web sayfasına dahil edilerek kullanılabilir. Büyük projelerde tanımladığınız CSS dosyalarını bu yöntemle çağırarak her web sayfası için aynı kodları kullanabilirsiniz. Böylelikle yeniden yazmaktan kurtulacağınız gibi aynı özellikleri taşıyan web sayfalarındaki elemanların her birinde değişiklik yaparken tek bir yerden yaptığınız değişiklik tüm sayfalarda etkili olacaktır ve uygulamanızın bakımı kolaylaşacaktır. Diğer bir yöntem ise Internal (Dâhilî) CSS olarak adlandırılan, CSS kodlarının web sayfasının kısmına
style.css içerisindeki kodları içerisine yazıp çalıştırdığınızda da web sayfanız aynı şekilde çalışacaktır. Bu yöntemin External CSS yönteminden avantajı ayrı bir css dosyası ile ilgilenmeniz gerekmez. Küçük ve tek sayfalık projelerde kullanılabilir. Ancak birden fazla web sayfasında aynı elemanı kullandığınızda (örneğin gibi.) her sayfada tekrar stillendirme yapmanız gerekmektedir. Diğer bir dezavantajı ise HTML dokümanı çok uzadığında CSS kodları da uzayacağı için çalışılması zor bir projeye dönüşecektir. Son CSS yazım yöntemi ise Inline (Satır İçi) CSS olarak adlandırılan yöntemdir. Bu yöntem ile HTML etiketinin style özelliği içerisine doğrudan CSS kodu yazabilirsiniz. Doğrudan elemanın içerisine yazıldığı için seçici ile ögenin seçilmesine gerek yoktur. Yalnızca biçimlendirdiği eleman kapsamında geçerlidir. Web sayfalarının içerisinde özel biçimlendirmede faydalı olabilse de büyük projelerde kullanımı oldukça zorlaştırmaktadır. Birbirine göre artıları olsada büyük projelerde External CSS kullanmanın avantajları oldukça fazladır.
Temel CSS Kavramları
CSS kurallarının anlaşılması için bazı kavramların öğrenilmesi gereklidir.
Tarayıcı Varsayılanları
CSS yazmadan da tarayıcılar HTML elemanlarını şekillendirmektedir. Bu tarayıcıların HTML elemanları için atadığı varsayılan değerler sayesinde olur. Örneğin Sayfa 36’daki kod bloğunda <h1> etiketi için varsayılan tarayıcı değerleri verilmiştir. Yazılan CSS kuralları ile tarayıcı varsayılan değerleri ezilerek yeni stiller kazandırılır.
Kutu Modeli (Box Model)
Kutu Modeli kavramı CSS’de yerleşim yaparken kullanılır. CSS her HTML elemanını kutu olarak yerleştiriyor diyebiliriz. Yerleşim bu kutuların boyutlarını ölçeklendirerek yapılır. Kutu modeli kavramının altında border (kenar), padding (dolgu) ve margin (dış boşluk) terimlerini inceleyeceğiz.
Border, kutu modelinde sınırları ifade eden bu özellik gerektiğinde kutunun etrafında çizgi çizmek içinde kullanılır.
border: 2px solid white;
Bu komut işaret ettiği elemanın çevresinde 2px kalınlığında bir çizgi çizer. Solid ise kenarların düz çizgi ile oluşturulacağını ifade eder.
Komutu yukarıdaki hâliyle kullanırsanız kutunuzun dışı dik köşelerden oluşacaktır. Yuvarlak yapmak için aşağıdaki komutu kullanabilirsiniz. Komut köşelerden 5px yuvarlatılacağını belirtir. Yüzdelik değerde verilebilir.
border-radius:5px
Margin, Kutu modelinin en dış katmanıdır. HTML elemanlarının dışında boşluk oluşturmak için kullanılır. Verilen pozitif değerler boşluğu büyütürken aynı zamanda
negatif değerler vererek kutuların birbiri üstüne gelmesi de sağlanabilir. Kural yazılırken tanımlanması aşağıdaki kod bloğunda verilmiştir.
margin:10px
Bu komut ile elemanın 4 kenarına 10px boyutunda boşluk verilmiştir. Margin komutlarının diğer türlerini inceleyecek olursak;
• margin: Tek komutla elemanın 4 köşesine boşluk vermek için kullanılabilir. • margin-bottom: Elemanın altından verilecek boşluğu belirtmek için kullanılır. • margin-top: Elemanın üst boşluğunu belirtmek için kullanılır. • margin-left: Elemanın sol taraftan verilecek boşluğunu belirtmek için kullanılır. • margin-right: Elemanın sağ tarafından verilecek boşluğu belirtmek için kullanılır.
Padding özelliği, bir öğenin içeriği ile kenarlığı arasında ne kadar boşluk görünmesi gerektiğini belirtmemizi sağlar. Değer olarak uzunluk, yüzde veya inheritance olmalıdır. Değer inheritance olursa, üst ögesiyle aynı padding değerini alır. Yüzde kullanılırsa, yüzde, içeren kutunun değeridir. Aşağıdaki kod bloğunda kuralın yazımı gösterilmiştir. Bu komut ile kutunun 4 kenarından da 10px boyutunda dolgu yapılır.
padding:10px
Padding türlerini inceleyecek olursak;
• padding: Tek komutla 4 kenardan dolgu verebilmek için kullanılır. • padding-bottom: Kutunun alt tarafından dolgu yapabilmek için kullanılır. • padding-top: Kutunun üst tarafından dolgu yapabilmek için kullanılır. • padding-left: Kutunun sol tarafından dolgu yapabilmek için kullanılır. • padding-right: Kutunun sağ tarafından dolgu yapabilmek için kullanılır.
CSS Seçiciler, CSS kurallarının uygulanacağı ögeleri belirler. External CSS dosyalarında veya Internal CSS kodları hazırlanan kuralları uygulamak için kullanılır. Stillendirilmek istenen elemanlara seçiciler yardımıyla ulaşarak kuralları uygulayabiliriz
Temel seçiciler, doğrudan stillendirilmek istenen elemanlara ulaşabilen basit seçiciler olarakta adlandırılan seçici türleridir. Diğer seçicilerinde temelini oluştururlar. Aşağıdaki listede 5 temel seçici verilmiştir.
1. * Seçicisi 2. Etiket Seçici 3. Class Seçici 4. Id Seçici 5. Attribute (Özellik) Seçici
"*" Seçicisi İlk seçici olan "*" seçicisi sayfadaki bütün elemanlara etki eder.
CSS kuralları doğrudan HTML etiketi seçilerek uygulanabilir.
Sınıf seçici, ögelerin alt özelliklerinden olan class="" özelliği ile belirtilen sınıf isimlerini kullanarak seçim yapar. En sık kullanılan seçici türüdür. Uygulanmak istenen bir veya daha fazla HTML elemanına class="" özelliği ile sınıf ataması yapılmalıdır. CSS dosyasında bu sınıfa yazılan kurallar HTML sayfasında bu sınıfın atamasının yapıldığı tüm elemanları etkiler.
CSS dosyalarında sınıflara kurallar yazılırken nokta işareti ile başlamalıdır. Tarayıcılar tarafından nokta ile başlayan kurallar bir sınıfa ait olarak yorumlanır.
Bir class kuralını birden fazla elemana atayabileceğiniz gibi, bir elemana farklı özellikleri taşıyan birden fazla class atayabilirsiniz.
HTML dokümanında elemanlara uniq bir ID atayabilirsiniz. Buradaki uniq kelimesi bir ID’nin sadece bir elemana atanması gerektiğini işaret eder. Aynı id’ye sahip birden fazla eleman olmamalıdır. CSS kurallarını bu id için yazarak doğrudan bu elemanı stillendirebiliriz. Kural yazılırken ID’nin başına # işareti konmalıdır.
Temel seçicilerden en sonu attribute seçicidir. Belirli bir özelliği olan HTML elemanlarını stillendirmek için kullanılır.
Grup seçiciler, birden fazla seçiciye aynı kuralı uygulamak için kullanılır. Seçiciler virgül ile ayrılarak yazılır.
Bir Pseudo sınıfı, seçili öge veya ögelerin özel durumunu belirten bir seçiciye eklenen bir anahtar sözcüktür. Ögelerin durumuna göre stillendirme yapmak için kullanılır. Web sayfalarında gezinirken mouse üzerine geldiği zaman rengi değişen bir butonu veya ziyaret ettiğiniz linklerin yazı renginin değiştiğini farketmişsinizdir. Bu tarz stillendirmeleri yapmak için kitabın ilerleyen bölümlerinde öğreneceğimiz JavaScript kullanılsa da Pseudo seçicilerle yapmak çok daha kolaydır. Söz dizimi aşağıdaki gibidir.
seçici:pseudo-sınıfı {özellik: değer}
Pseudo sınıflar, kullanıcılar ögelerin üzerlerinde gezinirken (:hover), odaklanırken (:focus) ögeleri farklı şekilde stillendirmeye yarar.
Pseudo elementler, bazı seçicilere özel efektler yüklemek için kullanılır. Pseudo sınıflar ögelerin durumuna göre stillendirmeler yaparken pseudo elementler ögenin bir parçasına, öncesine veya sonrasına stillendirme yapar diyebiliriz. JavaScript dosyalarına gerek duymadan bu efektleri uygulayabilmemizi sağlar.
Birleştiriciler, birden fazla temel seçiciyi birleştirerek seçilmek istenen ögeler için özel sorgu yapabilmeyi sağlar.
Kelime anlamı alt seçici olan descendant seçicisi, belirtilen bir ögenin tüm alt elemanlarına ulaşmaya yarar.
Child seçici, belirtilen bir elemanın bir altında bulunan elemanları seçmek için kullanılır. Descendant ilk seçicinin altındaki tüm seviyeden ikinci seçicileri alırken Child seçici bir alt seviyedeki seçicileri alır. Birleştirilecek seçiciler arasına ">" işareti konulur.
Kelime anlamı bitişik kardeş denilen Adjacent Sibling Seçicisi belirli bir ögeden sonra gelen ögeyi seçmek için kullanılır. Her iki ögenin de aynı seviyede olması gerekir. Seçiciler arasına "+" işareti konulur.
Genel Sibling Seçicisi belirli bir ögeden sonra gelen tüm ögeleri seçmek için kullanılır.
Basamak Yapısı
HTML elemanına etki eden birden fazla stil kuralı olabilir. Tarayıcılar bu kuralları ekleyerek işaret ettiği elemanları stillendirir. CSS’nin içindeki basamak (cascade) kelimesi buradan gelir.
Öncelik vermek istediğiniz özelliğe !important anahtar kelimesini kullanarak öncelik verebilirsiniz. Aşağıdaki kod bloğunda kullanımını gördüğünüz !important kendisinden sonra gelen özellikleri ezerek yazı tipini yeşil olmasını sağlayacaktır. Bunu diğer CSS özelliklerini öncüllendirmek içinde kullanabilirsiniz.
p { color: green !important; }
CSS Öncelikleri
Tarayıcılar aynı özelliğe etki eden stil kuralları uygularken kuralın seçici öncelikleri ile sıralama yaparlar. Seçici öncelikleri aşağıdaki gibidir:
1. Inline yazılan kural 2. Id Seçicisi 3. Attribute Seçicisi 4. Class Seçicisi 5. Etiket Seçicisi 6. * Seçicisi
Bu sıralamayı inceleyecek olursak en güçlü olanı satır içine yazılan kurallardır. Satır içi yazılan kural yoksa tarayıcı sırasıyla "id", "attribute", "class", etiket ve "*" operatör ile tanımlanan kuralları uygular. Bu kurallar içerisinde "!important" anahtar kelimesi ile yazılan varsa öncelik yine ona verilir. Eleman ile ilgili herhangi bir stil kuralı yazılmadıysa tarayıcı varsayılan stil kuralını atar.
CSS Kalıtım (Inheritance)
CSS de inheritance kavramı ile kullanılan kalıtım özelliği, dışarıdaki elemanın içerideki elemana stil özelliklerini aktarabilmesidir. HTML dokümanında bazı özellikler miras olarak aktarılırken bazıları aktarılmaz. Bu kafa karıştırıcı olsa da arkasındaki prensip aslında daha az CSS kuralı yazmaya izin verecek şekilde tasarlanmıştır. CSS özelliklerinden kalıtım ile aktarılanlara bir örnek verirsek color özelliği verilebilir. Bir HTML elemanına color özelliği verilirse altındaki elemanların da color özelliği
seçilmiş olur. Alttaki elemanlardan birisine farklı bir color özelliği verilene kadar en yukarıda verilen color özelliği geçerli olur. Kalıtımla aktarılamayan özelliklere örnek için elemanlara kenar çizgisi vereceğimiz border özelliğini söyleyebiliriz. Border özelliği verilen elemanın etrafında çizgi şeklinde bir kutu oluşurken alt elemanlarında herhangi bir kutu oluşmaz.
Renkler
CSS, bir rengi belirtmek için renk değerlerini kullanır. Tipik olarak bunlar, HTML elemanının metni veya arka plan rengini belirtmek için kullanılır. Kenarların rengini ve diğer dekoratif efektleri etkilemek için de kullanılabilirler. Renk değerlerini çeşitli formatlarda belirtebilirsiniz. Tablo 2.1’de (sayfa 50) tüm formatlar gösterilmiştir.
Ölçü Birimleri
CSS, uygulanan özelliklerin boyutunu belirlerken farklı ölçü birimleri kullanır. Stil kurallarında ölçüler verilirken bu birimlerden faydalanılır.
CSS ile tanımlanan bazı özellikler, ögeyi ne kadar etkileyeceğini belirlemek için ölçü birimlerine ihtiyaç duyar. Örneğin ögenin genişliğini tanımlarken veya ögeye kenarlık eklerken, kuralın ölçü birimiyle birlikte yazılması gerekir. Ölçü birimleri ekran boyutuna bağımlı veya mutlak birimler olarak ikiye ayrılır. Mutlak birimler, sayfanızın görüntüleneceği ekranlardan bağımsız olarak verilen ölçü birimleridir. Belirtilen birimler telefon veya büyük ekranda aynı boyutta görünürler. Sayfanız ekran boyutundan bağımsız ise kullanımı kolaydır. Bağımlı birimler, ekran boyutuna veya kapsayan elemana göre ölçüsü değişen birimlerdir. Ekran boyutuna duyarlı sayfaların tasarımında kullanımları kolaylık sağlar.
Width & Height
Ögeleri konumlandırırken içerikten farklı bir boyut verilme ihtiyacı duyulduğunda width ve height özellikleri verilir. Doğrudan bir boyut verilebileceği gibi parent elemanına bağımlı olarak da bir değer verilebilir. Değer yüzde olarak belirtilmişse, tarayıcı ögeyi parent elemanın boyutunu temel alarak boyutlandırır. Ögelerin genişliklerini sınırlandırmak istediğinizde ise max-width ve max-height özelliklerini kullanabilirsiniz. CSS width ve height değerlerini max-width ve max-height boyutlarını aşmayacak şekilde hesaplayacaktır.
Box Sizing
CSS3 ile birlikte gelen box-sizing özelliği, HTML elemanlarını boyutlandırırken daha kolay ve anlaşılır bir yöntem olması için geliştirilmiştir. CSS2 ve öncesinde kutu modelinin boyutları aşağıdaki gibi hesaplanıyordu; İçerik Genişliği + margin + padding + border = Kutu Genişliği İçerik Yüksekliği + margin + padding + border = Kutu Yüksekliği Bu da bir öge için verdiğimiz boyutlara margin, padding ve border özellikleri eklendiğinde taşmaya neden oluyordu. Bu sorunu çözmek için CSS3 ile birlikte gelen box-sizing özelliğine border-box değeri verilebilir. border-
box değeri, içerik boyutunun margin, padding ve border değerinin dâhil olduğu ölçü diyebiliriz.
Background
Türkçesi arka plan anlamına gelen "Background" özelliği HTML elemanlarının arka planlarını renklendirme, resim ekleme ve konumlandırma gibi işlevler için kullanılır.
• background-color: Bir ögenin arka plan rengini ayarlamak için kullanılır. • background-image: Bir ögenin arka plan görüntüsünü ayarlamak için kullanılır. • background-repeat: Arka planda bir görüntünün tekrarını kontrol etmek için kullanılır. • background-position: Bir görüntünün arka planda konumunu kontrol etmek için kullanılır. • background-attachment: Bir görüntünün arka planda kaydırılmasını kontrol etmek için kullanılır.
Eleman Yerleşimi
Display
Tarayıcılar inline elemanları içerik kadar boyutlandırdıkları için CSS ile bu elemanlara genişlik, yükseklik, margin ve padding değerleri verilemez. Block elemanlar tüm satırı kapladıkları için bu elemanlarda yan yana getirilemez.
Block elemanlar, tarayıcılar tarafından varsayılan olarak block özelliği olan elemanlar her zaman yeni bir satırdan başlar ve bulundukları satırı tamamen kaplarlar. Başka elemanlarla yan yana getirilemezler.
Inline elemanlar, içerikleri kadar genişlik ve yükseklik kaplayan elemanlardır. Block elemanların aksine başlamak için yeni bir satıra ihtiyaç duymazlar. Satır içinde bittikleri yerden başka bir inline eleman başlayabilir.
Position
CSS, ögeleri sayfa üzerinde konumlandırırken position özelliğini kullanır. Farklı değerler alarak ögelerin alt, üst, sol ve sağdan konumlandırılmasını sağlar. Üstten verilecek konum değeri için ögenin top özelliğine değer verilmelidir. Aynı şekilde alttan verilecek konum değeri için bottom, soldan verilecek konum değeri için left ve sağdan verilecek konum değeri için right özelliklerine değer verilmelidir.
Overflow
Overflow özelliği, içeriğin belirli bir alana veya ekrana sığmadığı durumlarda fazla içerik için ne yapılması gerektiğini bildirmek için kullanılır. Aşağıdaki değerler ile kullanılır:
• visible • hidden • scroll • auto
CSS ile Uygulama NAVBAR
Buraya kadar öğrendiklerimizi navbar komponenti hazırlayarak pekiştirelim. İlk bölümde hazırladığımız kitap
uygulaması için navbar komponenti yapalım. Komponentin çıktısı Görsel 2.34’teki (Sayfa 69) gibi olacak. Butonlara Görsel 2.34’teki gibi hover efekti vereceğiz. Kod bloğunda komponentin HTML kodları Sayfa 69’da yer almaktadır. Adım adım CSS kurallarını uygulayarak navbarımızı hazırlayalım.
Adım 1: Liste Dekorasyonunu Kaldırma
İlk olarak tarayıcının ul elemanlarına atadığı dekorasyonu kaldırıp margin ve padding değerlerini temizliyoruz. Aynı kod bloğunda block eleman olan li ögelerini inline-block elemana dönüştürüp yanyana gelmelerini sağlıyoruz. li elemanlarına verilen padding değeri içeriden boşluk bırakılmasını sağlıyor.
Adım 2: Navbar Sınıfının Stillendirilmesi
Bu adımda kapsayıcı elemanın sınıfı olan navbara arka plan rengi atayacağız. Ayrıca yazı rengini beyaz yapıp harfler arasında letter-space ile boşluk bırakarak yazıların okunmasını kolaylaştıracağız. Padding özelliği ise içeriğin kenarlardan boşluk bırakarak yerleşmesini sağlayacak. Arka plan rengini değiştirdikten sonra navbarın kenarlara tam oturmadığını beyaz boşluklar kaldığını göreceksiniz. Bunun nedeni tarayıcıların body etiketine varsayılan padding ve margin değeri eklemesidir. Body etiketinin padding ve margin değerleri de bu adımda sıfırlanacak.
Adım 3: Link ve Logonun Biçimlendirilmesi
Link etiketlerinin biçimlendirilmesi bu adımda yapılacak. Linklerin border özelliği, yazı boyutu ve rengi, yazıların ortalanması ve a etiketlerinin boyutlandırılması aşağıdaki kurallar ile yapıldı. Aşağıdaki kurallardan text-align: center; özelliği kutu içerisindeki yazıyı ortalamak için kullanılır. Bu adımda link etiketlerinin hover özelliği kullanılarak mouse hareketi ile arka plan renginin değiştirilmesi sağlandı.
Adım 4: Ögelerin Yan Yana Getirilmesi
Bu aşamaya kadar block eleman seviyesinde olan .navbar- logo ve .navbar-items sınıfları inline-block elemana dönüştürülerek yan yana getirilecek. Aşağıdaki kod bloğunda bu adımda yapılan stillendirme kurallarını görebilirsiniz.