Web Arayüz Programlama — Ünite 2 Soru-Cevap

CSS, HTML sayfalarının görsel açıdan yetersiz olması nedeniyle geliştirilmiştir.

• Web sayfalarına renk, düzen ve tasarım eklenmesine ve stilleri ögeden öğeye ve sayfadan sayfaya paylaşmaya olanak tanır.
• Web sayfalarının sunumunu tamamlayan dildir.
• Sunumun büyük ekran, küçük ekran, yazıcı gibi farklı türdeki cihazlara uygulanabilmesine olanak tanır.
• CSS, HTML dokümanı içerisinde yazılabildiği gibi HTML’den ayrı dosyada da yazılabilir. Bu sayede farklı sayfalarda da kullanılabilir.

Bu yöntemde farklı bir dosyada oluşturulan CSS kodları web sayfasına dahil edilerek kullanılabilir. Büyük projelerde tanımladığınız CSS dosyalarını bu yöntemle çağırarak her web sayfası için aynı kodları kullanabilirsiniz. Böylelikle yeniden yazmaktan kurtulacağınız gibi aynı özellikleri taşıyan web sayfalarındaki elemanların her birinde değişiklik yaparken tek bir yerden yaptığınız değişiklik tüm sayfalarda etkili olacaktır ve uygulamanızın bakımı kolaylaşacaktır.

Bu yöntemin External CSS yönteminden avantajı ayrı bir css dosyası ile ilgilenmeniz gerekmez. Küçük ve tek sayfalık projelerde kullanılabilir.

Birden fazla web sayfasında aynı elemanı kullandığınızda (örneğin <header> gibi.) her sayfada tekrar stillendirme yapmanız gerekmektedir. Diğer bir dezavantajı ise HTML dokümanı çok uzadığında CSS kodları da uzayacağı için çalışılması zor bir projeye dönüşecektir.

Kutu modelinde sınırları ifade eden bu özellik gerektiğinde kutunun etrafında çizgi çizmek içinde kullanılır.

Padding özelliği, bir öğenin içeriği ile kenarlığı arasında ne kadar boşluk görünmesi gerektiğini belirtmemizi sağlar. Değer olarak uzunluk, yüzde veya inheritance olmalıdır. Değer inheritance olursa, üst ögesiyle aynı padding değerini alır. Yüzde kullanılırsa, yüzde, içeren kutunun değeridir

Sayfadaki bütün elemanlara etki eder. "*" operatöründen sonra süslü parantezler içerisine kurallar yazılır.

ögelerin alt özelliklerinden olan class="" özelliği ile belirtilen sınıf isimlerini kullanarak seçim yapar. En sık kullanılan seçici türüdür. Uygulanmak istenen bir veya daha fazla HTML elemanına class="" özelliği ile sınıf ataması yapılmalıdır. CSS dosyasında bu sınıfa yazılan kurallar HTML sayfasında bu sınıfın atamasının yapıldığı tüm elemanları etkiler.

Pseudo elementler, bazı seçicilere özel efektler yüklemek için kullanılır. Pseudo sınıflar ögelerin durumuna göre stillendirmeler yaparken pseudo elementler ögenin bir parçasına, öncesine veya sonrasına stillendirme yapar diyebiliriz. JavaScript dosyalarına gerek duymadan bu efektleri uygulayabilmemizi sağlar.

Descendant ilk seçicinin altındaki tüm seviyeden ikinci seçicileri alırken Child seçici bir alt seviyedeki seçicileri alır.

Tarayıcılar aynı özelliğe etki eden stil kuralları uygularken kuralın seçici öncelikleri ile sıralama yaparlar.
Seçici öncelikleri aşağıdaki gibidir:
1. Inline yazılan kural
2. Id Seçicisi
3. Attribute Seçicisi
4. Class Seçicisi
5. Etiket Seçicisi
6. * Seçicisi

On altılık, bir rengin 6 basamaklı gösterimidir. İlk iki basamak (RR) değerleri, sonraki ikisi (GG) yeşil değerleri ve son iki basamak(BB) mavi değerleri ifade eder. Adobe Photoshop, Jasc Paintshop Pro gibi herhangi bir grafik yazılımından renklerin Hex Kod karşılığı alınabilir. Başına ‘#’ işareti konularak kullanılır. Siyah renk #000000 ifade edilirken kırmızı #FF0000 , beyaz ise #FFFFFF ile ifade edilebilir.

• background-color: Bir ögenin arka plan rengini ayarlamak için kullanılır.
• background-image: Bir ögenin arka plan görüntüsünü ayarlamak için kullanılır.
• background-repeat: Arka planda bir görüntünün tekrarını kontrol etmek için kullanılır.
• background-position: Bir görüntünün arka planda konumunu kontrol etmek için kullanılır.
• background-attachment: Bir görüntünün arka planda kaydırılmasını kontrol etmek için kullanılır.

Position özelliğinin aldığı değerler aşağıdaki gibidir:
• static
• absolute
• relative
• fixed
• sticky

Overflow özelliği, içeriğin belirli bir alana veya ekrana sığmadığı durumlarda fazla içerik için ne yapıl-
ması gerektiğini bildirmek için kullanılır.

Overflow özelliği aşağıdaki değerlerle kullanılır:

• visible
• hidden
• scroll
• auto

Tarayıcılar tarafından kullanılan varsayılan değerdir. Taşma kontrol edilmez. İçerik kutunun dışına taşar.

Taşmayı kırpmak istediğimizde kullanmamız gereken değerdir. Kutunun dışında kalan içerik gizlenir.

Bu iki özellik taşan elemanları kutunun içinde kaydırarak göstermek için scrollbar oluşturur. İçerik taştığı zaman ikisi de aynı davransa da overflow:scroll içerik taşmadığı zamanlarda da scrollbarı gösterebilmektedir. Bunun yerine overflow:auto kullanılması tercih edilebilir.