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:

• padding, margin, border
• background
• color, font-family, font-weight, font-size, line-height
• width, height, max-width, max-height

Düzen temelleri:

• position, z-index, top, right, bottom, left
• display, flex, align-items, justify-content
• @media

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

• grid, grid-template-columns, grid-template-rows
• transform, transition

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