|
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 |
|
