You are on page 1of 264

CSS(Stil ablonlar)

Balang iin Fatih HAYR OLU

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 G R ......................................................................................... 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 G R

1. CSSE G R

1. CSSE G R
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 G R

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 G R

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 G R

10

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.

1. CSSE G R

11

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; }

1. CSSE G R

12

Daha sonra bu kodu gereken sayfalarmza uygularz. <!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> <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. <!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"> @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.

1. CSSE G R

13

<!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"> @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

1. CSSE G R

14

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.

1. CSSE G R

15

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. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 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. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 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.

2. CSSin Yaps

16

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 <!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>CSS'in yaps</title> <style type="text/css"> h1 { font: medium Arial; } </style> </head> <body> <h1>CSS'in Yaps</h1> </body> </html>

2. CSSin Yaps

17

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 <!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>CSS'in yaps</title> <style type="text/css"> h1 { font: 12px/14px Arial; } </style> </head> <body> <h1>CSS'in Yaps</h1> </body> </html>

2. CSSin Yaps

18

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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2. CSSin Yaps

19

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS'in yaps</title> <style type="text/css"> p, h3 { font-family: Arial; font-size: 2; font-weight: bold; } </style> </head> <body> <h3>CSS'in Yaps</h3> <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

20

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; }

2. CSSin Yaps

21

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.

2. CSSin Yaps

22

/* 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.

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

24

*/ Internet Explorer 6 srmnde float uygulanm ii ie elemanlarda kullanlan yorum satrlar anlamsz bir tekrarlama sorunu meydana getiriyor. Bunu engellemek iin <!--[if !IE]>icerik alani<![endif]--> Ayrntl bilgi iin http://www.fatihhayrioglu.com/?p=232 inceleyiniz.

3. Seiciler

25

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 <!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>CSS'in yaps</title> <style type="text/css"> 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

3. Seiciler

26

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 <!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" />

3. Seiciler

27

<title>CSS'in yaps</title> <style type="text/css"> .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 <!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"

3. Seiciler

28

/> <title>CSS'in yaps</title> <style type="text/css"> .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.

3. Seiciler

29

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 <!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>CSS'in yaps</title> <style type="text/css"> #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>

3. Seiciler

30

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 <!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>CSS'in yaps</title> <style type="text/css">

3. Seiciler

31

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.

3. Seiciler

32

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>

3. Seiciler

33

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

3. Seiciler

34

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:

3. Seiciler

35

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 <!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>CSS'in yaps</title> <style type="text/css"> 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>

3. Seiciler

36

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

3. Seiciler

37

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 <!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>CSS'in yaps</title> <style type="text/css"> 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>

3. Seiciler

38

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

3. Seiciler

39

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 <!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>CSS'in yaps</title> <style type="text/css"> *{ color:red } </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>

3. Seiciler

40

Ayrca bir eleman iindeki tm elemanlara uygulamak istersek rnek 3-10 <!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>CSS'in yaps</title> <style type="text/css"> p*{ color:red } </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>

3. Seiciler

41

Paragraf iindeki tm elemanlar krmz yapar. Tarayc Uyumu : Internet Explorer 5.0+ 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:

3. Seiciler

42

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 <!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>CSS'in yaps</title> <style type="text/css"> img[alt] { border: 5px solid lime } </style> </head> <body> <img src="logo.gif" alt="Logo" width="32" height="41" /> </body> </html>

3. Seiciler

43

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

3. Seiciler

44

rnek 3-12 <!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>CSS'in yaps</title> <style type="text/css"> 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>

3. Seiciler

45

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.

3. Seiciler

46

ekil3.9 Ksmi zellik seicilerin yaps rnek 3-13 <!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>CSS'in yaps</title> <style type="text/css"> 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>

3. Seiciler

47

Trke karakterde sorunsuz alyor. Siz kullanabileceimiz yerleri hesap edin artk. Tarayc Uyumu: Internet Explorer 5.5, 6.0: desteklemiyor 7.0: destekliyor ; 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

3. Seiciler

48

rnek 3-14 <!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>CSS'in yaps</title> <style type="text/css"> *[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>

3. Seiciler

49

Tarayc Uyumu: Internet Explorer 5.5, 6.0: desteklemiyor 7.0: destekliyor ; 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; }

3. Seiciler

50

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 <!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>CSS'in yaps</title> <style type="text/css"> a{ color: blue; } a:visited { color: red; text-decoration: line-through;

3. Seiciler

51

} </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>

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

52

Internet Explorer 5.0+ 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 <!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>CSS'in yaps</title> <style type="text/css"> a:link { color: navy; } a:visited { color: gray; } a:hover { color: red; } a:active { color: yellow; } </style> </head> <body> <p><a href="http://www.google.com" title="Google se">gooogle </a>

3. Seiciler

53

</p> <p><a href="http://www.yahoo.com" title="Yahoo se">yahoo </a> </p> <p><a href="http://dasdasd" title="Fatih">fatih </a> </p> </body> </html>

:focus iin bir rnek verecek olursak rnek 3-17 <!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>CSS'in yaps</title> <style type="text/css"> input:focus { background-color: #FFFFE0; color: white; } </style>

3. Seiciler

54

</head> <body> Ad: <input type="text" id="ad" /> </body> </html>

Tarayc Uyumu: Internet Explorer 5.0+ 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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3. Seiciler

55

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS'in yaps</title> <style type="text/css"> 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>

3. Seiciler

56

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 <!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>CSS'in yaps</title> <style type="text/css">

3. Seiciler

57

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

3. Seiciler

58

edilmemi linklerin :hover zelliini farkl atamak istesek.

rnek 3-20 <!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>CSS'in yaps</title> <style type="text/css"> a:link:hover { color: red; } a:visited:hover { color: pink; } </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>

3. Seiciler

59

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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

3. Seiciler

60

"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>CSS'in yaps</title> <style type="text/css"> 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+

3. Seiciler

61

first-line (ilk satr)


Bir metnin ilk elemanna stil atamak iin kullanlr. rnein paragraflarnzn ilk satrlarn renklendirmek iin kullanabiliriz. rnek 3-22 <!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>CSS'in yaps</title> <style type="text/css"> 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>

3. Seiciler

62

Tarayc Uyumu: Internet Explorer 5.0+ 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 <!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" />

3. Seiciler

63

<title>CSS'in yaps</title> <style type="text/css"> 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>

3. Seiciler

64

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+

4. Basamakl Yap ve Kaltsallk

65

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 <!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>Basamakl Yap ve Kaltsallk</title> <style type="text/css"> h1{ color:red; } h1{ color:blue; } </style> </head> <body> <h1>Sed ut perspiciatis</h1> </body> </html>

4. Basamakl Yap ve Kaltsallk

66

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

4. Basamakl Yap ve Kaltsallk

67

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 <!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>Basamakl Yap ve Kaltsallk</title> <style type="text/css"> body h1{ color:red; } h1{ color:blue; } </style> </head> <body> <h1>Sed ut perspiciatis</h1> </body> </html>

4. Basamakl Yap ve Kaltsallk

68

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}

4. Basamakl Yap ve Kaltsallk

69

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}

4. Basamakl Yap ve Kaltsallk

70

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 (a = 0, b = 0, c = 0, d = 0) 0001 (a = 0, b = 0, c = 0, d = 1) 0002 (a = 0, b = 0, c = 0, d = 2) 0003 (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)

li

Eleman ad

ul li

Eleman ad

div h1 + p

Eleman ad

input[type=text]

Eleman ad +zellik Snf ad

.siniftanimi

div.siniftanimi

Eleman ad + snf tanm Tekil seici ad

#tekiltanim

div#tekiltanim

Eleman ad + tekil seici ad Satr ii style tanm

style (attribute)

4.2. !important
Bir de ncelik iin !important tanmlamas vardr. Eer yukardaki koda !important eklersek

4. Basamakl Yap ve Kaltsallk

71

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 <!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>Basamakl Yap ve Kaltsallk</title> <style type="text/css"> 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>

4. Basamakl Yap ve Kaltsallk

72

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;}

4. Basamakl Yap ve Kaltsallk

73

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 <!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>Basamakl Yap ve Kaltsallk</title> <style type="text/css"> div#icerik{ border: 1px solid #000; } 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>

4. Basamakl Yap ve Kaltsallk

74

Kaltsall kullanarak kodlarmz azaltabiliriz. Ancak kaltsallk nedeni ile de birok sorunla karlatmz unutmayalm. Internet Explorer 7 ve alt srmlerinde inherit deerini desteklememektedir.

5. Yaztipi(Font) zellikleri

75

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 Balang deeri: web taraycs belirler Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Var Renk tanmlamas metinlerimizin rengini belirlemek iin kullanlr. rnek 5-1 <!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>Yaz Tipi(Font) zellikleri</title> <style type="text/css"> 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

5. Yaztipi(Font) zellikleri

76

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: Internet Explorer 3+ 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:

5. Yaztipi(Font) zellikleri

77

<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)

Balang deeri: web taraycs belirler Uygulanabilen elemanlar: tm elemanlar 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 <!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>Yaz Tipi(font) zellikleri</title> <style type="text/css"> 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

5. Yaztipi(Font) zellikleri

78

tristique, felis odio commodo metus, id euismod pede quam sit amet ligula. Curabitur sit amet tellus. Suspendisse potenti.</p> </body> </html>

Tarayc Uyumu: Internet Explorer 3+ 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

5. Yaztipi(Font) zellikleri

79

<uzunluk> <yzde> (st elemanlara(ebeveyn) bal olarak)

Balang deeri: medium Uygulanabilen elemanlar: tm elemanlar 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 <!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>Yaz Tipi(font) zellikleri</title> <style type="text/css"> 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 tristique, felis odio commodo metus, id euismod pede quam sit amet ligula. </td> <td class="enbuyuk">Curabitur sit amet tellus. Suspendisse

5. Yaztipi(Font) zellikleri

80

potenti.</td> </tr> </table> </body> </html>

Windows ortamndaki Internet Explorer 5.5 ve alt srmlerinde balang deeri medium yerine smalldr. Tarayc Uyumu: Internet Explorer 3+ 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 Uygulanabilen elemanlar: tm elemanlar

5. Yaztipi(Font) zellikleri

81

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 <!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>Yaztipi(font) zellikleri</title> <style type="text/css"> p{ font-weight: bolder; } </style> </head> <body> <p>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>

5. Yaztipi(Font) zellikleri

82

Tarayc Uyumu: Internet Explorer 3+ 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 Balang deeri: normal Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Var Yaztipinin eik(italiktik) olup olmamasn belirler. rnek 5-5 <!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>

5. Yaztipi(Font) zellikleri

83

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Yaztipi(font) zellikleri</title> <style type="text/css"> h1{ font-style: oblique; } p{ font-style: italic; } </style> </head> <body> <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </h1> <p>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>

Tarayc Uyumu: Internet Explorer 3+ Firefox 4+

5. Yaztipi(Font) zellikleri

84

Safari 1.3+ Opera 3.6+ CSS 1+

5.6. Yaztipi farkllklar (font-variant)


Yaps: font-variant: <deer> Ald Deerler: normal | small-caps | inherit Balang deeri: normal Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Var Metnin kk-byk harf ile gsterilmesini belirler. ki deer alr. normal | small-caps. rnek 5-6 <!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>Yaz Tipi(Font) zellikleri</title> <style type="text/css"> span{ font-variant: small-caps; } </style> </head> <body> <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </h1> <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>

5. Yaztipi(Font) zellikleri

85

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: Internet Explorer 4+ 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>

5. Yaztipi(Font) zellikleri

86

Balang deeri: tanmsz Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Var

rnek 5-7 <!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>Yaz Tipi(Font) zellikleri</title> <style type="text/css"> h2{ font:bold italic 200%/1.2em Verdana, Helvetica, Arial, sansserif; } </style> </head> <body> <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </h2> <p>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>

5. Yaztipi(Font) zellikleri

87

Tarayc Uyumu: Internet Explorer 3+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+

6. Metin(Text) zellikleri

88

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 <!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>Metin(Text) zellikleri</title> <style type="text/css">

6. Metin(Text) zellikleri

89

p{ text-indent: 10px; } </style> </head> <body> <p>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> <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.

6. Metin(Text) zellikleri

90

Tarayc Uyumu: Internet Explorer 3+ 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 <!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>Metin(Text) zellikleri</title> <style type="text/css"> p{ text-align: justify; } </style> </head> <body> <p>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> <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>

6. Metin(Text) zellikleri

91

Tarayc Uyumu: Internet Explorer 3+ 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 |

6. Metin(Text) zellikleri

92

middle | bottom | text-bottom Balang deeri: baseline Uygulanabilen elemanlar: satrii seviyeden ve table-cell elemanlar Kaltsallk: Yok

rnek 6-3 <!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>Metin(Text) zellikleri</title> <style type="text/css"> 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. 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>

6. Metin(Text) zellikleri

93

Internet Explorer 7 ve alt srmlerinde bottom ve top deerleri textbottom ve text-top gibi yorumlanr. Tarayc Uyumu: Internet Explorer 4+ 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 Balang deeri: normal Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Var

6. Metin(Text) zellikleri

94

rnek 6-4 <!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>Metin(Text) zellikleri</title> <style type="text/css"> 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> <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>

6. Metin(Text) zellikleri

95

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: Internet Explorer 3+ 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 Balang deeri: normal Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Var

6. Metin(Text) zellikleri

96

Szckler aras boluk algoritmalar kullanc arayzne baldr. Szckler aras boluklar ayrca satr iki kenara yaylarak hizalama yaplrken deiebilir. rnek 6-5 <!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>Metin(Text) zellikleri</title> <style type="text/css"> p.deneme{ word-spacing: 10px; } </style> </head> <body> <p class="deneme">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> <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>

6. Metin(Text) zellikleri

97

Firefox 2 ve alt srmlerinde ve Opera9.2 ve alt srmlerinde Satrii ocuk elemanlarn arasndaki boluun asgari genilii sfrdr. Tarayc Uyumu: Internet Explorer 6+ 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 Balang deeri: normal Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Var Harfler aras boluk algoritmas kullanc arayzne baldr. Harfler aras boluklar ayrca satr iki kenara yaylarak hizalama yaplrken deiebilir.

6. Metin(Text) zellikleri

98

rnek 6-6 <!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>Metin(Text) zellikleri</title> <style type="text/css"> p.deneme{ letter-spacing: 5px; } </style> </head> <body> <p class="deneme">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> <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>

6. Metin(Text) zellikleri

99

Tarayc Uyumu: Internet Explorer 4+ 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 Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Var

6. Metin(Text) zellikleri

100

rnek 6-7 <!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>Metin(Text) zellikleri</title> <style type="text/css"> p.deneme{ text-transform:uppercase; } </style> </head> <body> <p class="deneme">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> <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>

6. Metin(Text) zellikleri

101

Tarayc Uyumu: Internet Explorer 4+ 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 Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Yok

6. Metin(Text) zellikleri

102

rnek 6-8 <!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>Metin(Text) zellikleri</title> <style type="text/css"> 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. 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>

6. Metin(Text) zellikleri

103

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: Internet Explorer 3+ 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.

6. Metin(Text) zellikleri

104

6.10. Boluklarn korunmas (white-space)


Yaps: white-space: <deger> Ald Deerler: normal | pre | nowrap | inherit Balang deeri: normal 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 <!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>Metin(Text) zellikleri</title> <style type="text/css"> p.deneme{ white-space: pre; } </style> </head> <body> <p class="deneme">Vestibulum felis. </p> <p>Vestibulum felis. </p> </body> </html>

6. Metin(Text) zellikleri

105

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>

6. Metin(Text) zellikleri

106

Ald Deerler: ltr | rtl | inherit Balang deeri: ltr Uygulanabilen elemanlar: tm elemanlar 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 <!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>Metin(Text) zellikleri</title> <style type="text/css"> 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>

6. Metin(Text) zellikleri

107

Tarayc Uyumu: Internet Explorer 5.5+ 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 Balang deeri: normal Uygulanabilen elemanlar: tm elemanlar 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

6. Metin(Text) zellikleri

108

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+

7. Artalan (Background) zellikleri

109

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 Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Yok transparent deeri elemann artalannn grnmesi iin kullanlr. rnek 7-1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

7. Artalan (Background) zellikleri

110

"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>Artalan(Background) zellikleri</title> <style type="text/css"> p.deneme{ background-color: #ddd; } </style> </head> <body> <p class="deneme">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> <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>

7. Artalan (Background) zellikleri

111

Tarayc Uyumu: Internet Explorer 4+ 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 Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Yok

rnek 7-2 <!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>Artalan(Background) zellikleri</title> <style type="text/css"> body{ background-image: url(Artalan_resmi.gif) } </style> </head> <body> <p>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> <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>

7. Artalan (Background) zellikleri

112

Tarayc Uyumu: Internet Explorer 4+ 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 Uygulanabilen elemanlar: tm elemanlar 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.

7. Artalan (Background) zellikleri

113

no-repeat [yineleme]: Resim yinelenmez; resmin sadece bir kopyas oluturulur. rnek 7-3 <!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>Artalan(Background) zellikleri</title> <style type="text/css"> body{ background: white url(Artalan_resmi.gif); background-repeat: repeat-x; } </style> </head> <body> <p>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> <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>

7. Artalan (Background) zellikleri

114

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: Internet Explorer 4+ 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 Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Yok

7. Artalan (Background) zellikleri

115

rnek 7-4 <!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>Artalan(Background) zellikleri</title> <style type="text/css"> body{ background: white url(Artalan_resmi.gif); background-repeat: no-repeat; background-attachment: fixed; } </style> </head> <body> <p>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> <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> <p>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> <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> <p>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> <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>

7. Artalan (Background) zellikleri

116

Tarayc Uyumu: Internet Explorer 4+ 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

7. Artalan (Background) zellikleri

117

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 <!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>Artalan(Background) zellikleri</title> <style type="text/css"> body{ background: white url(Artalan_resmi.gif); background-repeat: no-repeat; background-position: center; } </style> </head> <body> <p>Vestibulum felis. Maecenas pulvinar, ante convallis pellentesque tristique, felis odio commodo metus, id euismod pede quam sit amet

7. Artalan (Background) zellikleri

118

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> <p>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>

Tarayc Uyumu: Internet Explorer 4+ 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.

7. Artalan (Background) zellikleri

119

Yaps: background: <deger> Ald Deerler: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> Balang deeri: Tanmsz Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Yok

rnek 7-6 <!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>Artalan(Background) zellikleri</title> <style type="text/css"> body{ background: white url(Artalan_resmi.gif) top left fixed repeat-x; } </style> </head> <body> <p>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> <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> <p>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> <p>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> <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> <p>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>

7. Artalan (Background) zellikleri

120

Tarayc Uyumu: Internet Explorer 3+ Firefox 1+ Safari 1.3+(ksmen) 3+ Opera 3.6+ CSS 1+

8. Listeleme zellikleri

121

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, ...).

8. Listeleme zellikleri

122

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 <!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>Listeleme zellikleri</title> <style type="text/css"> 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>

8. Listeleme zellikleri

123

</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: Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+

8. Listeleme zellikleri

124

8.2. Liste imleyici resmi (list-style-image)


Yaps: list-style-image: <deger> Ald Deerler: <url> | none | inherit Balang deeri: none Uygulanabilen elemanlar: display deeri list-item alan elemanlar Kaltsallk: Var

list-style-image zellii list-style iaretinin yerine resim koymak iin kullanlr. rnek 8-2 <!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>Listeleme zellikleri</title> <style type="text/css"> ul{ list-style-image: url(liste_imgesi.gif); } </style> </head> <body> <ul> <li>Vestibulum felis.</li> <li>Maecenas pulvinar</li> <li>Ante convallis pellentesque tristique</li> </ul> </body> </html>

8. Listeleme zellikleri

125

Internet Explorer 7 ve alt srmlerinde float uygulanm liste elemannn list-style-image ile atanm iaretleri grnmez. Tarayc Uyumu: Internet Explorer 4+ 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 Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Yok list-style-position zellii list-item iaretlerin metinin iinden(inside) veya soldan dnda(outside) m olacan belirler.

8. Listeleme zellikleri

126

rnek 8-3 <!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>Listeleme zellikleri</title> <style type="text/css"> ul{ list-style-image: url(liste_imgesi.gif); list-style-position: inside; } </style> </head> <body> <ul> <li>Vestibulum felis.</li> <li>Maecenas pulvinar</li> <li>Ante convallis pellentesque tristique</li> </ul> </body> </html>

8. Listeleme zellikleri

127

Tarayc Uyumu: Internet Explorer 4+ 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 Uygulanabilen elemanlar: display deeri list-item alan elemanlar Kaltsallk: Var list-style zellii list-style-type, list-style-position ve list-style-image zelliklerinin ksa yoludur. rnek 8-4 <!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>Listeleme zellikleri</title> <style type="text/css"> ul { list-style: disc outside; } ol { list-style: decimal inside; } </style> </head> <body> <ul> <li>Vestibulum felis.</li> <li>Maecenas pulvinar</li> <li>Ante convallis pellentesque tristique</li> </ul> <ol> <li>Quisque volutpat.</li> <li>Curabitur feugiat</li> <li>Sapien a laoreet mollis</li> </ol> </body>

8. Listeleme zellikleri

128

</html>

Tarayc Uyumu: Internet Explorer 4+ 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.

9. Kutu Modeli zellikleri

129

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

9. Kutu Modeli zellikleri

130

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.

9. Kutu Modeli zellikleri

131

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 Uygulanabilen elemanlar: tm elemanlar 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

9. Kutu Modeli zellikleri

132

<!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>Kutu Modeli zellikleri</title> <style type="text/css"> p.yeni { border-style: solid; } </style> </head> <body> <p class="yeni">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> <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>

9. Kutu Modeli zellikleri

133

Tarayc Uyumu: Internet Explorer 4+ 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 Balang deeri: tanmlama yok Uygulanabilen elemanlar: tm elemanlar 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 <!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>Kutu Modeli zellikleri</title> <style type="text/css"> h1{ border-style: solid; border-left-style: none; } </style> </head> <body> <h1>Vestibulum felis.</h1> <p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio 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>

9. Kutu Modeli zellikleri

134

Tarayc Uyumu: Internet Explorer 6+ 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 Balang deeri: tanmlama yok Uygulanabilen elemanlar: tm elemanlar 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.

9. Kutu Modeli zellikleri

135

Uzunluk: Kenar izgisi kalnl dorudan belirtilen (greli olmayan/hesaplanmayan) bir deerdir ve negatif olamaz. rnek 9-3 <!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>Kutu Modeli zellikleri</title> <style type="text/css"> p{ margin: 5px; background-color: silver; border-style: solid; border-width: 1px; } </style> </head> <body> <h1>Vestibulum felis.</h1> <p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio 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>

9. Kutu Modeli zellikleri

136

Tarayc Uyumu: Internet Explorer 4+ 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 Balang deeri: tanmlama yok Uygulanabilen elemanlar: tm elemanlar 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 <!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">

9. Kutu Modeli zellikleri

137

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Kutu Modeli zellikleri</title> <style type="text/css"> h2{ border-left-width: medium; border-style: solid; } </style> </head> <body> <h2>Vestibulum felis.</h2> <p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio 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>

9. Kutu Modeli zellikleri

138

Tarayc Uyumu: Internet Explorer 6+ 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 Balang deeri: tanmlama yok Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Yok border-color zellii kenarlk rengini belirler. rnek 9-5 <!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>Kutu Modeli zellikleri</title> <style type="text/css"> p{ border-style: solid; border-color: gray; } </style> </head> <body> <h2>Vestibulum felis.</h2> <p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio 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>

9. Kutu Modeli zellikleri

139

Tek deer tm kenarlk renklerini belirler, her kenar iin ayr renk tanmlamasda yaplabilir. Tarayc Uyumu: Internet Explorer 4+ 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 Balang deeri: tanmlama yok Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Yok border-color zelliinin her kenara ayr ayr atamasn yapabilmek iin kullanlr. rnek 9-6 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

9. Kutu Modeli zellikleri

140

"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>Kutu Modeli zellikleri</title> <style type="text/css"> p{ border-style: solid; border-top-color: gray; } </style> </head> <body> <h2>Vestibulum felis.</h2> <p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio 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>

9. Kutu Modeli zellikleri

141

Tek deer tm kenarlk renklerini belirler, her kenar iin ayr renk tanmlamasda yaplabilir. Tarayc Uyumu: Internet Explorer 4+ 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> Balang deeri: tanmlama yok Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Yok border yukarda sraladmz zellikleri tek sefer de tanmlamak iin kullanlr. Bir ksa yoldur.

9. Kutu Modeli zellikleri

142

rnek 9-7 <!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>Kutu Modeli zellikleri</title> <style type="text/css"> h1{ border: thick solid silver; } </style> </head> <body> <h1>Vestibulum felis.</h1> <p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio 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>

9. Kutu Modeli zellikleri

143

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: Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+

9. Kutu Modeli zellikleri

144

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 Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Yok margin-top zellii elemann st kenar d boluunu belirli bir deer kadar veya yzde olarak belirler. Negatif deer alabilir. rnek 9-8 <!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>Kutu Modeli zellikleri</title> <style type="text/css"> body{ margin-top: 100px; } </style> </head> <body> <h1>Vestibulum felis.</h1> <p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio commodo metus, id euismod pede quam sit amet ligula. Curabitur sit amet tellus. Suspendisse potenti.</p>

9. Kutu Modeli zellikleri

145

<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>

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: Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+

9. Kutu Modeli zellikleri

146

9.3.2. Sa kenar d boluu (margin-right )


Yaps: margin-right: <deger> Ald Deerler: <uzunluk deeri > | <yzde> | auto | inherit Balang deeri: 0 Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Yok margin-right zellii elemann sa kenar d boluunu belli bir deer kadar veya yzde olarak belirler. Negatif deer alabilir. rnek 9-9 <!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>Kutu Modeli zellikleri</title> <style type="text/css"> p.diger { margin-right: 50%; } </style> </head> <body> <h1>Vestibulum felis.</h1> <p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio commodo metus, id euismod pede quam sit amet ligula. Curabitur sit amet tellus. Suspendisse potenti.</p> <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>

9. Kutu Modeli zellikleri

147

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: Internet Explorer 3+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+

9.3.3. Alt kenar d boluu (margin-bottom)


Yaps: margin-bottom: <deger> Ald Deerler: <uzunluk deeri > | <yzde> | auto Balang deeri: 0 Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Yok

9. Kutu Modeli zellikleri

148

margin-bottom zellii elemann alt kenar d boluunu belli bir deer kadar veya yzde olarak belirler. Negatif deer alabilir. rnek 9-10 <!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>Kutu Modeli zellikleri</title> <style type="text/css"> p{ margin-bottom: 50px; } </style> </head> <body> <h1>Vestibulum felis.</h1> <p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio commodo metus, id euismod pede quam sit amet ligula. Curabitur sit amet tellus. Suspendisse potenti.</p> <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>

9. Kutu Modeli zellikleri

149

Internet Explorer 6da body elementi veya kapsayc blok elemanlara genilik tanm yapldnda dikeydeki kenar d boluu(margin-top) yzde deerlerinde sorun yaanyor. 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: Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+

9.3.4. Sol kenar d boluu (margin-left)


Yaps: margin-left: <deger> Ald Deerler: <uzunluk deeri > | <yzde> | auto Balang deeri: 0 Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Yok

9. Kutu Modeli zellikleri

150

margin-left zellii elemann sol kenar d boluunu belli bir deer kadar veya yzde olarak belirler. Negatif deer alabilir. rnek 9-11 <!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>Kutu Modeli zellikleri</title> <style type="text/css"> p{ margin-left: 20px; } </style> </head> <body> <h1>Vestibulum felis.</h1> <p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio commodo metus, id euismod pede quam sit amet ligula. Curabitur sit amet tellus. Suspendisse potenti.</p> <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>

9. Kutu Modeli zellikleri

151

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: Internet Explorer 3+ 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 Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Yok

9. Kutu Modeli zellikleri

152

margin zellii yukardaki zelliklerin tek bir zellikle uygulanmas iin kullanlr. Bir ksa yoldur. rnek 9-12 <!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>Kutu Modeli zellikleri</title> <style type="text/css"> h1 { margin: 0.25in; background-color: silver; } h1 { margin: 10px 20px 15px 5px; } </style> </head> <body> <h1>Vestibulum felis.</h1> <p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio commodo metus, id euismod pede quam sit amet ligula. Curabitur sit amet tellus. Suspendisse potenti.</p> <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>

9. Kutu Modeli zellikleri

153

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 */ Internet Explorer 6da body elementi veya kapsayc blok elemanlara genilik tanm yapldnda dikeydeki kenar d boluu(margin-top) yzde deerlerinde sorun yaanyor. 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 7 ve alt srmlerinde kenar d boluu kmesi sorunu yaanmaktadr. Ayrntl bilgi iin http://www.fatihhayrioglu.com/?p=362

9. Kutu Modeli zellikleri

154

adresine gz atn. 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: Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+

9. Kutu Modeli zellikleri

155

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> Ald Deerler: <uzunluk deeri > | <yzde> | inherit Balang deeri: 0 Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Yok padding-top zellii ierik alan ile st kenar izgisi arasndaki mesafeyi belirler. rnek 9-13 <!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>Kutu Modeli zellikleri</title> <style type="text/css"> h2 { padding-top: 0.25in; background-color:#999; } </style> </head> <body> <h2>Vestibulum felis.</h2> <p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio commodo metus, id euismod pede quam sit amet ligula. Curabitur sit amet tellus. Suspendisse potenti.</p> <p class="diger">Quisque volutpat. Curabitur feugiat, sapien a laoreet

9. Kutu Modeli zellikleri

156

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>

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: Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+

9. Kutu Modeli zellikleri

157

9.4.2. Sa kenar ii boluu(padding-right )


Yaps: padding-right: <deger> Ald Deerler: <uzunluk deeri > | <yzde> | inherit Balang deeri: 0 Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Yok padding-right zellii ierik alan ile sa kenar izgisi arasndaki mesafeyi belirler. rnek 9-14 <!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>Kutu Modeli zellikleri</title> <style type="text/css"> h2 { padding-right: 0.25in; background-color:#999; float:left; } </style> </head> <body> <h2>Vestibulum felis.</h2> <p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio commodo metus, id euismod pede quam sit amet ligula. Curabitur sit amet tellus. Suspendisse potenti.</p> <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>

9. Kutu Modeli zellikleri

158

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. 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: Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+

9.4.3. Alt kenar ii boluu (padding-bottom)


Yaps: padding-bottom: <deger> Ald Deerler: <uzunluk deeri > | <yzde> | inherit Balang deeri: 0 Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Yok

9. Kutu Modeli zellikleri

159

padding-bottom zellii ierik alan ile alt kenar izgisi arasndaki mesafeyi belirler. rnek 9-15 <!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>Kutu Modeli zellikleri</title> <style type="text/css"> h2 { padding-bottom: 0.25in; background-color: #999; } </style> </head> <body> <h2>Vestibulum felis.</h2> <p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio commodo metus, id euismod pede quam sit amet ligula. Curabitur sit amet tellus. Suspendisse potenti.</p> <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>

9. Kutu Modeli zellikleri

160

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: Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+

9.4.4. Sol kenar ii boluu (padding-left)


Yaps: padding-left: <deger> Ald Deerler: <uzunluk deeri > | <yzde> | inherit Balang deeri: 0 Uygulanabilen elemanlar: tm elemanlar Kaltsallk: Yok

9. Kutu Modeli zellikleri

161

padding-left zellii ierik alan ile sol kenar izgisi arasndaki mesafeyi belirler. rnek 9-16 <!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>Kutu Modeli zellikleri</title> <style type="text/css"> h2 { padding-left: 0.25in; background-color: #999; } </style> </head> <body> <h2>Vestibulum felis.</h2> <p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio commodo metus, id euismod pede quam sit amet ligula. Curabitur sit amet tellus. Suspendisse potenti.</p> <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>

9. Kutu Modeli zellikleri

162

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. Tarayc Uyumu: Internet Explorer 4+ 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 Uygulanabilen elemanlar: Blok seviyeli ve yerletirilen elemanlar Kaltsallk: Yok padding zellii padding-top, padding-right, padding-bottom ve paddingleft deerlerini ksa yoldan atamak iin kullanlr. rnek 9-17

9. Kutu Modeli zellikleri

163

<!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>Kutu Modeli zellikleri</title> <style type="text/css"> h2 { padding: 10px; background-color: #999; float:left; } </style> </head> <body> <h2>Vestibulum felis.</h2> <p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio commodo metus, id euismod pede quam sit amet ligula. Curabitur sit amet tellus. Suspendisse potenti.</p> <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>

9. Kutu Modeli zellikleri

164

Kenar d boluu(margin)ndaki gibi farkl kullanm ekilleri mevcuttur. 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: Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+

9. Kutu Modeli zellikleri

165

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 Uygulanabilen elemanlar: Blok seviyeli ve yerletirilen elemanlar 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 <!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>Kutu Modeli zellikleri</title> <style type="text/css"> p.diger { width: 200px; } </style> </head> <body> <h2>Vestibulum felis.</h2> <p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio

9. Kutu Modeli zellikleri

166

commodo metus, id euismod pede quam sit amet ligula. Curabitur sit amet tellus. Suspendisse potenti.</p> <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>

Tarayc Uyumu: Internet Explorer 4+ 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 Uygulanabilen elemanlar: Blok seviyeli ve yerletirilen elemanlar Kaltsallk: Yok

9. Kutu Modeli zellikleri

167

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 <!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>Kutu Modeli zellikleri</title> <style type="text/css"> h2 { height: 15px; background-color: #CCCCCC; } </style> </head> <body> <h2>Vestibulum felis.</h2> <p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio commodo metus, id euismod pede quam sit amet ligula. Curabitur sit amet tellus. Suspendisse potenti.</p> <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>

9. Kutu Modeli zellikleri

168

Tarayc Uyumu: Internet Explorer 4+ 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> Ald Deerler: <uzunluk deeri > | <yzde> | inherit 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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

9. Kutu Modeli zellikleri

169

"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>Kutu Modeli zellikleri</title> <style type="text/css"> p.diger { min-height:150px; } </style> </head> <body> <h2>Vestibulum felis.</h2> <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> <p>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>

9. Kutu Modeli zellikleri

170

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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

9. Kutu Modeli zellikleri

171

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Kutu Modeli zellikleri</title> <style type="text/css"> p.diger { max-width: 250px; } </style> </head> <body> <h2>Vestibulum felis.</h2> <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> <p>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>

9. Kutu Modeli zellikleri

172

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 <!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>Kutu Modeli zellikleri</title> <style type="text/css"> #icerik{ min-width: 200px; max-width: 400px; width: expression(document.body.clientWidth < 200? "200px" : document.body.clientWidth > 400? "400px" : "auto"); } </style> </head> <body> <h2>Vestibulum felis.</h2> <div id="icerik">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. </div> <p>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>

9. Kutu Modeli zellikleri

173

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; }

9. Kutu Modeli zellikleri

174

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: Internet Explorer 6+ 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.

9. Kutu Modeli zellikleri

175

rnek 9-23 <!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>Kutu Modeli zellikleri</title> <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> <li><a href="">Dierleri</a></li> <li><a href="">Dierleri</a></li> <li><a href="">Dierleri</a></li> <li><a href="">Dierleri</a></li> </ul> </div> </body> </html>

9. Kutu Modeli zellikleri

176

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 <!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>Kutu Modeli zellikleri</title> <style> div#solMenu { position: absolute; top: 10px; left: 10px;

9. Kutu Modeli zellikleri

177

width: 200px; height: 120px; background: #bbbbbb; overflow: scroll; } </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> <li><a href="">Dierleri</a></li> <li><a href="">Dierleri</a></li> <li><a href="">Dierleri</a></li> <li><a href="">Dierleri</a></li> </ul> </div> </body> </html>

9. Kutu Modeli zellikleri

178

overflow: hidden eer overflow:hidden deeri atarsak. Snrladmz kutunun dna taan ksmlar gsterilmeyecektir. rnek 9-25 <!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>Kutu Modeli zellikleri</title> <style> div#solMenu { position: absolute; top: 10px; left: 10px; width: 200px; height: 120px; background: #bbb; overflow:hidden;

9. Kutu Modeli zellikleri

179

} </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> <li><a href="">Dierleri</a></li> <li><a href="">Dierleri</a></li> <li><a href="">Dierleri</a></li> <li><a href="">Dierleri</a></li> </ul> </div> </body> </html>

9. Kutu Modeli zellikleri

180

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 <!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>Kutu Modeli zellikleri</title> <style> div#solMenu { position: absolute; top: 10px; left: 10px; width: 200px; height: 120px; background: #bbbbbb; overflow:auto; } </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> <li><a href="">Dierleri</a></li> <li><a href="">Dierleri</a></li> <li><a href="">Dierleri</a></li> <li><a href="">Dierleri</a></li> </ul> </div> </body> </html>

9. Kutu Modeli zellikleri

181

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

9. Kutu Modeli zellikleri

182

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: Internet Explorer 5+ 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:

9. Kutu Modeli zellikleri

183

Internet Explorer 5.5+(ksmen) 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

9. Kutu Modeli zellikleri

184

Bir rnek yapalm. CSS kodu: rnek 9-27 <!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>Kutu Modeli zellikleri</title> <style> .kirpma{ position: absolute; clip: rect(50px 130px 153px 40px); }

9. Kutu Modeli zellikleri

185

</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

9. Kutu Modeli zellikleri

186

Kaltsallk: Yok

Tarayc Uyumu: Internet Explorer 5.5+(ksmen) 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 <!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>Kutu Modeli zellikleri</title> <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>

9. Kutu Modeli zellikleri

187

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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

9. Kutu Modeli zellikleri

188

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Kutu Modeli zellikleri</title> <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>

9. Kutu Modeli zellikleri

189

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.

10. Yzen kutu ve Konumlandrma zellikleri

190

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 Uygulanabilen elemanlar: tm elemanlar 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 <!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"

10. Yzen kutu ve Konumlandrma zellikleri

191

/> <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:

10. Yzen kutu ve Konumlandrma zellikleri

192

Internet Explorer 4+ 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.

10. Yzen kutu ve Konumlandrma zellikleri

193

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 Uygulanabilen elemanlar: tm elemanlar 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.

10. Yzen kutu ve Konumlandrma zellikleri

194

rnek 10-2 <!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>Clear</title> <style type="text/css"> #sol { width: 100px; float: left; background: #A2E7D7; padding: 1px; margin:0; } #temizle { clear: left; border: 1px solid #000; } </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>

10. Yzen kutu ve Konumlandrma zellikleri

195

Tarayc Uyumu: Internet Explorer 3+ 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.

10. Yzen kutu ve Konumlandrma zellikleri

196

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 Uygulanabilen elemanlar: tm elemanlar 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:

10. Yzen kutu ve Konumlandrma zellikleri

197

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

10. Yzen kutu ve Konumlandrma zellikleri

198

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;

10. Yzen kutu ve Konumlandrma zellikleri

199

} .. <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 <!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">

10. Yzen kutu ve Konumlandrma zellikleri

200

<head> <style type="text/css"> 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

10. Yzen kutu ve Konumlandrma zellikleri

201

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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">

10. Yzen kutu ve Konumlandrma zellikleri

202

<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.

10. Yzen kutu ve Konumlandrma zellikleri


203

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.

10. Yzen kutu ve Konumlandrma zellikleri

204

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;

10. Yzen kutu ve Konumlandrma zellikleri

205

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.

10. Yzen kutu ve Konumlandrma zellikleri

206

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;

10. Yzen kutu ve Konumlandrma zellikleri

207

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:

10. Yzen kutu ve Konumlandrma zellikleri


208

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:

Normal aktaki kutular koddaki sraya gre sralanr float uygulanm kutular Konumlandrma uygulanm elemanlarda ise kodlamadaki sraya gre

10. Yzen kutu ve Konumlandrma zellikleri

209

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 Uygulanabilen elemanlar: tm elemanlar 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 {

10. Yzen kutu ve Konumlandrma zellikleri

210

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: Internet Explorer 5.5+(ksmen) Firefox1+ (ksmen) Safari1.3+ Opera 9.2+ CSS 2+

11. Tablo zellikleri

211

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 <!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>table-layout rnei</title> <style> table.otomatik { table-layout: auto;

11. Tablo zellikleri

212

width: 350px; border-collapse: collapse; } table.sabit { table-layout: fixed; width: 350px; border-collapse: collapse; } 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>1024/256e kadar</td> <td>6</td> <td>39 YTL</td> <td>0,009 YTL</td> </tr> <tr> <td>2048/512e kadar</td> <td>6</td> <td>49YTL</td> <td>0,009 YTL</td> </tr> </table> &nbsp; <table cellpadding="0" cellspacing="0" class="sabit"> <caption>Limitli ADSL Fiyatlar</caption> <tr> <th>Hz*(Kbps) </th>

11. Tablo zellikleri

213

<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>1024/256e kadar</td> <td>6</td> <td>39 YTL</td> <td>0,009 YTL</td> </tr> <tr> <td>2048/512e kadar</td> <td>6</td> <td>49YTL</td> <td>0,009 YTL</td> </tr> </table> </body> </html>

11. Tablo zellikleri

214

Tarayc Uyumu: Internet Explorer 5+ 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.

11. Tablo zellikleri

215

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

11. Tablo zellikleri

216

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 <!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>border-collapse rnei</title> <style> table.ayri { border-collapse: separate; } table.birlesik { border-collapse: collapse; } 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> &nbsp; <table border="0" cellspacing="0" class="birlesik"> <tr> <td>hcre1</td> <td>hcre2</td>

11. Tablo zellikleri

217

</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

11. Tablo zellikleri

218

kenarlar iin geerlidir, iki deer atanrsa ilki yatayda boluk iin ikincisi dikey de boluk vermek iin tanmlanmtr.

rnek 11-3 <!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>border-spacing rnei</title> <style> table.ayri { border-collapse: separate; border-spacing: 3px 5px; } table.birlesik { border-collapse: separate; } 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> &nbsp; <table border="0" cellspacing="0" class="birlesik"> <tr> <td>hcre1</td> <td>hcre2</td> </tr> <tr> <td>hcre3</td> <td>hcre4</td> </tr>

11. Tablo zellikleri

219

</table> </body> </html>

Tarayc Uyumu: Internet Explorer (desteklemiyor) 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.

11. Tablo zellikleri

220

rnek 11-4 <!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>empty-cells rnei</title> <style> table.goster { empty-cells:show } table.gizle { empty-cells:hide } td { border: 1px solid black; 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> &nbsp; <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>

11. Tablo zellikleri

221

Tarayc Uyumu: Internet Explorer (desteklemiyor) Firefox 1+ Safari 1.3+ Opera 7.5+ CSS 2+

12. Kullanc Arayz zellikleri

222

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 Uygulanabilen elemanlar: tm elemanlara Kaltsallk: Var

crosshair default pointer move e-resize ne-resize nw-resize n-resize

nce art imleci erie bakmakszn platformun balang imlecini gsterir. Linklerde kan el iareti imlecini gsterir. Tama imlecini gsterir. Bat yn(east) imlecini gsterir. Kuzey dou yn(north east) tama imlecini gsterir. Kuzey bat yn(north west) imlecini gsterir. Kuzey yn(North) imlecini gsterir.

12. Kullanc Arayz zellikleri

223

se-resize sw-resize s-resize w-resize text wait help auto progress

Gney dou yn(south east) imlecini gsterir. Gney bat yn(south west) imleci Gney yn(South) imlecini gsterir. Bat yn(west) imlecini gsterir. Metin imlecini gsterir. Bekleme imlecini gsterir. Genelde kum saati eklindedir. Yardm imlecini gsterir 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: Internet Explorer 5.5+ 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

12. Kullanc Arayz zellikleri

224

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 Uygulanabilen elemanlar: tm elemanlara 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: Internet Explorer (desteklemiyor) Firefox 1.5+

12. Kullanc Arayz zellikleri

225

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 Uygulanabilen elemanlar: tm elemanlara 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: Internet Explorer (desteklemiyor) 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 Uygulanabilen elemanlar: tm elemanlara Kaltsallk: Yok CSSin destekledii renk deerlerini kullanabiliriz, hatta invert deerinide kullanabiliriz. nvert, rengi tersine evirir.

Tarayc Uyumu: Internet Explorer (desteklemiyor) Firefox 1.5+

12. Kullanc Arayz zellikleri

226

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 Uygulanabilen elemanlar: tm elemanlara 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: Internet Explorer (desteklemiyor) Firefox 1.5+ Opera 9.2+ Safari 1.3+

12. Kullanc Arayz zellikleri

227

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.

Ek A Tm CSS zellikleri

228

Ek A Tm CSS zellikleri
Tarayc Uyumu: IE: Internet Explorer, F: Firefox W3C: "W3C"n zellii ekledii CSS srm Artalan (Background) zellikleri zellik background Aklamas Tm artalan zelliklerinin bir ksaltmasdr. Deerleri background-color background-image background-repeat backgroundattachment background-position scroll fixed IE F W3C 4 1 1

backgroundattachment

Artalan resminin sayfann dier elemanlarna gre sabitlenmesini veya kaymasn belirler

1 1

background-color Elemanlara artalan rengini tanmlar

color-rgb color-hex color-name transparent url(URL) none

1 1

backgroundimage backgroundposition

Elemanlara artalan resmi tanmlar

4 4

1 1 1 1

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 Artalan resminin yenileme durumunu tanmlar repeat repeat-x repeat-y

backgroundrepeat

1 1

Ek A Tm CSS zellikleri

229

no-repeat Kenar izgisi (Border) zellikleri zellik Border Aklamas Tm kenar izgisi zelliklerinin ksaltmasdr Alt kenar izgisi zelliklerinin ksaltmasdr Alt kenar izgisi rengini tanmlar Alt kenar izgisinin biemini tanmlar Alt kenar izgisinin kalnln tanmlar Deerleri border-width border-style border-color IE F W3C 4 1 1

border-bottom

border-bottom-width 4 border-style border-color border-color border-style thin medium thick length color 4 4 4

1 1

border-bottomcolor border-bottomstyle border-bottomwidth

1 2 1 2 1 1

border-color

Tm kenar izgilerinin rengini tanmlar. Bir veya birden fazla kenara tanmlama yaplabilir. Sol kenar izgisi zelliklerinin ksaltmasdr Sol kenar izgisi rengini tanmlar Sol kenar izgisinin biemini tanmlar

1 1

border-left

border-left-width border-style border-color border-color border-style thin medium thick length border-right-width border-style border-color border-color

1 1

border-left-color border-left-style

4 4 4

1 2 1 2 1 1

border-left-width Sol kenar izgisinin kalnln tanmlar

border-right

Sa kenar izgisi zelliklerinin ksaltmasdr Sa kenar izgisi rengini tanmlar

1 1

border-rightcolor

1 2

Ek A Tm CSS zellikleri

230

border-rightstyle border-rightwidth

Sol kenar izgisinin biemini tanmlar Sol kenar izgisinin kalnln tanmlar

border-style thin medium thick length none hidden dotted dashed solid double groove ridge inset outset border-top-width border-style border-color border-color border-style thin medium thick length thin medium thick length

4 4

1 2 1 1

border-style

Tm kenar izgilerinin biemini tanmlar. Bir veya birden fazla kenara tanmlama yaplabilir.

1 1

border-top

st kenar izgisi zelliklerinin ksaltmasdr st kenar izgisi rengini tanmlar st kenar izgisinin biemini tanmlar

1 1

border-top-color border-top-style

4 4 4

1 2 1 2 1 1

border-top-width st kenar izgisinin kalnln tanmlar

border-width

Tm kenar izgilerinin kalnlklarn tanmlar. Bir veya birden fazla kenara tanmlama yaplabilir.

1 1

Tasnif zellikleri zellik clear Aklamas Floating uygulanmayan elemann ke tanmn yapar. Fare imlecinin nasl Deerleri left right both none url IE F W3C 4 1 1

cursor

1 2

Ek A Tm CSS zellikleri

231

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 display Elamann nasl grneceinin belirler. 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 4 1 1

float

Elemann(resim veya left right metin) dier none elemanlara gre konumunu belirler. Elemann konumunu belirler. static relative absolute fixed visible hidden collapse

1 1

position

1 2

visibility

Elemann grnr veya gizli olacan belirler.

1 2

Ek A Tm CSS zellikleri

232

Boyut tanmlama zellikleri zellik height Aklamas Eleman yksekliini tanmlar. Satrlar aras mesafeyi tanmlar. Deerleri auto length % normal number length % IE F W3C 4 1 1

line-height

1 1

max-height

Eleman azami none yksekliini tanmlar. length % Eleman azami geniliini tanmlar. none length %

1 2

max-width

1 2

min-height min-width width

Eleman asgari length yksekliini tanmlar. % Eleman asgari geniliini tanmlar. Eleman geniliini tanmlar. length % auto % length

1 2 1 2 1 1

Yaztipi (Font) zellikleri zellik font Aklamas Deerleri IE F W3C 1 1

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 Yaztipi ailesini veya family-name generic-family ailelerini ve ait olduu grubunu belirler 3 1

font-family

Ek A Tm CSS zellikleri

233

font-size

Yaztipi boyunu belirler

xx-small x-small small medium large x-large xx-large smaller larger length % normal italic oblique

font-style

Yaztipi biemini belirler

font-variant

Metnin kk-byk normal small-caps harf ile gsterilmesini belirler. Yaztipi kalnln belirler normal bold bolder lighter 100 200 300 400 500 600 700 800 900

font-weight

erik ynetim zellikleri zellik content Aklamas :before ve :after szde snflar ile kullanlan ierik ksmn ynetir. Deerleri string url counter(name) counter(name, liststyle-type) counters(name, string) counters(name, string, list-styletype) IE F 1 W3C 2

Ek A Tm CSS zellikleri

234

attr(X) open-quote close-quote no-open-quote no-close-quote counterincrement counter-reset Seicinin her durumu none identifier number iin saya deerini dzenler Seicinin her durumu none identifier number iin saya deerini belirler Trnak iaretlerini belirler. none string string 1 2

quotes

Liste (List) zellikleri zellik list-style Aklamas Deerleri IE F 4 1 W3C 1

Liste zelliklerinin bir list-style-type ksa yoludur. list-style-position list-style-image none list-style iaretinin yerine resim koymak url iin kullanlr. inside outside 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-style-image

list-style-position list-item iaretinin yerini belirler. list-style-type list-item iaretinin tipini belirler

4 4

1 1

1 1

Ek A Tm CSS zellikleri

235

katakana hiragana-iroha katakana-iroha marker-offset auto length 1 2

Kenar d boluu (Margin) zellikleri zellik Margin Aklamas Kenar d boluu zelliklerinin ksaltmasdr Elemann alt kenar d boluunu tanmlar Elemann sol kenar d boluunu tanmlar Elemann sa kenar d boluunu tanmlar Elemann st kenar d boluunu tanmlar Deerleri margin-top margin-right margin-bottom margin-left auto length % auto length % auto length % auto length % IE F 4 1 W3C 1

margin-bottom

margin-left

margin-right

margin-top

D hat izgisi (Outlines) zellikleri zellik Outline Aklamas D hat izgileri zelliklerinin ksaltmasdr Eleman saran d hat izgilerinin rengini tanmlar Eleman saran d hat izgilerinin biemini tanmlar Deerleri outline-color outline-style outline-width color invert none dotted dashed solid double groove ridge IE F W3C

1.5 2

outline-color

1.5 2

outline-style

1.5 2

Ek A Tm CSS zellikleri

236

inset outset outline-width Eleman saran d hat izgilerinin kalnln tanmlar thin medium thick length 1.5 2

Kenar i boluu (Padding) zellikleri zellik Padding Aklamas Kenar i boluu zelliklerinin ksaltmasdr Deerleri padding-top padding-right padding-bottom padding-left IE F W3C 4 1 1

padding-bottom padding-left padding-right padding-top

Elemann alt kenar i length boluunu tanmlar % Elemann sol kenar i length boluunu tanmlar % Elemann sa kenar length i boluunu tanmlar % Elemann st kenar i length boluunu tanmlar %

4 4 4 4

1 1 1 1 1 1 1 1

Konumlandrma (Positioning) zellikleri zellik bottom Aklamas Bir elemann st elemannn altna gre ne kadar aada ya da yukarda olacan belirler. Elemann snrlarn belirlemek iin kullanlr. Deerleri auto % length IE F W3C 5 1 2

clip

shape auto

1 2

left

auto Bir elemann st elemann soluna gre % ne kadar solda ya da length sada olacan belirler. Eleman ieriinin tama durumunda visible hidden

1 2

overflow

1 2

Ek A Tm CSS zellikleri

237

nasl davranacan belirler. position Elemann konumunu belirler.

scroll auto static relative absolute fixed 4 1 2

right

auto Bir elemann st elemann sana gre % ne kadar solda ya da length sada olacan belirler. Bir elemann st elemannn stne gre ne kadar aada ya da yukarda olacan belirler. Elemann dikey hizalamasn tanmlar. auto % length

1 2

top

1 2

vertical-align

baseline sub super top text-top middle bottom text-bottom length % auto number

1 1

z-index

Elemann zeksenindeki yerini tanmlar

1 2

Tablo (Table) zellikleri zellik border-collapse Aklamas Tablo hcrelerinin etrafndaki kenarlk ile olan mesafeyi azaltmamz veya amamz salar. Tablo hcrelerinin kenar izgileri arasndaki mesafeyi ayarlar Deerleri collapse separate IE F W3C 5 1 2

border-spacing

length length

1 2

Ek A Tm CSS zellikleri

238

caption-side

Tablo balnn tarafn belirler.

top bottom left right show hide

1 2

empty-cells

Tablodaki bo hcrelerin gsterilip gsterilmeyeceini tanmlar Tablo hcrelerinin, satrlarn ve kolonlarn gsterimini ayarlar

1 2

table-layout

auto fixed

1 2

Metin (Text) zellikleri zellik color direction line-height Aklamas Metinlerin renklerini tanmlar. Metin ynn tanmlar Satrlar aras mesafeyi tanmlar Deerleri color ltr rtl normal number length % normal length IE F W3C 3 6 4 1 1 1 2 1 1

letter-spacing

Karakterler aras boluu arttrmak veya azaltmamz salar Eleman iindeki metinleri hizalamamz salar

1 1

text-align

left right center justify

1 1

text-decoration

Metinleri sslememizi none salar underline overline line-through blink Eleman iindeki metnin ilk satrnn girintisini tanmlar Metinlere glge vermeye yarar length % none color

1 1

text-indent

1 1

text-shadow

Ek A Tm CSS zellikleri

239

length text-transform Metni byk-kk harf evirmek iin kullanlr. ok ynllk algoritmasn ayarlamamz salar Elemanlarn boluklarnn nasl ilem greceini belirler. Szckler arasndaki boluk deerini belirler. none capitalize uppercase lowercase normal embed bidi-override normal pre nowrap normal length 4 1 1

unicode-bidi

white-space

1 1

word-spacing

1 1

Szde snflar (Pseudo-classes) Szde snf :active :focus :hover :link :visited :first-child :lang Amac Aktif elemanlara stil tanmlamamz salar. Odaklandmz elemanlara stil tanmlamamz salar. Fare imlecinin zerine gittii elemanlara stil tanmlamamz salar. Ziyaret etmediimiz balantlara stil tanmlamamz salar. Ziyaret ettiimiz balantlara stil tanmlamamz salar. Belirtilen elemann ilk ocuk Elemanna stil atamak iin kullanlr. erikteki bir eleman farkl bir dilde yazmamz salar. IE F 4 4 3 3 1 W3C 1

1.5 2 1 1 1 1 1 1 1 1 2 2

Szde elemanlar (Pseudo-elements) Szde-eleman :first-letter :first-line Amac Metnin ilk harfine stil tanmlamamz salar. Metnin ilk satrna stil tanmlamamz salar. IE F 5 5 1 1 W3C 1 1

Ek A Tm CSS zellikleri

240

:before :after

Eleman ncesine baz metinleri eklememizi salar. Eleman sonrasna baz metinleri eklememizi salar.

1.5 2 1.5 2

Ek B Kaynaka

241

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

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

243

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

Ek C Szlk

244

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

Ek C Szlk

245

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

Ek C Szlk

246

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

Ek C Szlk

247

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

ndex Tablosu

248

ndex Tablosu
#
#RGB, 16 #RRGGBB, 16

:
:active, 47 :focus, 46 :hover, 47 :lang szde snf, 51 :link, 44 :visited, 45

@
@import, 6

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

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

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

ndex Tablosu

249

DOCTYPE Geii(DOCTYPE switching), 8

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

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

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

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

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

erik Alan, 121 erik ksm, 1 lk ocuk Elemann semek, 49 in, 15 inherit (kaltsallk)deeri, 63 inline, 202

ndex Tablosu

250

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

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

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

U
upper-alpha, 112 uppercase, 89 upper-latin, 112 upper-roman, 111 URL Deerleri, 16 Uzunluk Deerleri, 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

st, 189 st Kenar d boluu (margin-top), 135 st kenar ii boluu(padding-top), 146

S
Sabit Konumlandrma (position:fixed), 192 sa, 189 Sa kenar d boluu (margin-right ), 137 Sa kenar ii boluu(padding-right ), 148

V
visibility, 177 visiblity: collapse, 181

ndex Tablosu

251

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

You might also like