Ünite 4: Stil Şablonları

Giriş

İnternet ve teknoloji alanında yaşanan gelişmeler, web sayfalarını durağan olmaktan çıkarıp, daha dinamik ve aktif yapılarda hazırlanabilen bir hâle getirmiştir. Web geliştiriciler için sayfa tasarımı ve hazırlanması süreçlerinde hem zamandan hem emekten tasarruf sağlamaya olanak tanıyan stil şablonları da bu gelişmelerden etkilenmiş ve işlevsellik kazanmıştır.

Stil Şablonu (CSS) Nedir?

Bir web sayfasının estetik olması, metinlerin, renklerin uyumlu olmasını gerektirir. Web sayfası oluştururken görsel açıdan zenginlik katmak amacıyla HTML ile yazılan kodlarla kullanılan CSS; “Cascade Style Sheets” kavramının kısaltmasıdır ve “Basamaklı Stil Şablonları” anlamına gelmektedir.

CSS ile örneğin sayfada kullanılan metinlerin boyut, renk gibi özelliklerini tek bir yerden düzenleyebilir ya da değiştirebilirsiniz. CSS aynı zamanda web sayfaları için genel şablonlar hazırlanmasına, böylelikle web sitelerinin kullanıcı tarafından görülen arayüzünü hızlıca şekillendirme ve düzenlemeye olanak sağlar. İlk olarak CSS1 adı ile 1994-1995 yıllarında kullanılmaya başlanan stil yapısı, World Wide Web konsorsiyumu tarafından 1996’da uluslararası bir biçimlendirme standardı olarak kabul edilmiştir. Yazı tipi ve düzeni, renk ve hizalama gibi özelliklere yönelik düzenlemeler yapılmasına olanak veren CSS1, 1998 yılından itibaren yeni düzenlemelere de olanak tanıyan CSS2’ye dönüşmüştür. CSS2 versiyonunda yazı düzeninin yanında sayfa düzeniyle ilgili özelliklerin de belirlenmesi sağlanmaktadır. Ayrıca yalnızca bilgisayarlarda değil, kiosk, cep telefonu gibi diğer cihazlarda da web sitelerinin düzgün görünmesini sağlayan ek özellikler içermektedir. CSS3 ise 2010 yılında “modül” kavramı ile birlikte yeni bir yapı olarak ortaya çıkmıştır. CSS3’ün modüler yapısı alışılagelmiş stillendirme düzenlerinin dışındadır. Dolayısıyla öğrenmesi önceki sürümlere göre nispeten zordur denilebilir.

CSS’in; yerel CSS, genel CSS ve harici CSS olmak üzere 3 türü vardır. Yerel CSS, sadece sayfa içerisinde tanımlandığı yerde ve tanımlandığı metin/nesne için geçerli, seçiciye gömülü stildir. Genel CSS ise tüm sayfa için tanımlanan özellikleri kapsar. Harici CSS ile kastedilen; .css uzantılı bir dosyaya kaydedilerek kullanılacağı sayfa ya da siteye bağlanan stillerdir. Bu stil dosyası, stillerin tekrar oluşturulmasına gerek kalmadan, farklı sitelerde ya da sayfalarda da kullanılabilir.

CSS ile belirlenebilecek temel bazı özellikler vardır. Bir sayfanın body etiketi altına yazılabilecek temel özellikleri ve işlevlerini aşağıdaki gibi sıralayabiliriz:

• background-color: arka plan rengini belirlemek için kullanılır.
• color: body etiketine direk yazılabilen color, sayfaya eklenecek metinlerin rengini belirlemek için kullanılır, varsayılan değeri siyahtır.
• font-family: eklenen metnin yazı tipini belirlemek için kullanılır.
• font-size: metnin yazı boyutunu belirler.
• font-weight: metin için kalın ya da normal değerler alır.
• width: yazıldığı metin ya da nesne için genişlik değerini belirlerken kullanılır.
• height: yazıldığı metin ya da nesne için yükseklik değerini belirlerken kullanılır.

CSS kodlarının genel yapısında, seçici, özellik ve değer bilgileri yer alır. Seçici olarak tanımlanan kısım aslında stilden etkilenecek olan HTML etiketidir. Buna göre, bir stil oluşturulduğunda, kullanılacağı html nesnesinin özelliği ve o özellik için değer ataması yapılmış olur.

İlk olarak stilin özelliği yazılır. Özellik belirtildikten sonra ‘:’ işareti konarak bu özellik için değer ataması yapılır. CSS kodları doğrudan body etiketi altına da eklenebilir. CSS kodlaması Dünya Web Birliği (W3C) nin belirlediği standartlara sahip olmalıdır. Bu standartlara uyulması; görüntü birliği sağlanabilmesi adına önemlidir. Aynı zamanda sayfaların Google tarafından taranabilirliğini ve bulunabilirliğini arttıracaktır.

CSS ile Hücre Özellikleri Belirleme

Bir html sayfada kullanılacak hücreler için farklı özellikleri her seferinde yeniden yazmak yerine, istenen özelliklere sahip stiller oluşturmak mümkündür.

Hücre için;

• margin: hücre dışı boşluk
• padding: hücre içi boşluk
• border: çerçeve anlamındadır. gcolor=”#008000” aynı renkleri ifade etmektedir.

Padding ya da margin özellikleri için ayrıca her bir taraftan ayrı boşluk değeri atanabilir. Bunun için kullanılabilecek 2 yöntem vardır. Bu yöntemlerden ilki, kutunun her bir kenarı için değer atanmasıdır. İkinci yöntem, her kenar için atanacak değerin yanyana yazılarak tek satırda atanmasıdır. Bu kullanımda değerler otomatik olarak saat yönünde olacaktır.

Border için atanan değerler piksel olarak belirlenebildiği gibi aynı zamanda farklı şekiller olarak da belirlenebilmektedir.

CSS3’te metinlere gölgelendirme yapılabilmektedir. Bunun için text-shadow özelliği kullanılır.

CSS’de Sınıf ve Kimliklendirme

Stillerde sınıf ve kimlik yapılandırması en temel konu olarak görülebilir. Bir stili sınıflamak demek, aynı sayfada birden fazla etiket için aynı CSS özelliği belirleyip atamak anlamına gelir. Yani sınıf olarak oluşturulan bir stil bir sayfada tekrar tekrar kullanılabilir. Stil sınıflandırılırken stil adının yani seçici olarak tanımlanan adın başına nokta (.) yazılır. ID, identity’nin kısaltmasıdır ve kimlik anlamına gelir. ID olarak atanan bir stil, sayfada yalnızca bir kere kullanılabilir. ID için seçicinin yani stil adının diyez (#) işareti yazılır. Tanımlanan bir kimlik örneğini p etiketi altında kullanmak için, etiket açıldığında ID’nin tanımlanması gerekir.

Stil Kullanarak Nesneleri Konumlandırma

Nesnelerin stil kullanılarak konumlandırılmasını bilmek önemlidir. Konumlandırma sayesinde sayfaya eklenecek her nesne için yer bildirilmesi, böylece sayfanın görsel tasarımı ve arayüzünün oluşturulması sağlanmış olacaktır. Konumlandırma için kullanılan position özelliği farklı değerler alır. Static ve relative değerleri div etiketlerine göre konumlanırken, fixed ve absolute değerleri tarayıcıya göre konumlanmaktadır.

Yatay ve Dikey Eksenlerde Ortalama; Bir div nesnesi için absolute değeri ile birlikte, top ve left konumlandırma özellikleri için değer belirtilerek yatay ve dikey eksenlerde ortalama da yapılabilir.

Boyutlandırılabilir Kutu: CSS3 ile yeniden boyutlandırılabilir kutu yapmak da mümkündür. Bunun için “resize” özelliği kullanılır.

Bir Sınıfa Ait Olmayan Sınıflar (Pseudo - Sözde Sınıflar)

Bir sınıf olmayan ancak atandığı stil adına bazı temel işlevsel özellikler katan bu teknik, sözde sınıf olarak da adlandırılır. Sözde sınıfın söz dizilimi şu şekildedir; oluşturulan stil adının sonuna “:” işareti konularak sözde sınıfın adı eklenir. Bu sınıf ve elementler, (x)html hiyerarşisi ile erişilemeyen element ve sınıflara erişim sağlar. Pseudo sınıfı bir elementi farklı sınıflara böler. Örneğin; link elementi active, visited gibi sınıflara bölünebilir. Pseudo elementi ise bir elementi alt kısımlara böler. Örneğin; bir paragraf ilk harf, ilk satır gibi kısımlara bölünebilir.

Sözde (Pseudo) Sınıf Örnekleri: Pseudo sınıflarında sıralama önemlidir. Stil belirlenirken “link-visited-focus- hover-active.” sıralaması doğru bir sıralama olacaktır.

Css3 Uygulamaları

CSS3’ün modüler yapısı alışılagelmiş stillendirme düzenlerinin dışındadır. Dolayısıyla öğrenmesi önceki sürümlere kıyasla daha zordur. Ancak bununla birlikte daha dinamik sayfalar oluşturmaya olanak tanıması gibi üstün yönleri bulunmaktadır. CSS3 ile birlikte kenar yumuşatma, oval kenarlıklar, hareketli stiller oluşturulması mümkün hâle gelmiştir.

CSS3’te Geçişler: CSS3 ile kullanılan geçişler ile bir nesnenin arka plan rengi, boyutu, şeffaflığı gibi farklı özelliklerinde değişimler yapmak mümkündür. Bunun için “transition” özelliği kullanılır.

CSS3 Dönüşümleri: Transform (dönüşüm) komutu ile sayfadaki nesneler için 2 boyutlu ya da 3 boyutlu dönüşümler yapılması sağlanabilir. Dönüşüm komutu kullanılarak stil oluşturulduğunda, stili uyguladığınız nesnelerin boyutlarını ya da konumunu değiştirmek, nesneyi döndürmek hatta eğdirebilmek mümkündür.

CSS3 ile Animasyonlar: CSS3 ile gelen önemli özelliklerden biri de sayfa animasyonları yapılmasına olanak tanımasıdır. Örneğin CSS3 ile bir sayfada kullanıcıdan bağımsız renk değiştiren nesne, yükleme çubuğu gibi animasyonlar yapmak mümkündür. Animasyon için öncelikli olarak tanımlama ve zamanlama yapılır sonra bu tanım ve zamanlamalar nesneye atanır. Bir elemana istenildiği kadar animasyon tanımlanabilir. Animasyonlar için öncelikle keyframe - anahtar kare oluşturulması gerekir. Anahtar kare başlangıç ve bitişi arasındaki durum ve hareketleri tanımlamayı sağlar. from animasyonun başlangıç karesidir ve içine yazılan her durum uygulanacağı nesnenin ilk hâlini belirtir. to ise bitiş karesidir. Bu yapıda iki anahtar kare olmakla birlikte % (yüzde) olarak ifade edildiğinde daha kullanışlı olmaktadır.

CSS ile animasyon oluştururken dikkat edilmesi gereken bazı hususlar vardır. Bunlar aşağıda listelenmiştir. Animationname - Animasyon adı: Birden fazla animasyon için isimleri virgül ile ayırmanız gerekir.

Animation-duration - Animasyon süresi: Zaman değerleri alır (s, ms). Bir animasyonun parametrelerinin çalışabilmesi için animasyon isminin ve süresinin elemana belirtilmesi gerekir.

Animation-timing-function – Zamanlama fonksiyonu: Animation-timing-function geçiş efektleri ile animasyona estetiklik katar.

Animation-iteration-count - Tekrar sayısı: Sayı ve infinite olmak üzere iki değer alır.

• Sayı: Tüm pozitif sayıları alabilir. Başlangıç değeri 1’dir.
• Infinite: Sonsuz anlamına gelir. Animasyon sürekli baştan sona tekrar eder. Animation- direction - Animasyonun yönü: Normalde bir animasyon başlangıçtan bitişe kadar düz bir şekilde hareket eder. Bu hareketi tersine çevirmek bu özellik ile mümkün hâle gelmektedir.

Animation-fill-mode - Dolgu modu: Aldığı değerler şunlardır;

• none: Animasyon öncesi veya sonrası herhangi bir stil uygulanmamasını sağlayan varsayılan değerdir.
• forwards: Animasyonun son karesinde tanımlanan özelliğin-değerinin korunmasını sağlar.
• backwards: Tanımlanan animation-delay zamanında uygulanan animasyonun ilk karesinin değerine bağlıdır. Animasyonun ilk tanımlanan değerleri geçerlidir.
• both: Animasyonun durdurma zamanındaki ilk değeri ve son karedeki değerinin elemana tanımlanması demektir. Yani hem forwards hem de backwards geçerlidir.

Animation Delay (Animasyona Ara Verme): Animasyona başlamadan önce belli bir sürede bekletmeyi sağlayan bu özellik ms, s gibi zaman değerleri alır.

Animation Play State (Animasyon Durdurma): Genellikle belli bir olaya bağlı olarak, örneğin tıklama veya üzerine fareyle gelinmesi durumunda başlatma ya da durdurma gibi olayları tanımlamayı sağlar.

• running: Belli bir olay ile çalıştırmayı sağlar.
• paused: Belli bir olay ile durdurmayı sağlar. CSS’de animasyon için durum seçicileri yeterli düzeyde değildir.

Animation Kısayolu: Tüm animasyon özellikleri için kısaltılmış kullanım sağlar. Sırasıyla;

• animation-name,
• animation-duration,
• animation-timinig-function,
• animation-iteration-count,
• animation-delay,
• animation-fill-mode özelliklerini kısaltma içine yazarak tanımlama yapılabilmektedir.

Eğer bir elemanda birden fazla animasyon tanıtmak istersek virgül ile ayırmamız gerekir