INTERNET VE WEB PROGRAMLAMA Dersi Stil Şablonları soru cevapları:
Toplam 11 Soru & Cevap#1
SORU:
Stil şablonu nedir?
CEVAP: 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.
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.
#2
SORU:
CSS kullanılarak ne gibi düzenlemeler yapılabilir?
CEVAP: 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 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.
#3
SORU:
CSS'nin temel özellikleri nelerdir?
CEVAP: 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 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.
#4
SORU:
CSS'nin yapısı hakkında bilgi veriniz.
CEVAP: 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 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.
#5
SORU:
CSS ile hücre belirleme nasıl olur?
CEVAP: 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.
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.
#6
SORU:
Stil kullanarak nesneler nasıl konumlandırılır? Örnek kodlama tablosu üzerinde gösteriniz.
CEVAP: 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.
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.
#7
SORU:
Pseudo sınıflar nelerdir? Açıklayınız.
CEVAP: 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.
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.
#8
SORU:
CSS3 ile animasyonlar nasıl yapılır?
CEVAP: 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.
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.
#9
SORU: Animation-timing-function - Zamanlama fonksiyonu ne işe yarar?
Animation-timing-function - Zamanlama fonksiyonu ne işe yarar?
CEVAP: 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-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.
#10
SORU: Animation-fill-mode - Dolgu modunun aldığı değerler hangileridir?
Animation-fill-mode - Dolgu modunun aldığı değerler hangileridir?
CEVAP: -
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.
-
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.
#11
SORU: Tüm animasyon özellikleri için kısaltılmış kullanım sağlayan animasyon özelliği hangisidir?
Tüm animasyon özellikleri için kısaltılmış kullanım sağlayan animasyon özelliği hangisidir?
CEVAP: 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.
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.