Sık Kullanılan CSS Kodları ve İşlevleri

Aşağıdaki listede bilinmesi gereken temel CSS kodlarını ve kullanım şekillerini bulabilirsiniz.

color	min-width	border
background-color	min-height	font
background-image	max-width	position
display	max-height	z-index
width	margin
height	padding

• color

Yazıları renklendirmek için kullanılır. Renk isminin yanı sıra rgb ve hsl gibi renk kodları da mevcuttur. CSS’te renklerin kullanımı ile ilgili daha detaylı bilgi için CSS3’te Color (Renk) Sistemi isimli yazımı ziyaret edebilirsiniz.

p {
  color: red;
}

---

• background-color

Web sayfasının veya belirlenen bölgenin arka plan rengini ayarlamak için kullanılır.

body {
  background-color: gray;
}

---

• background-image

Web sayfasının veya belirlenen bölgenin arka planına resim yerleştirmek için kullanılır. Resmin görüntülenememesi ihtimaline karşı genellikle arka plan resmine ek olarak renk de ayarlanır.

body {
  background: url(image.jpg);
}

---

• display

HTML etiketlerinin sayfada yerleştirilmesi ve düzenlenmesi için kullanılır. Aşağıdaki değerleri alabilir:

• block
• inline
• inline-block
• none

li {
  display: inline;
}

---

• width

Belirtilen HTML ögesinin genişlik değerini ayarlamak için kullanılır.

img {
  width: 50%;
}

---

• height

Belirtilen HTML ögesinin yükseklik değerini ayarlamak için kullanılır.

img {
  height: 50%;
}

---

• min-width

Belirtilen HTML ögesine minimum genişlik değeri atamak için kullanılır.

img {
    min-width: 30%;
}

---

• min-height

Belirtilen HTML ögesine minimum yükseklik değeri atamak için kullanılır.

img {
    min-height: 30%;
}

---

• max-width

Belirtilen HTML ögesine maksimum genişlik değeri atamak için kullanılır.

img {
    max-width: 70%;
}

---

• max-height

Belirtilen HTML ögesine maksimum yükseklik değeri atamak için kullanılır.

img {
    max-height: 70%;
}

---

• margin

Ögelerin border (kenar çizgisi) dışında veya iki öge arasında boşluk oluşturmak için kullanılır. Aşağıdaki değerler ile kenarlara ayrı ayrı boşluklar verebiliriz.

• margin-top: üst kenar
• margin-bottom: alt kenar
• margin-left: sol kenar
• margin-right: sağ kenar

p {
    margin-top: 50px;
    margin-bottom: 100px;
    margin-right: 200px;
    margin-left: 50px;
}

---

• padding

Ögelerin içeriğinin, border’a (kenar çizgisi) olan uzaklığını ayarlamak için kullanılır. Margin’de olduğu gibi aşağıdaki değerler ile kenarlara ayrı ayrı uzaklık değeri verebiliriz.

• padding-top: üstkenar
• padding-bottom: alt kenar
• padding-left: sol kenar
• padding-right: sağ kenar

p {
    padding-top: 25px;
    padding-right: 50px;
    padding-bottom: 25px;
    padding-left: 50px;
  }

---

• border

Öge içeriklerini sınırlandırmak için kullanılır. Aşağıdaki değerler bu kenarlıkların rengi ve genişliği gibi stil özelliklerini ayarlamak için kullanılır.

• border-width: genişlik
• border-color: renk
• border-style: stil
• border-radius: yuvarlak köşeler

p {
    border-style: solid;
    border-width: 5px;
}

---

• font

Aşağıdaki değerler ile yazıların eğim, kalınlık, boyut ve tipi gibi stil özelliklerini belirlememizi sağlar.

• font-family: yazı tipi
• font-style: italik/normal yazı ayarı
• font-weight: yazının kalınlığı
• font-size: yazı boyutu

p {
    font-family: "Times New Roman";
    font-style: normal;
    font-weight: bold;
    font-size: 12px;
}

---

• position

Ögenin web sayfasındaki konumunu tanımlar. Aşağıdaki değerleri alır:

• static: Öge, sayfanın normal akışına göre konumlandırılır.
• relative: Öge göreceli olarak (diğer elementlerden ayrı bir akışta) konumlandırılır.
• absolute: Öge, varsa kendisini kapsayan bir üst ögeye göre konumlandırılır.
• fixed: Öge, pencerede sabit bir yere konumlandırılır. Sayfa aşağı kaydırılsa dahi hareket etmez.
• sticky: Öge, kaydırma konumuna bağlı olarak göreceli ve sabit arasında geçiş yapar.

İstenilen değer atandıktan sonra aşağıdaki örnekteki gibi yerleşim değerleri atanır.

p  {
      position: fixed;
      top: 30px;
      right: 5px;
   }

---

• z-index

Üst üste gelen elementlerinin hangisinin üstte, hangisinin altta görüneceğini belirler. position ayarı ile birlikte çalışır. İki elementin pozisyonlarının aynı olması durumunda hangisinin z-index (katman) değeri daha büyükse o element üstte görünür. Aşağıdaki örnekte “yazı2”, “yazı1″in üstündedir.

#yazı1 {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
#yazı2 {
  position: absolute;
  left: 0px;
  top: 30px;
  z-index: 1;
}

Kaynakça:

• lucidar.me
• mehsatek