CSS DERS 3:Font Özellikleri İçin CSS Kullanımı:

Font Özellikleri İçin CSS Kullanımı:
FONT-FAMILY (Yazıtipi ailesi):
Ģeklinde kullanılan bu etiketle, uyguladığınız stilin font
ailesini seçebilirsiniz. Ġfadenin karĢısına font ailesinin
adını yazabileceğiniz gibi, ―serif‖ (ör. Times), ―sans-serif‖
(ör. Arial), ―cursive‖ (ör. Zapf-Chancery), ―fantasy‖ (ör.
Western), ―monospace‖ (ör. Courier) de yazabilirsiniz.
Bu satırda birden fazla font adı aralarına virgül koyarak
yazılabilir. Ġyi bir uygulama, önce tercih ettiğiniz belirli
bir fontun, ardından bu font ailesinin adını ve nihayet
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
140
türü yazmaktır. Çünkü seçtiğiniz font kullanıcının
bilgisayarında mevcut olmayabilir.
Örnek:
P { FONT-FAMILY: "New Century School Book", Times,
serif }
P { FONT-FAMILY: "Arial Black", Helvetica, sans-serif }
FONT-STYLE(Yazılış Şekli):
Bu etiketle harfin normal, italik veya yatık olmasını
sağlayabilirsiniz. (Ġtalik harflerin mutlaka öne yatık
olması gerekmez! Ama çoğu italik harf, öne yatıktır.)
Örnek:
H1 { FONT-STYLE: normal }
H2 { FONT-STYLE: italic }
H3 { FONT-STYLE: oblique }
FONT-VARIANT (Yazıtipi türü):
Bu etiketle harfin normal veya küçük harf boyunda ama
büyük harf biçiminde olması sağlanabilir:
H1 { FONT-VARIANT: normal }
H2 { FONT-VARIANT: small-caps }
FONT-WEIGHT (Yazıtipi Koyuluğu):
Bu etiketle, fontun normal, siyah, koyu, daha koyu, daha
açık olması sağlanabilir. Verilebilecek değerler, ―normal,‖
―bold,‖ ―bolder,‖ ―lighter‖ olabileceği gibi, 100, 200, 300,
400, 500, 600, 700, 800 veya 900 olabilir. Burada 100-
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
141
300 ince çizgili harf, 400-500 kalın çizgili harf, 600-900
çok kalın çizgili harf sayılır.
Örnek:
H1 { FONT-WEIGHT: normal }
H2 { FONT-WEIGHT: bold }
FONT-SIZE (Yazıtipi boyutu):
Bu etiketle, fontun büyüklüğünü belirleyebilirsiniz. Bu,
mutlak veya göreli olabilir. Mutlak büyüklük ya punto,
santimetre veya inç cinsinden belirli bir rakam (ör. 12
pt, 1cm) veya en küçükten en büyüğe doğru olmak
üzere, ―xx-small,‖ ―x-small,‖ ―small,‖ ―medium,‖ ―large,‖
―x-large,‖ ―xx-large‖ olabilir. Göreli büyüklükler ise bir
önceki fonta göre daha büyük anlamına ―larger‖ veya
daha küçük anlamına ―smaller‖ olabileceği gibi, bir
önceki harf büyüklüğünün yüzdesi olarak verilebilir.
Tarayıcı farklarını düĢünecek olursak en uygun seçenek
punto kullanmaktır Örnek:
H1 { FONT-SIZE: 12pt }
H2 { FONT-SIZE: 90% }
(Yüzde iĢaretinin rakamın önünde değil, arkasında
olduğuna dikkat ediniz.)
Yazıtipi : “FONT:” Ģeklindeki bu parametre ile bir çok
font özelliği birden verilebilir. Bu ifadenin karĢısına harf
stili, türü, ağırlığı, ölçüsü ve ailesi ile bu harfin
kullanıldığı satırın satır yüksekliği toplu olarak
belirtilebilir. Örnek:
P { FONT: italic bold 12pt/14pt Times, serif }
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
142
Renk ve Zemin Özellikleri:
Renk: “COLOR:” Ģeklindeki bu parametre ile herhangi
bir içeriğin renk özelliğini belirleyebilirsiniz. Renk adları
veya kodlarını daha önce ele almıĢtık. Örnek:
H1 { COLOR: blue }
H2 { COLOR: #000080 }
Zemin Rengi: “BACKGROUND-COLOR:” Ģeklindeki bu
parametre ile herhangi bir içeriğin arkasındaki zemin
rengini belirleyebilirsiniz. Etiketin rengi ile zemin renginin
farkını görebilmek için daima COLOR yükleminden sonra
kullanılması iyi bir 180 152 24 80 uygulama olur. Örnek:
H1 { BACKGROUND-COLOR: blue }
Zemin grafiği: “BACKGROUND-IMAGE:” Ģeklindeki bu
parametre ile herhangi bir içeriğin arkasındaki zemine
koymak istediğiniz görüntüyü belirleyebilirsiniz. Ġçeriğin
kendi zemin rengi ile zemine konacak görüntünün
birbirini örtmemesi (Perde gibi) için ardarda kullanılması
doğru olur. Zemin görüntüsünün yerini belirtmek için
―url...‖ ifadesi kullanılır. AĢadaki örneklere bakalım:
H1 { BACKGROUND-IMAGE: url(/images/zemin1.gif }
P { BACKGROUND-IMAGE:
url(http://www.abc.com/zemin1.gif }
BODY { BACKGROUND: white url(/images/zemin1.gif }
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
143
P { BACKGROUND: black url(/images/zemin1.gif norepeat
bottom right}
Pozisyon değerleri, üstte solda (left top), üstte ortada
(top center), üstte sağda (top right) olabileceği gibi,
ortada ortalanmıĢ (center center), ortada sağda (center
right) veya ortada solda (center left), ya da altta solda
(bottom left), altta ortada (bottom center) ve altta sağda
(bottom right) olabilir.
Metin Özellikleri:
Kelime aralıkları: “WORD-SPACING:” parametresi ile
kelimelerinin arasına konulmasını istediğiniz ilave
boĢlukları belirtebilirsiniz. Burada kullanılan ölçü
kullanılan fontun en geniĢ harfi olan ―m‖ harfinin ondalık
bölümüdür.
Örnek:
P { WORD-SPACING: normal }
H1 { WORD-SPACING: 0.2em }
H2 { WORD-SPACING: -0.4em }
Harf aralıkları: “LETTER-SPACING:” parametresi ile
harflerin arasına konulmasını istediğiniz ilave boĢlukları
belirtebilirsiniz. Burada kullanılan ölçü de ―m‖ harfinin
ondalık bölümüdür. Örnek:
P { LETTER-SPACING: normal }
H1 { LETTER-SPACING: 0.2em }
H2 { LETTER-SPACING: -0.3EM }
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
144
Metin süsleme: “TEXT-DECORATION” parametresi ile
bir metnin altını çizdirebilir (underline), üstünü
çizdirebilir (overline), veya ortasına çizgi
koydurabilirsiniz (line-through), veya bir görünüp, bir
kaybolmasını sağlayabilirsiniz (blink). Bunu, altı normal
olarak çizilen A (Anchor) etiketiyle verdiğiniz bağlantı
kelimelerinin altının çizilmemesi için de kullanabilirsiniz.
Örnek:
H3 { TEXT-DECORATION: blink }
A:link, A:visited, A:active { TEXT-DECORATION: none }
Metnin bloklanması: TEXT-ALIGN parametresi ile ile
bir metni sağa (right), sola (left) veya ortaya (center)
bloklayabilirsiniz. Örnek:
H3 { TEXT-ALIGN: left }
H1 { TEXT-ALIGN: center }
Birinci satırın içerden başlaması: “TEXT-INDENT”
parametresi ile ile bir metnin birinci satırını vereceğiniz
ölçüde içerden baĢlatabilirsiniz. Örnek:
H3 { TEXT-INDENT: 1cm }
Satır Yüksekliği: “LINE-HEIGHT” parametresi ile bir
metnin satırları arasına konacak boĢluğu vereceğiniz
yüzde ölçüsü ile normal satır yüksekliğine göre
belirleyebilirsiniz. Örnek:
H3 { LINE-HEIGHT: 200% }
H1 { LINE-HEIGHT: 350% }
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
145
(Bu ölçü yüzde 100‘ün altına düĢerse, satırlar birbirinin
üzerine bineceği için okunamaz hale gelir.)
İlk Harf Büyütme : “First-Letter”
Gazete ve dergi yazılarında bazı paragrafların ilk harfi,
diğer harflerden çok büyük ve aĢağı doğru iki, hatta üç
satır yüksekliğinde olur. Gazetecilik dilinde buna Gömme
Harf denir. Yazılı basının favori masaüstü yayıncılık
programı QuarkExpress'te bile bunu otomatik yapmak
için programın beĢinci sürümü beklenmiĢtir. Ġlk HTML
sürümlerinde bu olay olmadığından bu iĢlem hep
<FONT> etiketleri ile yapılırdı. ġimdi ise bu parametre ile
yapmak mümkündür.
P.first-letter {font-size: 200%;}
Büyüte oranı tamamen kodlayan kiĢiye bağlıdır. Ġlk harfi
yüzde 200 yerine yüzde 400 de büyütmek mümkündür.
Bunu kod içinde kullanırken ise
<p>Bu paragraf deneme paragrafıdır. Bu paragraf
deneme paragrafıdır. Bu paragraf deneme paragrafıdır.
Bu paragraf deneme paragrafıdır. Bu paragraf deneme
paragrafıdır. Bu paragraf deneme paragrafıdır. </p>
Konum (Pozisyon) Özellikleri
CSS kurallarının içinde yer almakla birlikte HTML
içeriklerinin tarayıcının ekranında, yerleĢtirileceği
pozisyonu ve ilk konumun daha sonraki değiĢme tarzını
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
146
belirleyen parametreler, son zamanlarda CSS-P
(Cascading Style Sheets-Positioning) Ģeklinde anılmaya
baĢladı. Gerçekten pozisyon iĢlemi CSS içinde önemli bir
yere sahiptir ve dikkatlice incelenmelidir.
Konum “POSITION:” Değerleri
Position parametresi ile belirlenen konum,
 sabit (static)
 mutlak (absolute)
 göreli (relative)
değerlerini alabilir.
Mutlak (absolute) konum verilmiĢ bir içerik (paragraf,
resim, tablo), HTML‘in diğer içeriği nedeniyle asla yer
değiĢtirmez; kendisine verilen üst (top) ve sol (left)
değerlere göre mutlak bir yerde kalır. Buradaki ölçü pixel
cinsindendin ve tarayıcının HTML sayfasını gösterdiği
alanın sol üst köĢesi 0-0 kabul edilerek verilir. Örneğin
―top: 20 px; left: 20px‖ Ģeklindeki bir ölçü, bu içeriğin
tarayıcının penceresinde sol üst köĢesinden 20 pixel
aĢağı ve sol kenarından 20 pixel sağa doğru yerleĢmesini
sağlar.
Sabit (Static) konum, yeri belirlenmek istenen içeriğin,
HTML‘in diğer içeriğine göre, nereye geliyorsa, oraya
yerleĢmesini sağlar. Bir anlamda bu içeriğin durumu
diğer içeriğe bağlıdır.
Göreli (Relative) konum ise verilecek ölçülere göre
belirlenecek yer, bir önceki içeriğin konumunun bittiği
yerden itibaren hesaplanır. Örnek:
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
147
<SPAN STYLE="position:static; backgroundcolor:#
000000">Siyah. Konum: sabit</SPAN>
<DIV STYLE="position:absolute; top:40px; left:40px;
background-color:#cccccc">Gri. Konumu:
mutlak[Absolute], sol kenarı 40 Pixel santim
içerden.</SPAN>
Görünürlük: “Visibility”
―VISIBILITY:‖ parametresi ile, biçimlendirilen içeriğin
ekranda görünmesi yada gizlenmesi sağlanabilir. Ġçerik
gizlenmiĢ (hidden), veya görünür (visible) olabilir. Eğer
istenirse (inherit) parametresi ile görünürlük değeri
içinde bulunduğu nesneden miras yolu ile alınmasıda
sağlanabilir. Yani ata olan içerik görünüyorsa içinde yer
alan bu kısımda da görünür, aksi takdirde görünmez.
Örnek
<div id="kanal01" style="position:absolute; left:10px;
top:10x; width:200px; height:200px; z-index:1;
visibility: visible; background-color: #cccccc">Bu içerik
Mutlak konuma sahiptir, zemini siyahtır. Div adı kanal01
olan bu alan her koĢuldagrünür </div>
CSS ve Katman (Layer) Kavramı
Photoshop ve Gimp tarzı programları kullananlar bu
kavrama yabancı değildirler ancak burada katmanın ne
olduğunu izah etmek gerekecek. Katman kavramını
anlamak için aĢağıdaki Ģekle bakalım:
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
148
ġekilde görüleceği gibi 4. katman en üstteki kavram ve
tamamı görünmekte. Onun altındaki katman 3. katman
çünkü bu katman 2 nolu katmanın bir kısmını
gizlemekte. Yani her Ģart altında 3 nolu katman 2.
katmanın üstündedir. Buna göre tabiî ki 2. katman da 1.
katmanın üzerindedir.
Normal Ģartlarda web sayfalarında içerik yan yana
gelecektir. Dolayısıyla katmana ihtiyaç yoktur diye
düĢünülebilir. Ama CSS ve DIV etiketleri için durum
bundan ibaret değildir. DIV ile tanımlanan alanlara boyut
vermek mümkün olduğundan bu alanların üst üste
gelmesi de pekala mümkündür. Bunu Ģözmek içinse CSS
içinde katman indeksi denilen z-index paraetresi
kullanılır.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
149
Katman Ġndeksi – (Z-index):
―Z-INDEX:‖ parametresi, bir içeriğin tarayıcı tarafından
hangi katmanda gösterileceğinin belirtilebilmesini sağlar.
Bir sayfada, DIV veya SPAN etiketi ile oluĢturulmuĢ
nesne varsa, onların katman endeksine bakarak, hepsini
belirli bir kata koyar. Yanyana gelen nesnelerin kaçıncı
katta olduğu önemli olmayabilir; ancak nesneler üst üste
geliyorlarsa, hangisinin hangi altta, hangisinin ortada,
hangisinin üstte duracağı önem taĢıyabilir. Verilecek
değer 1, 2, 3 Ģeklinde bir sıra numarasıdır. 1, en alttaki
katmandır; diğerleri sırayla onun üzerindeki katları
gösterir. Örnek
<div id="kanal01" style="position:absolute; left:10px;
top:10x; width:200px; height:200px; z-index:1;
visibility: visible; background-color: #cccccc">Gri
çerçeveli yazi..</div>
<div id="kanal02" style="position:absolute; left:20px;
top:30px; width:220px; height:220px; z-index:2;
background-color: #000000">Siyah Renkli yazi </div>
Konum belirleyen parametreler arasında eni boyu
belirlenmiĢ bir nesneye koyduğunuz metnin taĢması
halinde taĢan yazının gösterilip gösterilmeyeceği, veya
bir nesnenin içine konulan içeriğin hangi bölümlerinin
gösterilip, hangi bölümlerinin kesileceğini belirleyen diğer
iki kontrol parametresi daha vardır. Bunların tarayıcı
yorumları sürümden sürüme değiĢmektedir.
Position: Katmanın yerinin neye göre belirleneceğini
(absolute, relative) pencere esas alınarak belirlensin
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
150
Top: Pencereye göre kaç piksel aĢağıda olacağını,
Left: Pencereye göre kaç piksel solda olacağını,
Width: Katmanın geniĢliğini,
Height: Katmanın yüksekliğini,
Background-color: Arkaplan rengini,
Overflow: TaĢan metnin durumunun ne olacağını
(hidden, gizli kalsın, gösterilmesin),
Z-index: Üstüste geldiğinde hangi sıra ile
yerleĢtirileceğini (1. katmana 1 değeri verilmiĢtir,
dolayısıyla en altta o gösterilecektir),
Padding: Katmanın kenar çizgileri ile içindeki nesneler
arasında bırakılacak boĢluğu,
Border: Kenar çizgilerinin kalınlık, kenarlık türü ve
rengini belirtmektedir.
Boşluk bırakma, Margin :
Ġ.eriğin dört bir yanında bırakılacak boĢluk miktarları
toplu olarak yada üstünde (MARGIN-TOP), sağında
(MARGIN-RIGHT), solunda (MARGIN-LEFT) ve altında
(MARGIN-BOTTOM) olacak Ģekilde ayrı ayrı belirtilebilir.
Tanım tek bir defada yapılacak ise parametrelerin iĢleniĢ
sırası üst, sağ, sol, ve alt olarak okunacaktır. Örnek:
P { MARGIN-TOP: 10px }
P { MARGIN-RIGHT: 20px }
P { MARGIN-LEFT: 20px }
P { MARGIN-BOTTOM: 10px }
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
151
P { MARGIN: 10px 20px 20px 10px}
Bir etiketin içinde yer alabilecek ―<!—― ve ―-->‖
Ģeklindeki etiketler HTML dilinin yorum etiketleridir; bu
etiketlerin arasındaki