CSS 4
(Cascading Style Sheets = Yigilmali Stil Kagitlari) |
CSS ögrenmeye devam ediyoruz.
Biliyorsunuz Css her seferinde font özellikleri yazmaktan bizi kurtariyor.
Simdi Css' nin ayrintilarini incelemeye devam edelim... |
| Derinlemesine CSS |
| Denetlenebilir Stil özelliklerinden söz edecegiz. Css bize normal font özelliklerinin disinda bir çok özellik sunar.. Simdi onlari inceleyelim: |
| Denetlenebilir Stil Özellikleri |
Yazi büyüklügü:
CSS ' de font-size: yazinin boyutunu belirler. Bu piksel cinsinddden olabildigi gibi puto ve yüzde degeri de olabilir. Alabilecegi degerler sunlardir: |
| font-size: xx-small , x-small , small , medium , large , x-large , xx-large , smaller , larger , % |
| |
| .x-large { font-size: x-large; } |
Yazi Tipi |
Css ile yazimizin kalin mi? Yoksa Italik mi? olsun istiyorsak bunu font-style etiketi ile belirleriz. Diger Css kodlarinin arasina yazariz. Özellikleri sunlardir: |
| font-style: normal | italic | oblique |
| Bunlari bir Css kodlamasinda kullanmak istedigimizde sadece birini seçebiliriz. Mesela yazimiz italik olsun istiyorsak: |
.italikyazi { font-style: italic } |
Bunu sayfaya baglayalim:
|
| <p class="italikyazi">Bu yazi yana egik yani Italik olsun</p> |
Sayfada görünümü söyle olmali:
|
| Bu yazi yana egik olmali |
| Bütün Harfler büyük! |
font-variant
Siz küçük yazsanizda bütün harfleri büyük harfe dönüstürecektir. Ama bu etiket Natscape Browser'larda çalismiyor.
Degerleri sunlardir: |
| font-variant: normal | small-caps |
Sayfada kullanmak için: |
| .buyuk-yazi: {font-variant: small-caps} |
Bunu sayfaya baglayalim: |
<p class="buyuk-yazi">
bu yaziyi küçük haflerle yaziyorum. ama büyüyecekler :)
</p> |
| Bu yazinin sayfada görünümü tahmin edebileceginiz gibi yazinin büyük harflerle yazilmasi olacaktir. |
| Renk düzenlemesi |
color:
Metnin rengini kontrol eder. Renkleri daha önceki derslerimizde görmüstük..
Rengin ingilizce adini yazabilecegimiz gibi Hexadecimal kodunu da yazabiliriz. ( Hexadecimal kodlar ve adlari için tiklayin. )
Kullanimi: |
.renk1 {color: blue}
.renk2 {color: #0000FF} |
| Bunu sayfaya baglayalim: |
<p class="renk1"> Bu yazi Mavi olsun!<p>
<p class="renk2">Bu yazi da mavi olsun!</p> |
Bu yazilarin sayfada görünümü tahmin ettiginiz gibi mavi olacaktir.. |
| Metin Araligi Düzenleme |
letter-spacing:
Yazilarimizdaki harflerin araliklarini belirlememizi saglar. Ama ne yazik ki Netscape Browser'larda bu özellik görüntülenmez..
Kullanimi: |
<p style="letter-spacing: normal">Normal aralik</p>
<p style="letter-spacing: 1px">1 piksel aralik</p> |
| |
| |
|
EgLeNCe