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
CSS etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
CSS etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
22 Haziran 2016 Çarşamba
CSS DERS 2:Seçiciler
HTML içinde bölüm oluĢturma (DIV)
DHTML‘i bir teknikler demeti olarak ele alırsak, ilk
tekniğimiz, sayfamıza ne metin, ne grafik, ne tablo ve ne
de çerçeve sayılmayan, ama içinde bunların tümüne de
yer verebileceğiniz bölüm kavramına dayanan
<DIV>..</DIV> etiketidir.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
127
<DIV>..</DIV> etiketleri arasında yer alan her Ģey, yani
yazılar, resimler, grafikler, tablolar, video vs içerikler, bu
etikete vereceğiniz yerleĢtirme ve değiĢme özelliklerine
uygun hareket ederler.
<div> etiketi ile belgede bölümler oluĢturulabilir. <div>
etiketi için herhangi bir stil özelliği belirlendiğinde
<div>..</div> arasına yazılan tüm etiketler bu stilden
etkilenir. AĢağıda oluĢturulan bölümde <div> etiketine
style="color:#FFCC66;" stili uygulandığında <div>
içindeki paragraf ve baĢlık da ilgili renkte (turuncuya
yakın bir renk) görüntülenecektir.
<div style="color:#FF0000;">
<h4>Bölüm içinde bir baĢlık</h4>
<p>Bölüm içinde herhangi bir paragraf</p></div>
CSS ve Seçici(Selector) Kavramı ve Seçici Tipleri
XHTML ve CSS kullanımında Selector kavramı önemli bir
yer tutar. Seçici (selector) demek ―stili belirlenebilen
etiket‖ demektir. 4 tipi vardır, isimlendirilmiĢ, sınıf,
karma ve Ģartlı.
ĠsimlendirilmiĢ Seçiciler
Bu tip seçicilerin kullanımında html içinde etiketten sonra
ID=‖xxx‖ kodlaması yapılır. Bu tip seçici kodlaması # ile
baĢlar.
#mavi { COLOR: blue }
#icerden { text-indent: 2cm }
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
128
isimlendirilmiĢ seçicilerdir. BaĢlarındaki ―#‖ iĢareti
onların diğerlerinden farkını göstermektedir. (Bu
iĢaretten sonraki isim bölümü mutlaka harfle
baĢlamalıdır; ama içinde rakam ve kesme çizgisi
kullanılabilir.) Bu seçicilerden HTML‘de yararlanmak için,
adlarıyla çağrılması gerekir. Böylece tanımlı olan isimleri
ile kodlanmıĢ olan biçimlerin uygulanmasını sağlarlar.
<P ID=icerden>Bu paragraf diğerlerine oranla 2 sm
içerden baĢlar<-p>
<P ID=mavi>Bu paragraf mavi olarak gösterilir</p>
Bu seçiciyi kullanırken, aynı etikete iki ayrı kimlik
verilemeyeceğine dikkat edilmelidir. Bunun bize ne
getirip götüreceği konu sonunda detaylıca
anlatılacaktır.
Sınıf Seçiciler
Bunların kodlaması ise . ile baĢlar ve istenildiği takdirde
bir sınıf tanımlanıp bu sınıfın biçimlendirme özelliklerinin
birleĢtirildiği standart html etiketine de
uygulanabilmesini sağlar.
Ġstenildiği kadar Sınıf Seçici oluĢturmak mümkündür.
Örneğin ―kırmızı‖ diye bir sınıf oluĢturup, bu sınıfın font
rengini kırmızı yapıp, dikkat çekmesi gereken kelimeyi,
cümleyi veya paragrafın etiketini bu sınıfa bağlamak
mümkündür. Bu stilin komutu Ģöyle yazılır:
.kirmizi { COLOR: red }
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
129
―Kirmizi‖ kelimesinin baĢındaki nokta iĢaretine dikkat
edilmelidir. Bu iĢaret su sınıfı isimlendirilmiĢ seçicilerden
ayırmaktadır. HTML sayfasında diyelim ki bir baĢlığı
kırmızı yapmak gerekmekte olsun:
<h1 class="kirmizi">Bu baĢlık kırmızı olacak</h1>
Ya da bir paragrafın tümünü kırmızı renkte olacak
denirse:
<P class=.kirmizi>Bu paragrafın tümü kırmızı
gösterilerek, dikkati hemen çekecektir.</p>
Yukardaki kullanım sınıf seçici türünün bağımsız
kullanımına bir örnektir. Diğer bir kullanımıda bir etikete
bağlı olarak kodlandığı aĢağıdaki kullanım Ģeklidir.
h1.kirmizi { COLOR: red }
Yukardaki Ģekilde tanımlanmıĢ bir sınıf seçici görüldüğü
üzere sınırlı kullanıma sahiptir. Bu durumda ―kırmızı‖
sınıfını sadece H1 etiketi ile kullanmak mümkündür.
Sınıf seçiciler HTML içinde bir etiket için birden fazla
olmak üzere kullanılabilirler.
Karma Seçiciler (Pseude Classes)
Bunlara karma denmesinin sebebi: kendi baĢlarına sınıf
gibi göründükleri halde ancak bir etiketin belirli
durumlarına uygulanabilmeleridir. HTML dilinde buna
uygun Ģimdilik iki etiket vardır. <A> ve <P> etiketleri.
A etikeninin üç durumu olabilir ve bunları karma
seçicilere bağlamak mümkündür.
Link (henüz ziyaret edilmemiĢ olan adres)
Visited (daha önce ziyaret edilmiĢ adres) ve
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
130
Active (üzeri tıklandığı anda). ġimdi bu durumlara
uygun üç CSS etiketi yazalım:
A:link { COLOR: Black }
A:active { COLOR: red }
A:visited { COLOR: Gray }
Bu durumda ziyaretçinin ekranında A etiketleri siyah
olarak gösterilecek, kullanıcı herhangi bir bağlantıyı
tıkladığında link metni kırmızı rengini alacak; daha sonra
ilgili sayfaya bir daha gelirse bu kelimeler gri olarak
gösterilecektir.
a:link {
font-family:arial;
font-size:11pt;
color:blue;
text-decoration:none;
}
Sayfamdaki linklerin Yazıtipi
arial, boyutu 11 punto, rengi
mavi olsun ve altı çizili olmasın.
a:hover{
font-family:arial;
font-size:11pt;
color:red;
text-decoration:none;
}
Üzerine gelindiğinde linklerin
Yazıtipi arial,boyutu 11 punto,
rengi kırmızı olsun ve Altı çizili
olmasın.
a:visited{
font-family: arial;
font-size:11pt;
color:grey;
Ziyaret edilen linklerin ise
Yazıtipi arial, boyutu 11 punto,
rengi gri olsun ayrıca altı çizili
olsun.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
131
textdecoration:
underline;
}
Karma etiketin kullanılabileceği bir diğer durum ise baĢlık
veya metin gibi bir etiketin ilk satırı veya ilk kelimesinin
özelliklerini kontrol eden seçicidir. Örneğin:
P:first-line
{ font-variant: small-caps; font-weight: bold }
P:first-letter
{ font-size: 300%; float: left }
Bu seçicilerle oluĢturulan etiketlere HTML‘in içinde Ģöyle
gönderme yapılır:
<P><P:first-line><P:first-letter>B</P:firstletter>
Bir ağaçta ne kadar çok yaprak varsa o
kadar az meyve olur </P:first-line> Arap
atasözü..... </P>
ġartlı Seçiciler (Contextual Selectors )
Bir HTML etiketinin her zaman değil de belirli bir koĢulda
belirli stiller almasını istediğimizde kullandığımız
Contextual Selectors (ġartlı Seçiciler) grubudur. B (Bold)
etiketi, uygulandığı baĢlık veya paragraf gibi bir etiketi
kalın yaparak belirginleĢtirir. Fakat diyelim ki bu etiketi
paragraf etiketi ile birlikte kullandığımızda iĢaretlenen
yerin siyah, baĢlık etiketiyle kullandığımızda gri
yapmasını istiyoruz. Bunun için CSS bölümünde bu
etiketi P ve H1 bloklarında tanımlarız:
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
132
P { COLOR: black; FONT-FAMILY: 12pt; TEXT-INDENT:
1cm}
P B { COLOR: black}
H1 { COLOR: #008080; FONT-FAMILY: 26 pt serif}
H1 B { COLOR: pink }
Yukardaki tanımlamalara göre HTML kodlanırken H1
etiketi içinde B etiketi kullanılırsa iĢaretlenen kelimeler
pembe, paragraf etiketi içinde B etiketi kullanılır ise
iĢaretlenen kelimeler siyah olacaktır.
Not:
CSS kullanımında isimlendirilmiĢ seçiciler daha çok
<DIV> yada <SPAN> gibi yapılar için, sınıf seçiciler ise
biçimlendirmeler için kullanılırlar. ĠsimlendirilmiĢ
seçicileri etiket baĢına biden fazla kullanmak mümkün
olmadığından bunlarla biçimlendirme yapmak sadece
ekstra iĢ demektir. Bunu basit bir örnekle izah etmeden
farkı anlamak zordur. Biçimlendirme için koyu, italik ve
altı çizili biçimlerine ihtiyacımız olsun. Ancak yazı hem
italik hemde altı çizili olursa diye düĢününerek çok daha
fazla sınıf tanımlamak gerekecektir. Önce bunu
isimlendirilmiĢ seçiciler için düĢünelim.
1. koyu
2. italik
3. altıçizili
4. koyu italik
5. koyu altı çizili
6. italik alt çizili
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
133
7. koyu italik altı çizili
7 seçici olmadan bu iĢi yapmak zor görünüyor çünkü her
etiket için sadece bir isimlendirilmiĢ seçici kullanımına
izin verilmekte. ġimdi ĢimĢekler çaktı sanırım.
Örneği sınıf seçicilerle yapmak için ilk üçü yeterlidir.
Çünkü sınıf seçicileri bir arada kullanmak mümkündür.
Bir Alana Tanımlı Stillerin DıĢında Stil Uygulamak
Herhangi bir <div> bölümünde veya paragrafta
diğerlerinden ayrı stile sahip olması istenen herĢey
<span>...</span> etiketleri içerisine yazılabilir. Bu
etiket Basit HTML dersinde kullanılması artık
desteklenmeyen <font> etiketi yerine kullanılabilir.
<div style="color:#000000;"><h4>Rastgele bir baĢlık
</h4>
<p><span style="color:#cccccc">Bir satır.Ancak rengi
div için tanımlanandan farklı </span> </p>
</div>
CSS Blokları ve Denetlenebilir Özellikler
CSS Biçimlendirme Tablosu
fontfamily
Tahoma, Arial Yazı tipini belirler.(Arial ,
Verdana gibi.)
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
134
font-style Normal
italic
oblique
Yazının normal veya sağa
eğik olmasını sağlar.
fontvariant
Normal
small-caps
Yazının, yazıldığı gibi veya
tümünün büyük harflerden
oluĢmuĢ gibi görünmesini
sağlar. Ġkinci durumda
metnin ilk harfi de boyut
olarak büyük gözükür.
fontweight
Normal
bold
bolder
lighter
100 – 900
Yazının kalınlık-inceliğini
belirler.
font-size Absolute-size (xxsmall
| x-small |
small | medium |
large | x-large
| xx-large)
relative-size
(larger | smaller)
px , pt, %
Yazının büyüklüğünü
METĠN
Word
Spacing
normal |
<boyut:px vb.>
Sözcük aralığı
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
135
Letter
Spacing
normal |
<boyut:px vb.>
Harf aralığı
Text
Decoratio
n
None | underline |
overline | linethrough
| blink
Metin süsleme
Vertical
Alignmen
t
baseline | sub |
super | top | texttop
| middle |
bottom | textbottom
|
Yüzde:200% vb.
Dikey hizalama
Text
Transfor
mation
none | capitalize |
uppercase |
lowercase
Metin dönüĢtürme
Text
Alignmen
t
Left | right |
center | justify
Metin hizalama
Text
Indentati
on
Boyut | Yüzde Metin girintisi
Line
Height
Normal | <sayı> |
<boyut> |
<yüzde>
Satır yüksekliği
RENK VE
ARKAPLA
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
136
N
Color Renk adı veya
RGB değeri (red
veya #FF0000
gibi)
Renk
Backgrou
nd Color
Renk adı | RGB
değeri (red veya
#FF0000 gibi) |
transparent
Arka plan rengi
Backgrou
nd Image
url(images/resima
di.gif)
Arka plana yerleĢtirilecek
resmin adresi
Backgrou
nd
Repeat
repeat | repeat-x |
repeat-y | norepeat
Arka plan resminin hangi
yönde tekrarlanacağını
belirler.
Backgrou
nd
Attachme
nt
scroll | fixed Sayfa kaydırma çubuğuyla
hareket ettirildiğinde
zeminin de hareket edip
etmeyeceğini belirler.
Backgrou
nd
Position
yüzde | boyut |
top | center |
bottom| left |
center | right
Zemindeki resmin sayfa
üzerinde istenilen yere
yerleĢtirilmesini sağlar.
KUTU
ÖZELLĠK
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
137
LERĠ
Magrin Sayısal değer. Nesnenin dıĢındaki nesnelere
olan aralığını belirler.
Padding Sayısal değer. Doldurma
Border
Width
Sayısal değer. Kenarlık geniĢliği (kalınlığı)
Border
Color
Renk adı | RGB
değeri
Kenarlık rengi
Border
Style
none | dotted |
dashed | solid |
double
| groove | ridge |
inset | outset
Kenarlık stili
Border border-width |
border-style |
border-color
Kenarlık kalınlık, style ve
rengi.
Width boyut | yüzde |
auto
GeniĢlik
Height boyut | auto Yükseklik
LĠSTE
ÖZELLĠK
LERĠ
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
138
List Style
Type
disc | circle |
square | decimal |
lower-roman |
upper-roman |
lower-alpha |
upper-alpha |
none
Listenin harflerden mi yoksa
sayılardan mı oluĢacağını
belirler.
List Style
Image
adres | none (liststyle-
image:
url(images/maddei
mi.gif) gibi.)
Liste simgesi olarak resim
kullanılmasını sağlar.
List Style
Position
inside | outside Listenin ilk satırının diğer
satırlar aynı hizada olup
olmayacağını belirler.
List Style list-style-type |
list-style-position|
adres (list-style:
lower-roman
inside gibi.)
disc (Liste biçiminin disk
(içi dolu daire) Ģeklinde
olmasını sağlar.)
circle (Liste biçiminin
çember Ģeklinde olmasını
sağlar.)
square (Liste biçiminin
kare olmasını sağlar.)
decimal (Liste biçiminin
rakamlardan oluĢmasını
sağlar.)
lower-roman (Liste
biçiminin i,ii,iii gibi küçük
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
139
roma rakamlarından
oluĢmasını sağlar.)
upper-roman (Liste
biçiminin I,II,II gibi
büyük roma
rakamlarından oluĢmasını
sağlar.)
lower-alpha (Liste
biçiminin a,b,c Ģeklinde
küçük harf olmasını
sağlar.)
upper-alpha (Liste
biçiminin A,B,C Ģeklinde
büyük harf olmasını
sağlar.)
none (Listenin simgesiz
olmasını sağlar.)
DHTML‘i bir teknikler demeti olarak ele alırsak, ilk
tekniğimiz, sayfamıza ne metin, ne grafik, ne tablo ve ne
de çerçeve sayılmayan, ama içinde bunların tümüne de
yer verebileceğiniz bölüm kavramına dayanan
<DIV>..</DIV> etiketidir.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
127
<DIV>..</DIV> etiketleri arasında yer alan her Ģey, yani
yazılar, resimler, grafikler, tablolar, video vs içerikler, bu
etikete vereceğiniz yerleĢtirme ve değiĢme özelliklerine
uygun hareket ederler.
<div> etiketi ile belgede bölümler oluĢturulabilir. <div>
etiketi için herhangi bir stil özelliği belirlendiğinde
<div>..</div> arasına yazılan tüm etiketler bu stilden
etkilenir. AĢağıda oluĢturulan bölümde <div> etiketine
style="color:#FFCC66;" stili uygulandığında <div>
içindeki paragraf ve baĢlık da ilgili renkte (turuncuya
yakın bir renk) görüntülenecektir.
<div style="color:#FF0000;">
<h4>Bölüm içinde bir baĢlık</h4>
<p>Bölüm içinde herhangi bir paragraf</p></div>
CSS ve Seçici(Selector) Kavramı ve Seçici Tipleri
XHTML ve CSS kullanımında Selector kavramı önemli bir
yer tutar. Seçici (selector) demek ―stili belirlenebilen
etiket‖ demektir. 4 tipi vardır, isimlendirilmiĢ, sınıf,
karma ve Ģartlı.
ĠsimlendirilmiĢ Seçiciler
Bu tip seçicilerin kullanımında html içinde etiketten sonra
ID=‖xxx‖ kodlaması yapılır. Bu tip seçici kodlaması # ile
baĢlar.
#mavi { COLOR: blue }
#icerden { text-indent: 2cm }
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
128
isimlendirilmiĢ seçicilerdir. BaĢlarındaki ―#‖ iĢareti
onların diğerlerinden farkını göstermektedir. (Bu
iĢaretten sonraki isim bölümü mutlaka harfle
baĢlamalıdır; ama içinde rakam ve kesme çizgisi
kullanılabilir.) Bu seçicilerden HTML‘de yararlanmak için,
adlarıyla çağrılması gerekir. Böylece tanımlı olan isimleri
ile kodlanmıĢ olan biçimlerin uygulanmasını sağlarlar.
<P ID=icerden>Bu paragraf diğerlerine oranla 2 sm
içerden baĢlar<-p>
<P ID=mavi>Bu paragraf mavi olarak gösterilir</p>
Bu seçiciyi kullanırken, aynı etikete iki ayrı kimlik
verilemeyeceğine dikkat edilmelidir. Bunun bize ne
getirip götüreceği konu sonunda detaylıca
anlatılacaktır.
Sınıf Seçiciler
Bunların kodlaması ise . ile baĢlar ve istenildiği takdirde
bir sınıf tanımlanıp bu sınıfın biçimlendirme özelliklerinin
birleĢtirildiği standart html etiketine de
uygulanabilmesini sağlar.
Ġstenildiği kadar Sınıf Seçici oluĢturmak mümkündür.
Örneğin ―kırmızı‖ diye bir sınıf oluĢturup, bu sınıfın font
rengini kırmızı yapıp, dikkat çekmesi gereken kelimeyi,
cümleyi veya paragrafın etiketini bu sınıfa bağlamak
mümkündür. Bu stilin komutu Ģöyle yazılır:
.kirmizi { COLOR: red }
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
129
―Kirmizi‖ kelimesinin baĢındaki nokta iĢaretine dikkat
edilmelidir. Bu iĢaret su sınıfı isimlendirilmiĢ seçicilerden
ayırmaktadır. HTML sayfasında diyelim ki bir baĢlığı
kırmızı yapmak gerekmekte olsun:
<h1 class="kirmizi">Bu baĢlık kırmızı olacak</h1>
Ya da bir paragrafın tümünü kırmızı renkte olacak
denirse:
<P class=.kirmizi>Bu paragrafın tümü kırmızı
gösterilerek, dikkati hemen çekecektir.</p>
Yukardaki kullanım sınıf seçici türünün bağımsız
kullanımına bir örnektir. Diğer bir kullanımıda bir etikete
bağlı olarak kodlandığı aĢağıdaki kullanım Ģeklidir.
h1.kirmizi { COLOR: red }
Yukardaki Ģekilde tanımlanmıĢ bir sınıf seçici görüldüğü
üzere sınırlı kullanıma sahiptir. Bu durumda ―kırmızı‖
sınıfını sadece H1 etiketi ile kullanmak mümkündür.
Sınıf seçiciler HTML içinde bir etiket için birden fazla
olmak üzere kullanılabilirler.
Karma Seçiciler (Pseude Classes)
Bunlara karma denmesinin sebebi: kendi baĢlarına sınıf
gibi göründükleri halde ancak bir etiketin belirli
durumlarına uygulanabilmeleridir. HTML dilinde buna
uygun Ģimdilik iki etiket vardır. <A> ve <P> etiketleri.
A etikeninin üç durumu olabilir ve bunları karma
seçicilere bağlamak mümkündür.
Link (henüz ziyaret edilmemiĢ olan adres)
Visited (daha önce ziyaret edilmiĢ adres) ve
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
130
Active (üzeri tıklandığı anda). ġimdi bu durumlara
uygun üç CSS etiketi yazalım:
A:link { COLOR: Black }
A:active { COLOR: red }
A:visited { COLOR: Gray }
Bu durumda ziyaretçinin ekranında A etiketleri siyah
olarak gösterilecek, kullanıcı herhangi bir bağlantıyı
tıkladığında link metni kırmızı rengini alacak; daha sonra
ilgili sayfaya bir daha gelirse bu kelimeler gri olarak
gösterilecektir.
a:link {
font-family:arial;
font-size:11pt;
color:blue;
text-decoration:none;
}
Sayfamdaki linklerin Yazıtipi
arial, boyutu 11 punto, rengi
mavi olsun ve altı çizili olmasın.
a:hover{
font-family:arial;
font-size:11pt;
color:red;
text-decoration:none;
}
Üzerine gelindiğinde linklerin
Yazıtipi arial,boyutu 11 punto,
rengi kırmızı olsun ve Altı çizili
olmasın.
a:visited{
font-family: arial;
font-size:11pt;
color:grey;
Ziyaret edilen linklerin ise
Yazıtipi arial, boyutu 11 punto,
rengi gri olsun ayrıca altı çizili
olsun.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
131
textdecoration:
underline;
}
Karma etiketin kullanılabileceği bir diğer durum ise baĢlık
veya metin gibi bir etiketin ilk satırı veya ilk kelimesinin
özelliklerini kontrol eden seçicidir. Örneğin:
P:first-line
{ font-variant: small-caps; font-weight: bold }
P:first-letter
{ font-size: 300%; float: left }
Bu seçicilerle oluĢturulan etiketlere HTML‘in içinde Ģöyle
gönderme yapılır:
<P><P:first-line><P:first-letter>B</P:firstletter>
Bir ağaçta ne kadar çok yaprak varsa o
kadar az meyve olur </P:first-line> Arap
atasözü..... </P>
ġartlı Seçiciler (Contextual Selectors )
Bir HTML etiketinin her zaman değil de belirli bir koĢulda
belirli stiller almasını istediğimizde kullandığımız
Contextual Selectors (ġartlı Seçiciler) grubudur. B (Bold)
etiketi, uygulandığı baĢlık veya paragraf gibi bir etiketi
kalın yaparak belirginleĢtirir. Fakat diyelim ki bu etiketi
paragraf etiketi ile birlikte kullandığımızda iĢaretlenen
yerin siyah, baĢlık etiketiyle kullandığımızda gri
yapmasını istiyoruz. Bunun için CSS bölümünde bu
etiketi P ve H1 bloklarında tanımlarız:
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
132
P { COLOR: black; FONT-FAMILY: 12pt; TEXT-INDENT:
1cm}
P B { COLOR: black}
H1 { COLOR: #008080; FONT-FAMILY: 26 pt serif}
H1 B { COLOR: pink }
Yukardaki tanımlamalara göre HTML kodlanırken H1
etiketi içinde B etiketi kullanılırsa iĢaretlenen kelimeler
pembe, paragraf etiketi içinde B etiketi kullanılır ise
iĢaretlenen kelimeler siyah olacaktır.
Not:
CSS kullanımında isimlendirilmiĢ seçiciler daha çok
<DIV> yada <SPAN> gibi yapılar için, sınıf seçiciler ise
biçimlendirmeler için kullanılırlar. ĠsimlendirilmiĢ
seçicileri etiket baĢına biden fazla kullanmak mümkün
olmadığından bunlarla biçimlendirme yapmak sadece
ekstra iĢ demektir. Bunu basit bir örnekle izah etmeden
farkı anlamak zordur. Biçimlendirme için koyu, italik ve
altı çizili biçimlerine ihtiyacımız olsun. Ancak yazı hem
italik hemde altı çizili olursa diye düĢününerek çok daha
fazla sınıf tanımlamak gerekecektir. Önce bunu
isimlendirilmiĢ seçiciler için düĢünelim.
1. koyu
2. italik
3. altıçizili
4. koyu italik
5. koyu altı çizili
6. italik alt çizili
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
133
7. koyu italik altı çizili
7 seçici olmadan bu iĢi yapmak zor görünüyor çünkü her
etiket için sadece bir isimlendirilmiĢ seçici kullanımına
izin verilmekte. ġimdi ĢimĢekler çaktı sanırım.
Örneği sınıf seçicilerle yapmak için ilk üçü yeterlidir.
Çünkü sınıf seçicileri bir arada kullanmak mümkündür.
Bir Alana Tanımlı Stillerin DıĢında Stil Uygulamak
Herhangi bir <div> bölümünde veya paragrafta
diğerlerinden ayrı stile sahip olması istenen herĢey
<span>...</span> etiketleri içerisine yazılabilir. Bu
etiket Basit HTML dersinde kullanılması artık
desteklenmeyen <font> etiketi yerine kullanılabilir.
<div style="color:#000000;"><h4>Rastgele bir baĢlık
</h4>
<p><span style="color:#cccccc">Bir satır.Ancak rengi
div için tanımlanandan farklı </span> </p>
</div>
CSS Blokları ve Denetlenebilir Özellikler
CSS Biçimlendirme Tablosu
fontfamily
Tahoma, Arial Yazı tipini belirler.(Arial ,
Verdana gibi.)
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
134
font-style Normal
italic
oblique
Yazının normal veya sağa
eğik olmasını sağlar.
fontvariant
Normal
small-caps
Yazının, yazıldığı gibi veya
tümünün büyük harflerden
oluĢmuĢ gibi görünmesini
sağlar. Ġkinci durumda
metnin ilk harfi de boyut
olarak büyük gözükür.
fontweight
Normal
bold
bolder
lighter
100 – 900
Yazının kalınlık-inceliğini
belirler.
font-size Absolute-size (xxsmall
| x-small |
small | medium |
large | x-large
| xx-large)
relative-size
(larger | smaller)
px , pt, %
Yazının büyüklüğünü
METĠN
Word
Spacing
normal |
<boyut:px vb.>
Sözcük aralığı
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
135
Letter
Spacing
normal |
<boyut:px vb.>
Harf aralığı
Text
Decoratio
n
None | underline |
overline | linethrough
| blink
Metin süsleme
Vertical
Alignmen
t
baseline | sub |
super | top | texttop
| middle |
bottom | textbottom
|
Yüzde:200% vb.
Dikey hizalama
Text
Transfor
mation
none | capitalize |
uppercase |
lowercase
Metin dönüĢtürme
Text
Alignmen
t
Left | right |
center | justify
Metin hizalama
Text
Indentati
on
Boyut | Yüzde Metin girintisi
Line
Height
Normal | <sayı> |
<boyut> |
<yüzde>
Satır yüksekliği
RENK VE
ARKAPLA
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
136
N
Color Renk adı veya
RGB değeri (red
veya #FF0000
gibi)
Renk
Backgrou
nd Color
Renk adı | RGB
değeri (red veya
#FF0000 gibi) |
transparent
Arka plan rengi
Backgrou
nd Image
url(images/resima
di.gif)
Arka plana yerleĢtirilecek
resmin adresi
Backgrou
nd
Repeat
repeat | repeat-x |
repeat-y | norepeat
Arka plan resminin hangi
yönde tekrarlanacağını
belirler.
Backgrou
nd
Attachme
nt
scroll | fixed Sayfa kaydırma çubuğuyla
hareket ettirildiğinde
zeminin de hareket edip
etmeyeceğini belirler.
Backgrou
nd
Position
yüzde | boyut |
top | center |
bottom| left |
center | right
Zemindeki resmin sayfa
üzerinde istenilen yere
yerleĢtirilmesini sağlar.
KUTU
ÖZELLĠK
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
137
LERĠ
Magrin Sayısal değer. Nesnenin dıĢındaki nesnelere
olan aralığını belirler.
Padding Sayısal değer. Doldurma
Border
Width
Sayısal değer. Kenarlık geniĢliği (kalınlığı)
Border
Color
Renk adı | RGB
değeri
Kenarlık rengi
Border
Style
none | dotted |
dashed | solid |
double
| groove | ridge |
inset | outset
Kenarlık stili
Border border-width |
border-style |
border-color
Kenarlık kalınlık, style ve
rengi.
Width boyut | yüzde |
auto
GeniĢlik
Height boyut | auto Yükseklik
LĠSTE
ÖZELLĠK
LERĠ
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
138
List Style
Type
disc | circle |
square | decimal |
lower-roman |
upper-roman |
lower-alpha |
upper-alpha |
none
Listenin harflerden mi yoksa
sayılardan mı oluĢacağını
belirler.
List Style
Image
adres | none (liststyle-
image:
url(images/maddei
mi.gif) gibi.)
Liste simgesi olarak resim
kullanılmasını sağlar.
List Style
Position
inside | outside Listenin ilk satırının diğer
satırlar aynı hizada olup
olmayacağını belirler.
List Style list-style-type |
list-style-position|
adres (list-style:
lower-roman
inside gibi.)
disc (Liste biçiminin disk
(içi dolu daire) Ģeklinde
olmasını sağlar.)
circle (Liste biçiminin
çember Ģeklinde olmasını
sağlar.)
square (Liste biçiminin
kare olmasını sağlar.)
decimal (Liste biçiminin
rakamlardan oluĢmasını
sağlar.)
lower-roman (Liste
biçiminin i,ii,iii gibi küçük
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
139
roma rakamlarından
oluĢmasını sağlar.)
upper-roman (Liste
biçiminin I,II,II gibi
büyük roma
rakamlarından oluĢmasını
sağlar.)
lower-alpha (Liste
biçiminin a,b,c Ģeklinde
küçük harf olmasını
sağlar.)
upper-alpha (Liste
biçiminin A,B,C Ģeklinde
büyük harf olmasını
sağlar.)
none (Listenin simgesiz
olmasını sağlar.)
CSS Ders 1
CSS ile Biçimlendirme Teknikleri, Dinamik
HTML
CSS Stillerine Neden Ġhtiyaç Duyulur
Etiketleri incelerken gördüğümüz üzere biçimlendirme ile
metin iç içe girmekteydi. Böylece hem metnin
etiketlerden ayrılması hemde GOOGLE gibi arama
motorlarının sayfamızı indexlemesi zorlaĢmaktadır.
Biçimlendirme etiketleri kullanarak diyelimki belgenizdeki
tablo baĢlıklarını hep aynı stilde yazmak istiyorsunuz. O
zaman çaresiz her tablo baĢlığını tek tek biçimlendirmek
zorundasınız. Oysa CSS teknolojisi Word içinde tanımlı
hazır biçimlendirmeler gibi biçimlendirme blokları
kullanmaya izin verir. Tablo baĢlığı örneğine geri
dönersek, bu baĢlığı bir stil olarak tanımlar –örneğin 14
punto, Tahoma, Kalın ve ortalanmıĢ, mavi zemin
renginde- bu stili kaydettiğimiz dosyayı HTML içinde
kullanarak sitemizin (sitenin geneli sadece sayfa değil)
genelinde sadece stilin adını vererek ilgili biçimlendirmeyi
uygulayabiliriz. Dahada güzeli, stiller tek bir dosyadan
geldiği için stil dosyasındaki bir değiĢiklik anında tüm
sitemizde uygulanacaktır. Tablo baĢlığı örneğindeki gibi
örneği forntu değiĢtirsek yada zemin rengini değiĢtirsek
tüm sitemizde ne kadar tablo varsa bu stil hepsi için
değiĢtirilmiĢ olacaktır.
CSS bu açıdan büyük kolaylıktır. Ancak unutmayalım ki
tarayıcılar içerik gibi CSS etiketlerini de kendilerine göre
yorumlamaktadırlar.
ġüphesiz tek fayda bu değildir. Biçimleri sayfa kodlarında
sürekli tekrarlamak aynı zamanda gereksiz kod
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
121
yığınlarına yol açacak sayafaların kod uzunlukları
gereksiz yere artmıĢ olacaktır. Bu yüzden sayfalarımız
azda olsa daha geç açılacaktır. Bu ―az da olsa‖
görecelidir. Örneğin tabloda çok fazla satır sütun varsa
ve bunlar biçimlendirme içeriyorsa sayfanın açılması
normalden çok daha uzun sürecektir. Bunun alternatifi
olarak CSS stilleri genel olarak tek bir dosyadan
çağrılırlar ve kullanım için hafızaya yığılır, adı geçtikçe
çağrılarak kullanılır.
CSS web sayfasını biçimlendirmede HTML den daha geniĢ
imkânlar sunar. Örneğin div etiketiyle bir katman
oluĢturabiliriz ama hizalama dıĢında baĢka bir özelliğini
değiĢtiremeyiz. Ancak CSS ile katmanın sayfa içindeki
konumu, arka plan rengi, kenarlık tipi, yazı rengi,
kanlınlığı vb. pek çok özelliğini belirleyebiliriz.
CSS sadece biçimlendime iĢlemi için değil sayfanın
iskeletini tanımlamaktada kullanılır. Bunun için için
ekranın ayrılan her bir parçası ayrı bir katman gibi ele
alınır ve bu sayede tablo kullanmadan üstelik framesetler
lede uğraĢmadan sayfanın çatısını oluĢturabiliriz.
Cascading Style Sheets -CSS ve Kullanım ġekilleri
Web sayfalarını biçimlendirme konusunu ilk ele
aldığımızda yerel biçimlendirme yoluna gitmiĢ ve neyi
biçimlendireceksek o etikete ait kodları hemen orada
yazmıĢtık. CSS etiketleri ise hafızaya yığırlır demiĢtik.
CSS sayfa içinde üç Ģekilde kullanılabilir.
1. Yerel (Inline)
2. Sayfa içi global (Embedded)
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
122
3. Site içi global (Linked)
Yerel Stil ġablonu
Yerel Stil ġablonlar, uygulanacak etiketi sadece bir kez
bulunduğu yerde etkiler.
Örnek:
<html>
<head>
<title>Css</title>
</head>
<body>
<h2>CSS Kullanımı</h2><br>
<h2 style=font-size:20pt; color:blue>CSS
Kullanımı</h2>
</body>
</html>
Görüldüğü gibi bu Ģekilde sadece o an kullanılan etikete
etki edilmiĢtir.
Dezavantajı : Bu kullanımı font taglarının kullanımı
arasında pek bir fark yoktur. Anlık çözümdür ve CSS in
genel mantığına aykırıdır.
Sayfa Ġçi Global Stil ġablonu
Global Stil Ģablonları bir önceki örnekte yaptığımız gibi
h2 etiketinin (yada diğer bir etiketin) tüm sayfada aynı
özellikte olması istendiğinde kullanılır. Bunu için Stil
Ģablon özellikleri sayfanın baĢlangıcında
(<head></head> etiketleri arasında) tanımlanır.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
123
Örnek:
<html>
<head>
<title>Css</title>
<style type="text/css">
<!-- h2 {font-size:20pt; color:blue} -->
</style>
</head>
<body>
<h2>Web Teknikleri</h2>
</body>
</html>
Yukarıdaki örnekte sayfa içerisinde kullanacağımız tüm
h2 etiketlerinin özellikleri sabitlenmiĢtir. Yani sayfa
içerisinde nerede kullanırsanız kullanın h2 etiketinin stil
özellikleri hep aynı kullanılacaktır. Stil Ģablon
tanımlamaları <head> </head> etiketleri arasında
<style type="text/css"> ile baĢlayıp </style> ile
bitmelidir.
Dezavantajı : Tanımlanan stiller her sayfada
tekrarlanmıĢ olur. Diyelim ki stillerinin toplamda 5 kb yer
tutuyor olsun 500 de sayfanız olsun. Stiller 2500 KB yer
tutuyor demektir. Ayrıca her sayfa için CSS stilleri de
tarayıcıya yeniden gönderilecek ve gereksiz trafik
oluĢacaktır. Hepsinden beteri ise bir stilde değiĢiklik
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
124
yaparsanız diğer sayfaları da değiĢtirmeniz gerekir. 3-5
sayfa için bu kolaydır belki ama binlerce sayfadan oluĢan
bir portal düĢünürseniz bu iĢin ne derece zahmetli
olacağı açıktır. Ayrıca bir sayfada farklı diğerinde farklı
biçimlere yer verilmiĢ olabilir. Buda sitenin tutarlılığını
düĢürür.
Site Ġçi Global Stil ġablonu
Global stil Ģablonunu, sitemiz içerisindeki tüm sayfalarda
kullanmak istediğimizde uygulanabilecek bir tekniktir. En
çok kullanılan biçimde budur. Uygularken, stillerimizi
yukarıda örneklerini verdiğimiz Ģekilde hazırlarız. Fakat
bu stil listesini html dosyamızın içerisinde değil de boĢ
bir sayfaya yazarız ve css uzantılı bir Ģekilde kaydederiz.
Ardından da html dosyamızın içerisine yine <head>
</head> etiketleri arasına <link rel="stylesheet"
type="text/css" href="dosya_ismi.css"> Ģeklinde
ekleriz.
Örnek
h1 {font-size:13pt; color:green}
h2 {font:20pt; color:blue}
h3 {font-size:15pt; color:red}
Yukarıda verilen örnekteki dosyayı stil.css olarak
kaydedip, html dosyamıza geçelim. Html dosyamızın
kodları:
Örnek:
<html>
<head>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
125
<title>Css</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<h1>Web Teknikleri</h2>
<h2>Web Teknikleri</h2>
<h3>Web Teknikleri</h2>
</body>
</html>
HTML dosyasının kodları arasında geçen <link
rel="stylesheet" type="text/css" href="stil.css"> kodu
stil.css dosyasındaki stil özelliklerini kullanmamızı sağlar.
Avantajları :
1. CSS dosyası hafızada durduğundan CSS her
seferinde web serverdan yeniden istenmez.
2. CSS dosyası bir tane olduğundan sayfalar küçülür.
Böylece bu iki madde siteyi daha hızlı hale getirir
ve gereksiz trafiği önler.
3. CSS dosyasında yapılacak bir değiĢiklik anında tüm
siteye yansıyacaktır.
4. Sitenin tamamı biçimlendirme açısından tutarlı hale
gelir.
Birden fazla stil Ģablonu verilirse Tarayıcı ne yapar?
ġimdi bir Cd rafı düĢünelim. Elimize geçen tüm CD
kutularını buna üst üste yığıyoruz ve kural olarak CD
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
126
aramamız gerektiğinden hep rafın üstünden altına doğru
aramaya baĢlayacağımızı varsayıyoruz. Peki aynı stil
Ģablonu iki yada daha fazla sayıda tanımlanırsa ne olacak
? Bu durumda olacak olan Ģudur. Rafın üstünden altına
doğru arama yapılır bulunan ilk eĢitlikte iĢe arama biter.
Kısaca öncelik hep en son tanımalanan stilin olur. Özetle
1. Bir HTML sayfaya iki LINK komutu ile ardarda iki
ayrı CSS dosyası bağlarsanız, ikisinde de aynı ada
stil Ģablonu içeriyorsa, ikincisindeki, yani Cd rafının
en üstündeki komutlar geçerli olur.
2. Bir HTML‘e biri LINK, diğeri EMBED iki ayrı stil
bilgisi verilirse ve ikisinde de aynı ada sahip stil
Ģablonu var ise, ikincisi, yani HTML‘in içinde
EMBED olanı geçerli olur; çünkü HTML önce dıĢ
dosyayı okuyacak, onun üstüne kendi içindeki
stilleri koyacaktır.
3. Son olarak, bir sayfada hem LINK, hem EMBED stil
bağlantısı olsa ve diyelim ki bir HTML etiketinin
önünde onu biçimlendiren bir yerel stil komutu
(INLINE stil) bulunsa, en son okunan yerel stil
komutu olacağı için, tarayıcı ilk iki stili bir kenara
bırakıp, INLINE stili uygulayacaktır.
HTML
CSS Stillerine Neden Ġhtiyaç Duyulur
Etiketleri incelerken gördüğümüz üzere biçimlendirme ile
metin iç içe girmekteydi. Böylece hem metnin
etiketlerden ayrılması hemde GOOGLE gibi arama
motorlarının sayfamızı indexlemesi zorlaĢmaktadır.
Biçimlendirme etiketleri kullanarak diyelimki belgenizdeki
tablo baĢlıklarını hep aynı stilde yazmak istiyorsunuz. O
zaman çaresiz her tablo baĢlığını tek tek biçimlendirmek
zorundasınız. Oysa CSS teknolojisi Word içinde tanımlı
hazır biçimlendirmeler gibi biçimlendirme blokları
kullanmaya izin verir. Tablo baĢlığı örneğine geri
dönersek, bu baĢlığı bir stil olarak tanımlar –örneğin 14
punto, Tahoma, Kalın ve ortalanmıĢ, mavi zemin
renginde- bu stili kaydettiğimiz dosyayı HTML içinde
kullanarak sitemizin (sitenin geneli sadece sayfa değil)
genelinde sadece stilin adını vererek ilgili biçimlendirmeyi
uygulayabiliriz. Dahada güzeli, stiller tek bir dosyadan
geldiği için stil dosyasındaki bir değiĢiklik anında tüm
sitemizde uygulanacaktır. Tablo baĢlığı örneğindeki gibi
örneği forntu değiĢtirsek yada zemin rengini değiĢtirsek
tüm sitemizde ne kadar tablo varsa bu stil hepsi için
değiĢtirilmiĢ olacaktır.
CSS bu açıdan büyük kolaylıktır. Ancak unutmayalım ki
tarayıcılar içerik gibi CSS etiketlerini de kendilerine göre
yorumlamaktadırlar.
ġüphesiz tek fayda bu değildir. Biçimleri sayfa kodlarında
sürekli tekrarlamak aynı zamanda gereksiz kod
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
121
yığınlarına yol açacak sayafaların kod uzunlukları
gereksiz yere artmıĢ olacaktır. Bu yüzden sayfalarımız
azda olsa daha geç açılacaktır. Bu ―az da olsa‖
görecelidir. Örneğin tabloda çok fazla satır sütun varsa
ve bunlar biçimlendirme içeriyorsa sayfanın açılması
normalden çok daha uzun sürecektir. Bunun alternatifi
olarak CSS stilleri genel olarak tek bir dosyadan
çağrılırlar ve kullanım için hafızaya yığılır, adı geçtikçe
çağrılarak kullanılır.
CSS web sayfasını biçimlendirmede HTML den daha geniĢ
imkânlar sunar. Örneğin div etiketiyle bir katman
oluĢturabiliriz ama hizalama dıĢında baĢka bir özelliğini
değiĢtiremeyiz. Ancak CSS ile katmanın sayfa içindeki
konumu, arka plan rengi, kenarlık tipi, yazı rengi,
kanlınlığı vb. pek çok özelliğini belirleyebiliriz.
CSS sadece biçimlendime iĢlemi için değil sayfanın
iskeletini tanımlamaktada kullanılır. Bunun için için
ekranın ayrılan her bir parçası ayrı bir katman gibi ele
alınır ve bu sayede tablo kullanmadan üstelik framesetler
lede uğraĢmadan sayfanın çatısını oluĢturabiliriz.
Cascading Style Sheets -CSS ve Kullanım ġekilleri
Web sayfalarını biçimlendirme konusunu ilk ele
aldığımızda yerel biçimlendirme yoluna gitmiĢ ve neyi
biçimlendireceksek o etikete ait kodları hemen orada
yazmıĢtık. CSS etiketleri ise hafızaya yığırlır demiĢtik.
CSS sayfa içinde üç Ģekilde kullanılabilir.
1. Yerel (Inline)
2. Sayfa içi global (Embedded)
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
122
3. Site içi global (Linked)
Yerel Stil ġablonu
Yerel Stil ġablonlar, uygulanacak etiketi sadece bir kez
bulunduğu yerde etkiler.
Örnek:
<html>
<head>
<title>Css</title>
</head>
<body>
<h2>CSS Kullanımı</h2><br>
<h2 style=font-size:20pt; color:blue>CSS
Kullanımı</h2>
</body>
</html>
Görüldüğü gibi bu Ģekilde sadece o an kullanılan etikete
etki edilmiĢtir.
Dezavantajı : Bu kullanımı font taglarının kullanımı
arasında pek bir fark yoktur. Anlık çözümdür ve CSS in
genel mantığına aykırıdır.
Sayfa Ġçi Global Stil ġablonu
Global Stil Ģablonları bir önceki örnekte yaptığımız gibi
h2 etiketinin (yada diğer bir etiketin) tüm sayfada aynı
özellikte olması istendiğinde kullanılır. Bunu için Stil
Ģablon özellikleri sayfanın baĢlangıcında
(<head></head> etiketleri arasında) tanımlanır.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
123
Örnek:
<html>
<head>
<title>Css</title>
<style type="text/css">
<!-- h2 {font-size:20pt; color:blue} -->
</style>
</head>
<body>
<h2>Web Teknikleri</h2>
</body>
</html>
Yukarıdaki örnekte sayfa içerisinde kullanacağımız tüm
h2 etiketlerinin özellikleri sabitlenmiĢtir. Yani sayfa
içerisinde nerede kullanırsanız kullanın h2 etiketinin stil
özellikleri hep aynı kullanılacaktır. Stil Ģablon
tanımlamaları <head> </head> etiketleri arasında
<style type="text/css"> ile baĢlayıp </style> ile
bitmelidir.
Dezavantajı : Tanımlanan stiller her sayfada
tekrarlanmıĢ olur. Diyelim ki stillerinin toplamda 5 kb yer
tutuyor olsun 500 de sayfanız olsun. Stiller 2500 KB yer
tutuyor demektir. Ayrıca her sayfa için CSS stilleri de
tarayıcıya yeniden gönderilecek ve gereksiz trafik
oluĢacaktır. Hepsinden beteri ise bir stilde değiĢiklik
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
124
yaparsanız diğer sayfaları da değiĢtirmeniz gerekir. 3-5
sayfa için bu kolaydır belki ama binlerce sayfadan oluĢan
bir portal düĢünürseniz bu iĢin ne derece zahmetli
olacağı açıktır. Ayrıca bir sayfada farklı diğerinde farklı
biçimlere yer verilmiĢ olabilir. Buda sitenin tutarlılığını
düĢürür.
Site Ġçi Global Stil ġablonu
Global stil Ģablonunu, sitemiz içerisindeki tüm sayfalarda
kullanmak istediğimizde uygulanabilecek bir tekniktir. En
çok kullanılan biçimde budur. Uygularken, stillerimizi
yukarıda örneklerini verdiğimiz Ģekilde hazırlarız. Fakat
bu stil listesini html dosyamızın içerisinde değil de boĢ
bir sayfaya yazarız ve css uzantılı bir Ģekilde kaydederiz.
Ardından da html dosyamızın içerisine yine <head>
</head> etiketleri arasına <link rel="stylesheet"
type="text/css" href="dosya_ismi.css"> Ģeklinde
ekleriz.
Örnek
h1 {font-size:13pt; color:green}
h2 {font:20pt; color:blue}
h3 {font-size:15pt; color:red}
Yukarıda verilen örnekteki dosyayı stil.css olarak
kaydedip, html dosyamıza geçelim. Html dosyamızın
kodları:
Örnek:
<html>
<head>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
125
<title>Css</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<h1>Web Teknikleri</h2>
<h2>Web Teknikleri</h2>
<h3>Web Teknikleri</h2>
</body>
</html>
HTML dosyasının kodları arasında geçen <link
rel="stylesheet" type="text/css" href="stil.css"> kodu
stil.css dosyasındaki stil özelliklerini kullanmamızı sağlar.
Avantajları :
1. CSS dosyası hafızada durduğundan CSS her
seferinde web serverdan yeniden istenmez.
2. CSS dosyası bir tane olduğundan sayfalar küçülür.
Böylece bu iki madde siteyi daha hızlı hale getirir
ve gereksiz trafiği önler.
3. CSS dosyasında yapılacak bir değiĢiklik anında tüm
siteye yansıyacaktır.
4. Sitenin tamamı biçimlendirme açısından tutarlı hale
gelir.
Birden fazla stil Ģablonu verilirse Tarayıcı ne yapar?
ġimdi bir Cd rafı düĢünelim. Elimize geçen tüm CD
kutularını buna üst üste yığıyoruz ve kural olarak CD
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
126
aramamız gerektiğinden hep rafın üstünden altına doğru
aramaya baĢlayacağımızı varsayıyoruz. Peki aynı stil
Ģablonu iki yada daha fazla sayıda tanımlanırsa ne olacak
? Bu durumda olacak olan Ģudur. Rafın üstünden altına
doğru arama yapılır bulunan ilk eĢitlikte iĢe arama biter.
Kısaca öncelik hep en son tanımalanan stilin olur. Özetle
1. Bir HTML sayfaya iki LINK komutu ile ardarda iki
ayrı CSS dosyası bağlarsanız, ikisinde de aynı ada
stil Ģablonu içeriyorsa, ikincisindeki, yani Cd rafının
en üstündeki komutlar geçerli olur.
2. Bir HTML‘e biri LINK, diğeri EMBED iki ayrı stil
bilgisi verilirse ve ikisinde de aynı ada sahip stil
Ģablonu var ise, ikincisi, yani HTML‘in içinde
EMBED olanı geçerli olur; çünkü HTML önce dıĢ
dosyayı okuyacak, onun üstüne kendi içindeki
stilleri koyacaktır.
3. Son olarak, bir sayfada hem LINK, hem EMBED stil
bağlantısı olsa ve diyelim ki bir HTML etiketinin
önünde onu biçimlendiren bir yerel stil komutu
(INLINE stil) bulunsa, en son okunan yerel stil
komutu olacağı için, tarayıcı ilk iki stili bir kenara
bırakıp, INLINE stili uygulayacaktır.
Kaydol:
Kayıtlar (Atom)