CSS list-style-type

list-style-type :

Liste işaretinin türünü belirlemek için kullanılır.

Örnek

ul{
 list-style-type: circle;
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/zvVEqB/'>list-style-type</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
disc	İşaretçi içi dolu bir daire şeklini alır.
armenian	Ermeni numaralandırması yapılır.
circle	İşaretçi içi boş bir daire şeklini alır.
Cjk-ideographic	İşaretçi düz ideolojik sayılara dönüşür.
decimal	İşaretçi bir sayıya dönüşür.
Decimal-leading-zero	İşaretçi bir sayıya dönüşür. Fakat başına 0 değeri alır. (01, 02, 03, … gibi)
georgian	İşaretçi geleneksel gürcü numaralandırmasına dönüşür.
hebrew	İşaretçi İbranice numaralandırmaya dönüşür.
hiragana	İşaretçi geleneksel hiragana numaralandırmasına dönüşür.
Hiragana-iroha	İşaretçi geleneksel hiragana iroha numaralandırmasına dönüşür.
katakana	İşaretçi geleneksel katakana numaralandırmasına dönüşür.
katakana-iroha	İşaretçi geleneksel katakana iroha numaralandırmasına dönüşür.
Lower-alpha	İşaretçi (a, b, c, d, … gibi) değere dönüşür.
Lower-greek	İşaretçi yunan harflerine dönüşür.
Lower-latin	İşaretçi latin harflerine dönüşür.
Lower-roman	İşaretçi roman harflerine dönüşür.
none	İşaretleyici değer almaz.
square	İşaretçi bir kareye dönüşür.
Upper-alpha	İşaretçi (A, B, C, D… gibi) değerlere dönüşür.
Upper-latin	İşaretçi büyük latin harflerine dönüşür.
Upper-roman	İşaretçi roman rakamlarına dönüşür.
İnital
İnherit

Tarayıcı Desteği


1.0	1.0	4.0	1.0	3.5

Posted on 26 Kasım 2015 by Samed GÖZÜTOK 0

CSS list-style-position

list-style-position :

Liste işaretinin liste akışında mı yoksa dışında mı görüneceğini ayarlamak için kullanılır.

Örnek

ul {
  list-style-position: outside;
}

Codepen Ön izleme

Css Sözdizimi

Değer	Açıklama
inside	İşaretçi liste akışı içinde görünür.
outside	İşaretçi liste akışı dışında görünür.
İnital
İnherit

Tarayıcı Desteği


1.0	1.0	4.0	1.0	7.0

Posted on 26 Kasım 20153 Ekim 2016 by Samed GÖZÜTOK 0

CSS list-style-image

list-style-image :

Bu list style özelliği ile liste işaretini bir görüntü ile değiştirebiliriz.

Not: Her zaman list-style-type özelliğini belirtin.

Örnek

ul{
  list-style-image: url('http://www.w3tr.com/file/list.jpg');
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/bVPrym/'>list-style-image</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
none	Hiçbir özellik almaz.
url	Liste işaretinin yerine gösterilecek görüntünün yolunu belirtir.
İnital
İnherit

Tarayıcı Desteği


1.0	1.0	4.0	1.0	7.0

Posted on 26 Kasım 20153 Ekim 2016 by Samed GÖZÜTOK 0

CSS list-style

list-style :

Tek özellikle bütün liste özelliklerini ayarlamamızı sağlar. Eksik olan Property için varsayılan değer alınır.

Örnek

ul {
    list-style: square;
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/RWzZEL/'>list-style</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
list-style-type	Liste işaretinin türünü belirler.
list-style-position	Liste işaretinin konumunu ayarlar.
list-style-image	Liste işaretinin türünü belirler. Resim atamanızı da sağlar.
İnital
İnherit

Tarayıcı Desteği


1.0	1.0	4.0	1.0	7.0

Posted on 26 Kasım 2015 by Samed GÖZÜTOK 0

CSS line-height

line-height :

Satır arası yüksekliği belirlemek için kullanılır.

Örnek

.lineHeight {
  line-height: 50px;
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/MaMvqd/'>line-height</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
normal	normal olarak ayarlanır.
number	Direk ‘3’ yada ‘5’ gibi değerler alabilir. Buda font-size’ ın çarpımı manasına gelmektedir.
length	Harfler arasındaki boşluğu açacak değerdir. Negatif olarak tanımlanabilir.
İnital
İnherit

Tarayıcı Desteği


1.0	1.0	4.0	1.0	7.0

Posted on 26 Kasım 20151 Eylül 2016 by Samed GÖZÜTOK 0

CSS letter-spacing

letter-spacing :

Bir metindeki harflerin arasındaki boşluğunu ayarlar. Negatif değerler alabilir.

Örnek

.pozitif{
  letter-spacing: 30px;
}
.negatif{
  letter-spacing: -4px;
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/LpKjdZ/'>letter-spacing</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
normal	Normal olarak ayarlanır.
length	Harfler arasındaki boşluğu açacak değerdir. Negatif olarak tanımlanabilir.
İnital
İnherit

Tarayıcı Desteği


1.0	1.0	4.0	1.0	7.0

Posted on 26 Kasım 20151 Eylül 2016 by Samed GÖZÜTOK 0

CSS left

left :

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

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

Örnek

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

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/PPrKJJ/'>left</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
auto	Konum otomatik olarak ayarlanır.
length	Yüzdeli, px, em, cm gibi değerler alabilir.
İnital
İnherit

Tarayıcı Desteği


1.0	1.0	5.5	1.0	5.0

Posted on 26 Kasım 201518 Ağustos 2016 by Samed GÖZÜTOK 0

CSS3 @keyframes

@keyframes :

Animasyon kuralıdır. Animasyonun adımlarını girerek oluşturursunuz. Tıpkı çizgifilm animasyonlarının kare kare oluşturulması gibidir. Bu adımlar % yüzdelelerle ifade edilir. %0 ‘ dan 100% kadar adımları siz belirlersiniz. En iyi tarayıcı desteğini sağlamanız için %0 başlangıç değeri ve 100% bitiş değeri girilmelidir.

Örnek

.keyframes {
   width: 200px;
   height: 200px;
   background: red;
   position :relative;
   -webkit-animation: mymove 6s infinite; /* Chrome, Safari, Opera */ 
   animation: mymove 6s infinite;
   text-align: center;
   color: white;
}
/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    0%   {left: 0px;}
    25%  {left: 500px;}
    75%  {left: 50px}
    100% {left: 200px;}
}

/* Standard syntax */
@keyframes mymove {
    0%   {left: 0px;}
    25%  {left: 500px;}
    75%  {left: 50px}
    100% {left: 100px;}
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/PPrKWK/'>keyframes </a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
animationname	Bu kısma bir animasyon ismi girilmelidir.
Keyframes-selector	%0-100% arası adımlar girilerek oluşturulur. %0 ve 100% değerlerinin girilmesi önerilir.
Css-style	Bir veya daha fazla değişecek css özelliği.

Tarayıcı Desteği


43.0 4.0-webkit	16.0 5.0-moz	10.0	9.0 4.0-webkit	30.0 15.0-webkit 12.0-o

Posted on 26 Kasım 2015 by Samed GÖZÜTOK 0

CSS justify-content

justify-content :

Elementleri ana obje içerisinde yatay olarak hizalanmasını sağlar.

Örnek

#justify {
    width: 300px;
    height: 200px;
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-around; /* Safari 6.1+ */
    display: flex;
    justify-content: space-around;
}

#justify div {
    width: 100px;
    height: 100px;
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/GpbvZr/'>justify-content</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
flex-start	Elementler ana objenin başında konumlandırılmıştır
flex-end	Elementler ana objenin sonunda konumlandırılmıştır.
center	Elementler ana objenin ortasında konumlandırılmıştır.
space-between	Elementler ana objenin kenarlarından hizalanır
space-around	Elementler kenarlara bitişik olmayacak şekilde hizalanır.
İnital
İnherit

Tarayıcı Desteği


29.0 21.0-webkit	28.0 18.0-moz	11.0	6.1-webkit	12.10

Posted on 26 Kasım 20151 Eylül 2016 by Samed GÖZÜTOK 0

CSS height

height :

Bir objenin yüksekliğini ayarlar.

Örnek

.height {
   height: 150px;
   width: 150px; 
   background: red;
   color: white;
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/bVPrGo/'>height</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
auto	Yükseklik otomatik olarak ayarlanır.
length	Yüzdeli, px, em, cm gibi değerler alabilir.
İnital
İnherit

Tarayıcı Desteği


1.0	1.0	4.0	1.0	7.0

Posted on 26 Kasım 201518 Ağustos 2016 by Samed GÖZÜTOK 0

W3TR

HTML, CSS

W3TR

Yazar: Samed GÖZÜTOK

CSS line-height

line-height :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

CSS letter-spacing

letter-spacing :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

CSS left

left :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

CSS3 @keyframes

@keyframes :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

CSS justify-content

justify-content :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

CSS height

height :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği