Ribiru ailemize yeni yazar arkadaşlar arıyoruz! Aramıza katılmak isterseniz buraya tıklayın!

7- HTML – CSS Kavramları ve Temelleri İçin Bir Kılavuz: CSS Özellikleri

İşte CSS’i bilmek için kesinlikle gerekli olduğunu düşündüğüm tüm özelliklerin bir listesi. İngilizcede üstesinden gelebileceğin en temel fiil ve isimleri bilmek aslında yeterli olabilir.

Bir şey yapabilmek için minimum:

  • paddingmarginborder
  • background
  • colorfont-familyfont-weightfont-sizeline-height
  • widthheightmax-widthmax-height

Düzen temelleri:

  • positionz-indextoprightbottomleft
  • displayflexalign-itemsjustify-content
  • @media

Bilmek güzel, ancak diğerleri kadar önemli değil:

  • gridgrid-template-columnsgrid-template-rows
  • transformtransition

Bunlara birazdan daha fazla gireceğiz. Şimdi, bilginin bazı uygulamalarını tartışmak için yeterince temel bilgiye sahip olmalıyız.

Padding ve Margin

Tüm boşluk ihtiyaçlarınız iki özellik tarafından karşılanacaktır: padding and margin.

  • Padding, bir öğenin içini (kenarlığın içi) doldurmak için kullanılır
  • Margin, öğeleri ayırmak için kenar boşluğu kullanılır (sınır dışında)

Bir eleman için yuva sırası aşağıdaki gibidir:

  • Element -> padding -> border -> margin

Örnek olarak padding ve marginli bir kare olan bir eleman yapacak olsaydım, şöyle görünürdü:

.square {
  border: 1px solid gray;
  padding: 10px;
  margin: 10px;
  height: 50px;
  width: 50px;
}

10 piksel alt kenar boşluğuna sahip bir h2 ve 10 piksel üst kenar boşluğuna sahip bir p örneği kullanarak, iki öğeyi ne kadar bir kenar boşluğu ayıracaktır?

<h2 style="margin-bottom: 10px;">Başlık</h2>
<p style="margin-top: 10px;">Paragraf</p>

Aralarında 20 piksel değil, toplam 10 piksellik bir kenar boşluğu (margin) olduğunu göreceğiz.

Dolgu ve kenar boşluğu

ÖzellikKenar Boşluğuİç Boşluk veya Dolgu
Arka plan rengiHer zaman şeffafÖğeye göre ayarla
Daralt veya yığın daraltDaraltYığın
Negatif değerlerİzin verilirİzin verilmez
TıklanabilirlikYokVar

Zeen is a next generation WordPress theme. It’s powerful, beautifully designed and comes with everything you need to engage your visitors and increase conversions.