INTERNET VE WEB PROGRAMLAMA - Deneme Sınavı - 5

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. Doğru cevap C'dir.

{ 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. Bu alanda stilin özelliği belirtildikten sonra ‘:’ işareti konarak bu özellik için değer ataması yapılır. Doğru cevap A'dır.

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;

anlamındadır. Doğru cevap B'dir.

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 başına diyez (#) işareti yazılır. Doğru cevap E'dir.

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. Şimdi bu değerler için örnekleri inceleyelim. Doğru cevap C'dir.

active: Bir link (köprü)'e tıklandığında meydana gelecek değişimi ifade eder. Doğru cevap A'dır.

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.

Bu özelliğin alt kategorileri için farklı değerler belirlenir. Transition altında belirlenen değerler şunlardır:

Doğru cevap D'dir.

Animation-fill-mode - Dolgu modu: Animasyon öncesi ve sonrası hedef stilleri
belirtmeyi sağlar. Aldığı değerler şunlardır;

Doğru cevap B'dir.

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. Bunun için kullanılabilecek etiketler aşağıda listelenmiştir.

Doğru cevap E'dir.

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

animation:shape 5s ease-in infinite alternate 2s forwards, circle 2s ease-in-out 5 reverse 1s backwards;

Doğru cevap A'dır.

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.

Temel özellikleri ve işlevlerini aşağıdaki gibi sıralayabiliriz:
• background-color
• color 
• font-family
• font-size 
• font-weight
• width
• height

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.

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

ID için seçicinin yani stil adının diyez (#) işareti yazılır. 

Örneğin: #kimlikornegi

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ış olur.

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

Animation delay: animasyona başlamadan önce ara verilmesini sağlar.

Web sayfalarının, HTML dili ile kodlaması yapılarak iskeleti oluşturulup dinamik yapısı hazırlanır ve görsel sunumu için CSS’ten yararlanılır.