Aşağıda, web tasarımında sıkça kullanılan CSS özelliklerinin açıklamaları ve örnek kullanım şekilleri yer almaktadır. Bu içerik, CSS’in en temel ve yaygın kullanılan kodlarını anlamanızı kolaylaştıracaktır.
| CSS Kodu | Açıklama | Örnek Kullanım |
|---|---|---|
color | Metnin rengini belirler. | color: red;Metnin rengini kırmızı yapar. |
background-color | Bir öğenin arka plan rengini ayarlar. | background-color: #f0f0f0;Arka plan rengini açık gri yapar. |
font-size | Metnin boyutunu belirler. | font-size: 16px;Metnin boyutunu 16 piksel yapar. |
font-family | Metin için yazı tipini belirler. | font-family: Arial, sans-serif;Yazı tipini Arial veya sans-serif yapar. |
font-weight | Metnin kalınlığını ayarlar. | font-weight: bold;Metni kalın yapar. |
line-height | Satırlar arasındaki boşluğu ayarlar. | line-height: 1.5;Satırlar arasındaki boşluğu 1.5 katına çıkarır. |
text-align | Metnin yatayda nasıl hizalanacağını belirler. | text-align: center;Metni ortalar. |
text-decoration | Metnin üzerine çizgi ekler (altı çizili gibi). | text-decoration: underline;Metnin altını çizer. |
padding | Öğenin iç kenar boşluklarını ayarlar. | padding: 20px;Öğenin tüm kenarlarında 20 piksel iç boşluk bırakır. |
margin | Öğenin dış kenar boşluklarını ayarlar. | margin: 10px;Öğenin tüm kenarlarında 10 piksel dış boşluk bırakır. |
border | Öğenin etrafına kenarlık ekler. | border: 1px solid black;Öğenin etrafına 1 piksel kalınlığında, siyah düz bir kenarlık ekler. |
width | Bir öğenin genişliğini belirler. | width: 100%;Öğenin genişliğini sayfanın tamamına yayar. |
height | Bir öğenin yüksekliğini belirler. | height: 50px;Öğenin yüksekliğini 50 piksel yapar. |
display | Öğenin nasıl gösterileceğini belirler (blok, satır içi, gizli vb.). | display: block;Öğeyi blok öğesi olarak gösterir. |
position | Öğenin konumlandırılmasını belirler. | position: relative;Öğenin konumunu göreli yapar. |
top, right, bottom, left | Öğenin konumunu (yukarı, sağ, aşağı, sol) belirler, position ile birlikte kullanılır. | top: 10px; left: 20px;Öğeyi 10 piksel yukarı ve 20 piksel sola yerleştirir. |
overflow | Öğenin taşan içeriğini nasıl göstereceğini belirler. | overflow: hidden;Öğenin dışına taşan içerik gizlenir. |
opacity | Öğenin şeffaflık seviyesini ayarlar. | opacity: 0.5;Öğeyi %50 şeffaf yapar. |
box-shadow | Öğeye gölge efekti ekler. | box-shadow: 2px 2px 5px gray;Öğeye gri bir gölge ekler (2px sağ ve aşağı, 5px bulanıklık). |
text-shadow | Metne gölge ekler. | text-shadow: 1px 1px 3px #000000;Metne siyah renkli bir gölge ekler (1px sağ ve aşağı, 3px bulanıklık). |
z-index | Öğelerin yığılma sırasını belirler (katmanlar arasındaki ilişkiyi ayarlamak için kullanılır). | z-index: 10;Öğeyi 10 katman üstte tutar (diğer öğelere göre). |
border-radius | Öğenin köşe yuvarlaklıklarını belirler. | border-radius: 10px;Öğenin köşelerini 10 piksel yuvarlar. |
transition | Öğenin stil değişiklikleri arasında geçiş efektleri ekler. | transition: all 0.3s ease;Öğedeki tüm stil değişikliklerini 0.3 saniyede, düzgün bir geçişle uygular. |
transform | Öğenin boyutunu, döndürülmesini, kaydırılmasını veya eğilmesini sağlar. | transform: rotate(45deg);Öğeyi 45 derece döndürür. |
CSS Kullanım İpuçları:
- Responsive Tasarım: Farklı ekran boyutlarına uyum sağlamak için CSS medya sorgularını (
@media) kullanın. Bu, sitenizin mobil uyumlu olmasına yardımcı olur. - Kodun Temiz ve Düzenli Olması: CSS kodlarınıza açıklamalar eklemek, projeyi geliştirirken kodu daha anlaşılır kılar.
- Yinelenen Kodlardan Kaçınma: Aynı stillerin birden fazla yerde tekrar edilmesi yerine, ortak stil kurallarını sınıflar ile grup haline getirebilirsiniz.
