Anasayfa / Web / CSS / CSS (Cascading Style Sheets )-2

CSS (Cascading Style Sheets )-2

CSS de Kısaltmalar

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

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

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

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

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

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

Kısaltarak şu şekilde yapabiliriz.

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

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

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

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:

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

Kısaltırsak:

border-top: 2px dashed #f00;

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

border: 2px dashed #f00;

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

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

Kısaltırsak:

 margin: 10px 5px 20px 15px;

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

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

Kısaltırsak:

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

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

İyi Çalışmalar..

Hakkında Ali Demirci

Ben Ali Demirci... 1991 Ankara doğumluyum. Ankara da yaşıyorum. Fırsat buldukça öğrendiklerimi burada paylaşıyorum. Java ile haşır neşirim. Android'den asla vazgeçemem. Öğrenmeye bayılırım. Yeni şeyler öğrendiğimde, geçmişteki projelerimde keşke böyle yapsaydım diye çok üzülmüşümdür. O yüzden öğrenmekten korkmayın. Takıldığınız yerleri mutlaka sorun. Biliyorsam yanıt veririm. Bilmiyorsam yol gösteririm. Teşekkürler :)

Kontrol Et

JavaScript ile Web Servis Çağırma

Bugün, daha önce yazmış olduğum Web Servisi çağırma işlemini JavaScript ile yapmaya çalıştım. JavaScript ile …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.