• color: body etiketine direk yazılabilen color, Giriş sayfaya eklenecek metinlerin rengini belirlemek İnternet ve teknoloji alanında yaşanan gelişmeler, web için kullanılır, varsayılan değeri siyahtır. sayfalarını durağan olmaktan çıkarıp, daha dinamik ve • font-family: eklenen metnin yazı tipini aktif yapılarda hazırlanabilen bir hâle getirmiştir. Web belirlemek için kullanılır. geliştiriciler için sayfa tasarımı ve hazırlanması • font-size: metnin yazı boyutunu belirler. süreçlerinde hem zamandan hem emekten tasarruf • font-weight: metin için kalın ya da normal sağlamaya olanak tanıyan stil şablonları da bu değerler alır. gelişmelerden etkilenmiş ve işlevsellik kazanmıştır. • width: yazıldığı metin ya da nesne için genişlik Stil Şablonu (CSS) Nedir? değerini belirlerken kullanılır. Bir web sayfasının estetik olması, metinlerin, renklerin • height: yazıldığı metin ya da nesne için yükseklik uyumlu olmasını gerektirir. Web sayfası oluştururken değerini belirlerken kullanılır.
görsel açıdan zenginlik katmak amacıyla HTML ile CSS kodlarının genel yapısında, seçici, özellik ve değer yazılan kodlarla kullanılan CSS; “Cascade Style Sheets” bilgileri yer alır. Seçici olarak tanımlanan kısım aslında kavramının kısaltmasıdır ve “Basamaklı Stil Şablonları” stilden etkilenecek olan HTML etiketidir. Buna göre, bir anlamına gelmektedir. stil oluşturulduğunda, kullanılacağı html nesnesinin
CSS ile örneğin sayfada kullanılan metinlerin boyut, renk özelliği ve o özellik için değer ataması yapılmış olur.
gibi özelliklerini tek bir yerden düzenleyebilir ya da İlk olarak stilin özelliği yazılır. Özellik belirtildikten sonra değiştirebilirsiniz. CSS aynı zamanda web sayfaları için ‘:’ işareti konarak bu özellik için değer ataması yapılır. genel şablonlar hazırlanmasına, böylelikle web sitelerinin CSS kodları doğrudan <body> etiketi altına da eklenebilir. kullanıcı tarafından görülen arayüzünü hızlıca CSS kodlaması Dünya Web Birliği (W3C) nin belirlediği şekillendirme ve düzenlemeye olanak sağlar. İlk olarak standartlara sahip olmalıdır. Bu standartlara uyulması; CSS1 adı ile 1994-1995 yıllarında kullanılmaya başlanan görüntü birliği sağlanabilmesi adına önemlidir. Aynı stil yapısı, World Wide Web konsorsiyumu tarafından zamanda sayfaların Google tarafından taranabilirliğini ve 1996’da uluslararası bir biçimlendirme standardı olarak bulunabilirliğini arttıracaktır. kabul edilmiştir. Yazı tipi ve düzeni, renk ve hizalama gibi özelliklere yönelik düzenlemeler yapılmasına olanak veren CSS ile Hücre Özellikleri Belirleme
CSS1, 1998 yılından itibaren yeni düzenlemelere de Bir html sayfada kullanılacak hücreler için farklı olanak tanıyan CSS2’ye dönüşmüştür. CSS2 versiyonunda özellikleri her seferinde yeniden yazmak yerine, istenen yazı düzeninin yanında sayfa düzeniyle ilgili özelliklerin özelliklere sahip stiller oluşturmak mümkündür. de belirlenmesi sağlanmaktadır. Ayrıca yalnızca Hücre için; bilgisayarlarda değil, kiosk, cep telefonu gibi diğer cihazlarda da web sitelerinin düzgün görünmesini • margin: hücre dışı boşluk sağlayan ek özellikler içermektedir. CSS3 ise 2010 yılında • padding: hücre içi boşluk “modül” kavramı ile birlikte yeni bir yapı olarak ortaya • border: çerçeve anlamındadır. çıkmıştır. CSS3’ün modüler yapısı alışılagelmiş gcolor=”#008000”> aynı renkleri ifade stillendirme düzenlerinin dışındadır. Dolayısıyla etmektedir. öğrenmesi önceki sürümlere göre nispeten zordur denilebilir. Padding ya da margin özellikleri için ayrıca her bir taraftan ayrı boşluk değeri atanabilir. Bunun için CSS’in; yerel CSS, genel CSS ve harici CSS olmak üzere kullanılabilecek 2 yöntem vardır. Bu yöntemlerden ilki, 3 türü vardır. Yerel CSS, sadece sayfa içerisinde kutunun her bir kenarı için değer atanmasıdır. İkinci tanımlandığı yerde ve tanımlandığı metin/nesne için yöntem, her kenar için atanacak değerin yanyana yazılarak geçerli, seçiciye gömülü stildir. Genel CSS ise tüm sayfa tek satırda atanmasıdır. Bu kullanımda değerler otomatik için tanımlanan özellikleri kapsar. Harici CSS ile olarak saat yönünde olacaktır. kastedilen; .css uzantılı bir dosyaya kaydedilerek kullanılacağı sayfa ya da siteye bağlanan stillerdir. Bu stil Border için atanan değerler piksel olarak belirlenebildiği dosyası, stillerin tekrar oluşturulmasına gerek kalmadan, gibi aynı zamanda farklı şekiller olarak da farklı sitelerde ya da sayfalarda da kullanılabilir. belirlenebilmektedir.
CSS ile belirlenebilecek temel bazı özellikler vardır. Bir CSS3’te metinlere gölgelendirme yapılabilmektedir. sayfanın body etiketi altına yazılabilecek temel özellikleri Bunun için text-shadow özelliği kullanılır.
ve işlevlerini aşağıdaki gibi sıralayabiliriz: CSS’de Sınıf ve Kimliklendirme
• background-color: arka plan rengini belirlemek Stillerde sınıf ve kimlik yapılandırması en temel konu için kullanılır. 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 CSS3 Dönüşümleri: Transform (dönüşüm) komutu ile stil adının yani seçici olarak tanımlanan adın başına nokta sayfadaki nesneler için 2 boyutlu ya da 3 boyutlu (.) yazılır. ID, identity’nin kısaltmasıdır ve kimlik dönüşümler yapılması sağlanabilir. Dönüşüm komutu anlamına gelir. ID olarak atanan bir stil, sayfada yalnızca kullanılarak stil oluşturulduğunda, stili uyguladığınız bir kere kullanılabilir. ID için seçicinin yani stil adının nesnelerin boyutlarını ya da konumunu değiştirmek, diyez (#) işareti yazılır. Tanımlanan bir kimlik örneğini nesneyi döndürmek hatta eğdirebilmek mümkündür. <p> etiketi altında kullanmak için, etiket açıldığında CSS3 ile Animasyonlar: CSS3 ile gelen önemli ID’nin tanımlanması gerekir. özelliklerden biri de sayfa animasyonları yapılmasına Stil Kullanarak Nesneleri Konumlandırma olanak tanımasıdır. Örneğin CSS3 ile bir sayfada Nesnelerin stil kullanılarak konumlandırılmasını bilmek kullanıcıdan bağımsız renk değiştiren nesne, yükleme önemlidir. Konumlandırma sayesinde sayfaya eklenecek çubuğu gibi animasyonlar yapmak mümkündür. her nesne için yer bildirilmesi, böylece sayfanın görsel Animasyon için öncelikli olarak tanımlama ve zamanlama tasarımı ve arayüzünün oluşturulması sağlanmış yapılır sonra bu tanım ve zamanlamalar nesneye atanır. olacaktır. Konumlandırma için kullanılan position özelliği Bir elemana istenildiği kadar animasyon tanımlanabilir. farklı değerler alır. Static ve relative değerleri div Animasyonlar için öncelikle keyframe - anahtar kare etiketlerine göre konumlanırken, fixed ve absolute oluşturulması gerekir. Anahtar kare başlangıç ve bitişi değerleri tarayıcıya göre konumlanmaktadır. arasındaki durum ve hareketleri tanımlamayı sağlar. from animasyonun başlangıç karesidir ve içine yazılan her Yatay ve Dikey Eksenlerde Ortalama; Bir div nesnesi için durum uygulanacağı nesnenin ilk hâlini belirtir. to ise bitiş absolute değeri ile birlikte, top ve left konumlandırma karesidir. Bu yapıda iki anahtar kare olmakla birlikte % özellikleri için değer belirtilerek yatay ve dikey eksenlerde (yüzde) olarak ifade edildiğinde daha kullanışlı ortalama da yapılabilir. olmaktadır.
Boyutlandırılabilir Kutu: CSS3 ile yeniden CSS ile animasyon oluştururken dikkat edilmesi gereken boyutlandırılabilir kutu yapmak da mümkündür. Bunun bazı hususlar vardır. Bunlar aşağıda listelenmiştir. için “resize” özelliği kullanılır. Animationname - Animasyon adı: Birden fazla animasyon için isimleri virgül ile ayırmanız gerekir. Bir Sınıfa Ait Olmayan Sınıflar (Pseudo - Sözde Sınıflar) Animation-duration - Animasyon süresi: Zaman değerleri Bir sınıf olmayan ancak atandığı stil adına bazı temel alır (s, ms). Bir animasyonun parametrelerinin işlevsel özellikler katan bu teknik, sözde sınıf olarak da çalışabilmesi için animasyon isminin ve süresinin elemana adlandırılır. Sözde sınıfın söz dizilimi şu şekildedir; belirtilmesi gerekir.
oluşturulan stil adının sonuna “:” işareti konularak sözde Animation-timing-function – Zamanlama fonksiyonu: sınıfın adı eklenir. Bu sınıf ve elementler, (x)html Animation-timing-function geçiş efektleri ile animasyona hiyerarşisi ile erişilemeyen element ve sınıflara erişim estetiklik katar. sağlar. Pseudo sınıfı bir elementi farklı sınıflara böler. Örneğin; link elementi active, visited gibi sınıflara Animation-iteration-count - Tekrar sayısı: Sayı ve infinite bölünebilir. Pseudo elementi ise bir elementi alt kısımlara olmak üzere iki değer alır.
böler. Örneğin; bir paragraf ilk harf, ilk satır gibi kısımlara • Sayı: Tüm pozitif sayıları alabilir. Başlangıç bölünebilir. değeri 1’dir.
Sözde (Pseudo) Sınıf Örnekleri: Pseudo sınıflarında • Infinite: Sonsuz anlamına gelir. Animasyon sıralama önemlidir. Stil belirlenirken “link-visited-focus- sürekli baştan sona tekrar eder. Animation- hover-active.” sıralaması doğru bir sıralama olacaktır. direction - Animasyonun yönü: Normalde bir animasyon başlangıçtan bitişe kadar düz bir Css3 Uygulamaları şekilde hareket eder. Bu hareketi tersine
CSS3’ün modüler yapısı alışılagelmiş stillendirme çevirmek bu özellik ile mümkün hâle düzenlerinin dışındadır. Dolayısıyla öğrenmesi önceki gelmektedir. sürümlere kıyasla daha zordur. Ancak bununla birlikte Animation-fill-mode - Dolgu modu: Aldığı değerler daha dinamik sayfalar oluşturmaya olanak tanıması gibi şunlardır; üstün yönleri bulunmaktadır. CSS3 ile birlikte kenar yumuşatma, oval kenarlıklar, hareketli stiller • none: Animasyon öncesi veya sonrası herhangi oluşturulması mümkün hâle gelmiştir. bir stil uygulanmamasını sağlayan varsayılan değerdir. CSS3’te Geçişler: CSS3 ile kullanılan geçişler ile bir nesnenin arka plan rengi, boyutu, şeffaflığı gibi farklı • forwards: Animasyonun son karesinde özelliklerinde değişimler yapmak mümkündür. Bunun için tanımlanan özelliğin-değerinin korunmasını “transition” özelliği kullanılır. 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