Etiket: top

CSS top

top :

Position: absolute olarak konumlandırılmış elementler için position: relative’li elementin top değerine göre ayarlanır.

Position: relative li elementli nesneler için ise kendi bulunduğu konumuna göre top değerini kazanır.

Not: position: static te hiçbir etkisi yoktur.

Örnek

.relative {
  width: 300px;
  height: 300px;
  position: relative;
  border : 1px solid red;
}
.absolute {
  width: 150px;
  height: 150px;
  position: absolute;
  border: 1px solid green;
  top: 50%;
  margin-top: -75px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
auto otomatik olarak ayarlanır.
length Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 5.0 1.0 6.0
Posted on by Samed GÖZÜTOK 0

CSS padding-top

padding-top :

Bir elementin üst tarafından iç boşluk vermek için kullanılır.

Örnek

div {
  width: 200px;
  border : 1px solid red;
  padding-top: 50px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
length px, cm, % gibi değerler alabilir.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 4.0 1.0 3.5
Posted on by Samed GÖZÜTOK 0

CSS margin-top

margin-top :

Üst taraftan dış boşluk vermek için kullanılır.

Örnek

.margin {
  margin-top: 50px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
auto Boşluğu tarayıcı otomatik ayarlar.
length px, cm, % gibi değerler alabilir.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 6.0 1.0 3.5
Posted on by Samed GÖZÜTOK 0

CSS border-top-width

border-top-width:

Elementin üst kenarlık genişliğini  ayarlamak  için kullanılır.

Not: Her zaman için önce border-top-width  özelliklerini ayarlayınız. Rengi değiştirmek için önce border elementiniz olması gerekir.

Örnek

#borderTop{
    border-style: dotted;
    border-top-width: 5px;
    padding: 10px;
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
medium Kenarlık genişliğini orta olarak ayarlar.
thin İnce bir sağ kenarlık belirtir.
thick Kalın bir sağ kenarlık belirtir.
length Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 4.0 1.0 3.5
Posted on by Samed GÖZÜTOK 2

CSS border-top-style

Border-top-style :

Elementin üst kenarlık stilini  ayarlamak  için kullanılır.

Örnek

#borderTop{
    border-style: dashed;
    border-top-style: dotted;
    padding: 10px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none Kenarlık stilinin olmadığını belirtir.
hidden Kenarlığı gizlemek için kullanılır.
dotted Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir.
dashed kesik çizgili bir kenarlık olduğunu belirtir.
double çift kenarlıklı bir kenarlık olduğunu belirtir.
solid düz bir kenarlık olduğunu belirtir.
groove düz kenarlıklı bir kenarlık olduğunu belirtir.
inset 3D gömme kenar tanımlar. Efekt border-color değerine bağlıdır.
ridge 3D oluklu kenar tanımlar. Efekt border-color değerine bağlıdır.
outset 3D outset kenar tanımlar. Efekt border-color değerine bağlıdır.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 5.5 1.0 9.2
Posted on by Samed GÖZÜTOK 1

CSS border-top-right-radius

border-top-right-radius :

Elementin sağ üst yuvarlak bir görünüm vermek için kullanılır.

Örnek

#borderRightRadius{
    border: 5px solid blue;
    border-top-right-radius: 20px;
    padding: 10px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
length Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir.
İnital
İnherit

Tarayıcı Desteği
5.0
4.0-webkit		 4.0
3.0-moz		 9.0 5.0
3.1-o		 10.5
Posted on by Samed GÖZÜTOK 1

CSS border-top-left-radius

border-top-left-radius :

Elementin sol üst yuvarlak bir görünüm vermek için kullanılır.

Örnek

#borderLeftRadius{
    border: 2px dashed;
    border-top-left-radius: 5px;
    padding: 10px;
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
length Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir.
İnital
İnherit

Tarayıcı Desteği
5.0
4.0-webkit		 4.0
3.0-webkit		 9.0 5.0
3.1-webkit		 10.5
Posted on by Samed GÖZÜTOK 0

CSS border-top-color

border-top-color :

Elementin üst kenarlık rengini ayarlamak  için kullanılır.

Not: Her zaman için önce border-top-color  özelliklerini ayarlayınız. Rengi değiştirmek için önce border elementiniz olması gerekir.

Örnek

#borderTop{
      border-style: dotted;
    border-top-color: blue;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
color üst kenarlık rengini belirtmek için kullanılır.
transparent üst kenarlık renginin transparan yapmak için kullanılır.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 4.0 1.0 3.5
Posted on by Samed GÖZÜTOK 0

CSS border-top

border-top :

Elementin üst kenarlık özelliklerini ayarlamak  için kullanılır.

Örnek

#borderTop{
      border-style: solid;
    border-top: 2px dashed blue;
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
border-top-width üst kenarlık genişliğini ayarlamak için kullanılır.
border-top-style üst kenarlık stilini ayarlamak için kullanılır.
Border-top-color üst kenarlık rengini ayarlamak için kullanılır.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 4.0 1.0 3.5
Posted on by Samed GÖZÜTOK 0