Okunma Sayısı : 77

CSS kodları bazen gereğinden fazla uzayabiliyor. En azından birkaçını kısa yazabilmemiz mümkün. Aşağıdaki bu kodları örnekleri ile görebilirsiniz.

Background

Normal yazım:

background-image:  url("bg.png");
background-position: top center;
background-repeat:  no-repeat;

Kısa yazım:

background:  url(bg.png) no-repeat top center;

Padding

Normal yazım:

#div  {
padding-top:30px;
padding-right:30px;
padding-bottom:30px;
padding-left:35px;
}

Kısa yazım:

#div {
padding:10px 20px 50px 45px;
}

top, right, bottom, left şeklinde yazılır. Saat yönünden aklınıza gelebilir.

Border

Normal yazım:

#div {
border-width: 1px;
border-style:  solid;
border-color: #f2f2f2;
}

Kısa yazım:

#div {
border: 1px solid #f2f2f2;
}

Font

Normal yazım:

#div  {
font-variant:large-caps;
font-weight:bold;
font-size:2em;
line-height:1.8em;
font-family:Helvetica,  serif;
}

Kısa yazım:

#div {
font:  small-caps bold 1em/1.4em 'Georgia' ,serif;
}

Margin

Normal yazım:

#div {
margin-top: 30px;
margin-right:  30px;
margin-bottom: 30px;
margin-left:  15px;
}

Kısa yazım:

#div {
margin:  30px 30px 30px 15px;
}

top, right, bottom, left şeklinde yazılır. Saat yönünden aklınıza gelebilir.

Outline

Normal yazım:

#div {
outline-width:  250px;
outline-style: dotted;
outline-color: color || #hex ||  (rgb / % || 0-199);
}

Kısa yazım:

#div  {
outline:3px dotted gray;
}

Color

Normal yazım:

#body {color:red;}
h1 {color:#00ff00;}
p  {color:rgb(0,0,255);}

Kısa yazım:

#body  {
h1 color:#fff;
p color:#fff;
}

renk rgb veya hexedecimal olarak girilebilir

List

Normal yazım:

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

Kısa yazım:

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

Kaynak(Source)