Stil şablonu 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'nin tarihsel gelişimini görselle anlatınız.
CSS kullanılarak ne gibi düzenlemeler yapılabilir?
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 nelerdir?
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'nin yapısı hakkında bilgi veriniz.
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.
CSS ile hücre belirleme nasıl olur?
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.
Stil kullanarak nesneler nasıl konumlandırılır? Örnek kodlama tablosu üzerinde gösteriniz.
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.
CSS3 ile boyutlandırılabilir kutu nasıl yapılır?
Pseudo sınıflar nelerdir? Açıklayınız.
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.
Sözde sınıflardan en yaygın olanları örnekleyiniz.
Yukarıda verilen stil özelliklerine sahip metin üzerine fare ile gelip sol tuşa basılı tutulduğunda metinde hangi değişiklikler meydana gelecektir?
Metne bu kodlar uygulandığında, fare ile metnin üzerine gelip sol tuşa basılı tutulduğunda metin bü- yüyerek renk değiştirecektir.
CSS3'te geçişler nasıl yapılmaktadır?
Scale, skew ve rotate etiketleri ne işe yarar? Açıklayınız.
Yukarıda verilen kodlama sonucu metinde meydana gelecek değişiklikler hangileridir?
Bu örnekte sayfaya mavi bir kutu içerisinde “Dönüşüme dair özellikleri bir arada kullandık.” yazacak, üzerine gelindiğinde ise zemin rengi değişecek, yazı baş aşağı dönecek ve kutuyla birlikte metin de küçülecek, ayrıca fare üzerine geldiğinde imleç “X” işaretine dönecektir.
CSS3 ile animasyonlar nasıl yapılı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.
Animasyonların özelliklerini sıralayınız.
Animation-timing-function - Zamanlama fonksiyonu ne işe yarar?
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.
Animation-fill-mode - Dolgu modunun aldığı değerler hangileridir?
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.
Tüm animasyon özellikleri için kısaltılmış kullanım sağlayan animasyon özelliği hangisidir?
Animation Kısayoludur ve 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.
Yüklemenin aşamalarında farklı renklerle ilerlemeyi gösteren görsel nedir?
