Professional Documents
Culture Documents
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.
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.
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.
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.
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. CSSE G R
1. CSSE G R
Windows iin NotePad veya WordPad MacOs iin TextEdit Linux iin vi, vim veya emacs
1. CSSE G R
10
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/
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. 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. 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. 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.
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).
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. CSSin Yaps
21
2. CSSin Yaps
22
/* elemann font-size deerinin %150 si dir */ h4 { line-height: 150% } /* satr geniliinin 10% nu */ p { text-indent: 10% }
2. CSSin Yaps
23
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.
/* 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.
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.
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. 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. 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. 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+
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+
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.
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. Seiciler
42
img[src=grafik.gif] { border: 1px solid #000} Drt eit zellik Seicisi vardr.
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. 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. 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. 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.
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. 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
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
Tarayc Uyumu: Internet Explorer 5.0+ Firefox 1+ Safari 1.3+ Opera 5.0+ CSS 1+
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+
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+
3. Seiciler
58
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. 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
3. Seiciler
62
Tarayc Uyumu: Internet Explorer 5.0+ Firefox 1+(ksmen) Safari 1.3+ Opera 5.0+ CSS 1+
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+
65
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
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>
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}
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}
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]
.siniftanimi
div.siniftanimi
#tekiltanim
div#tekiltanim
style (attribute)
4.2. !important
Bir de ncelik iin !important tanmlamas vardr. Eer yukardaki koda !important eklersek
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>
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;}
73
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. Yaztipi(Font) zellikleri
76
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. 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+
<kesin deerler > o xx-small | x-small | small | medium | large | x-large | xx-large <greceli deerler > o larger | smaller
5. Yaztipi(Font) zellikleri
79
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
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. 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. 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>
5. Yaztipi(Font) zellikleri
84
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. Yaztipi(Font) zellikleri
86
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
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. Metin(Text) zellikleri
91
Tarayc Uyumu: Internet Explorer 3+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+
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. 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. 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. 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+
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. 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. Metin(Text) zellikleri
104
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. 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. 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+
109
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:
rengi (background-color) resmi (background-image) resim yenileme (background-repeat) resim ball (background-attachment) resim konumu (background-position) (background)
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>
111
Tarayc Uyumu: Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+
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>
112
Tarayc Uyumu: Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+
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>
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+
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>
116
Tarayc Uyumu: Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+
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
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+
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>
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.
imleyici tipi (list-style-type ) imleyici resmi (list-style-image) imleyici konumu (list-style-position) biemi (list-style)
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
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. 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. 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.
129
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
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.
131
Kenar izgisi (Border): Elemann kenar izgilerini gsterir. Kenar d boluu (Margin): Elemann kenar d boluklardr. Sras ile bu zellikleri inceleyelim.
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:
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>
133
Tarayc Uyumu: Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+
134
Tarayc Uyumu: Internet Explorer 6+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+
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>
136
Tarayc Uyumu: Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+
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>
138
Tarayc Uyumu: Internet Explorer 6+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+
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+
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>
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.
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>
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+
144
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)
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+
146
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+
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>
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+
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>
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+
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>
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
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+
155
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)
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+
157
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+
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>
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+
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>
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+
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>
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+
165
Genilik (Width) Ykseklik (Height) Asgari genilik ve ykseklikler (min-width, min-height) Azami genilik ve ykseklik (max-width, max-height)
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+
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>
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.
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>
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.
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>
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>
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; }
174
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.
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>
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;
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>
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;
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>
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>
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
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:
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
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); }
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
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>
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">
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>
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.
190
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:
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.
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.
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>
195
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.
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+
Tarayc Uyumu:
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
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;
199
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.
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
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">
202
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.
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.
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;
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.
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;
207
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:
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.
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
209
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+
211
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)
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> <table cellpadding="0" cellspacing="0" class="sabit"> <caption>Limitli ADSL Fiyatlar</caption> <tr> <th>Hz*(Kbps) </th>
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>
214
Tarayc Uyumu: Internet Explorer 5+ Firefox 1+ Safari 1.3+ Opera 7.5+ CSS 2+
CSS2 ile birlikte left ve right deerleride vard ancak kullanszl nedeni ile CSS2.1de kaldrld.
215
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+
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> <table border="0" cellspacing="0" class="birlesik"> <tr> <td>hcre1</td> <td>hcre2</td>
217
Tarayc Uyumu: Internet Explorer 5.5 Firefox 1+ Safari 1.3+ Opera 7.5+ CSS 2+
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> <table border="0" cellspacing="0" class="birlesik"> <tr> <td>hcre1</td> <td>hcre2</td> </tr> <tr> <td>hcre3</td> <td>hcre4</td> </tr>
219
Tarayc Uyumu: Internet Explorer (desteklemiyor) Firefox 1+ Safari 1.3+ Opera 7.5+ CSS 2+
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> <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>
221
Tarayc Uyumu: Internet Explorer (desteklemiyor) Firefox 1+ Safari 1.3+ Opera 7.5+ CSS 2+
222
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.
223
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+
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.
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+
225
Tarayc Uyumu: Internet Explorer (desteklemiyor) Firefox 1.5+ Opera 9.2+ Safari 1.3+ CSS 2+
226
Tarayc Uyumu: Internet Explorer (desteklemiyor) Firefox 1.5+ Opera 9.2+ Safari 1.3+
227
CSS 2+
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
1 1
backgroundimage backgroundposition
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
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-right
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-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
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
Eleman asgari length yksekliini tanmlar. % Eleman asgari geniliini tanmlar. Eleman geniliini tanmlar. length % auto % length
1 2 1 2 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
xx-small x-small small medium large x-large xx-large smaller larger length % normal italic oblique
font-style
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 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
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
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
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
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
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
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
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
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
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
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