Bu yazımızda basit bir sayfa hazırlamaya başlarken kullandığımız komutlardan bahsedelim.
body {
background: #fff (resimler/arkaplan.png) repeat;
font: italic bold 14px Verdana;
color: #333;
}body etiketi ingilizce anlamında olduğu gibi sayfanın “vücut” bölümüdür. Yani görünürde ne varsa bu bölüme eklenir. Bu nedenle sayfanın tümü bu etikete verdiğimiz değerler belirlenir. Arkaplan, yazı boyutu, yazı tipi gibi…
Şimdi de komutları inceleyelim:
background: #fff (resimler/arkaplan.png) repeat;background komutu arkaplanı çağırır.
Bunun karşısındaki #fff (beyaz) değeri arkaplanın renk kodudur.
url(resim-adresi) bölümü ise resmin URL adresi anlamına gelir. Oraya hangi resim adresini girerseniz arkaplanınız o resim olarak görünür.
repeat ise tekrar etmek anlamına gelmektedir. Yani resminizin 100×100 piksel boyutlarında olduğunu hayal edin. Bir adet papatya olan bir resim. Eğer siz resmin adresini girdikten sonra repeat komutunu eklerseniz resim edebildiği kadar tekrar eder. Sayfanız sonlanana kadar.
Bir resmi tekrar ettirmenin diğer türleri de şöyledir: repeat-x komutunu girerseniz resim sadece yatay olarak tekrar eder. repeat-y komutunu girerseniz sadece dikey olarak tekrar eder. no-repeat derseniz hiç tekrar etmeyecektir.
font: italic bold 14px Verdana;font komutu yazı tipi ile ilgili her şeyi kapsar. eğikliği, kalınlığı, boyutu ve hangi yazı tipi olduğu gibi…
italik eğikliktir.
bold kalınlıktır.
14px yazı tipinin boyutunu belirtir.
Verdana ise seçilen yazı tipinin adıdır.
color: #333;color komutunun karşısındaki renk kodu yazının rengini belirler.
.sayfa {
width:600px;
height:300px;
border: 1px solid #666;
background:#ccc;
text-transform: lowercase;
}width genişliği, height de yüksekliği.
border çerçeve anlamına gelir. 1px değeri ne kadar kalın olacağını, solid değeri çizginin şeklini (kesik, noktalı v.b), #666 ise rengini belirler.
Diğer çerçeve stillerine şuradan bakabilirsiniz.
text-transform yazıyı dönüştürme komutudur. Tümünü küçük harfe dönüştürmek için lowercase, büyük harfe dönüştürmek için uppercase kullanılır.
Bu yazıda sadece bir kısmını inceledik. “Basit CSS Komutları {2}” adlı yazımızda görüşmek dileğiyle :)
