Embed Size (px)
Citation preview
CSS
BÖLÜM - II1. METİNLERİN BİÇİMLENDİRİLMESİ
Yazı Tipi Ayarları:
Yazı tipi ayarları ile ilgili birtakım işlemler daha önceden görülmüştü. Yazı tipi ayarlarında önemli olan tüm tarayıcılarda desteklenen yazı tiplerinin kullanılmasıdır. Böylece sayfalarımız tüm tarayıcılarda aynı görüntüyü verecektir.
Etisem-2016 Sayfa 1
CSS
Farklı bir örnek aşağıda gösterilmiştir.
,
Etisem-2016 Sayfa 2
CSS
Örnekte <body> tagı içerisinde tüm metinler kırmızı renkli ve ve Times New Roman olmuştur. Burada ebeveyn <body> tagıdır. Dolayısı ile <body> tagına uygulanan tüm CSS kodları çocuklara da uygulanır.
Biçimlendirme:
Uygun yazı tipi seçiminden sonra metinlerin renk boyut kalınlık eğiklik gibi ayarlarını yapılabilir. Aşağıdaki tabloda buna ilişkin özellikler ve değerler gösterilmiştir.
Etisem-2016 Sayfa 3
CSS
Özellik Alabileceği Değer Açıklama
colorrenkadı; #rrggbb;
rgb(rrr,ggg,bbb)
Metin rengini değiştirir. Metinin İngilizce ismini girerek, RGB renk kodu ve RGB renk oranları ile değiştirilebilir. rr,gg,bb 00 ile FF arası değer alır. rrr,ggg,bbb ise 0 ile 255 arası değer alır.
font-size small,medium,large,px,em
Metnin boyutunu değiştirir. Metinin boyutunu px(piksel) tipinde değiştirebiliriz.Diğer bir yöntemde em değerinin kullanılmasıdır. Burada 1 em=16px e eşittir. Bunların dışında small, medium veya large boyutları da kullanılabilir.
font-weight normal,bold Metinleri normal veya kalın gösterir.
font-style normal,italic Metinleri normal veya eğik gösterir.
font-variant normal,small-caps Metinleri küçük harf boyutlarında büyük harf gösterir
text-transformnone,lowercase,uppercase,
capitalize
Metinleri küçük harf, büyük harf veya ilk kelimesini büyük harfe çevirir.
text-decorationnone,underline,overline,
line-throughMetinlerin altını üzerini veya üstünü çizer
letter-spacing normal,em Harfler arasındaki mesafeyi em cinsinden ayarlar.
word-spacing normal,em Kelimeler arasındaki mesafeyi em cinsinden verir.
Etisem-2016 Sayfa 4
CSS
Bu örneklerin uygulanmış hali aşağıda gösterilmiştir. Diğer uygulamaları uygulama yaparak farklı görünümlerde görebiliriz.
Etisem-2016 Sayfa 5
CSS
Biçimlendirme:
Paragraf girintilerinin sola, sağa veya ortaya hizalanması paragrafın satırları arasındaki mesafenin ayarlanması gibi bir çok ayar yapabiliriz.
Özellik Alabileceği Değer Açıklama
text-indent em,px Paragrafın ilk satırının girintisini ayarlar.
text-align left, right,center,justify Paragrafın sola sağa ortaya veya iki yana yaslanmasını sağlar.
line-height em,px
Etisem-2016 Sayfa 6
CSS
Ardalan Kullanımı:
Metinlere değişik renk ve özelliklerde ardalan verilebilir. Her paragrafın ardalanı farklı renklerde yapılabilir. Ardalan olarak resim kullanılabilir. Arka plan için background-color: renk; veye background:renk ;kullanılır. Resim için background: url(link) kullanılır
Etisem-2016 Sayfa 7
CSS
Etisem-2016 Sayfa 8
CSS
Etisem-2016 Sayfa 9
CSS
Ardalan için Resim Kullanımı:
Etisem-2016 Sayfa 10
CSS
Etisem-2016 Sayfa 11
CSS
Yukarıda görüldüğü gibi resimler sağa doğru tekrarlanabildiği ölçüde sayfa boyunca tekrar edilmiştir. Bu durumun düzenlenmesi için aşağıdaki tabloyu kullanabiliriz. Aşağıdaki tabloda background için kullanılacak resimler ve renkler ile ilgili genel tablo verilmiştir.
background-repeat:Bu özellik ile arkaplan resmimizin tekrar edip etmeyeceğini, eğer edecekse x’mi yoksa y ekseninde mi edeceğini belirtiriz. Alabileceği değerler:repeat – Hem yan olarak hem de alta doğru tekrar etrepeat-x – yana doğru tekrar etrepeat-y – aşağı doğru tekrar etno-repeat – tekrar etmebackground-attachment:Arkaplan sayfa ile birlikte kaysın mı yoksa sabit mi kalsın ayarını bu seçenek ile yaparız. Bunun değerleri:
scroll – sayfa ile kayarfixed – sabittirbackground-color:Arkaplan resminin altında kalan alanın rengini, yani arkaplanın rengini belirlediğimiz özelliktir.
background-position:Arkaplan deseninin başlayacağı yeri belirtir. Alabileceği değerler:
top left – üst soltop center – üst ortatop right – üst sağ
Etisem-2016 Sayfa 12
CSS
center left – orta solcenter center – ekranın ortası (hem üstten hem yandan)center right – orta sağbottom left – alt solbottom center – alt ortabottom right – alt sağx-% y-% – yüzde olarak sağ/sol ve üst/altx-pos y-pos – x,y koordinatlarına göre
Etisem-2016 Sayfa 13
CSS
Etisem-2016 Sayfa 14
CSS
Etisem-2016 Sayfa 15
