Yeni Tasarim Online


















Css 4(Denetlenebilir Stil Özellikleri)

 
CSS 4
(Cascading Style Sheets = Yığılmalı Stil Kağıtları)
CSS öğrenmeye devam ediyoruz. 
Biliyorsunuz Css her seferinde font özellikleri yazmaktan bizi kurtarıyor. 
Şimdi Css' nin ayrıntılarını incelemeye devam edelim...
Derinlemesine CSS
Denetlenebilir Stil özelliklerinden söz edeceğiz. Css bize normal font özelliklerinin dışında bir çok özellik sunar.. Şimdi onları inceleyelim:
Denetlenebilir Stil Özellikleri
Yazı büyüklüğü:

CSS ' de font-size: yazının boyutunu belirler. Bu piksel cinsinddden olabildiği gibi puto ve yüzde değeri de olabilir. Alabileceği değerler şunlardır:
font-size: xx-small , x-small , small , medium , large , x-large , xx-large , smaller , larger , %


Bakın Css' nin font özellikleri sayfada nasıl görünüyor. Bunlardan birini sayfamızda kullanmak istediğimizde şunu yazmalıyız:
.x-large { font-size: x-large; }

Yazı Tipi

Css ile yazımızın kalın mı? Yoksa İtalik mi? olsun istiyorsak bunu font-style etiketi ile belirleriz. Diğer Css kodlarının arasına yazarız. Özellikleri şunlardır:
font-style: normal   |   italic   |   oblique
Bunları bir Css kodlamasında kullanmak istediğimizde sadece birini seçebiliriz. Mesela yazımız italik olsun istiyorsak:

.italikyazi { font-style: italic }


Bunu sayfaya bağlayalım:
<p class="italikyazi">Bu yazı yana eğik yani İtalik olsun</p>


Sayfada görünümü şöyle olmalı:
Bu yazı yana eğik olmalı
Bütün Harfler büyük!
font-variant
Siz küçük yazsanızda bütün harfleri büyük harfe dönüştürecektir. Ama bu etiket Natscape Browser'larda çalışmıyor. 
Değerleri şunlardır:
font-variant: normal   |  small-caps

Sayfada kullanmak için:
.buyuk-yazi: {font-variant: small-caps}

Bunu sayfaya bağlayalım:
<p class="buyuk-yazi">
bu yazıyı küçük haflerle yazıyorum. ama büyüyecekler  
</p>
Bu yazının sayfada görünümü tahmin edebileceğiniz gibi yazının büyük harflerle yazılması olacaktır.
Renk düzenlemesi
color:
Metnin rengini kontrol eder. Renkleri daha önceki derslerimizde görmüştük.. 
Rengin ingilizce adını yazabileceğimiz gibi Hexadecimal kodunu da yazabiliriz. (Hexadecimal kodlar ve adları için tıklayın.) 
Kullanımı:

.renk1 {color: blue}
.renk2 {color: #0000FF}
Bunu sayfaya bağlayalım:
<p class="renk1"> Bu yazı Mavi olsun!<p>
<p class="renk2">Bu yazı da mavi olsun!</p>

Bu yazıların sayfada görünümü tahmin ettiğiniz gibi mavi olacaktır..
Metin Aralığı Düzenleme

letter-spacing: 
Yazılarımızdaki harflerin aralıklarını belirlememizi sağlar. Ama ne yazık ki Netscape Browser'larda bu özellik görüntülenmez.. 
Kullanımı:
<p style="letter-spacing: normal">Normal aralık</p> 
<p style="letter-spacing: 1px">1 piksel aralık</p>
Gördüğünüz gibi Css kodlarını doğrudan etiketlerin içine de yazabiliyoruz.
Bu kodların sayfada görünümü:
Gördüğünüz gibi harflerimizin aralarındaki boşlukları belirleyebildik..
 
 
Bugün: 24 Klik: 103 Online :