CSS (Cascading Style Sheets )-2

CSS de Kısaltmalar

1. Font
Normalde bir font tanımlarken 4 adet CSS kodu kullanılır:

[css]

font-weight: bold;
font-family: verdana, sans-serif;
font-size: 11px;
line-height: 15px;

[/css]

Kısaltma olarak kullanlan kod ise tek satır:

[css]

font: bold 11px/15px verdana, sans-serif;

[/css]

2-Background
Background tanımlarken 5 adet atama yapmamız gerekirken kısaltma kullanarak tek tanıma indirebiliriz.

[css] background-color: #000;
background-image: url(ard.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 50px;

[/css]

Kısaltarak şu şekilde yapabiliriz.

[css]

background: { #000 url(ard.jpg) no-repeat fixed 50px 50px; }

[/css]

Bunlar arka plan görüntüsüne istediğimiz şekli verebildiğimiz kodlardır.

3- Renkler
CSS stillerinde renkler genelde hex-decimal renk kodu ile tanımlanır örneğin

[css]

color: #ff0000; kırmızı.

[/css]

4-Border
Kenarlık tanımlamalarında her özellik için bir tanımlama yapılır. örnek olarak bir elementin üst kenarına atama yapmak için:

[css]

border-top-width: 2px;
border-top-style: dashed;
border-top-color: #f00;

[/css]

Kısaltırsak:

[css]

border-top: 2px dashed #f00;

[/css]

Bu özellikleri tüm kenarlara uygulmak için:

border: 2px dashed #f00;

5- Margin ve Paddingler
Margin ve paddingler de normal tanımlama şöyledir:

[css]

margin-top: 10px;
margin-right: 5px;
margin-bottom: 20px;
margin-left: 15px;

[/css]

Kısaltırsak:

[css] margin: 10px 5px 20px 15px;

[/css]

6-Listeler
Liste tanımlamalarında da kısaltmalar mümkündür.

[css]

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

[/css]

Kısaltırsak:

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

[/css]

CSS ile ilgili uygulamalarda şimdiye kadar bahsettiğim temel bilgilerin nasıl kullanılmış olduğunu görceksiniz.

İyi Çalışmalar..