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

9- HTML – CSS Kavramları ve Temelleri İçin Bir Kılavuz: Kısa Kullanımlar

Padding: 5px ve Margin: 5px kullandığımı görüyorsunuz. Aşağıdaki örnekteki padding özelliği aslında dört ayrı özelliğin bir kısaltmasıdır:

/* Kısa kullanım*/
div {
  padding: 5px;
}

/* Bireysel kullanım */
div {
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}

Genellikle, her bir tarafı ayrı ayrı belirtmeniz etmeniz gerekmez. Tasarımda simetriyi seviyoruz, bu nedenle dört taraf için de farklı bir değer değil de tek seferde yapmak iyidir.

Bu hem padding hem de margin için geçerlidir. Tek bir yan özelliğin en yaygın kullanımı, bir şeyi geçersiz kıldığınız zamandır. Örneğin, padding bir öğe var: 5px ve bunun farklı bir padding alt değerine sahip olmasını istiyorsunuz bu durumda bireysel kullanım kullanılabilir.

Bir sonraki en yaygın kısayol, border için geçerlidir. En yaygın olarak şöyle yazılmış bir border göreceksiniz:

div {
  border: border-width border-style border-color;
}

Bunlar tek tek de yazılabilir.

div {
  border: 1px solid black;
}

/* Ayrı ayrı da yazılabilir */
div {
  border-color: black;
  border-width: 1px;
  border-style: solid;
}

Ve tıpkı padding ve margin gibi, bu border değiştiricilerin her birinin kendi yan özelliği vardır.

div {
  border-bottom-color: green;
  border-bottom-width: 2px;
  border-bottom-style: dashed;
}

Yani aslında border: 1px solid black yazdığınızda, birleştirilmiş 12 özellik için kısa bir yol kullanmış oluyorsunuz.

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.