Merhaba arkadaşlar! Bilgisayar dünyasına hoş geldiniz. Bugün, HTML'nin büyülü dünyasına birlikte adım atacağız. Hazır mısınız? İşte 16 adımda HTML öğrenimine başlama zamanı!
color
Yazıları renklendirmek için kullanılır. Renk isminin yanı sıra rgb ve hsl gibi renk kodları da mevcuttur.
Kullanım şekli aşağıdaki gibidir.
p {
color: red;
}
background-color
Web sayfasının veya belirlenen bölgenin arka plan rengini ayarlamak için kullanılır.
Kullanım şekli aşağıdaki gibidir.
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.
Kullanım şekli aşağıdaki gibidir.
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
Kullanım şekli aşağıdaki gibidir.
li {
display: inline;
}
width
Belirtilen HTML ögesinin genişlik değerini ayarlamak için kullanılır.
Kullanım şekli aşağıdaki gibidir.
img {
width: 50%;
}
height
Belirtilen HTML ögesinin yükseklik değerini ayarlamak için kullanılır.
Kullanım şekli aşağıdaki gibidir.
img {
height: 50%;
}
min-width
Belirtilen HTML ögesine minimum genişlik değeri atamak için kullanılır.
Kullanım şekli aşağıdaki gibidir.
img {
min-width: 30%;
}
min-height
Belirtilen HTML ögesine minimum yükseklik değeri atamak için kullanılır.
Kullanım şekli aşağıdaki gibidir.
img {
min-height: 30%;
}
max-width
Belirtilen HTML ögesine maksimum genişlik değeri atamak için kullanılır.
Kullanım şekli aşağıdaki gibidir.
img {
max-width: 70%;
}
max-height
Belirtilen HTML ögesine maksimum yükseklik değeri atamak için kullanılır.
Kullanım şekli aşağıdaki gibidir.
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
Kullanım şekli aşağıdaki gibidir.
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
Kullanım şekli aşağıdaki gibidir.
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
Kullanım şekli aşağıdaki gibidir.
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
Kullanım şekli aşağıdaki gibidir.
p {
font-family: "Times New Roman";
font-style: normal;
font-weight: bold;
font-size: 12px;
}
Ö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.
Kullanım şekli aşağıdaki gibidir.
p {
position: fixed;
top: 30px;
right: 5px;
}
