- Renk ve Arka Plan (color, background-color)
Renk ve arka plan, web sayfalarının görünümü için son derece önemlidir. “color” özelliği, metin rengini belirlemek için kullanılırken, “background-color” özelliği arka plan rengini belirlemek için kullanılır. Örneğin:
body {
color: white;
background-color: #333;
}
Bu kod, tüm sayfa metninin beyaz renkte olacağını ve arka planın koyu gri (#333) olacağını belirtir.
- Yazı Tipleri (font-family, font-size, font-weight)
Yazı tipleri, web sayfalarının tasarımında önemli bir yer tutar. “font-family” özelliği, yazı tipini belirlemek için kullanılır. “font-size” özelliği, yazı boyutunu belirlemek için kullanılırken, “font-weight” özelliği kalınlığı belirler. Örneğin:
h1 {
font-family: Arial, sans-serif;
font-size: 32px;
font-weight: bold;
}
Bu kod, h1 etiketi için yazı tipini Arial olarak, yazı boyutunu 32 piksel olarak ve yazı kalınlığını kalın olarak belirler.
- Kenarlıklar (border)
“border” özelliği, elemanın kenar çizgilerini kontrol eder. Bu özellik, kenarların boyutunu, stilini ve rengini belirlemek için kullanılır. Örneğin:
div {
border: 2px solid black;
}
Bu kod, div elemanının etrafında 2 piksel kalınlığında siyah bir çizgi (solid) oluşturacaktır.
- Box Model (padding, margin, width, height)
Box model, bir HTML elemanının boyutunu, kenarlığını ve içeriğini kontrol etmek için kullanılan bir CSS konseptidir. “padding” özelliği, elemanın içeriği ile kenarları arasındaki boşluğu belirlerken, “margin” özelliği, elemanın kenarları ile diğer elemanlar arasındaki boşluğu belirler. “width” ve “height”, elemanın genişliğini ve yüksekliğini belirler. Örneğin:
div {
padding: 20px;
margin: 10px;
width: 300px;
height: 200px;
}
Bu kod, div elemanının etrafında 10 piksellik bir dış boşluk ve 20 piksellik bir iç boşluk oluşturacak, ayrıca genişlik 300 piksel, yükseklik 200 piksel olarak ayarlayacak.
- Seçiciler (selectors)
Seçiciler, bir HTML belgesindeki elemanları seçmek için kullanılan CSS kurallarıdır. Örneğin, tüm h1 etiketleri için stil kuralları belirlemek için aşağıdaki kodu kullanabilirsiniz:
h1 {
font-size: 24px;
color: red;
}
Bu kod, tüm h1 etiketleri için yazı boyutunu 24 piksel olarak ve rengini kırmızı olarak belirleyecektir.
- Gölgeler (box-shadow)
“box-shadow” özelliği, elemanın etrafına bir gölge ekler. Bu özellik, gölgenin boyutunu, rengini ve yönünü belirlemek için kullanılır. Örneğin:
div {
box-shadow: 2px 2px 5px #888;
}
Bu kod, div elemanının etrafında 2 piksel sağa ve 2 piksel aşağıya doğru 5 piksellik bir gölge oluşturacaktır.
Bu, temel CSS özelliklerine ilişkin birkaç ö
rnekti. Bunlar arasında renk ve arka plan belirleme, yazı tipi ayarları, kenarlık oluşturma, boyutlandırma ve seçiciler gibi çeşitli konular yer almaktadır.
- Pozisyonlama (position)
“Pozisyonlama” özelliği, elemanların konumunu kontrol etmek için kullanılır. Bu özellik, elemanın hangi tutamak noktalarına göre konumlandırılacağını ve diğer elemanlara göre nasıl yerleştirileceğini belirler. Örneğin:
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Bu kod, div elemanını sayfanın ortasına konumlandıracaktır.
- Geçişler (transition)
“Geçişler” özelliği, elemanlarda animasyonlu geçişler oluşturmak için kullanılır. Bu özellik, geçişin süresini, efektini ve durumunu belirlemek için kullanılır. Örneğin:
div {
transition: all 0.3s ease-in-out;
}
Bu kod, div elemanının tüm stil özellikleri için 0.3 saniyelik bir geçiş zamanı ve kolayca girip çıkma efekti belirleyecektir.
- Çerçeveler (box-sizing)
“Box-sizing” özelliği, bir elemanın boyutlandırılması sırasında kutu modelini etkiler. Bu özellik, içeriğin, dolguların ve kenarlıkların dahil edilip edilmeyeceğini belirlemek için kullanılır. Örneğin:
div {
box-sizing: border-box;
}
Bu kod, div elemanının boyutundaki kenarlık ve dolgu gibi öğeleri dahil edecek ve toplam boyutunu belirleyecektir.
