CSS Shorthand(kısacası) Tenikleri

Uzun parametlereler alan CSS taglarının kısaca yazılış metotları

Bu yazıda kullanılan element ifadesi css ile kullanılan herhangi bir tag yada özel sitili ifade eder.

 Arkaplan (Background)

element {
  background-color: color || #hex || (rgb / % || 0-255);
  background-image:url(URI);
  background-repeat: repeat || repeat-x || repeat-y || no-repeat;
  background-position: X Y || (top||bottom||center) (left||right||center);
  background-attachment: scroll || fixed;
}

 
Kısacası :

element {
  background:
    #fff
    url(image.png)
    no-repeat
    20px 100px
    fixed;
}

 
Font
 

element {
  font-style: normal || italic || oblique;
  font-variant:normal || small-caps;
  font-weight: normal || bold || bolder || || lighter || (100-900);
  font-size: (number+unit) || (xx-small - xx-large);
  line-height: normal || (number+unit);
  font-family:name,"more names";
}

 
Kısacası :
 

element {
  font:
    normal
    normal
    normal
    inhert/
    normal
    inherit;
}

 
Kenarlık (Border):
 

element {
  border-width: number+unit;
  border-style: (numerous);
  border-color: color || #hex || (rgb / % || 0-255);
}

 
Kısacası
 

element {
  border:
    4px
    groove
    linen
}

 
Dış boşluk ve iç boşluk (Margin and Padding)
 

element {
  margin-top: number+unit;
  margin-right: number+unit;
  margin-bottom: number+unit;
  margin-left: number+unit;
}


 Kısacası
 

element {
  margin: auto auto auto auto;
}

 
Dışa Çizgi (Outline)

element {
  outline-width: number+unit;
  outline-style: (numerous);
  outline-color: color || #hex || (rgb / % || 0-255);
}


Kısacası

element {
  outline:3px dotted gray;
}


 Liste Stilleri (List sytle)

element {
  list-style-type: (numerous);
  list-style-position:inside || outside;
  list-style-image:url(image.png);
}

 
Kısacası
 

ul li {
  list-style:square inside url(image.png);
}

 
Kaynak www.dustindiaz.com/css-shorthand/

CSS Shorthand(kısacası) Tenikleri

Yorumunuzu Ekleyin


Yükleniyor...
Yükleniyor...