Flexbox, CSS’deki en şaşırtıcı özelliklerden biridir. Aslında flexbox, esnek kutuların kontrol edilmesini sağlar. Bu kutuları kontrol etmek için, bizim gibi insanların gözünün gördüğü sayfaların düzeni hakkında daha güçlü bir his kazanmamız gerekiyor. Flexbox’un yapısı, bu kutuların boyutunu, sıralamasını ve hizalamasını değiştirerek, tam olarak istediğimiz düzeni sağlamamıza izin verir. Aşağıdaki kod blokları, Flexbox kullanarak 3 kutuya …
Media Query’ler, web sayfalarının farklı çözünürlüklerdeki cihazlarda nasıl görüntüleneceğini ve davranışını kontrol etmek için kullanılır. Bu özellik sayesinde, web sayfalarının farklı boyutlu cihazlarda uygun bir şekilde görüntülenmesi sağlanır. Responsive Web Tasarımı, Media Query’ler kullanarak farklı cihazlara yönelik uygun tasarımlar oluşturmayı hedefleyen bir tekniktir. Bu teknik, web sayfasının içeriğinin ve düzeninin, ekran boyutuna göre otomatik olarak …
Daire ve Çizgi Stilleri özelliği, web sayfalarında kullanılan HTML etiketleri için daireler, kareler, çizgiler gibi şekiller oluşturmak için kullanılır. Bu özellik sayesinde, sayfa tasarımlarına daha fazla estetik katılabilir. Border-radius özelliği, elementin köşelerini yuvarlar ve daire veya oval şekilli elementler oluşturur. Border-style özelliği, elementin kenarlık stilini belirler. Border-width özelliği, elementin kenarlık kalınlığını ayarlar. Border-color özelliği, elementin …
Renkler ve Arka Planlar özelliği, web sayfalarında kullanılan HTML etiketleri için arka plan rengi veya metin rengi gibi birçok seçenek sunar. Bu özellik sayesinde, metinler ve arka planlar daha estetik ve okunaklı hale getirilebilir. Color özelliği, metnin rengini ayarlar. Background-color özelliği, arka plan rengini ayarlar. Opacity özelliği, elementin opaklığını ayarlar. Gradientler ile birden fazla renk …
Typography özelliği, web sayfalarında kullanılan yazıların stil, boyut, renk, satır aralığı, yazı tipi vb. özelliklerini belirlememizi sağlar. Bu özellik sayesinde, metinler daha okunaklı, güzel ve dikkat çekici hale getirilebilir. Font-size özelliği, metin boyutunu ayarlar. Font-family özelliği, metnin yazı tipini belirler. Color özelliği, metne bir renk atar. Line-height özelliği, metnin satır aralığını kontrol eder. Text-align özelliği, …
Positioning özelliği, elementlerin belirli bir konumda görüntülenebilmesini sağlar. Bu özellik sayesinde elementler dört farklı pozisyonda tutulabilir: static, relative, absolute ve fixed. Static position (statik konum), elementin varsayılan pozisyonudur ve elementler sayfanın normal akışında görüntülenir. Relative position (relatif konum), elemanın orijinal pozisyonuna göre konumunu ayarlar. Absolute position (mutlak konum), elemanın belirli bir konuma sabitlenmesini sağlar ve …
Display özelliği, elementlerin nasıl görüntüleneceğini belirleyen bir CSS özelliğidir. Bu özellik sayesinde elementler blok, inline veya inline-block olarak görüntülenebilirler.
CSS Box Model, bir HTML elementinin boyutunu ve konumunu belirlerken kullanılan bir modeldir. Bu model, her elementin iç içe geçmiş bir dizi kutudan oluştuğunu varsayar.
Bu konuda CSS’in en çok kullanılan temel css özellikleri ve örneklerinden bahsedildi.
CSS yani Cascading Style Sheets, web sitelerinde kullanılan bir stil ve düzenleme dili olarak bilinir. Bu kelime anlamı itibariyle “basamaklı stiller” anlamına gelir. CSS, HTML kodlama dilini tamamlayıcı bir biçimde kullanılır.
