|
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.. | |
|
Yazdırılabilir Sayfa...
