INTERNET VE WEB PROGRAMLAMA Dersi Stil Şablonları soru cevapları:

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 web sayfalarında;

• Arkaplan renklendirme, arkaplana resim ekleme,

• Sayfa düzenini belirleme,

• Resimlere/Nesnelere kenarlık ekleme, renk ve boyutlarını düzenleme,

• Metin fontlarını belirleme, renklendirme,

• Menüler hazırlama,

• Buton yapma,

• Hyperlink metinlerinin özelliklerini belirleme (üzerine gelindiğinde, basıldığında değişen renk vb)

  gibi düzenlemeler yapılabilir.

CSS’nin Temel Özellikleri

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. Bir stil oluştururken; eğer varolan etiketlerin dışında yeni bir ad ile yeni bir stil oluşturuluyorsa, stil adının başına nokta eklenir. Yani stilin adı “.stiladi” olarak yazılır. { ve } işaretlerinin arasında kalan alan ‘bildirim alanı’ ya da ‘scope’ olarak adlandırılır. Bu alana stilin adı, özelliği ve değeri yazılır. Burada “font-family” özellik iken, “tahoma, verdana, helvetica, sans-serif” bilgisi değer olarak adlandırılır.

Bir html sayfada kullanılacak hücreler için farklı özellikleri her seferinde yeniden yazmak yerine, iste- nen ö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.

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.

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.

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.

Animation-timing-function geçiş efektleri ile animasyona estetiklik katar. Aşağıdaki değerleri alır:

• linear

• ease

• ease-in

• ease-out

• ease-in-out

• cubic-bezier (n,n,n,n): manuel olarak geçişleri kendimiz hazırlamamızı sağlar.

• steps: başlangıç karesinden yada bitişdenitibaren belirtilen kare miktarı kadar atla- mamızı sağlar.

• none: Animasyon öncesi veya sonrası her- hangi bir stil uygulanmamasını sağlayan varsayılan değerdir.

• forwards: Animasyonun son karesinde ta- nımlanan özelliğin-değerinin korunmasını sağlar.

• backwards: Tanımlanan animation-delayzamanında uygulanan animasyonun ilk ka- resinin değerine bağlıdır. Animasyonun ilk tanımlanan değerleri geçerlidir.

• both: Animasyonun durdurma zamanın- daki ilk değeri ve son karedeki değerinin elemana tanımlanması demektir. Yani hem forwards hem de backwards geçerlidir.

Animation Kısayoludur ve sırasıyla