CSS’in temel ve yaygın kullanılan özellikleri

yazar

CSS (Cascading Style Sheets), web sayfalarının stilini ve görünümünü belirlemek için kullanılan bir dildir. Aşağıda, temel CSS özelliklerini ve açıklamalarını içeren kapsamlı bir liste bulacaksınız. Bu liste, CSS’in en yaygın kullanılan özelliklerini kapsar.

1. Metin ve Yazı Tipi Özellikleri

color

  • Metin rengini belirler.
  • Örnek: color: red;

font-family

  • Yazı tipi ailesini belirler.
  • Örnek: font-family: Arial, sans-serif;

font-size

  • Yazı tipi boyutunu belirler.
  • Örnek: font-size: 16px;

font-weight

  • Yazı kalınlığını belirler (örneğin, kalın veya normal).
  • Örnek: font-weight: bold;

font-style

  • Yazı stilini belirler (örneğin, italik).
  • Örnek: font-style: italic;

text-align

  • Metnin yatay hizalamasını belirler (sol, sağ, ortala, iki yana yasla).
  • Örnek: text-align: center;

text-decoration

  • Metnin altını çizer, üstünü çizer veya üzerini çizer.
  • Örnek: text-decoration: underline;

line-height

  • Satır yüksekliğini belirler.
  • Örnek: line-height: 1.5;

letter-spacing

  • Harfler arasındaki boşluğu belirler.
  • Örnek: letter-spacing: 2px;

text-transform

  • Metni büyük harf, küçük harf veya başlık formatına dönüştürür.
  • Örnek: text-transform: uppercase;

2. Kutu Modeli Özellikleri

width ve height

  • Elementin genişliğini ve yüksekliğini belirler.
  • Örnek: width: 300px; height: 200px;

margin

  • Elementin dış boşluğunu belirler.
  • Örnek: margin: 10px;

padding

  • Elementin iç boşluğunu belirler.
  • Örnek: padding: 15px;

border

  • Elementin kenarlığını belirler.
  • Örnek: border: 2px solid black;

box-sizing

  • Kutu modelinin boyutlandırma davranışını belirler (content-box veya border-box).
  • Örnek: box-sizing: border-box;

3. Arka Plan Özellikleri

background-color

  • Arka plan rengini belirler.
  • Örnek: background-color: #f0f0f0;

background-image

  • Arka plan resmi ekler.
  • Örnek: background-image: url('image.jpg');

background-repeat

  • Arka plan resminin tekrarlanma şeklini belirler.
  • Örnek: background-repeat: no-repeat;

background-position

  • Arka plan resminin konumunu belirler.
  • Örnek: background-position: center top;

background-size

  • Arka plan resminin boyutunu belirler.
  • Örnek: background-size: cover;

4. Pozisyon ve Düzen Özellikleri

display

  • Elementin görüntülenme şeklini belirler (block, inline, flex, grid vb.).
  • Örnek: display: flex;

position

  • Elementin konumlandırma türünü belirler (static, relative, absolute, fixed, sticky).
  • Örnek: position: absolute;

top, right, bottom, left

  • Konumlandırılmış elementlerin yerini belirler.
  • Örnek: top: 10px; left: 20px;

float

  • Elementin sola veya sağa yaslanmasını sağlar.
  • Örnek: float: left;

clear

  • Float özelliğinin etkisini temizler.
  • Örnek: clear: both;

z-index

  • Elementlerin üst üste gelme sırasını belirler.
  • Örnek: z-index: 10;

5. Flexbox Özellikleri

flex-direction

  • Flex container içindeki öğelerin yönünü belirler (row, column, row-reverse, column-reverse).
  • Örnek: flex-direction: row;

justify-content

  • Öğelerin ana eksende hizalanmasını belirler.
  • Örnek: justify-content: space-between;

align-items

  • Öğelerin çapraz eksende hizalanmasını belirler.
  • Örnek: align-items: center;

flex-wrap

  • Öğelerin birden fazla satıra sığmasını sağlar.
  • Örnek: flex-wrap: wrap;

align-self

  • Tek bir öğenin çapraz eksende hizalanmasını belirler.
  • Örnek: align-self: flex-start;

6. Grid Özellikleri

grid-template-columns ve grid-template-rows

  • Grid container’ın sütun ve satır boyutlarını belirler.
  • Örnek: grid-template-columns: 1fr 1fr 1fr;

grid-gap

  • Grid öğeleri arasındaki boşluğu belirler.
  • Örnek: grid-gap: 10px;

grid-column ve grid-row

  • Grid öğesinin hangi sütun ve satırlarda yer alacağını belirler.
  • Örnek: grid-column: 1 / 3;

7. Animasyon ve Geçiş Özellikleri

transition

  • Elementin stil değişikliklerine animasyon ekler.
  • Örnek: transition: all 0.3s ease;

animation

  • Özel animasyonlar oluşturur.
  • Örnek: animation: slide 2s infinite;

@keyframes

  • Animasyonun adımlarını tanımlar.
  • Örnek:cssCopy@keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } }

8. Diğer Önemli Özellikler

cursor

  • Fare imlecinin stilini belirler.
  • Örnek: cursor: pointer;

opacity

  • Elementin şeffaflığını belirler.
  • Örnek: opacity: 0.5;

visibility

  • Elementin görünürlüğünü belirler.
  • Örnek: visibility: hidden;

overflow

  • Elementin içeriğinin taşması durumunda ne yapılacağını belirler.
  • Örnek: overflow: hidden;

box-shadow

  • Elemente gölge ekler.
  • Örnek: box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

transform

  • Elemente dönüşümler uygular (örneğin, döndürme, ölçeklendirme).
  • Örnek: transform: rotate(45deg);

Post Views: 61

Yorum yapın