CSS Giris

CSS(Stil ablonlar)
Balang iin
Fatih HAYROLU
Yazar Hakknda
Fatih Hayriolu, 1978 Trabzon/Srmene domutur.
lk, orta ve lise eitimini stanbul Zeytinburnunda tamamladktan
sonra niversiteyi Frat niversitesinde okudu. Blm her ne kadar
evre Mhendislii olsa da hayatn web sayfas kodlamas yaparak
geirmektedir.
Web kodlama iine 1999 Austos aynda balad.
2002-2007 yllar arasnda Turklineda almtr.
alma hayatna 2007den itibaren Pixelplus Interactive irketinde
devam etmektedir.
Akbank, Akbank Yatrmc , AmericanExpress, Axess, Beko ,
BonusCard.ro, Buyukkirmiziev, Exi26, EmlakveBen, Fiat, Grundig,
Garanti deme Noktalar, Maya, MSGSU(Mimar Sinan Gzel Sanatlar
niversitesi), GNC, Ko.net, TEB-Focus, Tofa, Turkcell, THY,
VakfBank vd. web sitelerinde emei gemitir ve bir ksmnda hala
gemeye devam etmektedir.
nsz
lk defa notlarm bir yerde tutma ihtiyac ile balayan bir almann
son noktasdr bu kitap.
Web sayfas kodlarken baz problemlerle karlayordum ve bu
sorunlara zm bulup yoluma devam ediyordum. Belli bir sre
sonra ayn sorunlarla karlatm grdm ve karlatm sorunlar
ve zmlerini bir kenara not etmeye baladm. Bu notlar belli bir
hacim kaplamaya balaynca bunlar bir sitede yaynlama gerei
duydum. Ancak Terzi kendi skn dikemez atasznn
doruluunu kantlarcasna bu siteyi yaklak 1,5 sene gecikmeden
sonra Nisan 2006da atm ve notlarm bir dzene sokup
yaynlamaya baladm.
Notlarm yaynlamamdaki etkenlerden biri CSS hakknda yeterli
Trke kaynan olmamasyd. Daha sonra bu notlar bir kitap haline
getirmek istediysem de bu amacma ulaamadm ta ki imdiye
dein. imdi sitemdeki notlar derleyip bir kitap haline getirmek
nasip oldu. Kitabm yazarken sitemdeki yazlarma yazlan yorumlar
ve bana yazn ksmndan bana gnderdiiniz yorum ve nerileri
dikkate aldm.
Bu kitab normalde tek bir CSS kitab olarak yazmay dndm
ancak notlar kitap haline getirip birka ey daha ekleyince hacim
baya artt. Bu nedenle birden fazla kitap yazmann daha mantkl
olacan dndm. lk kitap yani bu okuduunuz kitap CSSe
balang kitabdr. Nasip olursa ikinci kitabda derleyip en ksa
zamanda yaynlamay dnyorum.
Siteden farkl olarak zelliklerin ve nemli tanmlamalarn Trke
karlklarn yazdm. Bu konuda
http://www.belgeler.org/recs/css2/index.html#index-toc sitesinden
ok yardm aldm, kendilerine teekkr bir bor bilirim.
Bu kitap kimin iin?

CSSe balang kitab CSSin teorik ksmn ierir. Tanmlamalar, zellikler
ve CSSe balangca ait bilgiler ierir.
Kitap iindeki konular anlamak ve rnekleri uygulamak iin genel web
bilgisi ve HTML veya XHTML hakknda bilgi sahibi olunmaldr. Bu konular
hakknda birok Trke ve ngilizce kaynaklar bulunmaktadr. Gerekli ve
yeterli bilgi internet zerinden edinilebilir.
Bu kitap gerek web programlamasna yeni balayanlar ve gerekse konu
hakknda bilgi sahibi olanlar iin bir aklama kitabdr. CSSi ve
zelliklerini aklayan bir kitap.
Kitabn yaps
Kitap genel olarak iki ana ksmdan olumaktadr.
1. Ksm CSSin Temellleri
CSSe giri: CSSin tanm genel bilgiler ve avantajlarn ieriyor.

CSSin yaps: CSSin yapsn oluturan elamanlar tek tek incelendi.
Seiciler, bildirim blou, gruplama, deerler ve yorumlar hakknda
bilgi verildi.
Seiciler: CSSdeki nemi dikkate alnarak seiciler iin ayr bir
blm yazld. Tm seici trleri tanmlar ve rnekleri ile anlatld.
Basamakl yap ve kaltsallk: CSSin C(Cascading) harfinin ifade
ettii basamakl yap ve anlam hakknda ayrntl bir bilgi verildi.
2. CSS zellikleri
Yaztipi(font) zellikleri: Metinleri oluturan yaztiplerinin CSS ile

ynetilmesini salayan zellikleri ierir.
Metin(text) zellikleri: Metinlere ait zellikler hakknda bilgi
verildi.
Artalan(background): Web sitelerindeki elemanlarn artalan
zelliklerini ierir.
Listeleme(list) zellikleri: Web sitelerindeki listelerin CSS ile
ynetilmesini salayan zellikleri ierir.
Kutu modeli zellikleri: CSS ile web sayfas kodlamann nemli
zelliklerini ieren kutu modeli ve zellikleri hakknda bilgi ierir.
Yzen kutu ve konumlandrma zellikleri: CSS ile web sayfas
kodlamann dier nemli zellikleri olan float, clear ve position
zelikleri hakknda bilgi ierir.
Tablo zellikleri: CSS ile web sayfalarndaki tablolar ynetmek iin
kullanlan zellikleri ierir.
Kullanc arayz zellikleri: CSS ile web tarayclarnn belli
zellikleri kontrol etmemize yarayan arayz zelliklerini ierir.
Ayrca Tm CSS zelliklerinin referans, kaynaka ve szlk blm ek

olarak sunuldu.
Kitabn dzeni?
Kitapta anlalabilirlii arttrmak ve grnm gzelletirmek iin baz iaretler ve
ablonlar kullanlmtr. Kitapta yer alan tm ablonlar aada sralanmtr.
Sras ile bu ablon ve iaretleri incelersek:
1. Kodlar iin mavi zeminli kaln yazlm ierikler kullanld
p{
font-style: italic;
}
h4{
font-style: oblique;
}
2. zelliklerin web tarayclar destekleme izelgeleri mavi ve koyu mavi alanlar

ile gsterildi. nternet tarayclarnn listesi karld; Internet Explorer(IE),
Firefox(ff), Safari(S), Opera(O)
Internet Explorer 3+ iaretinin anlam belirtilen zelliin Microsoft Internet
Explorer taraycsnn 3. Srmnden itibaren desteklendiidir. Firefox, Safari
ve Opera iinde ayn tanmla geerlidir.
CSS1+ tanmnn anlam ise W3Cnin belirlenen zellii hangi CSS srmnde
eklediini belirtir.
Tarayc Uyumu:
Internet Explorer 3+
Firefox 4+
Safari1.3+
Opera 3.6+
CSS 1+
3. zellik tanmlar turkuaz zemin renkli alanlar ile belirtildi
Yaps: color: <deger>

Ald Deerler :<renk> | inherit
Balang deeri: web taraycs belirler
Uygulanabilen elemanlar: tm elementler
Kaltsallk: Var
- Yaps ksmnda uygulanacak zelliin yapsal zellikleri gsterilmitir.
- Ald deerler alan, zelliin alabilecei deerleri gsterir. Deerler arasnda
ayra(|) kullanlr.
- Balang deeri alan, zellie hibir tanm yaplmadan kendi ald deerdir.
- Uygulanabilen elemanlar alan, zelliin uygulanabilecei HTML elemanlarn
gsterir. Bu HTML elemanlar belli gruplara ayrlr (blok seviyeli, satrii,

yerletirilen elemanlar gibi) bu gruplarda burada belirtilebilir.
-Kaltsallk alan, zelliin kaltsal zelliine sahip olup olamayacan gsterir.
4. nemli not alanlar iin farkl bir ekil kullanld.
XML de Seiciler HTML

elementleri dnda yeni
oluturulan elementlerde
olabilir.
Kaynak kodlar
Kitap iinde verilen rnekler zelliin veya tanmn kavranmas iin verilen genel
zelliklerdir.
Kaynak kodlar web sitemden indirebilirsiniz. Konularn daha iyi anlalabilmesi
iin kodlarn incelenmesi nemli.
Hatalar
Kitab hazrlarken her ne kadar hata yapmamaya alsam da muhakkak bir
yerde bir sorun kacaktr.
Konu anlatmmdaki hatalarm, yazm hatalarm ve dier hatalarm bana site
zerinden iletirseniz sevinirim.
Hatasz bir kitap olmas temennisi ile.
Teekkr
Bu kitab yazarken devaml beni olum yeter diye bilgisayar bandan kaldrmaya
alan biricik anneciime.
indekiler
indekiler
indekiler................................................................................................ 1
1. CSSE GR ......................................................................................... 7
1.1. CSSin tanm ve genel bilgi ............................................................... 7
1.2. CSSin Avantajlar ............................................................................ 7
1.2.1. Grnm Avantajlar ................................................................... 8
1.2.2. Kullanm Kolayl ....................................................................... 8
1.2.3. Tasarm Tutarll....................................................................... 9
1.2.4. Daha az Dosya Boyutlar ............................................................. 9
1.2.5. Gelecek Vaat ediyor .................................................................... 9
1.3. CSS Editrleri .................................................................................. 9
1.3.1. Metin Editrleri .......................................................................... 9
1.3.1. CSS Editrleri .......................................................................... 10
1.3.3. HTML ve Web Programlama Editrleri .......................................... 10
1.4. CSSi Web Dokmanlarna Eklemek .................................................. 11
1.4.1. Kod iinde (In-line) ................................................................... 11
1.4.2. <style> Eleman Kullanlarak ..................................................... 11
1.4.3. Harici CSS Dosyas Kullanm ...................................................... 11
1.4.4. @import le Eklemek ................................................................ 12
1.5. Standart mod, garip mod ve Doctype Kullanm .................................. 13
1.5.1. Web Sayfalarn Dorulama "Onaylama" ...................................... 13
1.5.2. Web tarayc modlar ................................................................ 14
1.5.3. DOCTYPE Geileri .................................................................... 14
2. CSSin Yaps ...................................................................................... 16
2.1. Seiciler ve Bildirim Blou ............................................................... 16
2.2. Gruplama ..................................................................................... 18
2.3. Deerler ....................................................................................... 20
2.3.1. Anahtar szckler..................................................................... 20
2.3.2. Uzunluk Deerleri ..................................................................... 21
2.3.3. Renk Deerleri ......................................................................... 22
2.3.4. URL Deerleri .......................................................................... 22
2.3.5. Dizgeler(Strings) ...................................................................... 23
indekiler
2.4. CSS Yorumlar ............................................................................... 23

3. Seiciler ............................................................................................. 25
3.1. Snf Seicisi(Class Selector) ............................................................ 25
3.2. Tekil Seiciler(Id Selector) .............................................................. 29
3.3. Snf(oul) m? Tekil mi? ............................................................... 30
3.4. (X)HTML Dokman Hiyerarisini Anlamak .......................................... 32
3.5. Torun Seicileri (Descendant Selectors) ............................................ 34
3.6. ocuk Seicileri(Direct Child Selectors) ............................................. 35
3.7. Bitiik Karde Seiciler(Next Sibling Selector) .................................... 37
3.8. Evrensel Seiciler(Universal Selector) ............................................... 39
3.9. zellik Seicileri(Attribute Selectors) ................................................ 41
3.9.1. Basit zellik Seicisi ................................................................. 42
3.9.2. zellik Deeri Seicisi ............................................................... 43
3.9.3. Ksmi zellik Deeri Seicisi ....................................................... 45
3.9.4. Dikkate Deer zellik Seicisi..................................................... 47
3.10. Szde(Pseudo)-snflar ve Szde(Pseudo)-elemanlar ........................ 49
3.10.1. Szde Snf Seicileri ............................................................... 50
Szde Link Snf ................................................................................ 50
Szde Dinamik Snf Seicileri .............................................................. 52
lk ocuk Elemann semek ................................................................ 54
:lang szde snf ............................................................................... 56
Szde snflar birletirmek .................................................................. 57
3.10.2. Szde eleman seicileri............................................................ 59
first-letter (ilk harf) ........................................................................... 59
first-line (ilk satr) ............................................................................. 61
before ve after elemanlar ................................................................... 62
4. Basamakl Yap ve Kaltsallk ................................................................. 65
4.1. CSSde Tanmlamalar ve Etkinlikleri(Specificity) ................................. 65
4.2. !important .................................................................................... 70
4.3. Kaltsallk(Inheritance).................................................................... 71
4.3.1. inherit (kaltsallk)deeri............................................................ 73
5. Yaztipi(Font) zellikleri ....................................................................... 75
5.1. Renk (color) zellii ....................................................................... 75
5.2. Yaztipi ailesi (font-family) .............................................................. 76
indekiler
5.3. Yaztipi boyutu (font-size) ............................................................... 78

5.4. Yaztipi kalnl (font-weight) .......................................................... 80
5.5. Yaztipi biemi (font-style) .............................................................. 82
5.6. Yaztipi farkllklar (font-variant) ...................................................... 84
5.7. Yaztipi (font) ................................................................................ 85
6. Metin(Text) zellikleri .......................................................................... 88
6.1. Metin Girintileme (text-indent)......................................................... 88
6.2. Metin hizalama (text-align) ............................................................. 90
6.3. Dikey hizalama (vertical-align) ........................................................ 91
6.4. Satrlar aras ykseklik (line-height) ................................................. 93
6.5. Szckler aras mesafe (word-spacing) ............................................. 95
6.6. Harfler aras mesafe (letter-spacing) ................................................ 97
6.7. Harf Bykl (text-transform) ...................................................... 99
6.8. Satrn altn, stn, ortasn izme ve yanp snme (text-decoration) . 101
6.9. Metin glgelendirme (text-shadow) ................................................. 103
6.10. Boluklarn korunmas (white-space).............................................. 104
6.11. Metin yazma yn(direction) ........................................................ 105
6.12. ok ynllk algoritmas (unicode-bidi) zellii ............................... 107
7. Artalan (Background) zellikleri ........................................................... 109
7.1. Artalan rengi (background-color) .................................................... 109
7.2. Artalan resmi (background-image ) ................................................. 111
7.4. Artalan resim ball (background-attachment) ............................... 114
7.5. Artalan resmi konumu (background-position) .................................... 116
7.6. Artalan (background) .................................................................... 118
8. Listeleme zellikleri ............................................................................ 121
8.1. Liste imleyici tipi (list-style-type ) ................................................... 121
8.2. Liste imleyici resmi (list-style-image) ............................................... 124
8.3. Liste imleyici konumu (list-style-position) ......................................... 125
8.4. Liste biemi (list-style) .................................................................. 127
9. Kutu Modeli zellikleri ......................................................................... 129
9.1. Genel Tanmlar ............................................................................. 130
9.2. Kenarlk izgisi(Border) zellikleri ................................................... 131
9.2.1. Kenar izgisi biemi (border-style) ............................................. 131
indekiler
9.2.2. border-top-style, border-right-style, border-bottom-style, border-leftstyle ............................................................................................... 133

9.2.3. Kenar izgisi genilii (border-width).......................................... 134
9.2.4. border-top-width, border-right-width, border-bottom-width, borderleft-width ........................................................................................ 136
9.2.5. Kenar izgisi Rengi (border-color) ............................................. 138
9.2.6. border-top-color, border-right-color, border-bottom-color, border-leftcolor ............................................................................................... 139
9.2.7. Kenar izgisi (border) .............................................................. 141
9.3. Kenar D Boluu(Margin) zellikleri .............................................. 144
9.3.1. st Kenar d boluu (margin-top) ........................................... 144
9.3.2. Sa kenar d boluu (margin-right ) ........................................ 146
9.3.3. Alt kenar d boluu (margin-bottom) ....................................... 147
9.3.4. Sol kenar d boluu (margin-left) ............................................ 149
9.3.5. Kenar d boluu (margin)....................................................... 151
9.4. Kenar i boluu (Padding) zellikleri ............................................... 155
9.4.1. st kenar ii boluu(padding-top) ............................................ 155
9.4.2. Sa kenar ii boluu(padding-right ) ......................................... 157
9.4.3. Alt kenar ii boluu (padding-bottom) ....................................... 158
9.4.4. Sol kenar ii boluu (padding-left) ............................................ 160
9.4.5. Kenar ii boluu (padding) ...................................................... 162
9.5. Boyut Tanmlama zellikleri ........................................................... 165
9.5.1. Genilik (width)....................................................................... 165
9.5.2. Ykseklik (height ) .................................................................. 166
9.5.3. Asgari genilik ve ykseklikler (min-width, min-height)................. 168
9.5.4. Azami genilik ve ykseklik (max-width, max-height) ................... 170
9.6. Grsel Sonu zellikleri ................................................................. 174
9.6.1. Tama (Overflow).................................................................... 174
9.6.2. Krpma (clip) .......................................................................... 182
9.6.3. Grnrlk (visibility) .............................................................. 185
10. Yzen kutu ve Konumlandrma zellikleri ............................................. 190
10.1. Yzen kutu zellikleri ................................................................... 190
10.1.1. float zellii ......................................................................... 190
10.1.2. clear zelii .......................................................................... 193
10.2. Konumlandrma zellikleri ............................................................ 195
10.2.1. Konumlandrma zellii (position) ............................................ 196

10.2.2. st, sa, alt ve sol (top, right, bottom, left) .............................. 196
Greceli Konumlandrma(position:relative) ........................................... 197
Mutlak(Absolute) Konumlandrma ....................................................... 197
Sabit Konumlandrma (position:fixed).................................................. 199
10.3. z-index zellii ........................................................................... 203
10.4. display zellii ............................................................................ 209
11. Tablo zellikleri ................................................................................ 211
11.1. Balk Konumu zellii (table-layout) ............................................. 211
11.2. Tablo plan zellii (caption-side) .................................................. 214
11.3. Hcre Boluklarn ayarlama (border-collapse) ................................. 215
11.4. Hcre d boluklarn ayarlama (border-spacing) ............................ 217
11.5. Bo hcre ayarlar (empty-cells) .................................................... 219
12. Kullanc Arayz zellikleri ............................................................... 222
12.1. Fare imleci zellikleri tanmlama (cursor) ........................................ 222
12.2. D hat izgisi zellikleri(outline) ................................................... 223
12.2.1 D hat izgisi biemi (outline-style) .......................................... 224
12.2.2. D hat izgisi genilii (outline-width) ...................................... 225
12.2.3. D hat izgisi rengi (outline-color) ........................................... 225
12.2.4. D hat izgisi (outline) ........................................................... 226
12.3. Sistem yaztipi ve rengi zellikleri .................................................. 227
Ek A Tm CSS zellikleri ...................................................................... 228
Ek B Kaynaka .................................................................................... 241
Ek C Szlk ........................................................................................ 243
ndex Tablosu ....................................................................................... 248
1. CSSE GR
1. CSSE GR
1. CSSE GR
1.1. CSSin tanm ve genel bilgi
CSS (Cascading Style Sheets Stil ablonlar), Web dokmanlarna stil
eklemek iin kullanlan basit ve gl bir dildir.
Web sayfalarnn yaplarn dndmzde 3 ksma ayra biliriz. erik
ksm, biimlendirme ksm ve dinamik ksm.
erik ksm, HTML kodlarn ieren sayfa asl ieriini oluturan birimleri
oluturma ksmdr. Bu ksm genelde metinlerden olusa da, resim,
animasyon ve video gibi elemanlarda ierir.
Biimlendirme ksm, ierik ksmn kullancya nasl grntleneceini
gsteren ksmdr. Sayfann biimini belirler. Kullancya daha okunakl ve
kullanl sayfa sunmak iin gerekli elemanlar ierir.
Dinamik ksm, Javascript ile yaplan dinamik ilemleri ierir. Etkileimli
sayfalar oluturmak iin kullanlr.
Eskiden ki hala bu ekilde kodlama yapanlar mevcut. erik ksm ve
biimlendirme ksm ii ie kodlama yapardk, rnein yaztipi tanm iin
<font> etiketini kullanrdk. Eski kodlama yntemi ile zaman, hz ve
eriebilirlik asndan byk kayplarmz vard.
CSS biimlendirme ksmnn ynetimini salamak iin kullanlr. erik
ksm ile biimlendirme ksmnn ayrlmasn salayan CSS bize birok
avantajlar salar. rnei 10.000 sayfas olan bir siteyi tek css dokman
yardm ile biimlendirmemizi salar.
CSS 1996da W3C tarafndan duyuruldu. Son olarak(Ocak 2003den beri)
CSS2.1 srm yrrlktedir. CSS3.0da almalar devam etmektedir.
CSS3.0 iin ayrntl bilgiye http://www.w3c.org/Style/CSS/current-work
adresinden ulaabilirsiniz.
Tablosuz Web Sayfas kodlama tekniini kullanmayanlar CSSin
ehemmiyetini tam olarak anlayamayacaktr.
1.2. CSSin Avantajlar

CSS kullanmnn nemli avantajlarndan bazlar:
1. CSSE GR
1.2.1. Grnm Avantajlar

CSS HTMLe gre birok stil zelliine sahiptir. CSSin sayfa ierii
elerinin sayfa grnm elerinden ayrlmas iin gelitirildiini
dnrsek avantaj batan anlalm olur.
<h1>CSS'e Giri</h1>
HTMLde bu elemann(h1) kaln, alt izili, Artalan rengi krmz olarak
atama gibi eitli zellikler verebiliriz. Ancak bu zellikleri atamak iinde
ayr HTML elemanlar kullanmak zorundayz (<strong>, <u>), ancak
CSSde bunu tek bir elemanla yapabiliriz ve ayrca daha fazla stil zellikleri
de atayabiliriz.(rn: kenarlk, rollover vs stillerini ekleyebiliriz.)
h1 {
color: white;
font: italic 11px Arial, serif;
text-decoration: underline;
background: yellow url(titlebg.gif) repeat-x;
border: 1px solid red;
margin-bottom: 0;
padding: 5px;}
1.2.2. Kullanm Kolayl

HTMLde her etikete art zellikler eklemek iin baka bir etiket ve/veya
zellik eklememiz gerekmektedir. Bu ilemi geni apl bir sitede
yaptmz dnrseniz ok byk zaman kayb ve ura gerektiini
greceksiniz.
<h1><font color="blue">Balk</font></h1>
Bunun gibi onlarca veya yzlerce balnz olduunu dnn, gerekten
ok zor. CSSde ayn ilem iin
h1 {color: blue}
Kodunu yazmamz yeterli. Bu elemann zelliklerinde deiiklik yapmak
istediimizde sadece burada deitirerek tm sitede bu elemann
zelliklerini deitirmi olacaz. Ayrca bu ilemi sadece bu etiket iin
deil dier etiketlere de uygulayabiliriz.
h1, h2 {color: blue}
Ayrca tek bir CSS dosyas ile sitenin tamamn ynetmek web
kodlamaclar iin ok byk kolaylktr. Sadece bir dosyada deilik
yaparak tm sitemizi ara yzn ynetebiliriz isterse yzlerce sayfa olsun.
1. CSSE GR
1.2.3. Tasarm Tutarll

Tek CSS dosyas ile tm sitenizi ynetebilirsiniz, bu zellik sayesinde
siteniz tutarllk kazanacaktr. Web sayfanzdaki ilk sayfadan son sayfaya
kadar tutarllnz koruyarak ziyaretinize dzenli bir ierik sunmu olacak
ve sitenizin kendine has zelliklerini ziyaretiye benimsetmi olacaksnz.
Sayfalarmz hzl yklenecektir, nk ayn elemanlar dier sayfalarda
tekrar yklemeyecek ve bu ziyaretiye zaman kazandracaktr.
1.2.4. Daha az Dosya Boyutlar

CSS yardm ile kodlanm HTMLin normal HTML kodlamasna gre
%50ye varan performans ve hz artlar olduu belirlenmitir. CSS
HTMLde kullanlan grnm zelliklerini(iskeleti oluturan tablolar, bo
resimler, ssleyici resimler, yaz tipleri, renkler, genilikler, ykseklikler ve
Artalan resimleri) azaltaca iin dokmanlarnzn boyutunu ciddi oranda
azaltacaktr.
1.2.5. Gelecek Vaat ediyor

HTML giderek ilevselliini kaybedecei ve XML ve dolays ile XHTMLin
ilevselliini artraca dnlrse, CSS gibi tmleik bir standardn
nemi daha ok anlalyor.
XHTML ile daha temiz kodlar retilecek, farkl platformlara(pda, cep
telefonu vs.) uyum sayesinde bilgi dolam kolaylaacak, sayfalarmz
arama motorlar programlar tarafndan daha anlalr olacaktr. CSS,
XHTML teknolojisi ile tmleik olarak alarak bizlere gelecek vaat ediyor.
1.3. CSS Editrleri

HTML yazarken ihtiyacmz olduu gibi CSS yazarken de bir yazm aracna,
editre ihtiyacmz olacaktr. Burada sizlere basit editrlerden profesyonel
editrlere bir liste sunacaz. Tm editrleri burada sunamayacamza
gre belli ballarna yazmay uygun grdk.
1.3.1. Metin Editrleri

Eer ben bu i iin ayrca bir program kurmak istemiyorum. Zaten o kadar
da kullanmyorum. Ayrca byle hzl oluyor diyorsanz. te size CSS
yazabileceiniz editrler.
Windows iin NotePad veya WordPad

MacOs iin TextEdit
Linux iin vi, vim veya emacs
1. CSSE GR
Ancak unu da belirtmeliyim ki bu editrlerden fazla bir zellik ve

ilevsellik beklemeyin.
1.3.1. CSS Editrleri

Bu editrler sadece css yazmak iin retilen programlardr. Balang
seviyesi iin kullanldr. Kod yazmanz iin size kolaylk salayan
zellikleri mevcuttur. rnein kodlarnz renklendirme, kodlara hzl eriim
vb.
Windows iin TopStyle http://www.bradsoft.com/topstyle/

Windows ve Mac OS X iin Style Master
http://www.westciv.com/style_master/
Mac OS X CSSEdit http://www.macrabbit.com/cssedit/
1.3.3. HTML ve Web Programlama Editrleri

in asl birok kullanc CSS yazmak iin bu editrleri tercih etmektedir.
Web kodlamaclar iin gereken tm aralar iermeleri, CSS kodlama da
yardmc zellikleri, kod dzeltme gibi birok zellii barndrmalarndan
dolay ou web kodlamacs bu editrleri tercih etmektedir.
Windows iin Microsoft FrontPage

http://www.microsoft.com/frontpage/
Windows ve Mac OS X Macromedia Dreamweaver
http://www.macromedia.com/software/dreamweaver/
Windows iin CoffeeCup HTML Editor
http://www.coffeecup.com/editor/
Mac OS X iin BBEdit http://www.barebones.com/products/bbedit/
Son olarak Microsftun yeni gzdesi Microsoft Expression
http://www.microsoft.com/products/expression/
Ben Macromedia Dreamweaver kullanyorum: D

Ayrca Crimson Editor, Notepad 2, Aptana, Notepad++, e-texteditor dier
neriler.
FireBug: Editrlerden daha nemli bir arac sizlere iddetle neriyorum.
Firefox, Safari ve Internet Explorera eklenebilen ok mkemmel bir ara
FireBug(http://www.getfirebug.com/). Ara size sitelerinize tarayc
zerinden tam hkimiyet salyor. Anlk olarak deiiklik yapp
deiikliinizi sonucu grebiliyorsunuz. Gelimi Javascript hata ayklama
zellii, site bileenlerinin performansa etkisi ve birok zellii ile web
kodlamacs olacak her kesin mutlaka kullanmas gereken bir ara.
10
1. CSSE GR
1.4. CSSi Web Dokmanlarna Eklemek

CSSi (X)HTML sayfalarmza eklemenin 4 yntemi vardr.
1.4.1. Kod iinde (In-line)

Direk olarak (X)HTML elemann iine style zellii kullanlarak uygulamak.
<div style="color:red">Deneme yazmz</div>
Tm CSS komutlarn kodlarn iine direk uygulamak nerilen bir kodlama
ekli deildir. Ancak zel durumlarda kullanlabilir.
1.4.2. <style> Eleman Kullanlarak

<head> ksmnda <style> eleman iinde CSS kodumuzu yazarak
uygulamak.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>CSSi Uygulamak </title>
<style type="text/css">
div{
color:red;
}
</style>
</head>
Birinci ynteme gre avantaj (X)HTML kod ile CSS bir birinden
ayrtrlm olmasdr.
1.4.3. Harici CSS Dosyas Kullanm

Bu metot da CSS kodlarmz .css uzantl bir dosyaya kaydederiz.
ornek.css
p{
color: red;
}
a{
color: blue;
}
11
1. CSSE GR
Daha sonra bu kodu gereken sayfalarmza uygularz.

<head>
/>
<title>CSSi Uygulamak</title>
<link rel="stylesheet" type="text/css" href="ornek.css" />
</head>
Bu yntemin dierlerine gre en byk avantaj bir kere yazlan kod lazm
olan tm sayfalara eklenebilmesidir. Bu sayede harici eklenen css kodu bir
kere yklendikten sonra dier kullandmz sayfalarda tekrar
yklenemeyerek bize hz kazandracaktr.
1.4.4. @import le Eklemek

3nc yntem ile kullanm benzerdir.
<head>
/>
@import "ornek.css";
</style>
</head>
Bu yntemle eklenen harici css dosyas eski web tarayclar tarafndan
grntlenemeyecektir.(rn: NN4)
@import ile eklenen kod link ile eklenen kodlamadan nce yorumlanr web
tarayclar tarafndan. Ayrca CSS dosyalarmzda @import zelliini
kullanarak devaml kullandmz kodlar css dosyamza harici olarak
ekleyebiliriz bylelikle tekrarlardan kurtulmu oluruz.
Sonu olarak burada drt adet CSS uygulama metodu grdk ancak bu
metotlardan drdncs avantajlar bakmndan nerilen bir yntemdir.
Ayrca ierii byk olan sitelerde css kodunun paralara ayrlmas ve
kullanlan sayfa CSSinde hangi paralar gerekli ise onlarn import edilmesi
nerilir. Bu sayfada kodun bir ksmnda yaptmz deiiklik iin tm css
kodu incelenip deitirtmesi gerekmez ve kod ynetimi kolaylar.
12
1. CSSE GR

<head>
/>
@import "urunler.css";
</style>
</head>
rnler blm iin bir css dosyas ekleyelim sonra paralara ayrdmz
css kodlarnn rnlere lazm olanlarn urunler.css iine ekleyelim.
urunler.css
@import
@import
@import
@import
url(/css/iskelet.css)
url(/css/fontlar.css);
url(/css/renkler.css);
url(/css/urunlereozel.css);
1.5. Standart mod, garip mod ve Doctype

Kullanm
DOCTYPE, HTML veya (X)HTML dokmanmzn tipini gstermek iin
kullandmz bir koddur.
DOCTYPE bildirimi (X)HTML kodunun bana bir veya iki satr olarak
eklenir. Genel kullanm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Burada dokmanmzn XHTML 1.0 srm dikkate alnarak yazld ve
kullanlan bu kurallarn linki verilmitir. Linkin kullanlmad eklide vardr.
Bu tanmlamadan sonra web tarayclar bu kurallara gre sayfay
yorumlayacak ve buna gre bir grnm kullancya sunacaktr. Web
tarayclar kullanlan Dokman tip tanmlamasna(DTD-document type
definition)gre sayfay analiz eder.
1.5.1. Web Sayfalarn Dorulama "Onaylama"

Gzel bir kodlama, (X)HTML dokmann onaylanm halidir. Web
sayfalarmz dorulamak iin genelde http://validator.w3.org/ adresi
13
1. CSSE GR
kullanlrz. Ancak birok web sayfas hazrlama editr bu arac iinde

barndrr. Web sayfalarmz dorulattmzda sonu olarak bize
sayfamzda bir sorun varsa bunu ve niin olduunu belirtir.
Dorulama ilemi nemlidir nk bizim kodlarmz doru yazdmz
kontrol eder. Kodlarnz belirli aralklarla dorulmay unutmayn. unu
unutmayalm ki web sayfasn dorulamamz bunu en mkemmel kod
olduu anlamna gelmez. Ayrnt iin tklaynz.
1.5.2. Web tarayc modlar

Web tarayc reticileri geriye dnk uyumluluu salamak iin
standartlara uygun tarayclar kardlar. Bunu baardlar, bu ilem iin iki
mod rettiler: standart mod(standards mode) ve garip mod(Quirks
mode). Standart mod sayfa ayrntl olarak ve en iyi ekilde
yorumlayacaktr. Garip mod da ise eski moda tarayclardaki gibi daha
duyarsz davranacaklardr. rnein IE4 ve NN4 gibi.
Bu iki mod arasndaki fark grebilmek iin Windows zerindeki IEde kutu
modeline bakmalyz. IE6 balangta Standart Mod da Kutu Modeli doru
grnrken Garip Mod da ise sorun karr. IE5 ve aasnda bu sorun
vardr, ayrca Opera 7 ve st Garip Mod da IE gibi davranr. Bunun
dnda ufak tefek sorunlar da vardr. Hekzedesimal renk tanmnda #
kullanmna ihtiya duymama, CSSde deer kullanlmadnda birimi piksel
olarak tannmas vb. sorunlar olarak sralayabiliriz.
Firefox ve Safaride bir nc mod vardr, ancak Standart Moddan ok
nemli bir fark yoktur.
1.5.3. DOCTYPE Geileri

Web tarayclar DOCTYPE bildirimi ve kullanlan DTDye gre tarama
metodunu belirler. Bir dokmanda DOCTYPE tanm yaplrsa bu sayfa
Standart Mod da, yaplmazsa Garip Mod da yorumlanacaktr bu geie
DOCTYPE Geii(DOCTYPE switching) ad verilir.
XHTML dokmannda tam bir DOCTYPE tanm yapld ise web

taraycs taramay Standart Mod da yapacaktr.
HTML 4.01 dokman iin DOCTYPE ve strict DTD tanm yapldnda
sayfa web taraycs tarafndan Standart Mod da yorumlanacaktr.
DOCTYPE ve transtional DTD URI tanml halin de Standart Mod da
yorumlanacaktr.
DOCTYPE ve transtional DTD URIsiz ise Garip Mod da
yorumlanacaktr.
Kt formatlanan veya DOCTYPE kullanlmayan dokmanlar HTML
ve XHTML tarafnda Garip Mod da yorumlanacaklardr.
14
1. CSSE GR
Web tarayclarnn DOCTYPE tiplerine gre farkllklarn grmek iin

http://www.ericmeyeroncss.com/bonus/render-mode.html bir gz atn.
ok urap en iyi ve en doru CSS kodunu yazdktan sonra yanl
DOCTYPE kullandnzda sayfanz Garip Mod da yorumlanacaktr ve bu
size birok sorun yaatacaktr. Sitenizde tam DOCTYPE bildirimi ve strict
DTD kullanmanz ok nelidir.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Bu kullanm sayfann HTML 4.01 kurallarnn geerli olduu bir HTML
dosyas olduunu gsterir.
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
Bu kullanm sayfann hem HTML hem de XHTML kurallarnn geerli
olduunu bir XHTML dosyas olduunu gsterir.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Bu kullanm sayfann sadece XHTML1.0 kurallarnn geerli olduu bir
XHTML sayfas olduunu gsterir. Bu kodlama yapldnda tm XHTML
kurallarna harfiyen uyulmaldr. rnein kodlarn hepsinin kk harfle
yazlmas gerekir.
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Bu kullanm sayfann bir XHTML ereve(frame) sayfas olduunu

gsterir. Kullanm azald.
Biz burada sizlere DOCTYPE tanmlamann nasl olduunu ve nemini
anlatmaya altk. Birok HTML editr DOCTYPE tanmn otomatik
eklemektedir.
15
2. CSSin Yaps
2. CSSin Yaps
CSSin yaps iki ana ksmdan oluur. Seiciler(Selector) ve Bildirim
Blou(Declaration Block). Bildirim Blouda ikiye ayrlr. zellik(Property)
ve Deer(Value).
ekil2.1 CSSin yaps
2.1. Seiciler ve Bildirim

Blou
XML de Seiciler HTML

elemanlar dnda yeni
oluturulan elemanlarda
olabilir.
Tm HTML elemanlar(body, p vd.)

potansiyel seicilerdir. Seiciler ismini
buradan alr, seilen HTML eleman anlamndadr.
Bildirim blou ssl parantezle { } alr ve kapanr. Bildirimler arasnda
; noktal virgl kullanlr. zellik ve deerler birbirinden : iki nokta
st ste ile ayrlr.
rnek : 2-1
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS'in yaps</title>
h1 {
font: medium Arial;
}
</style>
</head>
<body>
<h1>CSS'in Yaps</h1>
</body>
</html>
16
2. CSSin Yaps
eklinde arada boluk verilerek de bildirim yaplabilir. Burada ilk

tanmlama yaz tipinin boyutunu ikinci tanmlama ise yaz tipinin ismini
gsterir. leride bu konuya daha ayrntl gireceiz.(Bkz. Yaztipi zellikleri
ve CSSde Ksaltmalar) Ayrca sadece yaztipi etiketine zel / kullanm
vardr rnek aada:
rnek: 2-2
<head>
h1 {
font: 12px/14px Arial;
}
</style>
</head>
<body>
</body>
</html>
17
2. CSSin Yaps
Burada / Seicinin yaz tipi boyutunu ve satr yksekliini gsterir.

(yaztipi boyutu/satr ykseklii)
2.2. Gruplama
Yukarda hep bir seiciyi sadece bir HTML elemanna atamay grdk,
Birden fazla HTML elemanna de atama yapabiliriz, buna gruplama denir.
Gruplama seicilerde yapld gibi bildirimlerde de yaplabilir.
ekil2.2 Gruplama Yaps

Burada HTML dokman iindeki paragraflarda(p) ve nc seviye
balklarda(h3) yaz tipinin Arial olacan tek bildirim ile belirttik.
Gruplama yaplan seicileri ayrmak iin , virgl kullanlr. Snrsz
sayda seici gruplanabilir. Gruplama bize byk kolaylklar salar.
Bildirimlerimizi de gruplayabiliriz, bununla ilgili yukarda rnekler mevcut.
Bir veya daha fazla seiciye bir den fazla bildirim ekleye biliriz.
rnek: 2-3
18
2. CSSin Yaps
19
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
p, h3
{
font-family: Arial;
font-size: 2;
font-weight: bold;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc posuere
odio at mi. Sed vel massa vitae massa eleifend pulvinar. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque
gravida odio ut nulla. Mauris tincidunt adipiscing tellus. Nullam porta, nunc
in suscipit ultrices, erat odio vehicula ligula, ut pellentesque velit sapien in
dolor. Vestibulum convallis sapien eget dolor. Duis eget massa et nisi blandit
sagittis. Curabitur pretium erat volutpat lacus. Phasellus consequat. Nulla
bibendum laoreet libero. </p>
</body>
</html>
2. CSSin Yaps
2.3. Deerler
Deerler genelde mesafe ve renkleri tanmlamak iin kullanlr.
Deerleri drt gruba ayra biliriz. Uzunluk deerleri, yzde deerleri,
renk deerleri ve URL deerleri
2.3.1. Anahtar szckler

Birok CSS zellii anahtar szck deeri alabilir. Anahtar szckleri
trnaksz olarak atanr. Trnakl atamalar hataldr.
p{
color: red;
}
Doru
p{
color: red;
}
20
2. CSSin Yaps
Hatal bir tanmlamadr.
2.3.2. Uzunluk Deerleri

CSSde tanmlanan 8 uzunluk deeri vardr. Bunlarn tanesi
greceli(relative) uzunluklar ve kalan be tanesi
kesin(absolute)uzunluklardr.
2.3.2.1. Greceli Uzunluklar
Bu deerler dier uzunluk deerlerine gre grecelidir. Sayfalarmzn
leinin deitii ve ktsnn alnd durumlarda bu uzunluk deerlerini
kullanmamz bize avantaj salayacaktr.
em: Elemann yaztipinin yksekliidir. Mesela font-size deeri 14 px
olarak atanm ise 1em 14piksel eit demektir.
ex: Elemann "x" harfinin yksekliidir. Atanm olan yaztipinin kk "x"
deeri yksekliidir.
px: piksel deeri. Eer monitrnze yeterince yakndan bakarsanz, ok
kk kutulardan olumu bir zgaraya benzer. Buradaki her kutu bir
pikseldir. Bu da her monitre gre farkl deer demektir.
2.3.2.2. Kesin Uzunluklar
Bu uzunluklar gerek hayatta kullanlan birimlerdir.
in: in. 1 inch=2,54 cmdir. rn: line-height:0.5in
cm: Santimetre. Bizim gerek hayatta kullandmz santimetre deeridir.
rnek: margin:2cm
mm: Milimetre. Bizim gerek hayatta kullandmz milimetre deeridir.
rnek: letter-spacing:1mm
pt: Point. Standart bask birimidir. (1pt = 1/72in) rn: font-size:14pt
pc: Pika. Bir inin 1/6 eit olan bir bask l birimidir. Bir pika 12
noktaya blnr. rnek: font-size:2pc
2.3.2.3. Yzde Deerleri
Yzde deerleri greceli deerlerdir. Yzde deerleri uyguland nesnenin
boyutuna bal hareket eder.
21
2. CSSin Yaps
/* elemann font-size deerinin %150 si dir */

h4 { line-height: 150% }
/* satr geniliinin 10% nu */
p { text-indent: 10% }
2.3.3. Renk Deerleri

CSSde renk deerleri isim olarak ve RGB deeri olarak tanmlanabilir.
RGB tanmlamasda drt eittir.
2.3.3.1. Renk simleri
Renklerin ngilizce isimleri kullanlarak tanmlama yaplabilir.
p {color: black} /* renk tanm siyah olarak yaplyor*/
h1{ background-color: red;} /* h1 balnn ardalan krmz
tanmlanyor */
2.3.3.2. RGB Renk Deerleri
CSSde renk tanmlamak iin genelde kullanlan yntem budur. RGB
tanmlamannda drt eidi vardr.
#RRGGBB : Burada, RR, GG, ve BB, srasyla krmz (red), yeil (green)
ve mavi (blue) renklerin toplam renk iindeki younluunu gsteren
hekzadesimal saylardr. rnek: color:#ff0000; (krmz)
#RGB: Yukardaki yntemin ksaltmasdr. Ayn deerleri tayan grup
deerleri birletirilir. rnek: color:f00; (krmz)
rgb(R,G,B): Bu RGB renklerinin ondalk sayma dzeninde 0 ile 255
arasnda bir tanm vardr. Buna gre tanmlama yaplabilir. rnek h1
{color: rgb(191,127,127);}
rgb(R%,G%,B%): Bu RGB renklerinin yzdesel olarak %0 ile %100
arasnda bir tanm vardr. Buna gre tanmlama yaplr. rnek: h1 {color:
rgb(75%,0%,0%);}
CSS3 ile birlikte RGBA (RGB with Alpha channel) renk tanmda
eklenmitir. Renk tanm ile birlikte alfa kanal saydamlk deeri de
atanabilecek.
2.3.4. URL Deerleri

CSS veri dosyas ve kaynan yerini belirlemek iin URI(Universal
Resource Indicator Evrensel Kaynak ) kullanr. CSSde URI genel olarak
iki yerde kullanlr stil ablonlarn eklemek veya Artalan resmi eklemek
iin. URL tanmlamas iin aadaki gibi bir tanmlama yaplr.
22
2. CSSin Yaps
23
url("http://www.fatihhayrioglu.com/images/kucuk.gif")
Burada trnaksz ve tek trnakl kullanmlar da standarda uygundur.
2.3.5. Dizgeler(Strings)
Dizgeler ift ya da tek trnak iinde yer alr.
div::before {
content: "Dikkat";
color: red;
}
Dizge iinde ift trnak kullanmak iin blm(\) iareti ile birlikte
kullanmaldr.
div::before {
content: "Dikkat \burada\ kpek var ";
color: red;
}
Dizgeler satr sonu elemanlar ieremezler. Eer satr sonu eleman
kullanacak isek ncesinde (\a) kullanmalyz.
2.4. CSS Yorumlar

CSS kodlarmz yazdmzda kod yapmz, kullandmz teknikleri ve
dier zel uygulamalarmz iin yorum satrlar eklemeliyiz. nk daha
sonra kodumuzu incelerken bu yorumlar bize yardmc olacaktr. Ayrca bir
proje zerinde birden fazla kii alyorsa dier
alanlar iin bu kodlar nemli bilgiler ierecektir.
Kodlarnza yorum satr ekleyerek daha anlalr ve
Css dokmanlar iindeki
eriilebilir yaparz.
resim yolu css
dokmannn konumuna
CSSde yorum eklemek ok kolaydr.
gre verilir. Eklendii
(x)html sayfasnn
konumuna gre deil.
/* Genel Stiller */
body {
font-size: 67.5%; /* genel yaztipi tanm */
}
/*
Birden fazla satr ieren
kodlar bu ekilde kullanabiliriz.
2. CSSin Yaps
*/
Internet Explorer 6 srmnde float uygulanm ii ie elemanlarda
kullanlan yorum satrlar anlamsz bir tekrarlama sorunu meydana
getiriyor. Bunu engellemek iin

Ayrntl bilgi iin http://www.fatihhayrioglu.com/?p=232 inceleyiniz.
24
3. Seiciler
3. Seiciler
Seiciler Snf Seicisi ve Tekil Seicisi olarak ikiye ayrlr. CSS ile kod
yazmaya balarken bir plan yaparak hangi etikete Snf Seicisi veya Tekil
Seicisi olacan planlamalyz. Zamanla bu ayrm kodu yazarken
yapmaya alacaz.
3.1. Snf Seicisi(Class Selector)

Ayn HTML elemanna farkl zellikler atamak iin Snf Seicisini kullanrz.
ekil3.1 Snf seicilerin yaps

Bir rnek verecek olursak; hazrlayacamz dokmanda iki adet paragraf
tanmlamas yapacamz planlyoruz. Bunlardan biri saa dayal, dieri
ise ortal olmasn istiyoruz.
rnek 3-1
<head>
p.sagadaya {
text-align: right;
}
p.ortala {
text-align: center;
}
</style>
</head>
<body>
<p class="sagadaya">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Nunc posuere odio at mi. Sed vel massa vitae massa eleifend pulvinar.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Quisque gravida odio ut nulla. Mauris tincidunt adipiscing
25
3. Seiciler
tellus. Nullam porta, nunc in suscipit ultrices, erat odio vehicula ligula, ut
pellentesque velit sapien in dolor. Vestibulum convallis sapien eget dolor.
Duis eget massa et nisi blandit sagittis. Curabitur pretium erat volutpat
lacus. Phasellus consequat. Nulla bibendum laoreet libero. </p>
<p class="ortala">Curabitur luctus pellentesque lacus. Proin nisl lorem,
vestibulum a, varius auctor, condimentum non, arcu. Sed at purus. Nullam
volutpat libero ac enim. Vestibulum luctus neque ut eros. Proin vulputate.
Mauris id lectus. Nunc ut diam ut tellus lacinia pulvinar. Maecenas
commodo nisi vitae arcu. Vivamus ac metus sodales lorem sollicitudin
fringilla. Phasellus sodales. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. </p>
</body>
</html>
Birde nemli bir tanmlama yapacanz dnn, ancak sadece bir HTML
elemanna deil istediiniz sayda HTML elemannda bunu kullanmak
istersek;
rnek 3-2
<head>
26
3. Seiciler
.ortala {
text-align: center;
}
</style>
</head>
<body>
<h1 class="ortala"> Burada bir eyler yazar </h1>
<p class="ortala">Burada da baka bir eyler yazar</p> </body>
</html>
Bu tanmlamay yaptktan sonra istediimiz her HTML elemanna bu snf

uygulayabiliriz.
oklu snflar, birden fazla snf bir HTML elemanna uygulamak iin
kullanlr.
rnek 3-3
<head>
27
3. Seiciler
/>
.onemli {
font-weight : bold;
}
.uyari {
font-style: italic;
}
.onemli .uyari{
background-color: silver;
}
</style>
</head>
<body>
<p class="onemli">Dikkat:</p>
<p class="onemli uyari">lkemizde meydana gelen trafik kazalarnn
yaklak % 90' insanlarn hatalar sonucu meydana gelmektedir.</p>
</body>
</html>
Yukardaki rnekte grld gibi bir uyari snfmz birde onemli

snfmz mevcut. Baz metinlerin nemli uyar olaca dncesi ile byle
bir atama yaplabilir.
28
3. Seiciler
onemli metinler iin kaln, uyari iin yaznn eklini eik olarak
belirliyoruz. Birde her ikisine birden de atama yapabiliyoruz. Dikkat
ederseniz class=onemli uyari olarak atama yaparken CSS seicisinde
.onemli .uyari eklinde yazyoruz.
3.2. Tekil Seiciler(Id Selector)

Tekil Seicisi Snf Seicisinden farkldr. Snf Seicisi sayfada birden fazla
elemana atanrken Tekil Seicisi sadece bir tane elemana atanr. Tekil
seiciler tanmlanrken adnn bana #(diyez) iareti konulur.
ekil3.2 Tekil seicilerin yaps
rnek yapalm:
rnek 3-4
<head>
/>
#nesne1{
background-color: blue;
}
#nesne2{
background-color: red;
}
</style>
</head>
<body>
<p id="nesne1">Bu yaznn Artalan rengi mavi</p>
<p id="nesne2">Bu yaznn Artalan rengi krmz</p>
</body>
</html>
29
3. Seiciler
3.3. Snf(oul) m? Tekil mi?

Yukarda Tekil Seicisi iin her ne kadar da bir sayfada sadece bir defa
kullanlr diye tanmlasak de kodlamacnn sayfada birok yerde
kullanmasna tarayclar ses karmaz, yani hata mesaj vermez. Ancak Bu
elemanlar DOM(Belge Nesne Modeli) betiklerinde kullanrken id atamasn
bir ka yerde yaptmzda hata meydana gelecektir. Bu nedenle her ne
kadar tarayclar izin verse de Tekil Seicicilerini sayfalarmzda bir kez
kullanmalyz. Birden fazla kullanacamz elemanlar iin Snf Seicisini
kullanmalyz.
Bu kodumuzu daha kullanl ve temiz yapacaktr.
Snf ve Tekil Seicileri kk-byk harfe kar duyarldr;
rnek 3-5
<head>
30
3. Seiciler
p.onemliBilgi {
font-weight: bold;
}
</style>
</head>
<body>
<p class="onemlibilgi">Uygulama olmaz .</p>
</body>
</html>
Yukardaki kod uygulanmayacaktr nk B bir yerde byk birde

kk kullanlmtr. Baz eski tarayclar bu kuraln dnda kalabilir.
imdide dier seicilere gz atalm.
CSS gldr, nk CSS uygun stilleri ve bu stilleri nasl uygulanacan
belirlemek iin (X)HTML dokmannn hiyerarik yapsn ok iyi kullanr.
(X)HTML Sayfa yapsna stil uygulamann birok yolu vardr. Ancak bu
yollar renmeden nce (X)HTML hiyerarisini renmemiz gerekir.
31
3. Seiciler
3.4. (X)HTML Dokman Hiyerarisini Anlamak

Seici(Selector) ve dokman arasndaki ilikiyi anlayabilmemiz iin,
dokmanlarn nasl planlandn bir gz atmamz gerekir. Aadaki basit
(X)HTML dokman zerine biraz dnelim:
rnek 3-6
<html>
<head>
<title> CSS (X)HTML Hiyerarisi </title>
</head>
<body>
<h1>CSS<em>(X)HTML Hiyerarisi </em></h1>
Sitemize ho geldiniz <em>Merhaba</em>biz <strong>sizler iin <a
href="konu.html"> baz <em>nemli</em> konular </a></strong>!
hazrladk.
<ul>
<li>Konu Balklar :
<ul>
<li><strong>Asl</strong> Giri</li>
<li>nsz</li>
<li><em>ilk</em> blm:
<ol>
<li>Elma</li>
<li>Armut</li>
<li>Karpuz</li>
</ol>
</li>
</ul>
</li>
<li>...vd.</li>
</ul>
<p>Ayrntl bilgi iin <a href="mailto:bilgi@zerzebvat.com"> mesaj
gnder </a></p>
</body>
</html>
32
3. Seiciler
CSSin gl olmasnn en byk nedeni (X)HTML elemanlar arasndaki

ilikiden yararlanmasdr. (X)HTML dokmanlar gizli bir hiyerari ile
oluturulur. Bu hiyerari iinde tm (X)HTML elemanlar kendilerine uygun
bir yer bulur. Bu ilikiyi biz insanlarn soy aacna benzete biliriz.
Yukardaki HTML kodunun soyaacn karrsak:
ekil3.3 XHTML dokman hiyerarisi

Yukardaki (X)html yapsn bir soy aac gibi dnp deerlendirirsek:
Bir elemann ebeveyn(anne-baba) olduunu anlamak iin o elemann
altnda baka eleman olup olmadna bakmalyz, eer varsa o eleman
ebeveyndir. Yukardaki ekilde p elemanna dikkat edelim. p bir
ebeveyndir nk altnda em ve strong elemanlar bulunmaktadr.
strong da bir ebeveyndir ki onun altnda a eleman vardr. Bir elemann
ocuk eleman olduunu anlamak iin de stnde bir elemann olup
olmadna bakarz. Yani yukarda anlattmz ebeveyn olaynn tersi.
Buna gre strong eleman p elemannn bir ocuudur.
Daha karmak yaplarda ata(ancestor) ve torun(descendant) ilikisi
vardr. Aradaki fark eer bir eleman dier elemann tam olarak bir seviye
stnde ise ona ata dieride torun durumundadr. Yukardaki ekli
33
3. Seiciler
incelersek ilk ul elemannn iki adet li ocuk eleman bulunmaktadr ve bu

iki li elemannn altndaki tm elemanlar ilk ul elemannn torun
elemanlardr.
3.5. Torun Seicileri (Descendant Selectors)

Bu modelin avantajlarndan birisi Torun Seicileridir(dier isimleri i ie
seicilerdir). Torun Seicilere yaplan tanmlama sadece belirtilen
elemanlara uygulanr bu kurallarn haricinde kalanlara ise uygulanmaz. Bir
rnek verecek olursak bir h1 elemannn em torun elemanna belirli bir stil
uygulamak istesek. Normalde bir snf tanmlamas yaplarak her h1
eleman altndaki em elemann tek tek seerek bu snf uygulamamz
gerekir ki bunun font etiketi uygulamasndan fark yoktur. Akas bu
ilemi yapmak uzun zaman alacaktr. Ancak Torun Seicisi kullanarak bu
ii kolayca yapabiliriz. rnek kod yazarsak:
h1 em {color: gray}
Bu kod dokmandaki atas h1 olan tm em torun elemanlarn gri
yapacaktr. Dier emler ise bu kural uygulamayacaktr.
Torun Seicilerde, seici ksm birbirinden bir bolukla ayrlm iki veya
daha fazla seiciden oluur. Aradaki boluk balayc zellik tar.
Sadece iki elemanla snrl deiliz, snrsz eleman tanmlayabiliriz.
ul ol ul em {color: gray}
Torun Seiciler ok kuvvetli olabilirler. Onlar (X)HTML ile yaplmas imkn
olmayan iler yaparlar. rnek bir dokmanda iki adet alan
oluturduumuzu dnn birinci alann artalan(background) mavi, ikinci
alann artalannn beyaz olduunu dnn ve her iki alann iindede
linkler olduunu farz edelim. Tm linkleri mavi olarak atamamz mmkn
olmayacaktr nk ilk alann artalan mavi olduu iin linkler
grnmeyecektir.
zm Torun Seicilerindedir; ilk alan iindeki linklere farkl renk
dierlerine farkl renk tanmlamas yaparak bu ii halledebiliriz.
td.sidebar {background: blue;}
td.main {background: white;}
td.sidebar a:link {color: white;}
td.main a:link {color: blue;}
Bir rnek daha verelim. blockquote ve p elemanlar iindeki b eleman ile
blockquote iinde ve normal paragraf iinde geen b elemanlarna zel
bir atama yapmak istiyoruz bunun iin kod yazarsak:
34
3. Seiciler
blockquote b, p b {color: gray}

Koda dikkat edersek her iki atamay ayr ayr yapmak yerine araya bir
virgl koyarak birlikte yaptmz grrsnz.
Tarayc Uyumu:
Internet Explorer 5.0+
Firefox 1+
Safari 1.3+
Opera 5.0+
CSS 2+
3.6. ocuk Seicileri(Direct Child Selectors)

Baz durumlarda keyfi olarak bir torun seicisi kullanmaktansa daha
ayrntl bir ayrm yapmak isteyebiliriz. rnein bir h1 elemannn altndaki
strong elemanlarndan sadece ocuk Eleman iin tanmlamalar yapmak
istersek (torun elemanlar hari), Bunun iin ocuk balaycsn kullanrz (
> ) byktr iareti
ekil3.4 ocuk seicilerin yaps

rnek 3-7
<head>
h1 > strong {
color: red
}
</style>
</head>
<body>
<h1>Bu <strong>koda</strong> uygulanacaktr.</h1>
<h1>Bu <em>koddaki <strong> bu ksm </strong></em> uygulama
ddr..</h1>
</body>
</html>
35
3. Seiciler
Yukardaki durumda sadece ilk strong eleman iin tanmlama

gerekleecektir. kincisi iin herhangi bir stil tanm uygulanmayacaktr.
Yukarda ana rneimizin bir ksm gsterilmektedir. Ebeveyn-ocuk

ilikisini daha iyi anlamak iin hazrlanmtr. a eleman strongun
ebeveynidir. p elemanda a elemannn ebeveynidir. Ancak p eleman
strongun ebeveyni deildir. Biz burada p > a ve a > strong eklinde
tanmlama yapabiliriz ancak p > strong tanmlamasn yapamayz.
Birde ayn seici iinde hem torun birletiricisini hemde ocuk
birletiricisini kullanabiliriz.
table.summary td > p
36
3. Seiciler
Tarayc Uyumu :
Internet Explorer 6.0: desteklemiyor, 7.0 destekliyor
Firefox1+
Safari1.3+
Opera 9.2+
CSS 2+
3.7. Bitiik Karde Seiciler(Next Sibling Selector)

Bitiik Karde Seicileri biri biri ardna gelen ayn seviyedeki elemanlara
stil tanmlamas iin kullanlr.
ekil3.5 Bitiik karde seicilerin yaps

rnein bir h3 elemanna stil uygulamak istiyoruz ayrca bir sonraki h2
elemannada ayn stili uygulamak istediimiz durumlarda kullanlr. Genel
uygulamalarda kullanlan bir durumdur. Biz genelde h2 ve h3 arasndaki
aral ayarlamak iin bu durumla karlarz. rnek verecek olursak:
rnek 3-8
<head>
charset=utf-8" />
h2 + h3 {
margin: -1em;
}
</style>
</head>
<body>
<h2>Balk 2 <em>metni</em></h2>
<h3>Balk 3 metni</h3>
<p>Buraya <em>nemli</em> ve <strong>iyi</strong>kod gir</p>
</body>
</html>
37
3. Seiciler
Dokmann yaps:
Biz burada h2 ve h3 arasnda boluk vermek iin yukardaki kodu

kullandk
Tarayc Uyumu:
Internet Explorer 5.5, 6.0: desteklemiyor (7.0 destekliyor)
Firefox 1+
Safari 1.3+
Opera 5.0+
CSS 2
Sonu olarak konunun banda sylediimiz gibi CSS, (X)HTML
elemanlarnn kendi aralarndaki ilikileri kullanarak bize birok avantaj
38
3. Seiciler
salar. Bu sayede birok kod ynndan kurtulmu oluruz ve kodlarmz bir

dzene girer. Bu kurallar uyguladka nemini daha iyi anlayacaz.
ocuk Seicileri ve Bitiik Karde Seicilerini Internet Explorer 7
srmnden itibaren desteklemeye balamtr. Bu nedenle kullanm
konusunda dikkat etmeliyiz.
3.8. Evrensel Seiciler(Universal Selector)

Evrensel Seiciler bir eleman btne uygulamak iin kullanlr bu ilem
iin * (asteriks) iareti kullanlr. Aadaki kod tm elemanlar krmz
yapacaktr.
ekil3.6 Evrensel seicilerin yaps

rnek 3-9
<head>
*{
color:red
}
</style>
</head>
<body>
</body>
</html>
39
3. Seiciler
Ayrca bir eleman iindeki tm elemanlara uygulamak istersek

rnek 3-10
<head>
p*{
color:red
}
</style>
</head>
<body>
</body>
</html>
40
3. Seiciler
Paragraf iindeki tm elemanlar krmz yapar.

Tarayc Uyumu :
Firefox 1+
Safari 1.3+
Opera 5.0+
CSS 2+
3.9. zellik Seicileri(Attribute Selectors)

CSS ile tanmlama yaparken Html nesnelerine zellik atama yapmakta
bazen sknt ekeriz. Ne yapsakda bu elemana atama yapsak diye
dndmz durumlar olur. Bu sorunu kknden zen bir yntemdir
zellik Seicileri.
Javascript gibi idsi olan her elemana(hatta daha fazlas da var) css zellii
atanmas bize birok bakmdan avantaj salar.
zellik Seicileri HTML, XHTML veya XML dokmanlarndaki seilen etiketin
zelliklerine veya zellik deerlerine gre tanmlama yapmamz salar. Bir
rnek verecek olursak sayfamzdaki bir resme(rn: grafik.gif) kenarlk
atamas yapmak istersek:
41
3. Seiciler
img[src=grafik.gif] { border: 1px solid #000}

Drt eit zellik Seicisi vardr.
3.9.1. Basit zellik Seicisi

Belirli bir etiketin(rn:img) zelliine(rn:alt) gre tanmlama yapmamz
salar.
ekil3.7 Basit zellik seicilerin yaps

rnek 3-11
<head>
img[alt] {
border: 5px solid lime
}
</style>
</head>
<body>
<img src="logo.gif" alt="Logo" width="32" height="41" />
</body>
</html>
42
3. Seiciler
Yukardaki kodlamada birden fazla <img> tanm vardr. Ama biz sadece
alt tanm yaptklarmza belli zellikler atamak istiyoruz. Bunun iin Basit
zellik Seicisini kullanabiliriz.
Tarayc Uyumu:
Internet Explorer 5.5, 6.0: desteklemiyor 7.0: destekliyor ;
Firefox 1+
Safari 1.3+
Opera 7.0+
CSS 2+
3.9.2. zellik Deeri Seicisi

Bir etiketin zellik deerine gre tanmlama yapmamz salar.
ekil3.8 zellik deeri seicilerin yaps
43
3. Seiciler
rnek 3-12
<head>
/>
input[type="text"] {
border: 1px solid #000;
width: 150px;
}
</style>
</head>
<body>
<p>Adnz : <input type="text" name="ad" /></p>
<p>Cinsiyetiniz: <input type="radio" name="cinsiyet" id="erkek" />
Erkek <input type="radio" name="cinsiyet" id="kadin" /> Kadn
</p>
</body>
</html>
44
3. Seiciler
Genelde formlarda tanmlama yaparken sadece metin girii yaptmz

alanlara atama yapmakta zorlanrz. Bunun sebebi <input> etiketini
sadece metin girii iin kullanlmamasdr, radyo buton ve iaretleme
kutular iinde bu etiketin kullanlmasdr. zellik Deeri Seicisi bu sorunu
kkten zer. Yukardaki rnekte grld gibi
Tarayc Uyumu:
Internet Explorer 5.0, 5.5, 6.0: desteklemiyor 7.0: destekliyor ;
Firefox 1+
Safari 1.3+
Opera 7.0+
CSS 2+
3.9.3. Ksmi zellik Deeri Seicisi

Bir etiketin zellik deerindeki boluklarla ayrlm ksmlarna gre
tanmlama yapmamz salar.
45
3. Seiciler
ekil3.9 Ksmi zellik seicilerin yaps

rnek 3-13
<head>
/>
a[title~="Google"] {
text-decoration:overline;
}
</style>
</head>
<body>
<p><a href="http://www.google.com" title="Google se">gooogle
</a> </p>
<p><a href="http://www.yahoo.com" title="Yahoo se">yahoo </a>
</p>
<p><a href="http://www.fatihhayrioglu.com" title="Fatih">fatih </a>
</p>
</body>
</html>
46
3. Seiciler
Trke karakterde sorunsuz alyor. Siz kullanabileceimiz yerleri hesap

edin artk.
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 7.0+
CSS 2+
3.9.4. Dikkate Deer zellik Seicisi

Bir etiketin zellik deerindeki kesik izgi(-) ile ayrlm ksmlarna gre
tanmlama yapmamz salar.
ekil3.10 Dikkate deer zellik seicilerin yaps
47
3. Seiciler
rnek 3-14
<head>
/>
*[lang|="en"] {
color: red;
}
</style>
</head>
<body>
<h1 lang="en">Hello!</h1>
<p lang="en-us">Greetings!</p>
<div lang="en-au">Gday!</div>
<p lang="fr">Bonjour!</p>
<h4 lang="cy-en">Jrooana!</h4>
</body>
</html>
48
3. Seiciler
Tarayc Uyumu:
Firefox 1+
Safari1.3+
Opera 7.0+
CSS 2+
Bunlarn dnda CSS3 ile birlikte gelen drt tane daha yeni zellik Seicisi
vardr. "Belirlenen Szdizimi ile Balayan zellik Deer Seicisi",
"Belirlenen Szdizimi ile Biten zellik Deer Seicisi", "inde Belirlenen
Szdizimi Geen zellik Deer Seicisi" ve Aduzay zellik Deer Seicisi
diye 4 adet yeni zellik Seicisi daha vardr. Ama CSS ve XHTML
arasndaki iletiimi en st seviyeye kararak kolay ve etkileimli kod
yazmamz salamak.
3.10. Szde(Pseudo)-snflar ve Szde(Pseudo)elemanlar

Szde(Pseudo) snflar ve Szde Elemanlar CSSi destekleyen web
tarayclar tarafndan otomatik olarak tannan zel snf ve elemanlardr.
Szde denmesinin nedeni normal HTML hiyerarisi iinde bu snf
elemanlarn bulunmamasndandr. Bu snf ve elemanlar (X)HTML
hiyerarisi ile eriemediimiz eleman ve snflara erimemizi salar.
Szde(Pseudo) snf; bir eleman farkl snflara bler(rn: link elemann
active, visited vd. snflarna bler)
ekil3.11 Szde snflarn yaps

Szde(Pseudo) eleman; bir eleman alt ksmlara bler (rnein bir
paragrafn ilk harfi, bir paragrafn ilk satr gibi.)
Szde(Pseudo) snfa rnek:
a:visited {color: red}
Szde(Pseudo) elemana rnek:
p:first-line { font-weight: bold; }
49
3. Seiciler
Szde(Pseudo) snf ve elemanlar HTML snf zellii olarak

belirtilmemitir. Normal snflar szde snflar ve szde elemanlar ile
kullanlabilir.
a.disariyalinkller:link, a.disariyalinkller:visited {color: maroon}
Ayn ekilde tekil seicileri ile birlikte de kullanlabilirler
a#altkisim:link{font-weight: bold;}
3.10.1. Szde Snf Seicileri

Szde snflarn ikiye ayra biliriz. Szde Link Snflar ve Szde
Dinamik Snflar
Szde Link Snf

Sadece linklere uygulanan iki Szde Link snf vardr. :link ve :visited
:link - Ziyaret edilmemi sayfann linkine stil tanmlamas yapmak iin
kullanlr. Ancak birok web taraycs yaplan stil tanmlarn ziyaret edilmi
sayfa linklerine de uygular.
:visited - Ziyaret edilmi sayfa linklerine stil tanmlamas yapmak iin
kullanlr.
a:link {color: blue}
a:visited {color: red}
Bunun yerine genelde aadaki gibi bir kod da kullanlr
rnek 3-15
<head>
/>
a{
color: blue;
}
a:visited {
color: red;
text-decoration: line-through;
50
3. Seiciler
51
}
</style>
</head>
<body>
<p><a href="http://www.google.com" title="Google se">gooogle </a>
</p>
</p>
</p>
</body>
</html>
Bu kodlama ile kullancya ziyaret ettii sayfa

linkleri farkl renkte ve zeri izili gsterilerek
ieriksel bir bilgi grsel olarak verilebilir.
Tarayc Uyumu:
Szde snflarda sralama

nemlidir. Genel
kullanmda linkvisited-hover-active,
sralamas yaplmaldr.
Tm snflar iinse linkvisitedfocus-hover-active.
sralamas yaplmaldr.
3. Seiciler

Firefox 1+
Safari 1.3+
Opera 5.0+
CSS 1+
Szde Dinamik Snf Seicileri

Szde Dinamik Snflar sayfa grnmne ok byk katklar yapabilir.
Bu snflar genelde linklere uygulanr ancak birok kullanm alanlar vardr.
:focus, :active ve :hover
:focus - Odaklanan elemana stil tanmlamas yapmak iin kullanlr rn:
<input> alanna ierik girerken metin giri alanna odaklandnda renk
deiimi yaplmas gibi.
:active - Aktif olan elemana stil atamak iin kullanlr.
:hover - Bir elemann zerine Farenin imleci geldiinde yaplacak
tanmlama iin rn: bir linkin zerine fare ile geldiimizde renk
deitirmesini salamak iin kullanlabilir.
Linkler iin genel kullanm
rnek 3-16
<head>
a:link {
color: navy;
}
a:visited {
color: gray;
}
a:hover {
color: red;
}
a:active {
color: yellow;
}
</style>
</head>
<body>
52
3. Seiciler
</p>
</p>
<p><a href="http://dasdasd" title="Fatih">fatih </a> </p>
</body>
</html>
:focus iin bir rnek verecek olursak

rnek 3-17
<head>
input:focus
{
background-color: #FFFFE0;
color: white;
}
</style>
53
3. Seiciler
</head>
<body>
Ad: <input type="text" id="ad" />
</body>
</html>
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 5.0+
CSS 1+
lk ocuk Elemann semek

Dier bir szde snfmz :first-childdr.
first:child: Belirtilen elemann ilk ocuk Elemanna stil atamak iin
kullanlr.
rnek 3-18
54
3. Seiciler
<head>
/>
p:first-child {
font-weight: bold;
}
li:first-child {
color:#f00;
}
</style>
</head>
<body>
<div>
<p>Bu paragraf ilk ocuk elemandr ve sonu olarak kaln olacaktr</p>
<ul> <li>Bu liste ilk ocuk elemandr ve yaztipi rengi krmz olacak</li>
<li>Bu<strong>ocuk eleman </strong>deil</li> <li>Bu da deil</li>
</ul>
<p>Bu paragraf <em>bir</em> ocuk eleman deil.</p>
</div>
</body>
</html>
55
3. Seiciler
Tarayc Uyumu:
Internet Explorer 5.5, 6.0 desteklemiyor 7.0: destekliyor ;
Firefox 1+
Safari 1.3+
Opera 5.0+
CSS 1+
:lang szde snf

:lang szde snf ierikteki bir elemana farkl bir dilde yazmamz salar.
Atanabilecek dil listesi ve kullanlacak ksaltmalara ISO 639 and RFC 1776
standards sitesinden eriebilirsiniz.
rnek 3-19
<head>
/>
56
3. Seiciler
p:lang(fr) {
color: red;
}
</style>
</head>
<body>
<div>
<p lang="fr">Bonjour le monde!</p>
</div>
</body>
</html>
Tarayc Uyumu:
Internet Explorer 5.5, 6.0, 7.0 desteklemiyor
Firefox 1+
Safari 1.3+
Opera 7.5+
CSS 1+
Szde snflar birletirmek

CSS2.1 ile birlikte ayn seiciye ait szde snflar birletirme zelliide
gelmitir. rnein ziyaret edilmi linklerin :hover zellii ile ziyaret
57
3. Seiciler
edilmemi linklerin :hover zelliini farkl atamak istesek.
rnek 3-20
<head>
/>
a:link:hover {
color: red;
}
a:visited:hover {
color: pink;
}
</style>
</head>
<body>
</p>
</p>
</p>
</body>
</html>
58
3. Seiciler
Sralama nemli deildir.

Tarayc Uyumu:
Internet Explorer 5.5, 6.0, 7.0 desteklemiyor
Firefox 1+
Safari 1.3+
Opera 9.0: desteklemiyor
CSS 1+
3.10.2. Szde eleman seicileri

Bu elemanlar hayali elemanlardr. (X)HTML hiyerarisi iinde bu elemanlar
yoktur. CSS2.1de drt adet Szde Eleman Seicisi vardr: first-letter,
first-line, before ve after
first-letter (ilk harf)

Bir blok-level elemann ilk harfine stil tanmlamas yapmak iin kullanlr.
rnek verecek olursak h1 elemannn ba harfinin byk olmas iin
kullanlabilir.
rnek 3-21
59
3. Seiciler
<head>
/>
h1:first-letter {
font-size: 200%;
}
</style>
</head>
<body>
<h1>Bu byk bir balk</h1>
</body>
</html>
Tarayc Uyumu:
Internet Explorer 5.5, 6.0 desteklemiyor 7.0: destekliyor ;
Firefox 1+
Safari 1.3+
Opera 5.0+
CSS 1+
60
3. Seiciler
first-line (ilk satr)

Bir metnin ilk elemanna stil atamak iin kullanlr. rnein
paragraflarnzn ilk satrlarn renklendirmek iin kullanabiliriz.
rnek 3-22
<head>
/>
p:first-line {
color: red;
}
</style>
</head>
<body>
<p>Bir metnin ilk elemanna stil atamak iin kullanlr. rnein
paragraflarnzn ilk satrlarn renklendirmek iin kullanabiliriz.</p>
</body>
</html>
61
3. Seiciler
Tarayc Uyumu:
Firefox 1+(ksmen)
Safari 1.3+
Opera 5.0+
CSS 1+
before ve after elemanlar

Bir elemann ncesine ve sonrasna bir ierik veya zellik eklemek iin
kullanlr.
Notlarmzn bana otomatik olarak Not yazmak iin
rnek 3-23
<head>
/>
62
3. Seiciler
p.not:before {
content: "Not:";
font-weight: bold;
}
body:after {
content: "Bitti.";
text-decoration: line-through;
}
</style>
</head>
<body>
<p class="not">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec facilisis pretium leo. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Aliquam facilisis. Maecenas
hendrerit. Integer suscipit. Curabitur pede metus, commodo ut, lobortis
vitae, venenatis in, leo. Mauris a dui. Cras pretium. Donec porta, odio et
suscipit fringilla, purus enim auctor nulla, ultricies fringilla nisi lorem et
mi. Praesent cursus. </p>
<p>Duis malesuada metus at ligula. Morbi tincidunt, lorem quis convallis
faucibus, eros est consectetuer mi, nec pharetra sapien enim eu mauris.
Suspendisse potenti. Aenean quis risus nec justo suscipit venenatis. Duis
in dolor. Sed ullamcorper, lorem vel accumsan convallis, tellus mi varius
velit, a lacinia nulla purus a mi. Suspendisse venenatis ullamcorper
tortor. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Morbi commodo adipiscing justo.
</body>
</html>
63
3. Seiciler
Kodu yeterlidir. Ayn ekilde paragraflarmzn sonuna otomatik bitti yazp

nokta koymak istersek
Kodlamas bunu yapmak iin yeterlidir.
Tarayc Uyumu:
Internet Explorer 5.5, 6.0,7.0 desteklemiyor
Firefox 1+(ksmen)
Safari 1.3+
Opera 7.5+
CSS 2+
64
4. Basamakl Yap ve Kaltsallk
4. Basamakl Yap ve
Kaltsallk
CSS tanm yaparken stil ablonu olarak evrilir genelde Trkeye. Bataki
C(Cascade) harfi biraz darda tutulur, biz burada bu ksma
odaklanacaz. C yani Cascading, stil tanmlamada ncelik srasdr.
CSSde bir elemana birden fazla tanm yapldnda hangi zelliin etkin
olacan belirlemek iin belli bir kural vardr. Bu kurala gre hangi zellik
etkin ise o tanm elemana etki yapar, dier zellikler etkisiz kalr.
Basamakl yap, etkinlik ve kaltsallk ile ilikilidir.
4.1. CSSde Tanmlamalar ve

Etkinlikleri(Specificity)
CSSde etkinliin anlam stil atmas(ayn elemana birden fazla tanm
yapldnda) olduunda kullanlan hangi kodun web tarayclar tarafndan
yorumlanacan belirlemektir.
rnek 4-1
<head>
/>
<title>Basamakl Yap ve Kaltsallk</title>
h1{
color:red;
}
h1{
color:blue;
}
</style>
</head>
<body>
<h1>Sed ut perspiciatis</h1>
</body>
</html>
65
Yukardaki rnekte grld gibi ayn HTMl

elemanna(h1) iki adet tanm yaplmtr. Tarayc
ekrannda grnen son tanmlamadr. Eer ayn
nesneye tanmlanan ayn zellik var ise son yaplan
geerlidir.
Burada iki tanmlamann yaknlk dereceleri ayndr.
O zaman hangisi uygulanacak. Byle durumlarda
web tarayclar kendilerine has garip bir hesaplama
sistemi kullanrlar. Kurallar aadaki gibidir.
Kod iinde tanmlama yaplmsa (satr ii-kod)

Stil dosyasndaki tanml IDlerin saysna
Snf tanmlamalarnn saysna
Seicilerin saysna bakar
Kod iinde tanmlama

yaplmsa (inline-kod)
ksm CSS2.1 ile gelen
yeni bir zelliktir ve
etkinlik deerini 4
basamaa karmtr.
CSS2 ve ncesinde
basamakl hesaplama
yaplmakta idi, kod
iindeki tanmlamalar
basamaa gre 1,0,0
olarak belirlenirdi.
Web taraycs bu saylar toplamaz. Yalnzca

rakamlar yan yana sralar. Bu web tarayclarna zel bir aritmetik
ilemdir. Bir rnek verecek olursak id deeri 2, snf deeri 3 ve seici
deeri 0 olan bir tanmlamada
0 (kod iinde deil), 2 (id), 3 (class), 0(seici) = 0230
66
Deerini elde ederiz. Burada id deeri 100ler basamana snf deeri

10lar basamana yazlarak hesaplama yaplr ve iki yz otuz deeri elde
edilir.
rnek 4-2
<head>
/>
body h1{
color:red;
}
h1{
color:blue;
}
</style>
</head>
<body>
<h1>Sed ut perspiciatis</h1>
</body>
</html>
67
Bir nceki rnekte mavi olan balmz imdi krmz oldu. Bunun nedeni
etkinlik deerinin daha byk olmasdr.
Body h1 = 0002
h1 = 0001
0002 > 0001
Olduu iin balk krmz olmutur.
Byk ierikli siteleri kodlarken birok defa karlatmz sorunlardan bir
tanesi bir elemana ayn zelliin birden fazla tanmlanmas sonucu
istemediimiz sonularla ile karlamaktr. Bu birden fazla tanmla
genelde genel bir tanm yaptktan sonra o elemana zel tanmlamalar
yapmak istediimizde karlarz. Bu sorunu amak iin benim
uyguladm yntem etkin olmasn istediim elemann etkinlik deeri
arttrmak iin tanmlama yaparken st elemanlarn yazmak veya id
atamak oluyor. Yukardaki rnekten gidersek.
Eer baln mavi olmasn istiyorsam. Etkinlik derecesini arttrmak iin
bana html body eklerim
html body h1{ color:blue}
68
eklinde veya
h1#baslik{ color:blue}
....
<h1 id=baslik>Sed ut perspiciatis</h1>
Peki site ierii geni ve css dokmanmzda uzunca biz bu st ste
basamakl olarak binmi tanmlar nasl anlayacaz. Bunun iin size
Firefox tarayc ile gelen FirefBug(http://www.getfirebug.com/) eklentisini
neriyorum. Bu eklentini birok zellii var bu sadece biri.
Firebug eklentisi kurup etkinletirdikten sonra sa alt keye eklenen yeil
ok iaretine tklayp eklenti ekrann aarz ve soldaki Inspecte tkladktan
sonra sayfamzdan h1 elemanmz seeriz.
kinci rnek zerinde yaptmz Firebug aratrmasnda grld gibi

11.satrdaki h1 tanmmzn zeri izilmitir, yani etkisizdir. Etkili olan 7.
Satrdaki h1 tanmmzdr.
Etkinlik deerini anlamak iin birka rnek daha verelim.
ul h1 li.secili {color: yellow}
69
Yukardaki tanmlama da 0013 deerini elde ederiz.

0 (kod iinde deil), 0 (id), 1 (secili snf), 3 (ul h1 li seicileri) = 0013
h1 {color: blue}
Bu tanmlamann deeri 0001dir. CSS belirlemeye gre yksek deer
alann zellii uygulanr. Her ikisinde de h1e bir tanmlama yaplmtr.
Ancak tanmlama sistemleri farkldr. XHTML kodumuzdaki h1 elemann
mavi deil sar(yellow) olarak gsterecektir.
Seici
*
Seici Tipi
Evrensel seiciler
Etkinlik deeri
0000
li
Eleman ad
(a = 0, b = 0, c = 0, d = 0)
0001
Eleman ad
(a = 0, b = 0, c = 0, d = 1)
0002
Eleman ad
(a = 0, b = 0, c = 0, d = 2)
0003
ul li
div h1 + p
input[type=text]
Eleman ad
+zellik
.siniftanimi
Snf ad
div.siniftanimi
Eleman ad + snf
tanm
#tekiltanim
div#tekiltanim
style (attribute)
Tekil seici ad
Eleman ad + tekil
seici ad
Satr ii style
tanm
(a = 0, b = 0, c = 0, d = 3)
0011
(a = 0, b = 0, c = 1, d = 1)
0010
(a = 0, b = 0, c = 1, d = 0)
0011
(a = 0, b = 0, c = 1, d = 1)
0100
(a = 0, b = 1, c = 0, d = 0)
0101
(a = 0, b = 1, c = 0, d = 1)
1000
(a = 1, b = 0, c = 0, d = 0)
4.2. !important
Bir de ncelik iin !important tanmlamas vardr. Eer yukardaki koda
!important eklersek
70
h1 {color: blue !important;}

Tanmlama yukardaki gibi deitirildiinde h1 eleman mavi renkte
grnecektir.
Eer deer ayn olursa(mesela 0013 e 0013) ne olur, bu durumda son
yaplan tanmlamann zellikleri uygulanr.
4.3. Kaltsallk(Inheritance)
XHTML dokmanlarnn yapsndan ve CSS ile olan ilikisinden bir nceki
konuda bahsetmitik. XHTML eleri bir biri ile bir ailenin birbiri ile olan
ba gibi baldr. Hatrlyorsanz bir soy aac benzetmesi yapmtk. te
bu soy aacnn eleri arasnda bir kaltsallk sz konusudur. Ebeveynden
ocuuna geen zellikler gibi XHTML eleri arasnda CSS zellikleride
kaltsal olarak alt elemanlar(ocuk eleman) etkiler. Kaltsallk; CSS ile web
sayfas kodlarken tm elemanlara tek tek atama yapabildiimiz gibi birde
bir elemana atama yaparz ve bu zellik tm alt(ocuk elemanlar)
elemanlarnada uygulanr buna kaltsallk denir. CSSin birok zelliinin
kaltsallk zellii vardr. Kitabn ilerleyen sayfalarnda CSS zellikleri
verilirken her zelliin kaltsallk zellii hakknda bilgi verilecektir.
Baz CSS zelliklerinde kaltsallk yoktur. rnein margin, padding ve
border zellikleri gibi tm liste sada
rnek bir kodlama yaparsak:
rnek 4-3
<head>
/>
div#icerik {
text-align: center;
}
</style>
</head>
<body>
<div id="icerik">Buradaki ierik ortalanacaktr <p>text-align zelliinin
kaltsall olduu iin buradaki ierikte ortalanacaktr </p></div>
</body>
</html>
71
Kaltsallk kodlama yaparken bazen bize yararl olur, bazende

sayfalarmzda sorun kmasna neden olur. Bundan dolay elemanlarn
kaltsall olup olmadn bilmeliyiz. Yoksa gerekten zor durumlarda
kalabilirsiniz, tecrbeyle sabit :)
Direk atamalar kaltsall yok eder. rnein yukarda rnekte
p{
text-align: left;
}
Tanmlamas ile st eleman olan #icerikden kaltsal olarak gelen textalign: center; tanmlamasn etkisiz klar.
NN4x ve IE5x ve alt srmlerinde body ierisindeki font tanmlamasnn
table elemanna etki etmemesi gibi bir sorunumuz vardr.
body {font-size: 0.8em;}
Tanmlamas NN4x ve IE5xde kodlama iindeki tablolar etkilemeyecektir.
Bunun iin
body, td, th {font- size: 0.8em;}
72
eklinde bir tanmlama daha uygun bir tanmlama eklidir.
4.3.1. inherit (kaltsallk)deeri

CSS2 ile birlikte CSS zelliklerine inherit deeri atamamza olanak
salamaktadr. Tm elemanlara(kaltsallk zellii olmayanlar dhil) inherit
deeri atayabiliriz. inherit deeri atadmz eleman st elemannn
deerlerini alacaktr. Bir rnek yapacak olursak:
rnek 4-4
<head>
/>
div#icerik{
}
div#bilgi {
border: inherit;
}
</style>
</head>
<body>
<div id="icerik">Bu ierii kenarl olacaktr
<div id="bilgi">Bu bilgi de kenarlk bilgisini st elemandan
kaltsal olarak alarak kenarl olacaktr. </div>
</div>
</body>
</html>
73
Kaltsall kullanarak kodlarmz azaltabiliriz. Ancak kaltsallk nedeni ile

de birok sorunla karlatmz unutmayalm.
Internet Explorer 7 ve alt srmlerinde inherit deerini
desteklememektedir.
74
5. Yaztipi(Font) zellikleri
5. Yaztipi(Font)
zellikleri
Yaztipi zellikleri sayfalarmzdaki metinlerin yaztipi ailesini, kalnlk
ayarlarn, boyutunu, byk-kk harf olmasn ve stilini deitirmemizi
salar. CSS yaztipleri zerinde tam hkim olmamz salar.
Renk (color) zellii

Yaztipi ailesi (font-family)
Yaztipi boyutu (font-size)
Yaztipi kalnl (font-weight)
Yaztipi biemi (font-style)
Yaztipi farkllklar (font-variant)
Yaztipi (font)
5.1. Renk (color) zellii

Yaps: color: <deger>
Ald Deerler:<renk> | kaltsallk
Uygulanabilen elemanlar: tm elemanlar
Kaltsallk: Var
Renk tanmlamas metinlerimizin rengini belirlemek iin kullanlr.
rnek 5-1
<head>
/>
<title>Yaz Tipi(Font) zellikleri</title>
p{
color: #f00; /* krmz renk kodu */
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum
felis. Maecenas pulvinar, ante convallis pellentesque tristique, felis odio
commodo metus, id euismod pede quam sit amet ligula. Curabitur sit
75
amet tellus. Suspendisse potenti.</p>

</body>
</html>
CSS3 ile birlikte 147 renk tanm gelmektedir. Tm tarayclar bu renkleri

desteklemektedir.
CSS3 ile birlikte RGBA (RGB with Alpha channel) renk tanmda
eklenmitir. Renk tanm ile birlikte alfa kanal saydamlk deeri de
atanabilecek.
Tarayc Uyumu:
Firefox 1+
Safari1.3+
Opera 3.6+
CSS 1+
5.2. Yaztipi ailesi (font-family)

Yaps: font family : [[<yaztipi aile ismi > | <soysal aile ismi >],]*
[<yaztipi aile ismi > | <soysal aile ismi >] | inherit
Ald Deerler:
76
<yaztipi aile ismi >- herhangi bir yaztipi ailesi ismi kullanlabilir.
<soysal aile ismi >
serif (rn: Times)

sans-serif (rn: Arial veya Helvetica)
cursive (rn: Zapf-Chancery)
fantasy (rn: Western)
monospace (rn: Courier)

Kaltsallk: Var
Metinlerin kullanlaca yaztipi ailesini belirlemek iin kullanlr. Birden
fazla yaztipi ailesi kullanlacaksa aralarna virgl (,) koyulur. Birden fazla
yazlmasnn nedeni birinci yaztipi ailesi eer kullancnn bilgisayarnda
yok ise alternatif bir yaztipi sunmak. Genelde son yaztipi ailesi olarak
soysal yaztipi ailesi yazlr.
Soysal yaztipi aileleri
serif
sans-serif
cursive
fantasy
Benzeyenler
Times, Times New Roman
Helvetica, Arial
Zapf-Chancery
Western
Eer yaztipi ismi bir den fazla kelimeden oluuyorsa ift trnak iine alnr.
rnek 5-2
<head>
/>
<title>Yaz Tipi(font) zellikleri</title>
p{
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1{
font-family: Georgia, "Times New Roman", serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </h1>
<p>Vestibulum felis. Maecenas pulvinar, ante convallis pellentesque
77
tristique, felis odio commodo metus, id euismod pede quam sit amet
ligula. Curabitur sit amet tellus. Suspendisse potenti.</p>
</body>
</html>
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
5.3. Yaztipi boyutu (font-size)

Yaps: font-size: <kesin deerler > | <greceli deerler > |
<uzunluk> | <yzde>
Ald Deerler:
<kesin deerler >

o xx-small | x-small | small | medium | large | x-large |
xx-large
<greceli deerler >
o larger | smaller
78
<uzunluk>
<yzde> (st elemanlara(ebeveyn) bal olarak)
Balang deeri: medium

Kaltsallk: Var
CSS, yaz tipi boyutlandrmada daha esnek tanmlama yapmamz olanak
salar. Mesela 11px deeri HTMLde 2 ve 3 deeri arasnda bir deere
denk geliyor ve HTML yaztipi eleman ile birlikte kullanlamyordu. CSSde
yaz tipi boyutunu belirlemek iin birok birim kullanlr. rn: px, em, pt,
in, cm vd.
rnek 5-3
<head>
/>
<title>Yaz Tipi(font) zellikleri</title>
td.normal{
font-size : 12px;
}
td.buyuk {
font-size : 120%;
}
td.kucuk {
font-size : xx-small;
}
td.enbuyuk {
font-size : x-large;
}
</style>
</head>
<body>
<table width="100%" border="1">
<tr>
<td class="kucuk">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit.</td>
<td class="normal">Vestibulum felis.</td>
</tr>
<tr>
<td class="buyuk">Maecenas pulvinar, ante convallis pellentesque
ligula. </td>
<td class="enbuyuk">Curabitur sit amet tellus. Suspendisse
79
potenti.</td>
</tr>
</table>
</body>
</html>
Windows ortamndaki Internet Explorer 5.5 ve alt srmlerinde balang

deeri medium yerine smalldr.
Tarayc Uyumu:
Firefox1+
Safari 1.3+
Opera 3.6+
CSS 1+
5.4. Yaztipi kalnl (font-weight)

Yaps: font-weight: <deer>
Ald Deerler: normal | bold | bolder | lighter | 100 | 200 | 300 |
400 | 500 | 600 | 700 | 800 | 900
Balang deeri: normal
80
Kaltsallk: Yok
Yaztipinin kalnlk incelik durumunu belirler. 100(ince)-900(kaln)
arasnda bir deer alabildii gibi kaln(bold), ok kaln(bolder) ve normal
deerlerini de alr.
rnek 5-4
<head>
/>
<title>Yaztipi(font) zellikleri</title>
p{
font-weight: bolder;
}
</style>
</head>
<body>
</body>
</html>
81
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
5.5. Yaztipi biemi (font-style)

Yaps: font-style: <deer>
Ald Deerler: normal | italic | oblique | inherit
Kaltsallk: Var
Yaztipinin eik(italiktik) olup olmamasn belirler.
rnek 5-5
<head>
82

/>
<title>Yaztipi(font) zellikleri</title>
h1{
font-style: oblique;
}
p{
font-style: italic;
}
</style>
</head>
<body>
</body>
</html>
Tarayc Uyumu:
Firefox 4+
83
Safari 1.3+
Opera 3.6+
CSS 1+
5.6. Yaztipi farkllklar (font-variant)

Yaps: font-variant: <deer>
Ald Deerler: normal | small-caps | inherit
Kaltsallk: Var
Metnin kk-byk harf ile gsterilmesini belirler. ki deer alr. normal
| small-caps.
rnek 5-6
<head>
/>
span{
font-variant: small-caps;
}
</style>
</head>
<body>
<p><span>Vestibulum felis. Trke karakter rnei</span> Maecenas
pulvinar, ante convallis pellentesque tristique, felis odio commodo metus,
id euismod pede quam sit amet ligula. Curabitur sit amet tellus.
Suspendisse potenti.</p>
</body>
</html>
84
Windows ortamnda Internet Explorer 7 ve alt srmlerinde font-variant

deeri small-caps atandnda text-transforma atanan lowercase ve
uppercase deerleri none gibi alglanacaktr.
Safari 3 ve alt srmlerde bu zellii desteklemez.
Tarayc Uyumu:
Firefox 1+
Safari desteklemiyor
Opera 3.6+
CSS 1+
Trke karakterlerde utf-8 karakter kodunda i de sorun kyor.
5.7. Yaztipi (font)

Yukarda anlatlan yaztipi zelliklerinin hatta ek olarak line-height
deerinide tek seferde tanmlamak iin kullanlr.
Yaps: font: <deer>
Ald Deerler:[ <font-style> || <font-variant> || <font-weight>
]? <font-size> [ / <line-height> ]? <font-family>
85
Balang deeri: tanmsz

Kaltsallk: Var
rnek 5-7
<head>
/>
h2{
font:bold italic 200%/1.2em Verdana, Helvetica, Arial, sansserif;
}
</style>
</head>
<body>
</body>
</html>
86
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
87
6. Metin(Text) zellikleri
6. Metin(Text)
zellikleri
Yaz tipi(font) zellikleri ile Metin(Text) zellikleri arasndaki fark; yaz tipi
zellikleri metini oluturan karakterlerin nasl olacan belirlerken,
Metin(Text) zellikleri sayfadaki metinlerin dzenini kontrol eder. Metin
zellikleri metin dzeni iin ok avantajl zellikler getirmitir.
Metin Girintileme (text-indent)

Hizalama (text-align)
Dikey hizalama (vertical-align)
Satrlar aras ykseklik (line-height)
Kelimeler aras mesafe (word-spacing)
Harfler aras mesafe (letter-spacing)
Harf bykl (text-transform)
Metin ssleme (text-decoration)
Metin glgeleme (text-shadow)
Elemanlar aras boluk (white-space)
Metin yazma yn(direction)
ok ynllk algoritmas(unicode-bidi) zellii
6.1. Metin Girintileme (text-indent)

Paragraflarn ilk cmlelerin soldan ieriye kaydrlmas iin kullanlan bir
zelliktir.
Yaps: text-indent: <deger>
Ald Deerler: <uzunluk deeri > | <yzde> | inherit
Balang deeri: 0
Uygulanabilen elemanlar: Blok seviyesinden elemanlar
Kaltsallk: Var
rnek 6-1
<head>
/>
<title>Metin(Text) zellikleri</title>
88
p{
text-indent: 10px;
}
</style>
</head>
<body>
<p>Quisque volutpat. Curabitur feugiat, sapien a laoreet mollis, leo
sapien pellentesque nisi, sed vehicula sapien orci eget libero. Fusce neque
nibh, tempor tristique, ullamcorper a, mollis vel, pede. Praesent mattis
bibendum massa. Curabitur ultricies fringilla nulla. Aliquam in risus. </p>
</body>
</html>
Windows ortamnda Internet Explorer 5.5 ve alt srmlerinde satrii

elemanlara girinti zellii eklemek iin width deeri auto olarak
atanmaldr.
Opera uuk deerleri yorumlamyor. rnein resimli dme(button)
yaparken metni yok etmek iin -999px; atmas yaptnzda Opera bunu
alglamayacaktr.
89
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
6.2. Metin hizalama (text-align)

Bir elemann dierlerine gre hizasn belirlemek iin kullanlr. Sadece
metinler iin kullanlmaz, dier elemanlar iinde kullanlr.
Yaps: text-align: <deger>
Ald Deerler: left | center | right | justify | inherit
Balang deeri: kullanc arayzne ve yazm ynne bal
Uygulanabilen elemanlar: blok seviyesinden elemanlar
Kaltsallk: Var
left, right, center veya justify: Metni srayla sola, saa yanatrr, ortalar
veya iki kenara yanatrarak satra yayar.
rnek 6-2
<head>
/>
p{
text-align: justify;
}
</style>
</head>
<body>
</body>
</html>
90
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
6.3. Dikey hizalama (vertical-align)

Bir elemann ieriinin dikey hizalamas iin kullanlr.
baseline: Orta(metin ieriine gre)

sub: Altsimge
super: stsimge
top: Yukar(elemana gre)
text-top: Yukar (Metin ieriine gre)
middle: Orta (Elemana gre)
bottom: Alt (Elemana gre)
text-bottom: Alt(Metin ieriine gre)
Yaps: vertical-align: <deger>

Ald Deerler:<yzde> | baseline | sub | super | top | text-top |
91
middle | bottom | text-bottom

Balang deeri: baseline
Uygulanabilen elemanlar: satrii seviyeden ve table-cell elemanlar
Kaltsallk: Yok
rnek 6-3
<head>
/>
img{
vertical-align: middle;
}
</style>
</head>
<body>
<p><img src="http://www.fatihhayrioglu.com/images/koy_01.jpg"
width="250" height="165" alt="Ky" />Vestibulum felis. Maecenas
pulvinar, ante convallis pellentesque tristique, felis odio commodo metus,
id euismod pede quam sit amet ligula. Curabitur sit amet tellus.
</body>
</html>
92
Internet Explorer 7 ve alt srmlerinde bottom ve top deerleri textbottom ve text-top gibi yorumlanr.
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
6.4. Satrlar aras ykseklik (line-height)

Satrlar arasndaki ykseklii belirler. normal, piksel veya yzde
deerlerin den birini alabilir.
Yaps: line-height: <deger>
Ald Deerler: normal | <say> | <uzunluk deeri > | <yzde> |
inherit
Kaltsallk: Var
93
rnek 6-4
<head>
/>
p.satir{
line-height:30px;
}
</style>
</head>
<body>
<p class="satir">Vestibulum felis. Maecenas pulvinar, ante convallis
pellentesque tristique, felis odio commodo metus, id euismod pede quam
sit amet ligula. Curabitur sit amet tellus. Suspendisse potenti.</p>
</body>
</html>
94
Internet Explorer 7 ve alt srmlerinde eer satr iinde yerletirilen bir

eleman(resim veya form elemanlar gibi) varsa bu zellii yanl uygular.
Firefox 1.0.0.8 ve alt srmlerde saysal deerlerin uygulamasnda sorun
yaanr.
Tarayc Uyumu:
Firefox 1.5+
Safari 1.3+
Opera 3.6+
CSS 1+
6.5. Szckler aras mesafe (word-spacing)

Szckler arasndaki boluk deerini belirler. Eksi deer alabilir.
Yaps: word-spacing: <deger>
Ald Deerler: normal | <uzunluk deeri > | inherit
Kaltsallk: Var
95
Szckler aras boluk algoritmalar kullanc arayzne baldr. Szckler

aras boluklar ayrca satr iki kenara yaylarak hizalama yaplrken
deiebilir.
rnek 6-5
<head>
/>
p.deneme{
word-spacing: 10px;
}
</style>
</head>
<body>
<p class="deneme">Vestibulum felis. Maecenas pulvinar, ante convallis
</body>
</html>
96
Firefox 2 ve alt srmlerinde ve Opera9.2 ve alt srmlerinde Satrii

ocuk elemanlarn arasndaki boluun asgari genilii sfrdr.
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 2+
6.6. Harfler aras mesafe (letter-spacing)

Harfler arasndaki boluk deerini belirler. Eksi deer alabilir.
Yaps: letter-spacing: <deger>
Ald Deerler: normal | <uzunluk deeri > | inherit
Kaltsallk: Var
Harfler aras boluk algoritmas kullanc arayzne baldr. Harfler aras
boluklar ayrca satr iki kenara yaylarak hizalama yaplrken deiebilir.
97
rnek 6-6
<head>
/>
p.deneme{
letter-spacing: 5px;
}
</style>
</head>
<body>
</body>
</html>
98
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
6.7. Harf Bykl (text-transform)

Metnin byk-kk harf evirmek iin kullanlr.
uppercase(hepsini byk harf yap)

lowercase(hepsini kk harf yap)
capitalize(sadece ba harfleri byk yap)
Yaps: text-transform: <deger>

Ald Deerler: none | capitalize | uppercase | lowercase |inherit
Balang deeri: none
Kaltsallk: Var
99
rnek 6-7
<head>
/>
p.deneme{
text-transform:uppercase;
}
</style>
</head>
<body>
</body>
</html>
100
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
6.8. Satrn altn, stn, ortasn izme ve yanp

snme (text-decoration)
Bu zellik metinlerimize zel iaretler koymamz salar. Metinlerinizin
altn izmek rnek olarak gsterilebilir.
Yaps: text-decoration: <deger>
Ald Deerler: none | [ underline || overline || line-through ||
blink ] | inherit
Balang deeri: none
Kaltsallk: Yok
101
rnek 6-8
<head>
/>
a:link, a:visited, a:active{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
</style>
</head>
<body>
<p class="deneme"><a href="#">Vestibulum felis. Maecenas
pulvinar</a>, ante convallis pellentesque tristique, felis odio commodo
metus, id euismod pede quam sit amet ligula. Curabitur sit amet tellus.
</body>
</html>
102
Internet Explorer 7 ve alt srmlerinde blink deerini desteklemez.

Internet Explorer 6 ve alt srmlerinde line-through ile izilen izgi dier
tarayclara gre daha yukardadr.
Firefox 2 ve alt srmlerde metin ssleme atamalarn float uygulanm
alt elemanlarada uygular.
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
6.9. Metin glgelendirme (text-shadow)

Bu zellik CSS2 ile birlikte geldi ancak internet tarayclar bu zellii
desteklemeyince CSS2.1 kaldrld. CSS3 ile birlikte yeniden eklenen glge
zellii bu sefer 4 deer ile geree daha yakn glgeler oluturmamz
salayacak.
103
6.10. Boluklarn korunmas (white-space)

Yaps: white-space: <deger>
Ald Deerler: normal | pre | nowrap | inherit
Uygulanabilen elemanlar: Blok seviyeden elemanlar
Kaltsallk: Var
white-space zellii elemanlarn boluklarnn nasl ilem greceini
belirler. 3 deer alr.
normal: Birden fazla boluu tek boluk gibi sayar.
pre: Birden fazla boluu birletirmez.
nowrap : <br> etiketi hari alt satra geie izin vermez.
rnek 6-9
<head>
/>
p.deneme{
white-space: pre;
}
</style>
</head>
<body>
<p class="deneme">Vestibulum
felis. </p>
<p>Vestibulum
felis. </p>
</body>
</html>
104
Internet Explorer 7 ve alt srmlerinde pre-line veya pre-wrap

deerlerini desteklemiyor. textarea eleman iin normal ve pre atamalar
pre-wrap gibi davranr. textarea eleman iin nowrap deeri pre-line
gibi davranr.
Firefox 2 ve alt srmlerinde pre-line ve pre-wrap deerlerini
desteklemiyor(bunu yerine benzer -moz-pre-wrap uygulanr.) textarea
eleman iin normal ve pre atamalar pre-wrap gibi davranr.
Opera 9.2. ve alt srmlerinde pre-line zelliini desteklemiyor.
textarea eleman iin normal ve pre atamalar pre-wrap gibi davranr.
textarea eleman iin nowrap deeri pre-line gibi davranr.
Tarayc Uyumu:
Internet Explorer 5.5+(ksmen)
Firefox 1+(ksmen)
Safari 1.3+
Opera 4+(ksmen)
CSS 2+
6.11. Metin yazma yn(direction)

Yaps: direction: <deger>
105
Ald Deerler: ltr | rtl | inherit

Balang deeri: ltr
Kaltsallk: Var
Bu zelliin aadakileri belirler:
Bloun yazma ynn belirler
Unicode ift ynllk(Unicode-bidi) iin i ielik ve st ste gelme
ynn belirler.
Tablo stunlarnn yerleim ynn belirler
Yatay tama ynn belirler
Bir blokta text-align: justify tanmlamas yapldnda son satrn
ynn belirler.
direction zelliinin satrii seviyeden elemanlar zerinde etkili olabilmesi
iin unicode-bidi zelliinin deerinin embed veya override olmas
gerekir.
Normalde bu zellik DTD ierisinde tanmlanr, ancak CSS2.1 nemine
binaen bu zellikleri eklemitir.
rnek 6-10
<head>
/>
p.bir{
direction: rtl
}
p.iki{
direction: ltr
}
</style>
</head>
<body>
<p class="bir">Vestibulum felis. </p>
<p class="iki">Vestibulum felis. </p>
</body>
</html>
106
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 9.2+
CSS 2+
6.12. ok ynllk algoritmas (unicode-bidi)

zellii
Yaps: unicode-bidi: <deger>
Ald Deerler: bidi-override | embed | normal | inherit
Kaltsallk: Yok
Baz diller sadan sola yazlrken baz diller solda saa doru yazlr. Baz
dokmanlarmzda her ikisini birden kullanabiliriz buna ok ynllk denir
ksaca bidi.
Bu zellik direction ile birlikte ok ynl bloklar idare etmemizi salar.
Eer bir sayfada birden fazla ynl blok kullanacaksak buna zel
107
tanmlamalar yapmalyz. Ayrntl bilgi iin

http://www.unicode.org/reports/tr9/ adresini inceleyiniz. Bu zellik
Unicode ok ynllk algoritmasnn i ie seviyesini ve st sten binme
kontroln belirler.
Normalde bu zellik DTD ierisinde tanmlanr, ancak CSS2.1 nemine
binaen bu zellikleri eklemitir.
Tarayc Uyumu:
Internet Explorer 5.5+(sorunlu)
Firefox 1+
Safari desteklemiyor
Opera 9.2+
CSS 2+
108
7. Artalan (Background) zellikleri
7. Artalan
(Background)
zellikleri
Artalan(Bacground) yukardaki resimde dolgu alan(padding) ve ierik

alann(paragraf) kapsar.
Artalan zellikleri ile elemanlara tek bir renk atanabildii gibi
background-image zellii ile (X)HTMLin ok zerinde eklemelerde
yaplabilir.
Artalan zelliklerini tek tek incelersek:
Artalan
Artalan
Artalan
Artalan
Artalan
Artalan
rengi (background-color)
resmi (background-image)
resim yenileme (background-repeat)
resim ball (background-attachment)
resim konumu (background-position)
(background)
7.1. Artalan rengi (background-color)

Elemanlarn artalanna bir renk atamak iin kullanlr.
Yaps: background-color: <deger>
Ald Deerler: renk | transparent | inherit
Balang deeri: transparent
Kaltsallk: Yok
transparent deeri elemann artalannn grnmesi iin kullanlr.
rnek 7-1
109
<head>
/>
<title>Artalan(Background) zellikleri</title>
p.deneme{
background-color: #ddd;
}
</style>
</head>
<body>
</body>
</html>
110
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
7.2. Artalan resmi (background-image )

Elemanlarn artalanna resim eklemek iin kullanlr.
Yaps: background-image: <deger>
Ald Deerler: url | none |inherit
Balang deeri: none
Kaltsallk: Yok
rnek 7-2
<head>
/>
body{
background-image: url(Artalan_resmi.gif)
}
</style>
</head>
<body>
</body>
</html>
111
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
7.3. Artalan resim yenileme (background-repeat)

background-repeat zellii background-image ile artalana eklenen
resmin tekrar ile zellikleri belirler.
Yaps: background-image: <deger>
Ald Deerler: repeat | repeat-x | repeat-y | no-repeat
Balang deeri: repeat
Kaltsallk: Yok
repeat [yinele]: Resim hem yatayda hem de deyde yinelenir.
repeat-x: Resim sadece yatay olarak yinelenir.
repeat-y: Resim sadece dey olarak yinelenir.
112
no-repeat [yineleme]: Resim yinelenmez; resmin sadece bir kopyas

oluturulur.
rnek 7-3
<head>
/>
body{
background: white url(Artalan_resmi.gif);
background-repeat: repeat-x;
}
</style>
</head>
<body>
</body>
</html>
113
Safari 2 ve alt srmlerinde bu zellikle ilgili baz sorunlar vardr:

bacground-repeat deeri no-repeat olarak atanm olan artalan
resimleri tekrarlamamas gerekirken tekrar yapar.
Tarayc Uyumu:
Firefox 1+
Safari 1.3+(ksmen) 3+
Opera 3.6+
CSS 1+
7.4. Artalan resim ball (backgroundattachment)

background-attachment zellii artalana eklenen resmin sayfa ile
kaymasn(scroll) veya sayfann artalanna akl(fixed) kalmasn salar.
Yaps: background-attachment: <deger>
Ald Deerler: scroll | fixed | inherit
Balang deeri: scroll
Kaltsallk: Yok
114
rnek 7-4
<head>
/>
body{
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
</body>
</html>
115
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
7.5. Artalan resmi konumu (background-position)

background-position zellii background-image ile belirlenen resmin
balang noktasn belirler. Bu zellik sadece blok seviyeli ve
yerletirilen(Bu elemanlar kendine zg boyutlar olan elemanlar olarak
tanmlanabilir. rn: IMG, INPUT, TEXTAREA, SELECT, ve OBJECT)
elemanlara uygulanr.
Yaps: background-position: <deger>
Ald Deerler: [<percentage> | <length>]{1,2} | [top | center |
bottom] || [left | center | right]
Balang deeri: 0% 0%
Uygulanabilen elemanlar: Blok seviyeli ve yerletirilen elemanlar
Kaltsallk: Yok
116
En kolay kullanm ekli;

Yatay deerler iin: left, center, right
Dikey deerler iin: top, center, bottom
Yzde deerleri ve uzunluk deerleri de kullanlr. Yzde deerleri
elemann boyutuna bal olarak grecelidir. Uzunluk deerleri de
kullanlabilir. Ancak farkl ekran znrlklerinde farkl grntlere
sebebiyet vermesi nedeni ile pek nerilmez.
Yzde deerler ve uzunluk deerleri verildiinde ilk deer yatay iindir
sonra gelen dikey deerdir. rnein %10 %60 deeri bir artalan resmi iin
verilmi ise %10 deeri yataydaki deeri %60 ise dikey olarak deerini
gsterir. 5px 10px gibi deerler verilmise resmin sol stten 5px saa ve
10px aadan balayacan belirler.
Eer yalnzca yatay deer verilmi ise, dikey deer %50 olarak kabul
edilecektir. Yzde deerler ve uzunluk deerleri eksi deerler alabilir. rn
-2px %10 gibi. Aadaki rnekler genel kullanm iin yararldr:
top left = left top = 0% 0%

top = top center = center top = 50% 0%
right top = top right = 100% 0%
left = left center = center left = 0% 50%
center = center center = 50% 50%
right = right center = center right = 100% 50%
bottom left = left bottom = 0% 100%
bottom = bottom center = center bottom = 50% 100%
bottom right = right bottom = 100% 100%
rnek 7-5
<head>
/>
body{
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
117

</body>
</html>
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
7.6. Artalan (background)

Bu zellik Artalan(background) ile ilgili tm zelliklerin bir arada kullanm
salar.
118
Yaps: background: <deger>

Ald Deerler: <background-color> || <background-image> ||
<background-repeat> || <background-attachment> ||
<background-position>
Balang deeri: Tanmsz
Kaltsallk: Yok
rnek 7-6
<head>
/>
body{
background: white url(Artalan_resmi.gif) top left fixed
repeat-x;
}
</style>
</head>
<body>
</body>
</html>
119
Tarayc Uyumu:
Firefox 1+
Safari 1.3+(ksmen) 3+
Opera 3.6+
CSS 1+
120
8. Listeleme zellikleri
8. Listeleme
zellikleri
Liste zellikleri listelerin genel grsel biimi ayarlamamz salar. lk olarak
listeleme amal kullanlsa da imdilerde men yapmnda kullanm
revatadr.
Liste
Liste
Liste
Liste
imleyici tipi (list-style-type )

imleyici resmi (list-style-image)
imleyici konumu (list-style-position)
biemi (list-style)
8.1. Liste imleyici tipi (list-style-type )

Yaps: list-style-type: <deger>
Ald Deerler: disc | circle | square | decimal | lower-roman |
upper-roman | lower-alpha | upper-alpha | none
Balang deeri: disc
Uygulanabilen elemanlar: display deeri list-item alan elemanlar
Kaltsallk: Var
list-style-type zellii list-item iaretinin tipini belirler. list-style-images
zellii none deeri aldnda veya resim grntlenemediinde kullanlr.
ekiller disc (ii dolu daire), circle (ii bo daire) ve square (kare)
deerleriyle belirtilirler. ekillerin yorumlan kullanc arayzne baldr.
Numaralama sistemleri yle belirtilir:
decimal: Onluk tabandaki saylar 1'den balar.
decimal-leading-zero: nlerine sfr konmu onluk tabandaki saylar
(01, 02, 03, ..., 98, 99 gibi).
lower-roman: Kk harflerle romen rakamlar (i, ii, iii, iv, v, vs.).
upper-roman: Byk harflerle romen rakamlar (I, II, III, IV, V, vs.).
hebrew: Geleneksel branice numaralama (Alef, Bet, ... Tet Vav, Tet
Zayin, ... Yod Tet, Kaf ...).
georgian: Geleneksel Grcce numaralama (an, ban, gan, ..., he, tan, in,
in-an, ...).
121
armenian: Geleneksel Ermenice numaralama.

cjk-ideographic: Dz sembolik (ince/Japonca) numaralama
hiragana: a, i, u, e, o, ka, ki, ...
katakana: A, I, U, E, O, KA, KI, ...
hiragana-iroha: i, ro, ha, ni, ho, he, to, ...
katakana-iroha: I, RO, HA, NI, HO, HE, TO, ...
Alfabetik sistemler yle belirtilir:
lower-latin
lower-alpha: Kk ascii harfleri (a, b, c, ... z).
upper-latin
upper-alpha: Byk ascii harfleri (A, B, C, ... Z).
lower-greek: Kk Yunan harfleri (, , , ...)
rnek 8-1
<head>
/>
<title>Listeleme zellikleri</title>
ul{
list-style-type: none
}
ol{
list-style-type: lower-roman /* i ii iii iv v gibi. */
}
</style>
</head>
<body>
<ul>
<li>Vestibulum felis.</li>
<li>Maecenas pulvinar</li>
<li>Ante convallis pellentesque tristique</li>
122
</ul>
<ol>
<li>Quisque volutpat.</li>
<li>Curabitur feugiat</li>
<li>Sapien a laoreet mollis</li>
</ol>
</body>
</html>
Internet Explorer 7 ve alt srmlerinde armenian, decimal-leadingzero, georgian ve lower-greek deerlerini desteklemiyor. lower-latin
ve upper-latin yerine lower-alpha ve upper-alpha deerlerini
destekliyor.
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
123
8.2. Liste imleyici resmi (list-style-image)

Yaps: list-style-image: <deger>
Ald Deerler: <url> | none | inherit
Balang deeri: none
Kaltsallk: Var
list-style-image zellii list-style iaretinin yerine resim koymak iin

kullanlr.
rnek 8-2
<head>
/>
ul{
list-style-image: url(liste_imgesi.gif);
}
</style>
</head>
<body>
<ul>
</ul>
</body>
</html>
124
Internet Explorer 7 ve alt srmlerinde float uygulanm liste elemannn

list-style-image ile atanm iaretleri grnmez.
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
8.3. Liste imleyici konumu (list-style-position)

Yaps: list-style-position: <deger>
Ald Deerler: inside | outside | inherit
Balang deeri: outside
Kaltsallk: Yok
list-style-position zellii list-item iaretlerin metinin iinden(inside)
veya soldan dnda(outside) m olacan belirler.
125
rnek 8-3
<head>
/>
ul{
list-style-image: url(liste_imgesi.gif);
list-style-position: inside;
}
</style>
</head>
<body>
<ul>
</ul>
</body>
</html>
126
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
8.4. Liste biemi (list-style)

Yaps: list-style: <deger>
Ald Deerler: <list-style-type> |<list-style-position> | <url>
Balang deeri:0
Kaltsallk: Var
list-style zellii list-style-type, list-style-position ve list-style-image
zelliklerinin ksa yoludur.
rnek 8-4
<head>
/>
ul {
list-style: disc outside;
}
ol {
list-style: decimal inside;
}
</style>
</head>
<body>
<ul>
</ul>
<ol>
<li>Quisque volutpat.</li>
<li>Curabitur feugiat</li>
<li>Sapien a laoreet mollis</li>
</ol>
</body>
127
</html>
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
Yukardaki zellikler genel bir bilgi vermesi asndan anlatlmtr.
Gnmzde listeleme elemanlar listeleme, men veya deiik amalarla
kullanlrken yukardaki imleyici zelliklerinden yararlanlmamaktadr.
Genel kullanm liste imleyici zelliklerini kaldrp onun yerine artalan resmi
kullanlmas eklindedir. Buradaki ama liste zelliklerinin bize
salayamad yetenekleri artalan zellii ile eriebilmemizdir. Web
sitemdeki men yapm rnekleri bu konuyu anlamnzda size daha fazla
yardmc olacaktr.
128
9. Kutu Modeli zellikleri
9. Kutu Modeli
zellikleri
CSS tm HTML elemanlarn bir dikdrtgen kutu iine konmu varsayarak
ona gre pozisyonlar ve boyutlarn kontrol eder. Bu elemanlar her zaman
bir kenar ii boluu(padding), kenar d boluu(margin), kenar
izgisi(border) ve ierik alann kapsar. Aadaki ekle bir baknz:
Kenar d boluklar(magrin) her zaman saydamdr. Kenar izgileri

ekilde( solid, dashed ve dotted) olabilir. Artalan sadece kenar izgisi alan
ierisine uygulanabilir, yani kenar ii boluu(padding) ve ierik alan
ksmn ierir.
Bir elemann toplam genilii; sol+sa kenar d boluklar, sol+sa kenar

ii boluklar, sol+sa kenar izgileri ve elemann ieriini kapsar. Kenar
d boluklar, kenar ii boluklar ve kenar izgileri tercihe dayal
elemanlardr fakat balangta bunlarn deerleri 0 olarak belirlenmitir.
Ykseklik iinde durum ayndr. st-alt kenar d boluu deerleri, st-alt
129
kenar ii boluu deerleri, st-alt kenar izgisi deerleri ve ierik alan

ykseklii toplam ykseklik deerini oluturur.
Kutu modelinin iki eleman bulunur. Blok seviyesinden elemanlar ve satrii
seviyeden elemanlar.
9.1. Genel Tanmlar

Bundan sonraki ksmlar anlamak iin kutu modelinin genel tanmlarna
aklk getirelim.
Blok seviyesinden elemanlar(Block-level element): Blok
seviyesinden elemann grn format bir kutu gibidir. Blok seviyesinden
elemanlar satrii elemanlar ve dier blok seviyesinden elemanlar
ierebilir. Tipik zellikleri yeni bir satr balangc yapmalardr. rnek: h6,
p, li vd.
Satrii seviyeden elemanlar(Inline element): Satrii seviyeden
elemanlar bir ierik gibi grnr, dier bir satrii eleman veya bir metini
iere bilir. Genelde yeni satr veya boluk oluturmazlar. rnek: a, strong,
span vd.
Normal ak(Normal flow): Bat dillerinde ve genel HTML
dokmanlarnda metin ak soldan saa, yukardan aa dorudur. Dier
diller iin ak yn deitirilebilir. HTML elemanlar normal ak dna
float ve konumlandrma zellikleri atanarak karlabilirler.
Yerletirilmeyen elemanlar(Nonreplaced element): Belli bir boyutu
olmayan dokman ieriine gre boyutu deien elemanlardr. rnek
olarak paragraf verilebilir.
Yerletirilen eleman(Replaced element): Sunucunun kendilerine belli
bir yer ayrd elemanlardr. Klasik rnei resimlerdir <img> resimler
eklendii dokmann eklendii noktasnda bulunur. Ayrca bir ok form
elemanda bu snflandrmaya girer.
Kk Eleman(Root element): Dokman hiyerarisinde en stteki
elemandr. HTML iin <html> elemandr. XML herhangi bir eleman kk
eleman olma izni verir.
Tm kutu modelleri aadaki blmleri ierir:
erik Alan: Elemann asl ieriini oluturan ksmdr. Metin ve nesneler
ierir.
Kenar ii boluu (Padding): Elemann kenar d boluudur.
130
Kenar izgisi (Border): Elemann kenar izgilerini gsterir.

Kenar d boluu (Margin): Elemann kenar d boluklardr.
Sras ile bu zellikleri inceleyelim.
9.2. Kenarlk izgisi(Border) zellikleri

Kenar izgisi(border), ierik alan ve kenar ii boluu(padding) etrafndaki
bir veya daha fazla izgiye denir.
Kenar izgisi biemi (boder-style)

border-top-style, border-right-style, border-bottom-style, borderleft-style
Kenar izgisi genilii (border-width)
border-top-width, border-right-width, border-bottom-width, borderleft-width
Kenar izgisi rengi (border-color)
border-top-color, border-right-color, border-bottom-color, borderleft-color
Kenar izgisi (border)
Srasyla incelersek:
9.2.1. Kenar izgisi biemi (border-style)

Yaps: border-style: <deger>
Ald Deerler: [ none | hidden | dotted | dashed | solid | double |
groove | ridge | inset | outset ]{1,4} | inherit
Balang deeri: tanmlama yok
Kaltsallk: Yok
border-style zellii kenarlk biemini belirlememizi salar.(rn:
dotted(noktal), double(ift) vd.) 10 farkl deeri CSS desteklemektedir.
Bu zellik kenarln grnmesi iin tanmlanmas gereklidir. Bir veya drt
deer alabilir eer drt deer alrsa srasyla st, sa, alt ve sol kenarlk
stilini belirler. Eer tek deeri varsa tm kenarlk deeri atamas yaplm
demektir. Eer iki veya deer atamas yaplm ise marginde
grdmz sralama sz konusudur.
rnek 9-1
131

<head>
/>
<title>Kutu Modeli zellikleri</title>
p.yeni {
border-style: solid;
}
</style>
</head>
<body>
<p class="yeni">Vestibulum felis. Maecenas pulvinar, ante convallis
</body>
</html>
132
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
9.2.2. border-top-style, border-right-style, border-bottom-style,

border-left-style
Yaps: border-[top,left,right,bottom]-style: <deger>
Ald Deerler: none | hidden | dotted | dashed | solid | double |
groove | ridge | inset | outset | inherit
Kaltsallk: Yok
border-top-style, border-right-style, border-bottom-style, borderleft-style border-style zelliinin her kenara ayr ayr atamasn
yapabilmek iin kullanlr.
rnek 9-2
<head>
/>
h1{
border-left-style: none;
}
</style>
</head>
<body>
<h1>Vestibulum felis.</h1>
<p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio
</body>
</html>
133
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
9.2.3. Kenar izgisi genilii (border-width)

Yaps: border-width: <deger>
Ald Deerler: [ thin | medium | thick | <uzunluk deeri > ]{1,4}
| inherit
Kaltsallk: Yok
lk olarak biemi belirledikten sonra kenarlk geniliini belirlemek iin
border-width deeri kullanlr. border-width yzde deeri alamaz.
thin [ince]: nce kenar izgisi.
medium [orta]: Orta kalnlkta kenar izgisi.
thick [kaln]: Kaln kenar izgisi.
134
Uzunluk: Kenar izgisi kalnl dorudan belirtilen (greli

olmayan/hesaplanmayan) bir deerdir ve negatif olamaz.
rnek 9-3
<head>
/>
p{
margin: 5px;
border-width: 1px;
}
</style>
</head>
<body>
</body>
</html>
135
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
9.2.4. border-top-width, border-right-width, border-bottom-width,

border-left-width
Yaps: border-[top,left,right,bottom]-width: <deger>
Ald Deerler: thin | medium | thick | <uzunluk deeri > | inherit
Kaltsallk: Yok
border-top-width, border-right-width, border-bottom-width,
border-left-width border-width zelliinin her kenara ayr ayr atamasn
yapabilmek iin kullanlr.
rnek 9-4
136
<head>
/>
h2{
border-left-width: medium;
}
</style>
</head>
<body>
</body>
</html>
137
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
9.2.5. Kenar izgisi Rengi (border-color)

Yaps: border-color: <deger>
Ald Deerler: [ <renk> | transparent ]{1,4} | inherit
Kaltsallk: Yok
border-color zellii kenarlk rengini belirler.
rnek 9-5
<head>
/>
p{
border-color: gray;
}
</style>
</head>
<body>
</body>
</html>
138
Tek deer tm kenarlk renklerini belirler, her kenar iin ayr renk
tanmlamasda yaplabilir.
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
9.2.6. border-top-color, border-right-color, border-bottom-color,

border-left-color
Yaps: border-[top,left,right,bottom]-color: <deger>
Ald Deerler: [ <renk> | transparent ]{1,4} | inherit
Kaltsallk: Yok
border-color zelliinin her kenara ayr ayr atamasn yapabilmek iin
kullanlr.
rnek 9-6
139
<head>
/>
p{
border-top-color: gray;
}
</style>
</head>
<body>
</body>
</html>
140
141
Tek deer tm kenarlk renklerini belirler, her

kenar iin ayr renk tanmlamasda yaplabilir.
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
Bir kenarl yok etmek

iin kalnlk deeri
veririz. Birde CSS2 ile
birlikte gelen transparent
zellii vardr ki bu
kenarl yok etmez
sadece grnmez yapar.
9.2.7. Kenar izgisi (border)

Yaps: border: <deger>
Ald Deerler: <border-width> | <border-style> | <renk>
Kaltsallk: Yok
border yukarda sraladmz zellikleri tek sefer de tanmlamak iin
kullanlr. Bir ksa yoldur.
rnek 9-7
<head>
h1{
border: thick solid silver;
}
</style>
</head>
<body>
commodo metus, id euismod pede quam sit amet ligula. Curabitur sit amet
tellus. Suspendisse potenti.</p>
<p>Quisque volutpat. Curabitur feugiat, sapien a laoreet mollis, leo sapien
pellentesque nisi, sed vehicula sapien orci eget libero. Fusce neque nibh,
tempor tristique, ullamcorper a, mollis vel, pede. Praesent mattis bibendum
massa. Curabitur ultricies fringilla nulla. Aliquam in risus. </p>
</body>
</html>
142
Bu zellikleri tek tek atamak isteseydik yle bir kod yazmamz

gerekecekti.
h1{
border-top: thick silver solid;
border-bottom: thick silver solid;
border-right: thick silver solid;
border-left: thick silver solid;
}
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
143
9.3. Kenar D Boluu(Margin) zellikleri

Kenar d boluu(margin) zellii bir elemann etrafndaki boluk olarak
tanmlanr. Negatif deer alabilir. Tek tek zellikler(margin-top, marginleft vd.) atanabildii gibi tek bir zellikle(margin) de tanmlama yaplabilir.
st kenar d boluu (margin-top)

Sa kenar d boluu (margin-right)
Alt kenar d boluu (margin-bottom)
Sol kenar d boluu (margin-left)
Kenar d boluu (margin)
9.3.1. st Kenar d boluu (margin-top)

Yaps: margin-top: <deger>
Ald Deerler: <uzunluk deeri > | <yzde> | auto
Balang deeri: 0
Kaltsallk: Yok
margin-top zellii elemann st kenar d boluunu belirli bir deer
kadar veya yzde olarak belirler. Negatif deer alabilir.
rnek 9-8
<head>
/>
body{
margin-top: 100px;
}
</style>
</head>
<body>
144

</body>
</html>
Internet Explorer 6da body elementi veya kapsayc blok elemanlara

genilik tanm yapldnda dikeydeki kenar d boluu(margin-top)
yzde deer kullanldnda soruna nende oluyor.
Internet Explorer 7 ve alt srmlerinde kenar d boluu kmesi sorunu
yaanmaktadr. Ayrntl bilgi iin http://www.fatihhayrioglu.com/?p=362
adresine gz atn.
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
145
9.3.2. Sa kenar d boluu (margin-right )

Yaps: margin-right: <deger>
Ald Deerler: <uzunluk deeri > | <yzde> | auto | inherit
Balang deeri: 0
Kaltsallk: Yok
margin-right zellii elemann sa kenar d boluunu belli bir deer
rnek 9-9
<head>
/>
p.diger {
margin-right: 50%;
}
</style>
</head>
<body>
<p class="diger">Quisque volutpat. Curabitur feugiat, sapien a laoreet
mollis, leo sapien pellentesque nisi, sed vehicula sapien orci eget libero.
Fusce neque nibh, tempor tristique, ullamcorper a, mollis vel, pede.
Praesent mattis bibendum massa. Curabitur ultricies fringilla nulla.
Aliquam in risus. </p>
</body>
</html>
146
Internet Explorer 5.5(IE6 garip mod dhil) blok seviyeli elemanlarn

ortalanmas iin kenar d boluu sa ve solu iin verilen auto yntemini
desteklememektedir.
Internet Explorer 6 ve alt srmlerinde float uygulanm elemanlara
uygulanan sa ve sol kenar boluu deerini iki kere uygular. Ayrntl bilgi
iin http://www.fatihhayrioglu.com/?p=131 adresine baknz.
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
9.3.3. Alt kenar d boluu (margin-bottom)

Yaps: margin-bottom: <deger>
Balang deeri: 0
Kaltsallk: Yok
147
margin-bottom zellii elemann alt kenar d boluunu belli bir deer

rnek 9-10
<head>
/>
p{
margin-bottom: 50px;
}
</style>
</head>
<body>
</body>
</html>
148

yzde deerlerinde sorun yaanyor.
adresine gz atn.
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
9.3.4. Sol kenar d boluu (margin-left)

Yaps: margin-left: <deger>
Balang deeri: 0
Kaltsallk: Yok
149
margin-left zellii elemann sol kenar d boluunu belli bir deer

rnek 9-11
<head>
/>
p{
margin-left: 20px;
}
</style>
</head>
<body>
</body>
</html>
150

desteklememektedir.
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
9.3.5. Kenar d boluu (margin)

Yaps: margin: <deger>
Ald Deerler: [<percentage> | <length> |auto]{1,4}
Balang deeri: Tanmsz
Kaltsallk: Yok
151
margin zellii yukardaki zelliklerin tek bir zellikle uygulanmas iin

kullanlr. Bir ksa yoldur.
rnek 9-12
<head>
charset=utf-8" />
h1 {
margin: 0.25in;
}
h1 {
margin: 10px 20px 15px 5px;
}
</style>
</head>
<body>
</body>
</html>
152
Yukarda h1 iin margin deerleri sralamas yledir:

margin: st sa alt sol(saat ynnde)
kili ve l kullanmda mevcuttur
h1{margin: 0.25em 0 0.5em;} /* esittir 0.25em 0 0.5em 0 */
h2 {margin: 0.15em 0.2em;} /* esittir 0.15em 0.2em 0.15em
0.2em */
p {margin: 0.5em 10px;} /* esittir 0.5em 10px 0.5em 10px */
p.close {margin: 0.1em;} /* esittir 0.1em 0.1em 0.1em 0.1em
*/
yzde deerlerinde sorun yaanyor.
desteklememektedir.
153
adresine gz atn.
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
154
9.4. Kenar i boluu (Padding) zellikleri

Kenar ii boluk(Padding) ierik alan ile kenar izgisi arasndaki alandr.
st kenar ii boluu(padding-top)
Sa kenar ii boluu (padding-right)
Alt kenar ii boluu (padding-bottom)
Sol kenar ii boluu (padding-left)
Kenar ii boluu (padding)
9.4.1. st kenar ii boluu(padding-top)

Yaps: padding-top: <deger>
Balang deeri: 0
Kaltsallk: Yok
padding-top zellii ierik alan ile st kenar izgisi arasndaki mesafeyi
belirler.
rnek 9-13
<head>
/>
h2 {
padding-top: 0.25in;
background-color:#999;
}
</style>
</head>
<body>
155
</body>
</html>
Internet Explorer 5.5 ve alt srmlerinde(Internet Explorer 6 ve 7 garip

mod dhil) kenar ii boluu(padding) deerlerini ierik alan geniliinden
sayar. Ayrntl bilgi iin http://www.fatihhayrioglu.com/?p=13 adresini
inceleyiniz.
Internet Explorer 6 ve alt srmlerinde satrii elemanlarn dikey ykseklik
deerini tam olarak gstermesi iin position:relative deeri eklenir.
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
156
9.4.2. Sa kenar ii boluu(padding-right )

Yaps: padding-right: <deger>
Balang deeri: 0
Kaltsallk: Yok
padding-right zellii ierik alan ile sa kenar izgisi arasndaki mesafeyi
belirler.
rnek 9-14
<head>
/>
h2 {
padding-right: 0.25in;
background-color:#999;
float:left;
}
</style>
</head>
<body>
</body>
</html>
157
Internet Explorer 5.5 ve alt srmlerinde (Internet Explorer 6 ve 7 garip

inceleyiniz.
Firefox 2.0.0.7 ve nceki srmlerinde iki satra uzam satrii elemalara
uygulanan padding-right deeri sorun karr. nceki satr ve mevcut
satrn her ikisinide padding uygulanr. Ayrntl bilgi iin tklaynz.
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
9.4.3. Alt kenar ii boluu (padding-bottom)

Yaps: padding-bottom: <deger>
Balang deeri: 0
Kaltsallk: Yok
158
padding-bottom zellii ierik alan ile alt kenar izgisi arasndaki

mesafeyi belirler.
rnek 9-15
<head>
/>
h2 {
padding-bottom: 0.25in;
background-color: #999;
}
</style>
</head>
<body>
</body>
</html>
159

inceleyiniz.
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
9.4.4. Sol kenar ii boluu (padding-left)

Yaps: padding-left: <deger>
Balang deeri: 0
Kaltsallk: Yok
160
padding-left zellii ierik alan ile sol kenar izgisi arasndaki mesafeyi
belirler.
rnek 9-16
<head>
/>
h2 {
padding-left: 0.25in;
}
</style>
</head>
<body>
</body>
</html>
161

inceleyiniz.
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
9.4.5. Kenar ii boluu (padding)

Yaps: padding: <deger>
Ald Deerler: <uzunluk deeri > | <yzde>{1,4} | inherit
Balang deeri: 0
Kaltsallk: Yok
padding zellii padding-top, padding-right, padding-bottom ve paddingleft deerlerini ksa yoldan atamak iin kullanlr.
rnek 9-17
162

<head>
/>
h2 {
padding: 10px;
float:left;
}
</style>
</head>
<body>
</body>
</html>
163
Kenar d boluu(margin)ndaki gibi farkl kullanm ekilleri mevcuttur.

inceleyiniz.
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
164
9.5. Boyut Tanmlama zellikleri

Kutu modeli zelliklerine devam ediyoruz. Srasyla aadaki zellikleri
inceleyeceiz:
Genilik (Width)
Ykseklik (Height)
Asgari genilik ve ykseklikler (min-width, min-height)
Azami genilik ve ykseklik (max-width, max-height)
9.5.1. Genilik (width)

Yaps: width: <deger>
Ald Deerler: <uzunluk deeri > | <yzde> | auto | inherit
Balang deeri: auto
Kaltsallk: Yok
Blok seviyeli ve yerletirilen elemanlarn(rn: img, input, textarea vd.)
tm bir genilik(width) deeri alr. Elemanlarn balangtaki genilik
deeri auto yani kendi asl geniliidir. (rnein bir resmin genilii gibi)
Yzde deeri ebeveyn eleman kstas alarak uygulanr. Negatif deeri
almaz.
rnek 9-18
<head>
/>
p.diger {
width: 200px;
}
</style>
</head>
<body>
165
</body>
</html>
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
9.5.2. Ykseklik (height )

Yaps: height: <deger>
Ald Deerler: <uzunluk deeri > | auto | inherit
Balang deeri: auto
Kaltsallk: Yok
166
Blok seviyeli ve yerletirilen elemanlarn(rn: img, input, textarea vd.)

tm bir ykseklik(height) deeri alr. Elemanlarn balangtaki ykseklik
deeri auto yani kendi asl yksekliidir. (rnein bir resmin ykseklii
gibi) Negatif deeri almaz.
rnek 9-19
<head>
/>
h2 {
height: 15px;
background-color: #CCCCCC;
}
</style>
</head>
<body>
</body>
</html>
167
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
Bir kapsayc kutunun genilik deerini azami ve asgari deerleri ile
snrlandrabiliriz. Bu zellikler CSS2 ile birlikte gelmitir.
9.5.3. Asgari genilik ve ykseklikler (min-width, min-height)

Yaps: min-width, min-height: <deger>
Balang deeri: 0
Uygulanabilen elemanlar: yerletirilmeyen satrii elemanlar ve tablo
elemanlara
Kaltsallk: Yok
min-width, min-height kapsayc kutunun asgari alaca deerleri
belirtmek iin kullanrz.
rnek 9-20
168
<head>
/>
p.diger {
min-height:150px;
}
</style>
</head>
<body>
</body>
</html>
169
Tarayc Uyumu:
Internet Explorer 6(desteklemiyor), 7+
Firefox 1+
Safari 1.3+(ksmen), 2+
Opera 6+
CSS 2+
Ayn ekilde max-width ve max-height tanmlamalarda yaplr.
9.5.4. Azami genilik ve ykseklik (max-width, max-height)

Yaps: max-width, max-height: <deger>
Ald Deerler: <uzunluk deeri > | <yzde> | none | inherit
Balang deeri: 0
Uygulanabilen elemanlar: yerletirilmeyen satrii elemanlar ve tablo
elemanlara
Kaltsallk: Yok
max-width, max-height kapsayc kutunun azami alaca deerleri
belirtmek iin kullanrz.
rnek 9-21
170
<head>
/>
p.diger {
max-width: 250px;
}
</style>
</head>
<body>
</body>
</html>
171
Tarayc Uyumu:
Internet Explorer 6(desteklemiyor), 7+
Firefox 1+
Safari 1.3+
Opera 6+
CSS 2+
yle bir sonumuz vardr ki oda Internet Explorer(IE)n 7. srmnden
sonra bu zellikleri desteklemeye balamasdr. Bu ok kullanl zellikleri
bu nedenden dolay kullanmamazlk yapmayacaz tabi.
IE iin bir zm vardr. expression() zellii bu zellik sadece IE
tarafndan yorumlanr. Bu zellik dinamik zellik olarak tanmlanr. Yani bu
kod normalde bir javascript kodudur.
rnek 9-22
<head>
/>
#icerik{
min-width: 200px;
max-width: 400px;
width: expression(document.body.clientWidth < 200?
"200px" : document.body.clientWidth > 400? "400px" : "auto");
}
</style>
</head>
<body>
<div id="icerik">Quisque volutpat. Curabitur feugiat, sapien a laoreet
Aliquam in risus. </div>
</body>
</html>
172
Yukardaki tanmlamada css ierisinde javascript komutlar kullanlmtr.

Bu tanmlamalar sadece IE anlayacaktr ve uygulayacaktr. Kodda eer
genilik belirtilen maksimum deerden byk ise atanan deeri alacak
deilse auto deeri alacaktr.
Ayrca min-height iin daha ksa bir zm vardr.
#menu {
min-height:500px;
height:auto !important;
height:500px;
}
173
9.6. Grsel Sonu zellikleri

Kutu elemanlarn grnmne eitli etkiler yapan zellikleri greceiz.
CSS2 ile birlikte gelen bu zellikler aada sralanmtr.
overflow - tama
clip - krpma
visibility - grnrlk
9.6.1. Tama (Overflow)

Yaps: overflow: <deger>
Ald Deerler: visible | hidden | scroll | auto | inherit
Balang deeri: visible
Uygulanabilen elemanlar: Blok seviyesinden elemanlar ve
yerletirilen elemanlara
Kaltsallk: Yok
Trkeye tamak(overflow) olarak evirdiimiz bu zellik snrlarn
belirlediimiz kutu elemannn ieriinin snrlar amas durumunda nasl
davranacan bildiren bir zelliktir. zellie atanan deerleri tek tek
incelersek
inherit - kaltsallk st elemann deerini alabilir

visible - kutu snrlar dna taan alanlar gster
hidden - kutu snrlar dna taan alanlar gizle.
scroll - kutu snrlarn taan ksm kaydrma ubuu ile ulamamz
salar.
auto - kutu snrlarn amas durumunda scroll ile ayn etkiyi yapar.
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 7.5+
Safari 1.2
CSS 2+
overflow:visible Overflow'n balang deeri visible'dr. Bu deer tama
olan ksmlarn gsterilmesini salar.
174
rnek 9-23
<head>
/>
<style>
div#solMenu {
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 120px;
background: #bbbbbb;
overflow: visible;
}
</style>
</head>
<body>
<div id="solMenu">
<ul>
<li><a href="">Ana sayfa - Web sitesinin al sayfas</a></li>
<li><a href="">rnler</a></li>
<li><a href="">Dierleri</a></li>
</ul>
</div>
</body>
</html>
175
overflow zelliinin deeri visible olduu iin ierik tamasna ramen

taan blmler gsterilmitir.
overflow: scroll eer ieriin tamasn engellemek istiyorsak ama
yinede taan ksmlara ulalmas iin kaydrma ubuu kmas iin
kaydrma ubuu(scroll) zellii ekleriz.
rnek 9-24
<head>
/>
<style>
div#solMenu {
position: absolute;
top: 10px;
left: 10px;
176
width: 200px;
height: 120px;
overflow: scroll;
}
</style>
</head>
<body>
<div id="solMenu">
<ul>
</ul>
</div>
</body>
</html>
177
overflow: hidden eer overflow:hidden deeri atarsak. Snrladmz

kutunun dna taan ksmlar gsterilmeyecektir.
rnek 9-25
<head>
/>
<style>
div#solMenu {
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 120px;
background: #bbb;
overflow:hidden;
178
}
</style>
</head>
<body>
<div id="solMenu">
<ul>
</ul>
</div>
</body>
</html>
179
overflow: auto Son olarakta otomatik deeri vardr. Bu deeri ataynca

kutu ieriine gre otomatik ilem yapacaktr. Eer tama olmuyorsa
kaydrma ubuu kmayacaktr. Ama eer ierik tayorsa kaydrma
ubuu kacaktr.
rnek 9-26
<head>
/>
<style>
div#solMenu {
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 120px;
overflow:auto;
}
</style>
</head>
<body>
<div id="solMenu">
<ul>
</ul>
</div>
</body>
</html>
180
Dikkat ederseniz overflow: scroll'dan farkl olarak sadece dikey kaydrma

ubuu kmtr. Yatayda bir tama olmad iin yatay kaydrma ubuu
kmamtr.
Safari'nin eski srmlerinde sorun karyor Javascript ile bir zm var.
http://blog.deconcept.com/2005/03/25/safari-and-links-to-elements-inoverflow-auto-content
Operadaki sorun iin ise sadece min-height ve min-width zelliklerini
kullanmak yeterli. http://nontroppo.org/test/Op7/overflowbug.html
Bunlarn dnda Internet Explorer'un tescilledii ve CSS3 standartlarnda
yer alan iki adet zellik daha vardr. overflow-x ve overflow-y
overflow-x ve overflow-y: Internet Explorer5x ve zeri srmlerden
itibaren destekledii bu zellikler aslnda overflow gibi alr. Buradaki x
ve ydende anlald gibi overflow zelliini yatay ve dikey olarak ikiye
ayran zelliklerdir. overflow-x zellii yatayda tama olmas durumunda
181
taan ksmlara uygulanacak zellikleri(visible, scroll, hidden ve auto)

atmamz salar. overflow-yde dikeyde ayn eyi yapar. Firefox'unda 1.1
srmnden itibaren bu zellikleri desteklemesi kullanlabilirliini
arttrmtr. Tabi biraz daha beklemekte yarar var.
Tarayc Uyumu:
Firefox 1+
Opera 7.5+
Safari 3
W3Cs CSS Level 3+
CSS Profile 3.0
9.6.2. Krpma (clip)
Yaps: clip: rect(<st>,<sa>,<alt>,<sol>)
Ald Deerler: rect(top, right, bottom, left) | auto | inherit
Balang deeri: auto
Uygulanabilen elemanlar: mutlak konumlandrma uygulanm
elemanlar (CSS2'den itibaren Blok seviyesinden elemanlar ve
yerletirilen elemanlara )
Kaltsallk: Yok
Tarayc Uyumu:
182

Firefox 1+
Safari 1.3+
Opera 3+
CSS 2+
clip, elemann ieriinin belli bir blmnn
gsterilmesi salar. Balang deerinin auto
atanm olmas herhangi bir krpmann
olmayacan gsterir.
Resim dzenleme aralarnda yaptmz
krpma iini CSS yardmyla yapmamz
salayan bu zellii Javascript ile birlikte
kullanarak ok gzel uygulamalar yapabiliriz.
Clip'e atanan deerler em cinsinden
verilerek esnek sonular elde edilebilir.
Ayrca negatif deerlerde alabilir. Negatif
deer atandnda eleman kutusunun dna
doru krpma yapacaktr.
W3C standartlar
belirlerken
konumlandrmalar
arasnda virgl
konmasn neriyor.
Ancak garip bir ekilde
IE virgl kullanlan
rnekleri normal modda
farkl yorumlamaktadr.
Acayip modda ise doru
yorumlamaktadr. Ne
yapalm bizde tm
tarayclara uygun olmas
iin virgl
kullanamayacaz
183
Bir rnek yapalm.

CSS kodu:
rnek 9-27
<head>
/>
<style>
.kirpma{
position: absolute;
clip: rect(50px 130px 153px 40px);
}
184
</style>
</head>
<body>
<img src="http://www.fatihhayrioglu.com/images/koy_06.jpg"
alt="ahmet emice" /><br />
<div class="kirpma">
<img src="http://www.fatihhayrioglu.com/images/koy_06.jpg"
alt="ahmet emice" />
</div>
</body>
</html>
9.6.3. Grnrlk (visibility)

Yaps: visibility: <deger>
Ald Deerler: visible | hidden | collapse | inherit
Balang deeri: visible
Uygulanabilen elemanlar: tm elemanlara
185
Kaltsallk: Yok
Tarayc Uyumu:
Firefox 1+
Safari 1.3+(ksmen)
Opera 3.6+
CSS 2+
Grnrlk(visibility) zellii nesnelerin grnmn belirler. Deeri
visible ise eleman grnr. Eer deeri hidden ise eleman grnmezdir.
Eer bir elemann grnrlk deeri hidden olarak atanm ise eleman
sayfa yapsndaki yeri korur ancak gzle grlmez.
rnek 9-28
<head>
/>
<style>
body {
font-family: sans-serif;
font-weight: bold;
font-size: 14px;
}
</style>
</head>
<body>
<h1 style="visibility: visible">Grnr Balk</h1>
<h1 style="visibility: hidden; background-color: #f00; border:1px
solid #000; margin:20px 0; padding-top:10px;">Grnmez
Balk</h1>
<h1 style="visibility: visible">Grnr Balk</h1>
<p style="font-size: large">Grnr metin paras<b style="visibility:
hidden">grnmez metin paras</b> ve buras grnyor.</p>
</body>
</html>
186
rnekte grdmz gibi eleman grnmedii halde sayfadaki yerini

korumaktadr. Ayrca gizli nesneye atanan kenarlk ve Artalan rengide
grnmemektedir. Ancak elemann konumu etkileyen kenar d
boluu(magrin) ve kenar ii boluu(padding) deeri grnmese de
sayfay etkilemektedir.
Ata eleman grnmez olan bir ocuk elemana eer grnr zellii
atanm ise ata eleman grnmez ancak ocuk eleman grnr. Bu ters
bir durum olarak grnr ancak bu bize avantaj salad durumlarda yok
deildir. rnek yaparsak
CSS kodu
rnek 9-29
187
<head>
/>
<style>
p.gorunmez {
visibility: hidden;
}
p.gorunmez strong {
visibility: visible;
}
</style>
</head>
<body>
<p class="gorunmez"> <strong>Lorem ipsum dolor sit amet</strong>,
consectetuer adipiscing elit. Cras sem. In sagittis mauris eu turpis. Mauris
ut lorem nec pede consequat suscipit. </p>
</body>
</html>
188
visiblity: collapse zellii vardr. collapse tablo elemanlar iin hidden

etkisi yapar. Ancak burada bir fark var gizlenen elemanlar yerini korumaz.
Ayrca bu zellii tm tarayclar desteklemiyor, bunun yerine display:none
zellii kullanlr.
189
10. Yzen kutu ve Konumlandrma zellikleri
10. Yzen kutu ve

Konumlandrma
zellikleri
10.1. Yzen kutu zellikleri
CSS ile web sitesi kodlamann en nemli zelliklerinden iki tanesidir float
ve clear. Float bir eleman Normal Akn dna karmak iin kullanlan bir
yntemdir. Bir biri ardna sralanm elemanlara float uygulandnda
elemanlar eer yeterli alan varsa yan yana dizilirler. Float Dinamik
Greceli Konumlandrma gibidir ve bu amala kullanlabilir.
Clear zellii ile float uygulanm elemandan sonraki elemanlara float
etkisini durdurmamz mmkndr. rnein iki paragrafnz olsun ve
bunlardan sadece ilkini float uygulanm elemann yanna koymak
istiyorsunuz, bu durumda ikinci paragrafa clear zellii atadnzda bu
eleman float uygulanm elemann altnda konumlanacaktr.
10.1.1. float zellii

Yaps: float: <deger>
Ald Deerler: left | right | none |inherit
Balang deeri: none
Kaltsallk: Yok
float zellii bir eleman(img, table, div vd.) konumunu belirlemek(saa
veya sola ) iin kullanlr. Siz bir elemana flaot:left deeri verirseniz dier
elemanlar o elemann sandan akar. Bu HTML3,2 deki resme(img)
uygulanan align="left" ve align="right" ile zde bir zelliktir. Ancak
CSS 1 tm elemanlara float zellii vermeyi desteklemiyordu. HTML 3,2
sadece img ve table iin bu zellii kullanmamza izin veriyordu. float
zellii CSS ile tablosuz web sitesi oluturma metodunun en nemli
elerinden biridir.
rnek 10-1
<head>
190
/>
<title>Untitled Document</title>
<style>
p img {
float: right;
margin: 25px;
}
</style>
</head>
<body>
<p><img src="http://www.fatihhayrioglu.com/images/koy_01.jpg"
width="250" height="165" alt="Memleket" />Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. Fusce eu nisi at sapien semper
tincidunt. Maecenas vel leo. Phasellus condimentum, felis eget rutrum
aliquam, augue dolor commodo enim, eu vestibulum lacus tellus vitae
ante. Praesent accumsan elit ac elit. Cras sagittis sagittis elit. Duis odio
metus, aliquam et, feugiat vel, interdum eu, nisl. Vestibulum ut velit.
Nulla placerat. Vivamus eleifend placerat neque. Nam risus massa,
interdum ut, vulputate mattis, sagittis non, dolor. Vivamus pretium justo
quis nunc. Nullam molestie, nisi quis aliquet vulputate, elit metus porta
libero, vel laoreet ante massa suscipit justo. Nullam hendrerit scelerisque
tellus. Nulla porta, est sed imperdiet consectetuer, dui urna laoreet nibh,
a varius sapien nisi vel nisl. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi eu libero ut lectus tempor lacinia. Nulla facilisi.</p>
</body>
</html>
Tarayc Uyumu:
191
Firefox 1+
Safari 1.3+
Opera 3.6+
CSS 1+
Bir elemana float uygulandnda, float uygulanan kutu kapsayc kutunun
veya dier float kutusunun d kenarnn sana veya soluna kaydrlabilir.
Float uygulanan kutu, dokmann normal aknn dna kacaktr.
Dokmandaki normal kutular float eleman burada yokmu gibi normal
akna devam edeceklerdir.
Aadaki ekilde grld gibi balangta normal ak iinde bulunan
1.kutu float:right zellii ile sa tarafa kaym ve normal aktaki
elemanlarn ak 1.kutu yokmu gibi devam etmitir.
Aadaki ekilde float:left tanmlamas yaplarak 1.kutu kapsayc

kutunun en soluna dayanmtr. Dier iki kutu ise normal akna devam
etmektedir.
p {float:left; width:200px; margin:0;}
img {float:left; margin:0 4px 4px 0;}
Burada her iki elemanada float uygulanarak metinin resmi sarmasna son
verilmitir. Bu oklu kolon oluturma tekniinin basit bir rneidir. Float
uygulanan her eleman satr boyunca yan yana dizilecektir.
192
Eer kapsayc kutu genilii her nn saca kadar deil ise sondaki
kutu kendiliinden aa kayacaktr. Eer kutular farkl ykseklikte ise
ykseklii dk olan kutudan sonra gelen kutu bunun altnda devam
edecektir. Bu durumu dzeltmek iin clear zellii kullanlr bunu aada
greceiz.
10.1.2. clear zelii

Yaps: clear: <deger>
Ald Deerler: none | left | right | both
Balang deeri: tanmsz
Kaltsallk: Yok
Resim ve metin elemanlar dier elemanlara gre floting eleman olarak
tanmlanr. clear zellii floating uygulanmayan elemana ke tanm
yapar. left deeri uyguland eleman floating elemann bir alt soluna
atar, right zellii benzer ekilde saa atar, none zellii elemann
balang deerini geri dndrr ve both deeride iki floating elemann
aasna atar. clear zellii CSS ile tablosuz web sitesi oluturma
metodunun en nemli elerinden biridir.
193
rnek 10-2
<head>
<title>Clear</title>
#sol {
width: 100px;
float: left;
background: #A2E7D7;
padding: 1px;
margin:0;
}
#temizle {
clear: left;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce eu
nisi at sapien semper tincidunt. Maecenas vel leo. Phasellus
condimentum, felis eget rutrum aliquam, augue dolor commodo enim, eu
vestibulum lacus tellus vitae ante. Praesent accumsan elit ac elit. </p>
<p id="sol">Cras sagittis sagittis elit. Duis odio metus, aliquam et,
feugiat vel, interdum eu, nisl. Vestibulum ut velit. Nulla placerat. Vivamus
eleifend placerat neque. </p>
<p>Nam risus massa, interdum ut, vulputate mattis, sagittis non, dolor.
Vivamus pretium justo quis nunc. Nullam molestie, nisi quis aliquet
vulputate, elit metus porta libero, vel laoreet ante massa suscipit justo.
Nullam hendrerit scelerisque tellus. </p>
<p id="temizle"><code>clear: left</code> uygulanan eleman.</p>
<p>Nulla porta, est sed imperdiet consectetuer, dui urna laoreet nibh, a
varius sapien nisi vel nisl. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi eu libero ut lectus tempor lacinia. Nulla facilisi.</p>
</body>
</html>
194
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 4+
CSS 1+
10.2. Konumlandrma zellikleri

CSS ile web sayfas kodlamann nemli konusu kutu modeli,
konumlandrma(positioning) ve yzen kutu zellii konulardr.
Burada CSS ile konumlandrma hakknda bilgi vermeye alacaz.
Konumlandrma zellikleri HTML elemanlarnn sayfa ierisindeki konumu
belirlememize yarayan zelliklerdir.
CSSde temel konumlandrma ekli vardr: normal ak(position:static
ve position:relative), float ve mutlak konumlar(position:absolute). Tm
elemanlar balangta normal ak eklinde konumlandrlmtr.
Normal Ak
Eer sayfalardaki elemanlara herhangi bir konumlandrma yaplmam ise
veya float deeri verilmemi ise sayfaya normal ak konumlandrmas
uygulanr. Sayfada ilk eleman en stte son elemanda en sonda olacak
ekilde sra ile aa doru sralanacaktr.
195
Satrii kutular yatay olarak tasarlanr. Yatay boluk kenar d

boluu(margin), kenar i boluu(padding) ve kenar izgisi ile hesaplanr.
Bu nedenle dikey kenar d boluu(margin), kenar i boluu(padding) ve
kenar izgisi deerleri etkisizdir.
10.2.1. Konumlandrma zellii (position)

Yaps: position: <deger>
Ald Deerler: static | relative | absolute | fixed | inherit
Balang deeri: static
Kaltsallk: Yok
Tarayc Uyumu:
Internet Explorer 4+(ksmen, IE4 den sonra absolute, relative ve static
deerlerini destekliyor. IE7 ile birlikte fixed da destekliyor)
Firefox 1+
Safari 1.3+
Opera 5+
CSS 2+
10.2.2. st, sa, alt ve sol (top, right, bottom, left)

Yukarda tanmladmz konumlandrma zelliklerinden relative, absolute
ve fixed deerini alan elemanlar st, sa, alt ve sol zelliklerine bal
olarak konumlandrlrlar.
Yaps: top, right, bottom, left : <deger>
Ald Deerler: <uzunluk> | <yzde> | auto | inherit
Balang deeri: auto
Uygulanabilen elemanlar: postion uygulanan elemanlara
Kaltsallk: Yok
Tarayc Uyumu:
196
Internet Explorer 4+(ksmen yzde ve uzunluk deerlerini , IE6 dan sonra

inherit hari hepsini)
Firefox 1+
Safari 1.3+
Opera 5+
CSS 2+
Greceli Konumlandrma(position:relative)
Greceli konumlandrma anlalmas kolay bir konudur. Bir elemana
greceli bir deer verdiiniz de o bulunduu yeri dikkate alarak verilen
deerleri uygulayacaktr. Bir elemann(greceli) balang noktasn dikey
ve yatay olarak deitirebiliriz. Eer biz elemann st(top) deerine 20px
tanmlarsak eleman bulunduu yerden 20px aaya kayacaktr, eer
elemann sol(left) deerini 20px olarak tanmlarsak elemanmz soldan
20px saa doru kayacaktr.
p#FarkliParagraf{
position: relative;
left: 20px;
top: 20px;
}
Greceli konumlandrma kullanlarak yeri belirlenen bir elemann

balangtaki konumundaki boluu ve dier elemanlarla arasndaki
mesafeyi koruyacaktr.
Mutlak(Absolute) Konumlandrma
Greceli konumlandrma Normal Akn bir parasdr. Aksine Mutlak
Konumlandrmada uygulanan eleman bulunduu yere boluk
brakmayacaktr. Dier elemanlar normal aktaki yerlerini bu eleman yok
sayarak devam edeceklerdir. Aadaki ekilde grld gibi
197
Mutlak konumlandrlm elemann konumu en yakndaki st elemann

konumuna baldr. Eer bir ata elemann konumu belirlenmemise
elemanmz ana bloa gre konumlanacaktr. Mutlak konumlandrma HTML
eleman ve sayfa znrln ile ilikilidir.
Greceli olarak konumlandrlm bir elemann iindeki Mutlak
Konumlandrlm bir eleman ierik blounun st, sa, sol ve altndan
hizalandrlabilir. Bu kullanm bize birok uygulamada yardmc olacaktr ve
bu kullanm ile ok gzel sonular elde edeceiz.
nsanlarn konumlandrma ile ilgili genel problemleri hangi konumlandrma
seeneinin ne ie yaradn unutmalardr. Greceli Konumlandrma
sayfadaki elemann balang durumuna gre greceli bir durumda
olduunu, oysa Mutlak Konumlandrmann en yakn ata elemana veya
ierik blouna gre greceli deer ierdiidir.
Mutlak Konumlandrma ile yerletirilmi eleman sayfada eleman normal
akn dna karr. Bu eleman dier elemanlarn zerine binecektir. Bu
stte kalma altta kalma iinide z-index zellii ile hallede biliriz. z-index
deeri byk olan eleman stte kk olan eleman ise altta kalacaktr.
rnein geni bir blok iindeki bir paragraftaki yazlarn sa ve altta
olmasn istiyorsak. Dtaki ierik kutusunu greceli konumlandrp iindeki
paragraf mutlak konumlandrarak bu ii halledebiliriz.
#adresler {
width: 700px;
height: 100px;
position: relative;
}
#adresler .tel {
position: absolute;
right: 10px;
bottom: 10px;
text-align: right;
198
}
..
<div id="adresler">
<p class="tel">Tel: 0845 838 6163</p>
</div>
Not:Bu kullanm gelimi tarayclar iin geerlidir. IE 5.5 ve IE

6(Windows)da bu sorun karr. Sorunu engellemek iin ykseklik ve
genilik tanm yaplmaldr.
Mutlak konumlandrma sayfa planlamas yaparken ok kullanlr. zellikle
greceli konumlandrlm bir ata eleman varsa. Tm siteyi sadece Mutlak
Konumlandrma ile planlayabilmemiz mmkndr. Bunun iin tm
elemanlarn belirli boyutlandrma ilemleri yaplmas arttr tabi bu
elemanlarn st ste binmesini engellemek iin. nk Mutlak
Konumlandrlm bir eleman dokman ak dna akacaktr ve normal
aktaki eleman kutularna etki etmeyecektir. Eer siz Mutlak
Konumlandrdnz eleman geniletmek isterseniz rnein yaztipi
boyutunu arttrdnzda eleman kapsayan kutu normale gre genilese de
etrafndaki elemanlarn aktaki yeri deimeyecektir.
Sabit Konumlandrma (position:fixed)

Sabit konumlandrma Mutlak Konumlandrmann bir alt kategorisidir. Sabit
konumlandrlm elemann sayfadaki grnm ok farkldr. Bunu
zellikle web sayfasnda bir elemann konumunu sabitlemek iin
kullanabiliriz. Sabit konumlandrma ile yerletirilmi eleman belirtilen
yerde asl kalacaktr. Web taraycsnn kaydrma ubuu aa yukar
kaydrlmas ile Sabit Konumlandrma ile yerletirilmi elemann yeri
deimeyecektir ve sabit kalacaktr. Ne yazk ki IE 6 bu zellii
desteklemiyor(dzeltmesini greceiz). IE 7 strict yorumlaycs
kullanlyorsa destekliyor dier hallerde desteklemiyor.
Sabit konumlandrmay sayfann belli bir alann sabitleyip dier alanlar bu
ksmn yanndan, altndan kaydrmak iin kullanrz genelde.
Aslnda bunun iin CSS bize position:fixed kodunu sunmaktadr. Ancak
bu kodu IE6 ve nceki srmlerde desteklememesi bize alternatif
zmler aramaya sevk ediyor.
lk metodumuz normal konumlandrma zelliinin fixed uygulanm
eklidir.
rnek 10-3
199
<head>
body {
margin:0;
padding:0;
}
div#ustKisim {
position:fixed;
background: gray;
color: yellow;
height:50px;
width:100%;
top:0;
left:0;
}
div#icerik {
margin:75px 0 0 0;
}
</style>
</head>
<body>
<div id="ustKisim">Lorem ipsum dolor sit amet</div>
<div id="icerik">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nec
erat. Fusce magna massa, nonummy eget, aliquam tempus, imperdiet
vel, odio. Sed mauris. Quisque sodales urna vitae lorem. Vestibulum
aliquet, odio aliquam convallis lobortis, turpis metus semper ligula, ut
vulputate sem justo eu quam. Sed feugiat, lectus sit amet porttitor
auctor, nulla odio volutpat nisl, sit amet egestas augue diam at urna. Sed
justo arcu, luctus eget, porta in, auctor sit amet, massa. Integer
interdum. Nunc condimentum scelerisque enim. Pellentesque orci.
Maecenas at neque. Sed non diam ac turpis pretium dictum. Phasellus
ligula felis, aliquet nec, tristique non, posuere a, magna. Duis eu quam
quis tortor vehicula sodales. Donec et mi eget augue bibendum interdum.
Proin dapibus odio.</p>
.
</body>
</html>
Batada belirttiimiz gibi buradaki en byk sorunumuz IE6 ve daha eski

srmlerde bu kodun almamasdr. Bundan sonraki metot buna zm
aramak iindir.
IE6da alan postion:fixed metodu
Bu metot IEun css iinde expression() komutunu yardm ile javascript
kodu iletmemize izin vermesi prensibine dayanr. Bizde bu metotta bu
200
komut yardm ile position:fixed sorununu zeceiz. expression()

yardm ile daha nce IEnin min-width ve min-height sorununu
zdmz hatrlayn.
rnek 10-4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<head>
/>
<title>Sabit Konumlandrma</title>
<style>
body {
background: #ffffcc;
font: 12px sans-serif;
margin: 0;
padding: 0;
}
div#ustAlan {
width: 100%;
height: 100px;
background: pink;
position: fixed;
top: 0;
left: 0;
z-index:100;
}
#icerik{
position:absolute;
top:105px;
}
</style>
<![if lt IE 7]>
<style>
body {
background: #ffffcc url(http://) fixed;
}
div#ustAlan {
position: absolute;
top: expression(eval(documentElement.scrollTop));
}
</style>
<![endif]>
</head>
<body>
<div id="ustAlan">Sabit Konumlandrma</div>
<div id="icerik">
201
<p>Lorem ipsum dolor sit amet .</p>

</div>
</body>
</html>
Yukardaki kodu iki ksmda inceleyebiliriz. Birinci ksm ilk rnekte olduu
gibi position:fixed kullanlan IE7, FF, Opera ve Safari iin yazlan
ksmdr. kinci ksm IE7den nceki srmleri belirten artl koul
ierisindeki kodlamadr. Bu srmlerde position:fixed desteklenmedii
iin postion:absolute deeri atanm ve st deerimizi(top) javascriptin
documentElement.scrollTop deeri yardm ile belirlenip sabitlenmitir.
Ayrca alt alan sabitlemek iin
bottom: auto;
top: expression((documentElement.scrollTop +
documentElement.clientHeight this.clientHeight));
Kodlamas kullanlr.
Sabitlemek istediimiz nesneyi stten 10piksel aada sabitlemek iin
top: expression(eval(documentElement.scrollTop) + 10)
eklinde kodlarz. Bu kodlama teknii kullanlarak birok farkl ablon elde
edilebilir.
Bu yntemin baz sorunlar vardr, bunlara deinmeden gemeyelim.
202
Bu metot IE5de ve IE7, IE6da garip modda almaz.

Bu metot javascriptin hizmet d brakld tarayclarda almaz.
background: url(http://) fixed; anlamsz kodu kullanlmaktadr.
Bu kod kaydrma ubuu hareket ettike sabitlenen nesnenin
kpramamas iindir.
Bunun dnda birok alternatif yntem vardr. Benim deneyip en son

kullanmaya karar verdiim metot bu olduu iin sizlere bu kodu
gsterdim.
10.3. z-index zellii

z-index, konumlandrma elemanlar uygulanm katmanlarn z-eksenindeki
konumu belirlemek iin kullanlr.
z-index tm elemanlara uygulanamaz sadece konumlandrma deeri
atanm elemanlara uygulanr. Bunun anlam eer bir eleman ayn zekseni zerinde ste veya alt sraya atmak istiyorsanz ilk olarak
konumlandrma deeri atamalsnz.
z-index deeri dokmanmzdaki elemanlarn istiflenme sralarn belirler.
z-index elemanlar z-ekseninde nerede duracanz belirler, stte veya
altta. z-indeks deeri kk olan elemanlar altta byk olan elemanlar ise
stte grnecektir. Sitenizi kodlarken birok yerde z-index ihtiya
duymayz nk normal sayfa aknda elemanlar yan yana durduu iin
byle bir zellie ihtiya yoktur, ne zamanki elemanlara konumlandrma
deeri tanmladmzda elemanlar bir biri zerine bindiinde z-index
deerine ihtiya duyarz. z-index mutlak, greceli ve sabit konumlandrma
atand veya elemana eksi deer verilerek konumu deitirildiinde
uygulanr.
203
Yaps: z-index: <deger>

Ald Deerler: <saysal deer > | auto | inherit
Balang deeri: auto
Uygulanabilen elemanlar: konumlandrlm elemanlara
Kaltsallk: Yok
Tarayc Uyumu:
Internet Explorer 4+(ksmen, IE4 den sonra auto ve saysal deerleri
destekliyor)
Firefox 1+
Safari 1.3+
Opera 5+
CSS 2+
Konumlandrma deeri relative, absolute ve fixed uygulanm katmanlarn
grnrln z-index ile ayarlayabiliriz.
div{
position:absolute;
width:150px;
height:150px;
}
div.bir {
background: #FEB3BE;
border:2px solid #CC8B94;
top: 0;
204
left: 0;
}
div.iki {
background: #E5ECF9;
border:2px solid #BCCCEB;
top: 10px;
left: 10px;
}
Yukarda rnekte grld gibi katmanlar st ste sralanmtr.

Birbirinden 10px st ve 10px soldan mesafe braklmtr. stte kalan
katman alttakileri gizlemitir. Tm katmanlarn z-index deeri
atanmamtr bu nedenle balang deeri olan z-index:auto deerini
almlardr.
<body>
<div class=kapsul>
<div class=bir></div>
<div class=iki></div>
</div>
</body>
z-index deeri otomatik olduu iin her katman Htmldeki srasna gre
yerlemitir. lk bata yazlm olanlar altta sonrakiler stte olacak ekilde
sralanmtr.
205
Eer katmanlar istediimiz sra ile gstermek istiyor isek her katmana
srasna gre saysal deer atamalyz. Yksek deer alan katmanlar stte
dk deer alan katmanlar ise altta kalacaktr. Buna gre istediimiz
grnty elde etmek iin z-index deerleri vermeliyiz.
Yukarda yaptmz rnekte alttaki krmz katman ste karmak iin zindex deerini 2 versek. Mavi katmann z-index deerini 1 verirsek
katman grnmn tersine dnecektir.
div{
position:absolute;
width:150px;
height:150px;
}
div.bir {
background: #FEB3BE;
border:2px solid #CC8B94;
top: 0;
left: 0;
z-index:2
}
div.iki {
background: #E5ECF9;
border:2px solid #BCCCEB;
top: 10px;
206
left: 10px;
z-index:1
}
ie girmi katmanlarda z-index davranlar farkldr. ie gemi

katmanlardaki z-index:auto deeri gibi davranr ve saysal atamalar
dikkate almaz.
<body>
<div class=kapsul>
<div class=bir><div class=iki></div></div>
</div>
</body>
z-index deeri yksek olmasna ramen .bir snfn alan katmana altta
kalacaktr. nk i ie gemi elemanlarda z-indexe atanan saysal
deerler geersizdir. Sralama z-index:auto ya gre yaplr.
Sonu olarak z-index zelliinin ok kullanl ancak sorunlar ok bir
zellik olduunu dnyorum. Birok makalede istediim manada detayl
bir z-index anlatm bulamadm itiraf etmeliyim. Ancak kodlama
yaparken aklmzda olmas gereken kurallar kavrarsak z-index zelliini
daha bilinli kullanacamz kesin:
207
z-index deeri; ayn z-ekseninde bulunan(kapsayan elemanlar hari)

katmanlarn altta m stte mi kalacanz belirlemek iin kullanlr.
z-index sadece position deeri relative, absolute ve fixed olan
nesnelere uygulanr.
Saydamlk deeri(opacity) 1den kk verilen nesnelerde z-index
kullanm daha kolay anlalr.
Konumlandrma uygulanm elemanlarda zindex etkileri
Mevcut sralama durumunda elemann

srasn belirler
Elemann kendi ksmndaki durumun
belirler
z-index eksi deerlerinde

Firefox sorun karyor.
Firefox 3da sorun
giderilmi.
Eer z-index deeri atanmam ise z-eksenindeki arkadan ne doru

sralama aadaki gibidir:
208
Normal aktaki kutular koddaki sraya gre sralanr

float uygulanm kutular
Konumlandrma uygulanm elemanlarda ise kodlamadaki sraya
gre
10.4. display zellii

Yaps: display: <deger>
Ald Deerler: none | inline | block | inline-block | list-item | runin | table | inline-table | table-row-group | table-header-group |
table-footer-group | table-row | table-column-group | tablecolumn | table-cell | table-caption | inherit
Balang deeri: inline
Kaltsallk: Yok
Bu zellik bir eleman oluturan kutu tipini belirler.
Bu zelliin dier zellikler ile bir ok etkileimli durumlar vardr, bunlara
ileride deineceiz.
HTML elemanlarn balangta blok seviyeli ve satrii seviyeli olarak
tanmldr. Ancak biz bu elemanlarn balang deerlerini display zellii
ile deitirebiliriz. Yani biz bir satrii seviyedeki eleman rnein bir
linki(<a>.</a>) blok seviyeden bir elemana dntrebiliriz. Ayn
ekilde bir blok seviyedeki eleman satrii seviyeden bir elemana
dntrebiliriz.
block: Bu deer bir elemann bir blok kutusu retmek iin kullanlr.
inline: Bu deer bir elemann bir veya daha fazla sayda satrii kutu
retmek iin kullanlr.
list-item: Bu deer bir elemann (HTML'deki <li> gibi) bir blok kutu ve
bir liste esi satrii kutusu retmek iin kullanlr.
none: Bu deer bir elemann biimleme yapsnda hibir kutu
retmemesine sebep olur (yani, elemann yerleime hibir etkisi olmaz;
baka bir deyile, gsterilmez). Ayrca alt elemanlar da grnmez ve bu
davran alt elemanlarn display nitelikleriyle etkisiz klnamaz.
table, inline-table, table-row-group, table-column, table-columngroup, table-header-group, table-footer-group, table-row, tablecell ve table-caption: Bu deerler bir elemann bir tablo eleman gibi
davranmasna sebep olur.
run-in, inline-block, ve inline-table zelliklerini tm tarayclar
desteklememektedir.
p{
display: inline;
}
em {
209
display: block;
}
Internet Explorer 7+:
inline-table, run-in, table, table-caption, table-cell, table-column,
table-column-group, table-row, and table-row-group bu deerleri
desteklemiyor.
HTML elemanlarndan thead ve tfoot iin sadece table-footer-group
and table-header-group zelliklerini destekliyor.
Balang deeri satrii seviyesinden olanlar iin inline-block
deerini destekliyor.
Li elamanna atanan list-item zelliini bir blok seviyeli elman gibi
yorumluyor
inherit deerini desteklemiyor
Firefox 2.0+ ve Opera 9.2+:
* colgroup eleman iin sadece table-column-group deerini
destekliyor.
* col eleman iin sadece table-column zelliini destekliyor.
Firefox 2.0 inline-block, inline-table, veya run-in zelliklerini
desteklemiyor. Bu zellikler Firefox 3 versiyona eklenmi.
Tarayc Uyumu:
Firefox1+ (ksmen)
Safari1.3+
Opera 9.2+
CSS 2+
210
11. Tablo zellikleri

W3C tablo ve tablo elemanlarnn grnmn dzenlemek iin tablo
zelliklerini ekleme gerei duydu. Tablolar dier HTML elemanlarndan
daha farkl kendine has elemanlardr ve farkl zellikleri vardr. Burada
CSS2 ile birlikte gelen yeni zellikleri inceleyeceiz.
CSS2 ile birlikte gelen bu zelliklerden biroumuzun haberi olmayabilir.
Ancak bizlere yardmc olacak bu zelliklere gz atmak gzel. Bu zellikleri
uygulamamzda en nemli etken tabii ki IEnin bu zelliklerin bir ksmn
desteklememesidir. Bu tabii ki IEye puan kaybettiriyor ve Microsoftda
bunun farkna gete olsa vard syleniyor ve IE8 ile birlikte tam CSS
desteini bizlere sunacakm, tabi o zamana kadar Firefox IEyi silip
sprmezse.
Balk Konumu zellii (table-layout)

Tablo Plan zellii (caption-side)
Hcre Boluklarn ayarlama (border-collapse)
Hcre D boluklarn ayarlama (border-spacing)
Bo hcre ayarlar (empty-cells)
11.1. Balk Konumu zellii (table-layout)

Yaps: table-layout: <deger>
Ald Deerler: auto | fixed | kaltsallk
Balang deeri: auto
Uygulanabilen elemanlar: display: table ve display:inline-table olarak
belirlenen elemanlara
Kaltsallk: Var
Normalde tablolar ieriindeki bilgiye gre geniliini arttrr. Bu bize bir
esnek kazandrr ancak bazen tablo geniliimizin sabit kalmasn isteriz.
table-layout:fixed deeri tablo geniliimizi sabitlememizi salar. tablelayout:auto ise tablo geniliini ierie gre arttrr.
rnek 11-1
<head>
/>
<title>table-layout rnei</title>
<style>
table.otomatik {
table-layout: auto;
211
width: 350px;
border-collapse: collapse;
}
table.sabit {
table-layout: fixed;
width: 350px;
}
td, th {
border: 1px solid;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="otomatik">
<caption>Limitli ADSL Fiyatlar</caption>
<tr>
<th>Hz*(Kbps) </th>
<th>Kota(GB) </th>
<th>Balant creti** </th>
<th>Aylk cret </th>
<th>Limitin zerindeki Her MB iin cret*** </th>
</tr>
<tr>
<td>1024/256e kadar</td>
<td>4</td>
<td rowspan="3">29 YTL</td>
<td>29 YTL</td>
<td>0,010 YTL</td>
</tr>
<tr>
<td>6</td>
<td>39 YTL</td>
<td>0,009 YTL</td>
</tr>
<tr>
<td>6</td>
<td>49YTL</td>
<td>0,009 YTL</td>
</tr>
</table>

<table cellpadding="0" cellspacing="0" class="sabit">
<caption>Limitli ADSL Fiyatlar</caption>
<tr>
<th>Hz*(Kbps) </th>
212
<th>Kota(GB) </th>
<th>Balant creti** </th>
<th>Aylk cret </th>
<th>Limitin zerindeki Her MB iin cret*** </th>
</tr>
<tr>
<td>4</td>
<td rowspan="3">29 YTL</td>
<td>29 YTL</td>
<td>0,010 YTL</td>
</tr>
<tr>
<td>6</td>
<td>39 YTL</td>
<td>0,009 YTL</td>
</tr>
<tr>
<td>6</td>
<td>49YTL</td>
<td>0,009 YTL</td>
</tr>
</table>
</body>
</html>
213
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 7.5+
CSS 2+
11.2. Tablo plan zellii

(caption-side)
Yaps: caption-side: <deger>
Ald Deerler: top | bottom | inherit
Balang deeri: top
Uygulanabilen elemanlar: display: tablecaption olarak belirlenen elemanlara
Kaltsallk: Yok
CSS2 ile birlikte left ve

right deerleride vard
ancak kullanszl
nedeni ile CSS2.1de
kaldrld.
214
caption-side: Tablonun balnn(<caption>) nerede(altta m stte mi)

olacan belirler.
Bu zellii IE(ie5+/mac destekliyor) desteklemiyor. Tm tarayclarn

destekledii ekilde kod yazmak iin <caption> etiketinin align zellii
kullanlmaldr. rnek:
<caption align="bottom"> ve <caption align="top">
Tarayc Uyumu:
Internet Explorer (desteklemiyor)
Firefox 1+
Safari 1.3+
Opera 7.5+
CSS 2+
11.3. Hcre Boluklarn ayarlama (bordercollapse)

Yaps: border-collapse: <deger>
Ald Deerler: collapse | separate | kaltsallk
Balang deeri: separate
Uygulanabilen elemanlar: display:table ve display:table-caption
215
olarak belirlenen elemanlara

Kaltsallk: Var
border-collapse, tablo hcrelerinin etrafndaki kenarlk ile olan mesafeyi
azaltmamz veya amamz salar. separate atamas yaplm ise
hcreler arasna bir ka piksellik mesafe konur, HTML iinden bu boluklar
<table> etiketinin cellspacing zellii ile kaldrmak istesek bile tarayclar
bu seferde iki kenarl bir bir st gsterecektir. Eer collapse deeri
verilirse iki hcre arasndaki mesafe kalkacaktr ve tek kenarlk
grnecektir.
rnek 11-2
<head>
/>
<title>border-collapse rnei</title>
<style>
table.ayri {
border-collapse: separate;
}
table.birlesik {
}
td {
border: 1px solid black;
padding: 3px;
}
</style>
</head>
<body>
<table cellspacing="0" class="ayri">
<tr>
<td>hcre1</td>
<td>hcre2</td>
</tr>
<tr>
<td>hcre3</td>
<td>hcre4</td>
</tr>
</table>

<table border="0" cellspacing="0" class="birlesik">
<tr>
<td>hcre1</td>
<td>hcre2</td>
216
</tr>
<tr>
<td>hcre3</td>
<td>hcre4</td>
</tr>
</table>
</body>
</html>
Tarayc Uyumu:
Internet Explorer 5.5
Firefox 1+
Safari 1.3+
Opera 7.5+
CSS 2+
11.4. Hcre d boluklarn ayarlama (borderspacing)

Yaps: border-spacing: <deger>
Ald Deerler: <uzunluk> <uzunluk>? | inherit
Balang deeri: 0
Uygulanabilen elemanlar: display:table ve display:table-caption
olarak belirlenen elemanlara
Kaltsallk: Var
border-spacing, normal uzunluk deerleri alr ve bordercollapse:separate ile birlikte kullanlr. Eer tek deer verilirse bu tm
217
kenarlar iin geerlidir, iki deer atanrsa ilki yatayda boluk iin ikincisi
dikey de boluk vermek iin tanmlanmtr.
rnek 11-3
<head>
/>
<title>border-spacing rnei</title>
<style>
table.ayri {
border-spacing: 3px 5px;
}
table.birlesik {
}
td {
padding: 3px;
}
</style>
</head>
<body>
<table cellspacing="0" class="ayri">
<tr>
<td>hcre1</td>
<td>hcre2</td>
</tr>
<tr>
<td>hcre3</td>
<td>hcre4</td>
</tr>
</table>

<table border="0" cellspacing="0" class="birlesik">
<tr>
<td>hcre1</td>
<td>hcre2</td>
</tr>
<tr>
<td>hcre3</td>
<td>hcre4</td>
</tr>
218
</table>
</body>
</html>
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 7.5+
CSS 2+
11.5. Bo hcre ayarlar (empty-cells)

Yaps: empty-cells: <deger>
Ald Deerler: show | hide | kaltsallk
Balang deeri: show
Uygulanabilen elemanlar: display:table-cell olarak belirlenen
elemanlara
Kaltsallk: Var
Bir tabloya baz deerler atadmzda(rnein kenarlk deeri) bo olan
hcreler bu deeri grmez, bu durumu dzeltmek iin bo olan hcreler
iin bo karakter( ) koyarz genel. empty-cells zellii ile bo kalan
hcrelere nasl davranmas gerektiini bildirebiliriz. Gster(show) deeri
ile hcrenin ierii olan hcreler ile ayn zellikleri almasn salayabiliriz.
Gizle(hide) deeri ile de hcrenin yokmu gibi davranmasn salarz.
Bu zellik Internet Explorer tarafndan desteklenmemektedir.
219
rnek 11-4
<head>
/>
<title>empty-cells rnei</title>
<style>
table.goster {
empty-cells:show
}
table.gizle {
empty-cells:hide
}
td {
padding: 3px;
}
</style>
</head>
<body>
<table cellspacing="0" class="goster">
<tr>
<td></td>
<td>hcre2</td>
</tr>
<tr>
<td>hcre3</td>
<td>hcre4</td>
</tr>
</table>

<table border="0" cellspacing="0" class="gizle">
<tr>
<td></td>
<td>hcre2</td>
</tr>
<tr>
<td>hcre3</td>
<td>hcre4</td>
</tr>
</table>
</body>
</html>
220
Tarayc Uyumu:
Firefox 1+
Safari 1.3+
Opera 7.5+
CSS 2+
221
12. Kullanc Arayz zellikleri
12. Kullanc Arayz

zellikleri
Kullanc arayz zellii taraycdaki kullanc arayzndeki nesneleri
deitirme izini verir.
CSS gittike etkinliini arttrmaktadr. Kullanc arayz zellikleri ile
taraycnn odaklanma zelliklerine dokmann yaztipi ve rengini
deitirmek iin ve fare imlecinin eklini deitirmemize olanak salar.
Firefox bunu daha da ileri giderek taraycnn birok zelliini
deitirmemize olanak salar. CSSe benzeyen XUL dili ile taraycnn st
mensne, kenar tablarna, mesaj kutularna, durum ubuuna ve dier
tarayc elemanlarn deitirmemizi salar.
12.1. Fare imleci zellikleri tanmlama (cursor)

Yaps: cursor: <deger>
Ald Deerler: [<uri> ,]* [ auto | crosshair | default | pointer |
move | e-resize | ne-resize | nw-resize | n-resize | se-resize | swresize | s-resize | w-resize | text | wait | help | progress ]
Balang deeri: auto
Kaltsallk: Var
crosshair
nce art imleci
default
pointer
erie bakmakszn platformun balang imlecini

gsterir.
Linklerde kan el iareti imlecini gsterir.
move
Tama imlecini gsterir.
e-resize
Bat yn(east) imlecini gsterir.
ne-resize
nw-resize
Kuzey dou yn(north east) tama imlecini

gsterir.
Kuzey bat yn(north west) imlecini gsterir.
n-resize
Kuzey yn(North) imlecini gsterir.
222
se-resize
Gney dou yn(south east) imlecini gsterir.
sw-resize
Gney bat yn(south west) imleci
s-resize
Gney yn(South) imlecini gsterir.
w-resize
Bat yn(west) imlecini gsterir.
text
Metin imlecini gsterir.
wait
Bekleme imlecini gsterir. Genelde kum saati

eklindedir.
Yardm imlecini gsterir
help
auto
progress
Mevcut ierie gre taraycnn balangta

tanmlad imlecini gsterir.
Ykleniyor imlecini gsterir. Bu zellik iin farkl
tarayclar farkl ekiller karr.
URI zellii iin rnek:

a.external {
cursor: url(disarilink.cur), pointer
}
IE 5.5 ve alt srmlerinde pointer deerini desteklemez. Onun yerine
standartlarda olmayan hand zellii destekler.
IE inherit zellii desteklemiyor.
Opera 9.2 srm ve ncesinde URI deerini desteklemez.
Safari 3 srm ve ncesinde URI deerini desteklemez.
CSS3 ile birlikte yeni
Tarayc Uyumu:
Firefox 1+
Opera 9.2+(ksmen)
Safari 1.3+(ksmen)
CSS 2+
12.2. D hat izgisi zellikleri(outline)

CSS2 ile birlikte gelen kutu d ekillendirme zellikleri kenar
izgisine(border) benzer bir zelliktir. Fakat kenar izgisi zelliinden iki
223
nemli fark vardr. lki outline zellii kenar izgisi gibi normal ak
etkilemez. Bir elemana 10px outline deeri atandnda elemann
etrafndaki elemanlarn zerine 10px kadar taar. kinci farkllk outline
kenar izgisi gibi dikdrtgen eklinde deildir. Oval ekilde deildir.
Outline zellii kullancnn o ana nereye odaklandn belirlemek iin
kullanlr. Tarayc arayznde kullancnn nereye odaklandn bilmek
bize birok avantajlar salayacaktr.
12.2.1 D hat izgisi biemi (outline-style)

D hattn biemini belirlemek iin kullanrz.
Yaps: outline-style: <deger>
Ald Deerler: none | dotted | dashed | solid | double | groove |
ridge | inset | outset | inherit
Balang deeri: none
Kaltsallk: Yok
D hat biemi none deeri haricindeki deerler iin grntlenir.

none: D hat grnmesin anlamndadr.
dotted: D hat belirli aralklarla dizilmi noktalardan oluur.
dashed: D hat belirli aralklarla dizilmi izgi paralarndan(tire) oluur.
solid: D hat bir izgi olara grnr
double: iki izgi eklinde grnr. ki izginin kalnlklar ile aralarndaki
boluun geniliinin toplam outline-width deerine eittir.
groove: D hat tuvale oyulmu gibi grnr.
ridge: groove'un zdd: D hat izgisi kabartma gibi grnr.
inset: D hat izgisinin kutunun tamamn tuvale gml gibi
grnmesine sebep olur.
outset: inset'in zdd: D hat izgisi kutunun tamamnn kabartma gibi
grnmesine sebep olur.
Tarayc Uyumu:
Firefox 1.5+
224
Opera 9.2+
Safari 1.3+
CSS 2+
12.2.2. D hat izgisi genilii (outline-width)

Atand elemann dna izilen hattn kalnln belirlemek iin kullanrz.
Yaps: outline-width: <deger>
Ald Deerler: thin | medium | thick | length | inherit
Balang deeri: Medium
Kaltsallk: Yok
D hat izgisi genilii border-width gibi CSS uzunluk deerlerini (px, pt,
em) ve anahtar kelimeler(thin <= medium <= thick) alr, ancak yzde
deer ve eksi deer almaz.
Tarayc Uyumu:
Firefox 1.5+
Opera 9.2+
Safari 1.3+
CSS 2+
12.2.3. D hat izgisi rengi (outline-color)

Atand elemann dna izilen hattn rengini belirlemek iin kullanrz.
Yaps: outline-color: <deger>
Ald Deerler: color | invert | inherit
Balang deeri: invert
Kaltsallk: Yok
CSSin destekledii renk deerlerini kullanabiliriz, hatta invert deerinide
kullanabiliriz. nvert, rengi tersine evirir.
Tarayc Uyumu:
Firefox 1.5+
225
Opera 9.2+
Safari 1.3+
CSS 2+
12.2.4. D hat izgisi (outline)

D hat izgisi(outline) zellii yukarda grdmz zelliklerin tek
seferde kullanlmasn salayan bir ksa yoldur.
Yaps: outline: <deger>
Ald Deerler: [ <outline-color> || <outline-style> || <outlinewidth> ] | inherit
Balang deeri: tanml deildir
Kaltsallk: Yok
Kenar izgisi(border) zelliine benzer bir yaps vardr. Ancak ayrldklar
ksm kenar izgisinde(border) her kenar iin bir atama(border-right,
border-bottom, vd.) yaplmasna karn d hat izgisinde(outline) byle
bir zellik yoktur. D hat izgisinin(outline) tm kenarlar ayn zellikleri
tar.
D hat izgileri(outline) normal aktaki boluklar tamamlamaz. (tama
yapmaz.) dier elemanlarn zerini rter. D hat izgisinin(outline) nemli
zelliklerinden biri etrafn evreleyen elemanlar zerinde(zerine rtmek
dnda) bir etki yapmamasdr, bu sayfa planlamadaki problemlerimizi
zmemiz iin nemlidir. Problem olan bir elemana d hat izgisi(outline)
atamas yaptmzda tam olarak sorunun ne olduunu greceiz ve
elamann tam yerini reneceiz. Bu kenar izgisi(border) uygulamaktan
farkldr, d hat izgisi(outline) uygulandnda dokmandaki normal ak
zerine bir etki yapmayacaktr.
D hat izgileri(outline) satrii elemanlarn etrafna yerleir. ki satra
kaym satrii elemanlarda d hat izgisi dikdrtgen eklinde
olmayacaktr. Bu da kenar izgisi(border) ile arasndaki farklardan biridir.
D hat izgileri elemana odaklanldnda grsel bir knt gibi
grnmesini salayabilir.
Tarayc Uyumu:
Firefox 1.5+
Opera 9.2+
Safari 1.3+
226
CSS 2+
12.3. Sistem yaztipi ve rengi zellikleri

Sistem yaztipi ve rengi zellikleri ile biz kullancnn bilgisayarnda kurulu
sistemin(Windows, Linux, mac vd.) yaztipi ve renk zelliklerini
kullanmamz salayan zelliklerdir. Ancak burada yle bir sorun var ki
CSS3de bu zelliklerin kullanmna kar klmtr. imdilik son durum
budur ama gelecekte ne olur onu bilemeyiz.
227
Ek A Tm CSS zellikleri
Ek A Tm CSS
zellikleri
Tarayc Uyumu: IE: Internet Explorer, F: Firefox
W3C: "W3C"n zellii ekledii CSS srm
Artalan (Background) zellikleri
zellik
Aklamas
Deerleri
IE F W3C
background
Tm artalan
zelliklerinin bir
ksaltmasdr.
background-color
background-image
background-repeat
backgroundattachment
background-position
1 1
backgroundattachment
Artalan resminin
sayfann dier
elemanlarna gre
sabitlenmesini veya
kaymasn belirler
scroll
fixed
1 1
background-color Elemanlara artalan

rengini tanmlar
color-rgb
color-hex
color-name
transparent
1 1
backgroundimage
Elemanlara artalan
resmi tanmlar
url(URL)
none
1 1
backgroundposition
top left
Artalan resminin
konumunu balang top center
top right
noktalarn belirler
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
1 1
backgroundrepeat
Artalan resminin
yenileme durumunu
tanmlar
1 1
repeat
repeat-x
repeat-y
228
no-repeat
Kenar izgisi (Border) zellikleri
zellik
Aklamas
Deerleri
IE F W3C
Border
Tm kenar izgisi
zelliklerinin
ksaltmasdr
border-width
border-style
border-color
1 1
border-bottom
Alt kenar izgisi

zelliklerinin
ksaltmasdr
border-bottom-width 4
border-style
border-color
1 1
border-bottomcolor
Alt kenar izgisi

rengini tanmlar
border-color
1 2
border-bottomstyle
Alt kenar izgisinin

biemini tanmlar
border-style
1 2
border-bottomwidth
Alt kenar izgisinin

kalnln tanmlar
thin
medium
thick
length
1 1
border-color
Tm kenar
izgilerinin rengini
tanmlar. Bir veya
birden fazla kenara
tanmlama
yaplabilir.
color
1 1
border-left
Sol kenar izgisi

zelliklerinin
ksaltmasdr
border-left-width
border-style
border-color
1 1
border-left-color
Sol kenar izgisi

rengini tanmlar
border-color
1 2
border-left-style
Sol kenar izgisinin

biemini tanmlar
border-style
1 2
border-left-width Sol kenar izgisinin

kalnln tanmlar
thin
medium
thick
length
1 1
border-right
Sa kenar izgisi
zelliklerinin
ksaltmasdr
border-right-width
border-style
border-color
1 1
border-rightcolor
Sa kenar izgisi
rengini tanmlar
border-color
1 2
229
border-rightstyle
Sol kenar izgisinin

biemini tanmlar
border-style
1 2
border-rightwidth
Sol kenar izgisinin

kalnln tanmlar
thin
medium
thick
length
1 1
border-style
Tm kenar
izgilerinin biemini
tanmlar. Bir veya
birden fazla kenara
tanmlama
yaplabilir.
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
1 1
border-top
st kenar izgisi
zelliklerinin
ksaltmasdr
border-top-width
border-style
border-color
1 1
border-top-color
st kenar izgisi
rengini tanmlar
border-color
1 2
border-top-style
st kenar izgisinin
biemini tanmlar
border-style
1 2
border-top-width st kenar izgisinin

kalnln tanmlar
thin
medium
thick
length
1 1
border-width
Tm kenar
izgilerinin
kalnlklarn
tanmlar. Bir veya
birden fazla kenara
tanmlama
yaplabilir.
thin
medium
thick
length
1 1
zellik
Aklamas
Deerleri
IE F W3C
clear
Floating
uygulanmayan
elemann ke
tanmn yapar.
left
right
both
none
1 1
cursor
Fare imlecinin nasl
url
1 2
Tasnif zellikleri
230
grneceini belirler. auto

crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
4
1 1
Elemann(resim veya left

right
metin) dier
none
elemanlara gre
konumunu belirler.
1 1
position
Elemann konumunu
belirler.
static
relative
absolute
fixed
1 2
visibility
Elemann grnr
veya gizli olacan
belirler.
visible
hidden
collapse
1 2
display
Elamann nasl
grneceinin
belirler.
float
none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
231
Boyut tanmlama zellikleri

zellik
Aklamas
Deerleri
IE F W3C
height
Eleman yksekliini
tanmlar.
auto
length
%
1 1
line-height
Satrlar aras
mesafeyi tanmlar.
normal
number
length
%
1 1
max-height
Eleman azami
none
yksekliini tanmlar. length
%
1 2
max-width
Eleman azami
geniliini tanmlar.
none
length
%
1 2
min-height
Eleman asgari
length
yksekliini tanmlar. %
1 2
min-width
Eleman asgari
geniliini tanmlar.
length
%
1 2
width
Eleman geniliini
tanmlar.
auto
%
length
1 1
Yaztipi (Font) zellikleri

zellik
Aklamas
Deerleri
IE F
font
font-style
Tm yaztipi
4
zelliklerinin bir ksa font-variant
font-weight
yoludur.
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
font-family
Yaztipi ailesini veya family-name

generic-family
ailelerini ve ait
olduu grubunu
belirler
W3C
1 1
232
font-size
Yaztipi boyunu
belirler
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
font-style
Yaztipi biemini
belirler
normal
italic
oblique
font-variant
Metnin kk-byk normal

small-caps
harf ile
gsterilmesini
belirler.
font-weight
Yaztipi kalnln
belirler
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
erik ynetim zellikleri

zellik
Aklamas
Deerleri
content
:before ve :after
szde snflar ile
kullanlan ierik
ksmn ynetir.
string
url
counter(name)
counter(name, liststyle-type)
counters(name,
string)
counters(name,
string, list-styletype)
IE F
1
W3C
2
233
attr(X)
open-quote
close-quote
no-open-quote
no-close-quote
counterincrement
Seicinin her durumu none

identifier number
iin saya deerini
dzenler
counter-reset
Seicinin her durumu none

identifier number
iin saya deerini
belirler
quotes
Trnak iaretlerini
belirler.
none
string string
Deerleri
IE F
W3C
Liste (List) zellikleri

zellik
Aklamas
list-style
Liste zelliklerinin bir list-style-type

ksa yoludur.
list-style-position
list-style-image
list-style-image
none
list-style iaretinin
yerine resim koymak url
iin kullanlr.
list-style-position list-item iaretinin

yerini belirler.
inside
outside
list-style-type
none
disc
circle
square
decimal
decimal-leadingzero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
list-item iaretinin
tipini belirler
234
katakana
hiragana-iroha
katakana-iroha
marker-offset
auto
length
Kenar d boluu (Margin) zellikleri

zellik
Aklamas
Deerleri
IE F
W3C
Margin
Kenar d boluu
zelliklerinin
ksaltmasdr
margin-top
margin-right
margin-bottom
margin-left
margin-bottom
Elemann alt kenar

d boluunu
tanmlar
auto
length
%
margin-left
Elemann sol kenar

d boluunu
tanmlar
auto
length
%
margin-right
Elemann sa kenar
d boluunu
tanmlar
auto
length
%
margin-top
Elemann st kenar
d boluunu
tanmlar
auto
length
%
D hat izgisi (Outlines) zellikleri

zellik
Aklamas
Deerleri
IE F
Outline
D hat izgileri
zelliklerinin
ksaltmasdr
outline-color
outline-style
outline-width
1.5 2
outline-color
Eleman saran d
hat izgilerinin
rengini tanmlar
color
invert
1.5 2
outline-style
Eleman saran d
hat izgilerinin
biemini tanmlar
none
dotted
dashed
solid
double
groove
ridge
1.5 2
W3C
235
inset
outset
outline-width
Eleman saran d
hat izgilerinin
kalnln tanmlar
thin
medium
thick
length
1.5 2
Kenar i boluu (Padding) zellikleri

zellik
Aklamas
Deerleri
IE F W3C
Padding
Kenar i boluu
zelliklerinin
ksaltmasdr
padding-top
padding-right
padding-bottom
padding-left
1 1
padding-bottom
Elemann alt kenar i length

boluunu tanmlar
%
1 1
padding-left
Elemann sol kenar i length

boluunu tanmlar
%
1 1
padding-right
Elemann sa kenar
length
i boluunu tanmlar %
1 1
padding-top
Elemann st kenar i length

boluunu tanmlar
%
1 1
Konumlandrma (Positioning) zellikleri

zellik
Aklamas
Deerleri
IE F W3C
bottom
Bir elemann st
elemannn altna
gre ne kadar
aada ya da
yukarda olacan
belirler.
auto
%
length
1 2
clip
Elemann snrlarn
belirlemek iin
kullanlr.
shape
auto
1 2
left
auto
Bir elemann st
elemann soluna gre %
ne kadar solda ya da length
sada olacan
belirler.
1 2
overflow
Eleman ieriinin
tama durumunda
1 2
visible
hidden
236
nasl davranacan
belirler.
scroll
auto
position
Elemann konumunu
belirler.
static
relative
absolute
fixed
right
top
1 2
auto
Bir elemann st
elemann sana gre %
ne kadar solda ya da length
sada olacan
belirler.
1 2
Bir elemann st
elemannn stne
gre ne kadar
aada ya da
yukarda olacan
belirler.
auto
%
length
1 2
vertical-align
Elemann dikey
hizalamasn
tanmlar.
baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
1 1
z-index
Elemann zeksenindeki yerini

tanmlar
auto
number
1 2
Tablo (Table) zellikleri

zellik
Aklamas
Deerleri
IE F W3C
border-collapse
Tablo hcrelerinin
etrafndaki kenarlk
ile olan mesafeyi
azaltmamz veya
amamz salar.
collapse
separate
1 2
border-spacing
Tablo hcrelerinin
kenar izgileri
arasndaki mesafeyi
ayarlar
length length
1 2
237
caption-side
Tablo balnn
tarafn belirler.
top
bottom
left
right
1 2
empty-cells
Tablodaki bo
hcrelerin gsterilip
gsterilmeyeceini
tanmlar
show
hide
1 2
table-layout
Tablo hcrelerinin,
satrlarn ve
kolonlarn
gsterimini ayarlar
auto
fixed
1 2
Metin (Text) zellikleri

zellik
Aklamas
Deerleri
IE F W3C
color
Metinlerin renklerini
tanmlar.
color
1 1
direction
Metin ynn
tanmlar
ltr
rtl
1 2
line-height
Satrlar aras
mesafeyi tanmlar
normal
number
length
%
1 1
letter-spacing
Karakterler aras
boluu arttrmak
veya azaltmamz
salar
normal
length
1 1
text-align
Eleman iindeki
metinleri
hizalamamz salar
left
right
center
justify
1 1
text-decoration
Metinleri sslememizi none

salar
underline
overline
line-through
blink
1 1
text-indent
Eleman iindeki
metnin ilk satrnn
girintisini tanmlar
length
%
1 1
text-shadow
Metinlere glge
vermeye yarar
none
color
238
length
text-transform
Metni byk-kk
harf evirmek iin
kullanlr.
none
capitalize
uppercase
lowercase
1 1
unicode-bidi
ok ynllk
algoritmasn
ayarlamamz salar
normal
embed
bidi-override
white-space
Elemanlarn
boluklarnn nasl
ilem greceini
belirler.
normal
pre
nowrap
1 1
word-spacing
Szckler arasndaki
boluk deerini
belirler.
normal
length
1 1
Szde snflar (Pseudo-classes)

Szde snf
Amac
IE F
W3C
:active
Aktif elemanlara stil tanmlamamz

salar.
:focus
Odaklandmz elemanlara stil

tanmlamamz salar.
1.5 2
:hover
Fare imlecinin zerine gittii elemanlara

stil tanmlamamz salar.
:link
Ziyaret etmediimiz balantlara stil

tanmlamamz salar.
:visited
Ziyaret ettiimiz balantlara stil

tanmlamamz salar.
:first-child
Belirtilen elemann ilk ocuk Elemanna

stil atamak iin kullanlr.
:lang
erikteki bir eleman farkl bir dilde

yazmamz salar.
Szde elemanlar (Pseudo-elements)

Szde-eleman
Amac
IE F
W3C
:first-letter
Metnin ilk harfine stil tanmlamamz

salar.
:first-line
Metnin ilk satrna stil tanmlamamz

salar.
239
:before
Eleman ncesine baz metinleri

eklememizi salar.
1.5 2
:after
Eleman sonrasna baz metinleri

eklememizi salar.
1.5 2
240
Ek B Kaynaka
Ek B Kaynaka
http://www.w3schools.com/css/default.asp
http://www.belgeler.org/recs/css2/index.html#index-toc
http://reference.sitepoint.com/css
http://www.cheaphostdir.com/reference/css21/cover.html#minitoc
http://www.blooberry.com/
http://www.456bereastreet.com/
http://css.maxdesign.com.au/
http://westciv.com/
http://www.w3.org/TR/CSS21/visufx.html
http://www.seifi.org/css/creating-thumbnails-using-the-css-clipproperty.html
http://www.ibloomstudios.com/articles/misunderstood_css_clip/
http://www.w3schools.com/css/pr_pos_clip.asp
http://www.w3.org/TR/REC-CSS2/tables.html
http://www.w3schools.com/css/css_table.asp
http://www.blooberry.com/indexdot/css/propindex/table.htm
http://www.simplebits.com/
http://www.devarticles.com
http://www.w3.org/TR/REC-CSS1#inheritance
http://www.adobe.com/
http://www.creativepro.com/
http://meyerweb.com/
http://css-discuss.incutio.com/?page=BoxModelHack
http://www.createwebmagic.com/css101/lesson2/?inc=part3
CSS Hacks and Filters : Making Cascading Stylesheets Work
CSS Mastery: Advanced Web Standards Solutions
Muhammed Sevim
Web Standards Solutions: The Markup and Style Handbook
http://home.tampabay.rr.com/bmerkey/examples/fake-positionfixed.html
http://tagsoup.com/cookbook/css/fixed/
http://annevankesteren.nl/test/examples/ie/position-fixed.html
http://annevankesteren.nl/2005/01/position-fixed-in-ie
http://annevankesteren.nl/2004/07/fixed-positioning
http://www.howtocreate.co.uk/fixedPosition.html
http://www.cssplay.co.uk/layouts/fixed.html
http://www.cssplay.co.uk/layouts/body2.html
http://www.cssplay.co.uk/layouts/fixit.html
http://www.gunlaug.no/contents/wd_additions_15.html
http://www.gunesintamicinde.com/ie-6-ve-position-fixed-problemi/
http://www.search-this.com/2007/08/15/give-me-some-zzzzzs/
http://www.brainjar.com/css/positioning/default5.asp
http://joshuaink2006.johnoxton.co.uk/blog/82/flash-content-and-zindex
241
Ek B Kaynaka
http://www.blooberry.com/indexdot/css/properties/position/zindex.
htm
http://www.westciv.com/style_master/academy/css_tutorial/propert
ies/page_layout.html#z-index
http://developer.mozilla.org/en/docs/Understanding_CSS_z-index
http://css-discuss.incutio.com/?page=OverlappingAndZIndex
http://csscreator.com/blog/z-index
http://www.fatihhayrioglu.com/?p=151
http://www.ahmetblog.net/
http://www.richard-york.com/books.html
242
Ek C Szlk
Ek C Szlk
A
Absolute: Mutlak
Align: Hizalama
Attribute Selectors: zellik Seicileri
B
background: artalan images: artalan resmi, -color: artalan rengi
background-attachment: Artalan resim ball
background-color: Artalan rengi
background-image: Artalan resmi
background-position: Artalan resim konumu
background-repeat: Artalan resim yenileme
Belge Nesne Modeli: DOM
Block-level: Blok seviyesi
border: Kenar izgisi
border-color: Kenar izgisi rengi
border-collapse: Hcre Boluklarn ayarlama
boder-style: Kenar izgisi biemi
border-spacing: Hcre D boluklarn ayarlama
border-width: Kenar izgisi genilii
bottom: alt
Box model: Kutu modeli
Button: Dme
C
Cache: nbellek
Cascading Style Sheets: Stil ablonlar
caption-side: Balk Konumu zellii
Class Selector: Snf Seici
Check box: onay kutusu
clip: Krpma
Color: Renk
cursor: Fare imleci
D
Dash: tire
243
Ek C Szlk
Declaration Block: Bildirim Blou

Default: Balang deeri
Descendant Selectors: Torun Seicileri
Direct Child Selectors: ocuk Seicileri
direction: Metin yazma yn
dotted: noktal
E
empty-cells: Bo hcre ayarlar
F
Floating: yzen
font: Yaztipi
font-family: Yaztipi ailesi
font-size: Yaztipi boyutu
font-style: Yaztipi stili
font-variant: Yaztipi farkllklar
font-weight: Yaztipi kalnl
G
Grouping: Gruplama
H
Height: Ykseklik
I
Id Selector: Tekil Seici
Italic: Eik
Image: Resim
Inheritance: Kaltsallk
Inline: Satrii
L
left: sol
letter-spacing: Harfler aras mesafe
line-height: Satrlar aras ykseklik
244
Ek C Szlk
Link: Ba
list: Liste
list-style: Liste stili
list-style-image: Liste imleyici resmi
list-style-position: Liste imleyici konumu
list-style-type: Liste imleyici tipi
M
margin: Kenar d boluu
margin-bottom: Alt kenar d boluu
margin-left: Sol kenar d boluu
margin-right: Sa kenar d boluu
margin-top: st kenar d boluu
max-height: Azami ykseklik
max-width: Azami genilik
min-height: Asgari ykseklik
min-width: Asgari genilik
Mouse: Fare
Multiple Classes: oklu snflar
N
NameSpace: Aduzay
Next Sibling Selector: Bitiik Karde Seiciler
Nonreplaced element: Yerletirilmeyen elemanlar
Normal flow: Normal ak
O
Outline: D hat izgisi
overflow: Tama
P
padding: Kenar i boluu
padding-top: st kenar ii boluu
padding-right: Sa kenar ii boluu
padding-bottom: Alt kenar ii boluu
padding-left: Sol kenar ii boluu
Positioning: Konumlandrma
position:absolute: Mutlak konumlandrma
position:fixed: Sabit Konumlandrma
245
Ek C Szlk
position:relative: Greceli konumlandrma

Print: yazdrmak
Printer: yazc
Print out: kt
Property: zellik
Pseudo-Classes: Szde snflar
Pseudo-Elements: Szde elemanlar
R
Relative: Greceli
Replaced element: Yerletirilen elemanlar
right: sa
Root element: Kk Eleman
S
Script: Betik
Scrollbar: Kaydrma ubuu
Selector: Seiciler
Simple Attribute Selection: Basit zellik Seicisi
Space: boluk
Specificity: Etkinlik
System fonts: Sistem yaztipi
System colors: Sistem renkleri
T
table: Tablo
table-layout: Tablo Plan zellii
Text: Metin
text-align: Metin hizalama
text-decoration: Metin ssleme
text-indent: Metin Girintileme
text-shadow: Metin glgeleme
text-transform: Harf bykl
top: st
U
Universal Selector: Evrensel Seiciler
User Interface: Kullanc arayz
246
Ek C Szlk
V
Value: Deer
vertical-align: Dikey hizalama
visibility: Grnrlk
W
Web coder: web kodlamacs
white-space: Elemanlar aras boluk
Width: Genilik
word-spacing: Kelimeler aras mesafe
Z
z-axis: z-ekseni
247
ndex Tablosu
ndex Tablosu
#
#RGB, 16
#RRGGBB, 16
:
:active, 47
:focus, 46
:hover, 47
:lang szde snf, 51
:link, 44
:visited, 45
@
@import, 6
A
after, 56
alt, 189
Alt kenar d boluu (margin-bottom), 138
Alt kenar ii boluu (padding-bottom), 149
Anahtar szckler, 14
Aptana, 4
armenian, 112
Artalan (background), 109
Artalan (Background), 99
Artalan rengi (background-color), 99
Artalan resim ball (backgroundattachment), 105
Artalan resim yenileme (background-repeat),
103
Artalan resmi (background-image ), 101
Artalan resmi konumu (background-position),
106
Asgari genilik, 159
auto, 216
Azami genilik, 161
border-bottom-color, 130
border-bottom-style, 123
border-bottom-width, 127
border-collapse, 208
border-left-color, 130
border-left-style, 123
border-left-width, 127
border-right-color, 130
border-right-style, 123
border-right-width, 127
border-spacing, 210
border-top-color, 130
border-top-style, 123
border-top-width, 127
Bo hcre ayarlar (empty-cells), 212
Boluklarn korunmas (white-space), 94
bottom, 189
Boyut Tanmlama, 156
C
capitalize, 89
cjk-ideographic, 112
clear, 186
clip, 174
cm, 15
CoffeeCup HTML Editor, 4
Crimson Editor, 4
crosshair, 215
CSS Yorumlar, 17
CSSin Avantajlar, 1
CSS3.0, 1
CSSEdit, 4
cursor, 215
ocuk Seicileri(Direct Child Selectors), 29

ok ynllk algoritmas (unicode-bidi), 97
oklu snflar, 21
D
B
Basamakl Yap, 59
Basit zellik Seicisi, 36
Balk Konumu zellii (table-layout), 204
BBEdit, 4
before, 56
Biimlendirme ksm, 1
Bildirim Blou(Declaration Block)., 10
Bitiik Karde Seiciler(Next Sibling Selector),
31
blink, 93
block, 202
Blok seviyesinden elemanlar(Block-level
element), 120
decimal, 111
decimal-leading-zero, 111
default, 215
Deer(Value)., 10
D hat izgisi (outline), 219
D hat izgisi biemi (outline-style), 217
D hat izgisi genilii (outline-width), 218
D hat izgisi zellikleri(outline), 217
D hat izgisi rengi (outline-color), 219
Dikey hizalama (vertical-align), 81
Dikkate Deer zellik Seicisi, 41
Dinamik ksm, 1
display, 202
Dizgeler(Strings), 17
Doctype, 7
248
ndex Tablosu
DOCTYPE Geii(DOCTYPE switching), 8
E
eik(italiktik), 72
em, 15
empty-cells, 212
e-resize, 216
e-texteditor, 4
Etkinlikleri(Specificity), 59
Evrensel Seiciler(Universal Selector), 33
ex, 15
expression(), 163
F
Fare imleci zellikleri tanmlama (cursor), 215
first:child:, 49
first-letter (ilk harf), 54
first-line (ilk satr), 55
float, 182
float:left, 185
float:right, 184
G
garip mod, 7
Genilik (width), 156
georgian, 112
Greceli Konumlandrma(position:relative),
189
Greceli Uzunluklar, 15
Grsel Sonu zellikleri, 166
Grnrlk (visibility), 177
Gruplama, 12
H
Harf Bykl (text-transform), 89
Harfler aras mesafe (letter-spacing), 87
Harici CSS Dosyas, 5
hebrew, 112
height, 157
help, 216
hiragana, 112
hiragana-iroha, 112
Hcre Boluklarn ayarlama (bordercollapse), 208
Hcre d boluklarn ayarlama (borderspacing), 210
erik Alan, 121

erik ksm, 1
lk ocuk Elemann semek, 49
in, 15
inherit (kaltsallk)deeri, 63
inline, 202
K
Kaltsallk, 59
Kaltsallk(Inheritance), 61
katakana, 112
katakana-iroha, 112
Kenar izgisi (border), 132
Kenar izgisi biemi (border-style), 121
Kenar izgisi genilii (border-width), 125
Kenar izgisi Rengi (border-color), 129
Kenar d boluu (margin), 142
Kenar D Boluu(Margin), 135
Kenar i boluu (Padding), 146
Kenar ii boluu (padding), 153
Kenarlk izgisi(Border), 121
Kesin Uzunluklar, 15
Krpma (clip), 174
Ksmi zellik Deeri Seicisi, 39
Kod iinde (In-line), 5
Konumlandrma, 182
Konumlandrma zellii (position), 188
Konumlandrma zellikleri, 188
Kk Eleman(Root element), 120
Kullanc Arayz, 215
Kutu Modeli, 119
L
left, 189
Liste biemi (list-style), 117
Liste imleyici konumu (list-style-position),
115
Liste imleyici resmi (list-style-image), 114
Liste imleyici tipi (list-style-type ), 111
Listeleme, 111
list-item, 202
lower-alpha, 112
lowercase, 89
lower-greek, 112
lower-latin, 112
lower-roman, 111
M
Macromedia Dreamweaver, 4
max-height, 161
max-width, 161
medium [orta], 125
Metin Girintileme (text-indent), 78
Metin glgelendirme (text-shadow), 93
Metin hizalama (text-align), 80
Metin yazma yn(direction), 96
Metin(Text), 78
Microsoft FrontPage, 4
Microsoft Expression, 4
min-height, 159
min-width, 159
mm, 15
move, 216
Mutlak(Absolute) Konumlandrma, 190
249
ndex Tablosu
N
ne-resize, 216
none, 202
no-repeat, 103
Normal Ak, 188
Normal ak(Normal flow), 120
NotePad, 3
Notepad 2, 4
Notepad++, 4
nowrap, 94
n-resize, 216
nw-resize, 216
O
outline, 217, 219
outline-color, 219
outline-style, 217
outline-width, 218
overflow, 166
overflow-x, 173
overflow-y, 173
zellik Deeri Seicisi, 37

zellik Seicileri(Attribute Selectors), 35
zellik(Property), 10
P
padding, 153
padding-bottom, 150
padding-left, 152
pc, 15
position: absolute, 191
position: relative, 190
pre, 94
progress, 216
pt, 15
px, 15
R
Renk (color), 65
Renk Deerleri, 16
Renk simleri, 16
repeat, 103
repeat-x, 103
repeat-y, 103
RGB Renk Deerleri, 16
rgb(R%,G%,B%), 16
RGBA (RGB with Alpha channel), 16
right, 189
S
Sabit Konumlandrma (position:fixed), 192
sa, 189
Sa kenar d boluu (margin-right ), 137
Sa kenar ii boluu(padding-right ), 148
Satrn altn, stn, ortasn izme ve yanp

snme (text-decoration), 91
Satrii seviyeden elemanlar(Inline element),
120
Satrlar aras ykseklik (line-height), 83
Seiciler, 19
Seiciler(Selector), 10
se-resize, 216
Snf Seicisi(Class Selector), 19
Sistem yaztipi, 220
small-caps, 74
sol, 189
Sol kenar d boluu (margin-left), 140
Sol kenar ii boluu (padding-left), 151
Soysal yaztipi aileleri, 67
Szckler aras mesafe (word-spacing), 85
Szde Dinamik Snf Seicileri, 46
Szde eleman seicileri, 54
Szde Snf Seicileri, 44
Szde snflar birletirmek, 52
Szde(Pseudo) eleman, 44
Szde(Pseudo) snf, 44
s-resize, 216
Standart mod, 7
Stil ablonlar, 1
Style Master, 4
sw-resize, 216
T
Tablo, 204
Tablo plan zellii (caption-side), 207
Tama (Overflow), 166
Tekil Seiciler(Id Selector), 23
text, 216
TextEdit, 3
thick [kaln], 126
thin [ince], 125
top, 189
TopStyle, 4
Torun Seicileri (Descendant Selectors), 28
U
upper-alpha, 112
uppercase, 89
upper-latin, 112
upper-roman, 111
URL Deerleri, 16
Uzunluk Deerleri, 15
st, 189
st Kenar d boluu (margin-top), 135
st kenar ii boluu(padding-top), 146
V
visibility, 177
visiblity: collapse, 181
250
ndex Tablosu
W
wait, 216
width, 156
WordPad, 3
w-resize, 216
Y
Yaztipi
Yaztipi
Yaztipi
Yaztipi
(font), 75
ailesi (font-family), 67
biemi (font-style), 72
boyutu (font-size), 68
Yaztipi farkllklar (font-variant), 74

Yaztipi kalnl (font-weight), 71
Yaztipi(Font), 65
Yerletirilen eleman(Replaced element), 120
Yerletirilmeyen elemanlar(Nonreplaced
element), 120
Ykseklik (height ), 157
Yzde Deerleri, 15
Yzen kutu, 182
Z
z-index, 196
251

CSS Giris

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Giris

Uploaded by

Copyright:

Available Formats

CSS(Stil ablonlar)

Bu kitap kimin iin?

CSSe giri: CSSin tanm genel bilgiler ve avantajlarn ieriyor.

Yaztipi(font) zellikleri: Metinleri oluturan yaztiplerinin CSS ile

Ayrca Tm CSS zelliklerinin referans, kaynaka ve szlk blm ek

2. zelliklerin web tarayclar destekleme izelgeleri mavi ve koyu mavi alanlar

Yaps: color: <deger>

gsterir. Bu HTML elemanlar belli gruplara ayrlr (blok seviyeli, satrii,

XML de Seiciler HTML

2.4. CSS Yorumlar ............................................................................... 23

5.3. Yaztipi boyutu (font-size) ............................................................... 78

9.2.2. border-top-style, border-right-style, border-bottom-style, border-leftstyle ............................................................................................... 133

10.2.1. Konumlandrma zellii (position) ............................................ 196

1.2. CSSin Avantajlar

1.2.1. Grnm Avantajlar

1.2.2. Kullanm Kolayl

1.2.3. Tasarm Tutarll

1.2.4. Daha az Dosya Boyutlar

1.2.5. Gelecek Vaat ediyor

1.3. CSS Editrleri

1.3.1. Metin Editrleri

Windows iin NotePad veya WordPad

Ancak unu da belirtmeliyim ki bu editrlerden fazla bir zellik ve

1.3.1. CSS Editrleri

Windows iin TopStyle http://www.bradsoft.com/topstyle/

1.3.3. HTML ve Web Programlama Editrleri

Windows iin Microsoft FrontPage

Ben Macromedia Dreamweaver kullanyorum: D

1.4. CSSi Web Dokmanlarna Eklemek

1.4.1. Kod iinde (In-line)

1.4.2. <style> Eleman Kullanlarak

1.4.3. Harici CSS Dosyas Kullanm

Daha sonra bu kodu gereken sayfalarmza uygularz.

1.4.4. @import le Eklemek

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

1.5. Standart mod, garip mod ve Doctype

1.5.1. Web Sayfalarn Dorulama "Onaylama"

kullanlrz. Ancak birok web sayfas hazrlama editr bu arac iinde

1.5.2. Web tarayc modlar

1.5.3. DOCTYPE Geileri

XHTML dokmannda tam bir DOCTYPE tanm yapld ise web

Web tarayclarnn DOCTYPE tiplerine gre farkllklarn grmek iin

Bu kullanm sayfann bir XHTML ereve(frame) sayfas olduunu

ekil2.1 CSSin yaps

2.1. Seiciler ve Bildirim

XML de Seiciler HTML

Tm HTML elemanlar(body, p vd.)

eklinde arada boluk verilerek de bildirim yaplabilir. Burada ilk

Burada / Seicinin yaz tipi boyutunu ve satr yksekliini gsterir.

ekil2.2 Gruplama Yaps

2.3.1. Anahtar szckler

Hatal bir tanmlamadr.

2.3.2. Uzunluk Deerleri

/* elemann font-size deerinin %150 si dir */

2.3.3. Renk Deerleri

2.3.4. URL Deerleri

2.4. CSS Yorumlar

3.1. Snf Seicisi(Class Selector)

ekil3.1 Snf seicilerin yaps

Bu tanmlamay yaptktan sonra istediimiz her HTML elemanna bu snf

Yukardaki rnekte grld gibi bir uyari snfmz birde onemli

3.2. Tekil Seiciler(Id Selector)

ekil3.2 Tekil seicilerin yaps