CSS’de Kısaltmalar

 CSS:kodlama
yaparken bizim bazı kısaltmaları kullanmamıza izin verir. Böylece
hem fazla kod yığınından kurtulmuş oluruz, hemde sayfa boyutlarını
en aza indirmiş oluruz.

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

view sourceprint?1.font-weight: bold;
2.font-family: verdana, sans-serif;
3.font-size: 11px;
4.line-height: 15px;
Kısaltma olarak kullanlan kod ise tek satır:

view sourceprint?1.font: bold 11px/15px verdana, sans-serif;

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

view sourceprint?1.background-color: #000;
2.background-image: url(ard.jpg);
3.background-repeat: no-repeat;
4.background-attachment: fixed;
5.background-position: 50px 50px;
Kısaltırsak:

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

3. Renkler(Hex-decimal)
CSS stillerinde renkler genelde hex-decimal renk kodu ile
tanımlanır örneğin color: #ff0000; kırmızı. Renkler 6 karakterle
gösterilsede bir çok renk(web tabanlı) 3 karakterin tekrarlanması
ile oluşturulur. Örneğin, kırmızı’nın hex-decimal kodunun
kısaltırsak color: #f00;. Buradaki her karakter hex-decimal koddaki
iki karaktere karşılık gelmektedir. Mesela, beyaz renk
kullanacağınızda, color: white; veya color: #ffffff; kulanımı
önermeyiz. Kısaltılmış olanı color: #fff; kullanmanız daha
avantajlıdır.

4. Border
Kenarklı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:

view sourceprint?1.border-top-width: 2px;
2.
border-top-style: dashed;
3.
border-top-color: #f00;
Kısaltırsak:

view sourceprint?1.border-top: 2px dashed #f00;
Bu özellikleri tüm kenarlara uygulmak için:

view sourceprint?1.border: 2px dashed #f00;

5. Margin ve Padding’ler
Margin ve paddingler de normal tanımlama şöyledir:

view sourceprint?1.margin-top: 10px;
2.margin-right: 5px;
3.margin-bottom: 20px;
4.margin-left: 15px;
kıslatılmış hali:

view sourceprint?1.margin: 10px 5px 20px 15px;
Burada öznitelikler sağdan başlayarak saat yönünde devam eder.
Aşağıda çeşitli kısaltma yöntemleri birlikte verilmiştir:

4 Değer: (margin: 20px 15px 10px 5px;) birinci – üst, ikinci
– sağ, üçüncü – alt, dördüncü – sol.

3 Değer: (margin: 20px 15px 10px;) birinci – üst, ikinci –
sol ve sağ, üçüncü – alt.

2 Değer: (margin: 20px 15px;) birinci – üst ve alt, ikinci –
sol ve sağ.

1 Değer: (margin: 10px;) birinci – üst, sağ, alt ve sol

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

view sourceprint?1.ul {
2.
list-style-type:square;
3.
list-style-position:inside;
4.
list-style-image:url(image.png);
5.}
Kısaltırsak;

view sourceprint?1.ul li {
2.
list-style:square inside url(image.png);
3.}
4./* burda özel bir durum vardır eğer resim yoksa yedek olarak
square özelliği gösterilecektir. */
7. Sıfır ‘0′ ın Kısaltma olarak kullanılması
Kısaltmalarda son olarak ‘0′ ın kullanımına değineceğiz. Normalde
bir elemente değer ataması yapılırken değerin yanına birimi de
yazılır(örn: 3px, 0.2em vd.), Ancak sıfır ‘0′ için bu zorunlu
değilidir.

view sourceprint?1.padding:0;
Bu durumun bir istisnası mevcuttur oda yüzde değerlerinde atama
yapılırken 0% olarak atama yapılmalıdır.

Yeni yorum gönder

Bu alanın içeriği gizli tutulacak ve açıkta gösterilmeyecektir.
CAPTCHA
Aşağıdaki resimde yer alan karakterleri kutucuğa doğru olarak yazınız
Image CAPTCHA
Enter the characters shown in the image.

sponsorlu bağlantılar

Anket

Web sitesinde hangisi daha önemlidir:

Son yorumlar