Scribd Logo
Upload

Welcome to Scribd!

  • CSS Turkce Kaynak

    Uploaded by

    Murat Taner Aydemir
    5 views28 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    5 views28 pages

    CSS Turkce Kaynak

    Uploaded by

    Murat Taner Aydemir

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 28

    MODL 3 HTML LE STL ABLONLARI

    Bu modl bitirdiinizde; CSS kodlama standartlarna uyarak ilevsellii ve verimlilii artrmak iin HTML kodlar ile Stil ablonu (CSS) yaplandrmasn gerekletireceksiniz. Ayrca, 1. Stil ablonu (CSS) yapsn oluturabilecek, 2. Stil ablonu (CSS) zelliklerini kullanabilecek, 3. Stil ablonu (CSS) ile men ilemlerini yapabilecek ve 4. Tarayc sorunlarn ve zmlerini belirleyebileceksiniz.

    9. STL ABLONU (CSS) TEMELLER


    HTML etiketleri (tags) aslnda bir belgenin biimlendirilmesinden ziyade belgenin ieriinin oluturulmasnda kullanlmaktadr. Yaz tipi ve renk zellikleri gibi etiketler HTML 3.2ye eklendiinde web gelitiricileri iin birok sorun ortaya kmtr. Byk web sitelerinin tasarlanmas ve yaz tipi ve renk bilgileri gibi zelliklerin her sayfaya eklenmesi tasarm srecini daha zor, uzun ve pahal yapmtr. Bu ekilde tasarlanan dosyalarn bykl ise dosyalarn daha yava yklenmesine neden olmutur. Bu sorunlarn zm iin World Wide Web Konsorsiyumu (W3C) stil ablonlarn oluturmutur. Stil ablonu veya basamakl stil sayfalar olarak bilinen CSS, HTML elerinin grntlenmesi ile ilgilenmektedir. Stil ablonlarnn HTML 4.0a eklenerek ortaya kmas birok sorunun zlmesini salamtr. Bylece, HTML 4.0de tm biimlendirme zellikleri HTML belgesinden kaldrlm ve ayr bir CSS dosyas ierisinde kullanlmaya balanmtr. HTML belgesine ait biimlendirme zelliklerinin ayr bir dosyada olmas sayesinde bu zellikleri oluturma, dzenleme ve ynetme sreci kolaylam ve ayn zamanda kullanclarn sayfalara daha hzl ulamas salanmtr. Gnmzde ise tm web tarayclar CSSi desteklemektedir.

    9.1. CSSin yaps


    Stil ablonlarnn yaps incelendiinde CSS kodunun iki paradan olutuu grlmektedir : bir seici ve bir veya birden fazla ifadeler.

    ekil 1 CSS Yaps Seici genelde biimi deitirilmek istenen HTML esidir. Her bir ifade ise bir zellik ve onun deerinden olumaktadr (ekil 1). Ayrca, bir CSS ifadesi her zaman noktal virgl ile sonlanr ve ifade grubu ise ssl parantez arasna alnr.

    Bir HTML esinin biimini deitimenin yan sra, CSS kullanclara id ve snf seicisi olarak kendi seicilerini de dzenlemelerine olanak salamaktadr.

    9.1.1 Snf seicisi


    Bir snf seicisi bir grup enin biimini belirlemek iin kullanlr. Id seicisinin tersine, snf seicisi birok ede sklkla kullanlmaktadr. Bu durum da kullancya belirli bir biimini, birok HTML esine uygulamaya olanak salamaktadr. Snf seicisi, HTML snf zelliini kullanlr ve nokta (.) ile tanmlanr. Aadaki rnekte ise snf ortalamak olan (class="center") tm HTML eleri ortaya doru hizalanacaktr (ekil 2). <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> .CENTER { TEXT-ALIGN:CENTER; } </STYLE> </HEAD> <BODY> <H1 CLASS="CENTER">Ortalanm balk</H1> <P CLASS="CENTER">Ortalanm paragraf</P> </BODY> </HTML>

    ekil 2 Snf Seicisi

    Yukardaki rnekten farkl olarak sadece belirli bir HTML esinin belirli bir snftan etkilenmesi salanabilir. Aadaki rnekte ise snf ortalamak olan tm paragraf eleri ortaya doru hizalanaktr (ekil 3). 4

    <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> P.CENTER { TEXT-ALIGN:CENTER; } </STYLE> </HEAD> <BODY> <H1 CLASS="CENTER">Bu balk CSS'ten etkilenmeyecektir</H1> <P CLASS="CENTER"> Bu paragraf ortaya hizalanacaktr</P> </BODY> </HTML>

    ekil 3 Snf Seicisi - 2

    9.1.2 Id seicisi
    Id seicisi ise tek bir eye belirli bir biim vermek iin kullanlr. Id seicisi HTML esinin id zelliini kullanr ve # iareti ile tanmlanr. Aadaki rnekte idsi paragraf olan eye uygulanacak olan biimi gstermektedir (ekil 4). <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> #PARAGRAF { TEXT-ALIGN:CENTER; COLOR:RED; } </STYLE> 5

    </HEAD> <BODY> <P ID="PARAGRAF">MERHABA DNYA!<P> <P>Bu paragraf CSS'den etkilenmeyecektir</P> </BODY> </HTML>

    ekil 4 Id seici

    9.2. CSS kullanm alanlar 9.2.1. Yerel kullanm alan


    Stil ablonlar yerel olarak kullanldnda tek bir sayfada sadece bir kez kullanlrlar. Bu durumda bir HTML etiketi iin zel olarak tanmlanm olurlar. Aadaki rnekte paragraf etiketine ait zellikler ve deerleri yerel olarak deitirilmitir. <P STYLE="FONT SIZE:SMALL; COLOR:RED; FONT-WEIGHT:BOLD; FONT-FAMILY:ARIAL, HELVETICA, NON-SERIF"> Yerel kullanm alan. </P>

    9.2.2. Global kullanm alan


    Stil ablonlar global olarak kullanldnda tm belgedeki ablonlar etkilenmektedir. <body> ksmndan nce, <style> ve </style> etiketleri arasnda tanmlanan stil ablonlar tm belgeyi etkilemektedir. <HTML> <HEAD> <TITLE>TITLE</TITLE> 6

    <STYLE TYPE="TEXT/CSS"> <!-[STIL BILGILERI BURADA YER ALIR] --> </STYLE> </HEAD> <BODY> . </BODY> </HTML>

    9.2.3. Balantl kullanm alan


    Balantl kullanm alannda stil ablonlar .css olarak kaydedilen ayr bir dosya ierisinde yer alrlar. Bylece bu .css dosyas birok sayfann ayn ekilde grntlenmesine olanak salamaktadr. Aada tipik olarak kullanlan .css dosyasna ait stil ablonlar yer almaktadr. P {FONT-FAMILY:NON-SERIF; FONT-SIZE:MEDIUM; COLOR:RED} H1 {FONT-FAMILY:SERIF; FONT-SIZE:X-LARGE; COLOR:GREEN} H2 {FONT-FAMILY:SERIF; FONT-SIZE:LARGE; COLOR:BLUE} .css stil dosyasnn HTML dosyasna eklenmesi iin de <link> etiketi ile beraber kullanlmaldr. <HEAD> <LINK REL="STYLESHEET" HREF="STYLE.CSS" TYPE="TEXT/CSS"> </HEAD> Baz durumlarda yerel, global ve balantl stil tanmlamalarnn ayn anda kullanlmas karmakla neden olabilir. Bu durumda en zel stil tanmlamas en ncelie sahip olmaktadr; yerel tanmlama global tanmlamaya, global tanmlama ise balantl tanmlamaya gre HTML etiketlerini etkileme nceliine sahiptir. Benzer ekilde ise yerel tanmlamalar IDye, ID ise snflara ve snflar ise stil ablonu tanmlanm HTML elerine gre ncelie sahip olmaktadr.

    9.3. CSS birimleri 9.3.1. Uzunluk birimleri


    Uzunluk birimleri, baz HTML elerinin boyutuna ait bilgileri dzenlemek iin kullanlr. Uzunluk birimleri bir tamsay, ondalkl say olabilecei gibi 7

    + veya iaretleri ile de kullanlabilir. Birimler greceli veya mutlak olabilir. Mutlak deerler olarak mm, cm, in, pt, pc (millimeters, centimeters, inches, points, picas) kullanlrken, greceli deerler olarak da em, ex, px (enin font bykl, elemann x-uzunluu, piksel) kullanlmaktadr. Font bykl point, piksel, in veya santimetre (pt, px, in, cm) veya yzde olarak tanmlanabilir. Bunlarn dnda byklk belirtmek iin farkl anahtar kelimeler de tercih edilebilir. Bunlar xx-small, x-small, small, medium, large, x-large ve xxlarge olabilir.

    9.3.2. Yzde birimleri


    Yzde birimleri baz HTML elerinin metin girinti, kenar boluk, dolgu ve genilik gibi zellikleri belirlemede kullanlr.

    9.3.3.

    Renk birimleri

    Renk birimleri renk ad ve renk deerini belirtmek iin kullanlr. Renk ad olarak aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white ve yellow tercih edilebilmektedir.

    10. STL ABLONU (CSS) ZELLKLER

    Bu blm bitirdiinizde, Zemin zelliklerinin ne olduunu ve nasl kullanldn, Font zelliklerinin ne olduunu ve nasl kullanldn, Metin kutusu zelliklerinin ne olduunu ve nasl kullanldn, Tablo zelliklerinin ne olduunu ve nasl kullanldn, Pozisyon zelliklerinin ne olduunu ve nasl kullanldn, Liste zelliklerinin ne olduunu ve nasl kullanldn,

    renmi olacaksnz.

    10.1 Zemin zellikleri


    CSS zelliklerini kullanarak zemin rengi, zemin tekrarlanmas ve zeminin pozisyonu dzenlenebilir. resmi, zeminin

    Background-color : Bir enin zemin rengini deitirmede kullanlr. Bir sayfann zemin rengi body seicisi ierisinde tanmlanr. BODY {BACKGROUND-COLOR:#B0C4DE;} CSS ierisinde, renkler farkl ekillerde belirtilebilir.

    16lk sistemde rnein "#ff0000" RGB deerinde - rnein "rgb(255,0,0)" Renk ad rnein red

    Aadaki rnekte h1, p ve div eleri farkl zemin renklerine sahip olabilmektedir (ekil 5). H1 {BACKGROUND-COLOR:#6495ED;} P {BACKGROUND-COLOR:#E0FFFF;} DIV {BACKGROUND-COLOR:#B0C4DE;}

    ekil 1 Background Color zellii Background-image : Bu zellik ile bir resim zemin resmi olarak kullanlabilir. Bir sayfaya ait zemin resmi aadaki gibi deitirilir. BODY {BACKGROUND-IMAGE:URL(IMAGE.GIF');}

    Varsaylan deer olarak kullanlan resim tm sayfay kaplayncaya kadar tekrarlanr. Bunu engellemek iin baz dzenlemeler yaparak zemin resminin daha gzel grnmesi salanabilir. rnein aada sadece zemin resminin yatay olarak tekrarlanmas salanarak daha gzel bir grnt elde edilmitir. Eer zemin resminin hibir ekilde tekrarlanmas istenmez ise o zaman no-repeat seenei kullanlabilir. Aadaki rnekte arka plan resmi tekrarlanmaktadr (ekil 6). <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> BODY { BACKGROUND-IMAGE:URL('arkaplan.png'); } </STYLE> </HEAD> <BODY> <H1>Arka Plan Resim rnei!</H1> </BODY> </HTML>

    ekil 2 Tekrarlayan Arka Plan

    Aadaki rnekte ise arka plan resmi tekrarlanmamaktadr (ekil 7). <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> BODY { BACKGROUNDIMAGE:URL('arka-plan.png'); BACKGROUNDREPEAT:REPEAT-X; } </STYLE> </HEAD> <BODY> <H1>Arka Plan Resim rnei!</H1> </BODY> </HTML>

    ekil 3 Tekrarlanmayan arka plan

    Zemin resminin ekrandaki pozisyonu da belirlenebilir. Bunun iin background-position zellii kullanlr. Aadaki zemin resmi sa ste gelecek ekilde konumlandrlmtr (ekil 8). BODY { BACKGROUND-IMAGE:URL('TREE.JPG'); BACKGROUND-REPEAT:NO-REPEAT; BACKGROUND-POSITION:RIGHT TOP; }

    ekil 4 Background position Zemin zellikleri ayr ayr belirtilecei gibi CSS ierisinde kural ksaltma yoluna da gidilebilir. Aadaki rnekte zemine ait tm zellikler tek bir satrda yazlmtr. BODY {BACKGROUND:#FFFFFF URL('TREE.JPG') NO-REPEAT RIGHT TOP;} Kural ksaltma ilemi kullanrken verilen zelliklerin srasyla zemin rengi, zemin resmi, zemin tekrarlamas, zemin eklentisi ve zemin pozisyonu eklinde olmaldr. Eer bunlardan biri eksik yazlrsa, tarayc bir sonraki zellii uygulayacaktr.

    10.2 Font zellikleri


    Font zellikleri olarak yaz tipi ailesi, kalnlk, byklk ve metnin stilini deitirmek mmkndr. Font-family zellii: CSS ierisinde iki trl yaz tipi ailesi bulunmaktadr. Bunlar genel aile (generic family) ve birbirine benzeyen yaz tiplerinden 4

    oluan gruptur (rnein serif veya tek aralkl (monospace) yaz tipi). Yaz tipi ailesi, zel yaz tipi ailesidir (rnein Times New Roman veya Arial).
    Genel Aile Serif Yaz Tipi Ailesi Times New Roman Georgia Aklama Karakterlerin sonlarnda kvrk izgiler vardr. Bu yaz tipleri uzun metinlerde ska tercih edilirler. Okunurluu en iyi yaz tipleri, erif yaz tipleridir. Karakterlerin sonlarnda kvrk izgiler yoktur. Balklarda tercih edilirler. Akl en iyi olan sans erif karakterler, uzaktan iyi seilirler. Tek aralkl tm karakterler ayn genilie sahiptir.

    Sans-serif

    Arial Verdana

    Tek aralkl

    Courier New Lucida Console

    Font-family zellii birok yaz tipi adn iermelidir. Eer belirtilen ilk yaz tipini tarayc desteklemez ise bir sonraki yaz tipini kullanmay deneyecektir. Belirtilen ilk yaz tipi genelde beenilen bir yaz tipi olurken tercih edilen dier yaz tipleri genel yaz tiplerinden olmaldr. nk genel yaz tiplerinin gsterilmesinde herhangi bir sorun yaanmamaktadr. UYARI: Eer yaz tipinin ad bir kelimeden fazla ise trnak () ierisine alnmaldr (rnein Times New Roman). P{FONT-FAMILY:"TIMES NEW ROMAN", TIMES, SERIF;} Font style : Font style zellii eik yaz stilini belirlemek iin kullanlmaktadr. Bu zellik deer alabilmektedir. Normal, metnin normal gzkmesini istendiinde kullanlr. Italic metnin eik olmas istendiinde kullanlr. Oblique ise eik biime benzemekte ancak daha az desteklenmektedir. Aadaki rnekte farkl paragraf farkl biime sahiptir (ekil 9). <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> P.NORMAL {FONT-STYLE:NORMAL;} P.ITALIC {FONT-STYLE:ITALIC;} P.OBLIQUE {FONT-STYLE:OBLQUE;} </STYLE> </HEAD> <BODY> 5 ekil 5 Font style

    <P CLASS="NORMAL">Bu paragraf normal.</P> <P CLASS="ITALIC">Bu paragraf italik.</P> <P CLASS="OBLIQUE">Bu paragraf oblique.</P> </BODY> </HTML> Font size : Font size zellii metnin boyutunu ayarlamak iin kullanlr. Font boyutu ayarlanrken balklarn ve paragraf ierisindeki metnin farkl olmasna dikkat etmek gerekmektedir. Yaz tipinin boyutu greceli veya mutlak bir byklkte olabilir. Mutlak byklk olarak belirli bir deer yazlabilir. Bu durumda kullancya metnin boyutunu deitirme olana sunulmaz. Greceli byklk olarak da metnin boyutunu evresindeki elere gre ayarlamak mmkn olurken kullancnn tarayclarda metnin boyutunu deitirme olana sunulur. UYARI: Eer yaz tipinin boyutu belirtilmez ise, varsaylan boyut 16 px tir. Piksel kullanarak yaz boyutunu ayarlandnda metin boyutu tamamen kontrol altna alnr. Aadaki rnekte balklar ve paragraf farkl bykle sahiptir (ekil 10). H1 {FONT-SIZE:40px;} H2 {FONT-SIZE:30px;} P {FONT-SIZE:14px;}

    ekil 6 Font size Em kullanarak yaz boyutu ayarlandnda tm tarayclarda metin boyutunu ayarlamak mmkndr. Ancak Internet Explorer de istenen boyuttan daha byk veya daha kk olarak gzkmektedir. Bir ok web tasarmcs piksel yerine em kullanmaktadr. 1 em 16 pikseldir. H1 {FONT-SIZE:2.5em;} /* 40px/16=2.5em */ H2 {FONT-SIZE:1.875em} /* 30px/16=1.875em */ P {FONT-SIZE:0.875em;} /* 14px/16=0.875em */ 6

    Tm tarayclarda yaz tipini yeniden boyutlandrmak iin body ksmnda yaz tipi boyutunun yzdesi verilerek varsaylan yaz tipi boyutu deitirilebilir. BODY {FONT-SIZE:100%;} H1 {FONT-SIZE:2.5em;} H2 {FONT-SIZE:1.875em;} P {FONT-SIZE:0.875em;}

    10.3 Metin kutusu zellikleri


    Btn HTML eleri kutular ierisinde dnlebilir. CSS ierisinde kutu modeli aslnda tasarm ve d grnm iin kullanlmaktadr. Bylece tm HTMl eleri kutu ierisinde tasarlanabilir. Bu kutunun ierii yledir (ekil 11).

    Ierik yani HTML esi, HTML esi etrafnda dolgulama, Dolgu etrafnda snr ve Snr etrafnda boluk

    ekil 7 Metin kutusu

    Kutunun etrafnda bulunan boluklar margin-top, margin-bottom, margin-left, margin-right zellikleri ile kontrol edilebilir. Aadaki rnekte H1 balna ait her kenarn boluu ayarlabilir. Sadece bir kenara ait boluk deeri verildiinde tarayc kendi varsaylan deerini kullanr. Herhangi bir HTML esinin boluk deerleri px, pt veya yzde deerleri ile belirtilebilir. Negatif deer de kullanlabilir. H1 { MARGIN-TOP: 25px; MARGIN-BOTTOM: 10px; MARGIN-LEFT: 105px; MARGIN-RIGHT: 60px } Aadaki rnekte a snfna ait sol margin deeri 50 piksel iken b snfna ait sa margin deeri ise 150 pikseldir (ekil 12). <HTML> <STYLE TYPE="TEXT/CSS"> 7

    .A { MARGIN-LEFT: 50px } .B { MARGIN-RIGHT: 150px } </STYLE> <BODY> <FONT FACE="VERDANA, ARIAL, SANS-SERIF" SIZE="4"> Bu metinde herhangi bir boluk ayar yok. <P><DIV CLASS=A>Bu metin soldan 50 px ieridedir. </DIV> <P><DIV CLASS=B>Bu metin sadan 150px ieridedir.</DIV> </FONT> </BODY> </HTML>

    ekil 8 Margin-left ve margin-right HTML esi etrafnda dolgulama ayar padding-top, padding-bottom, padding-left, padding-right zellikleri ile kontrol edilebilir. Dolgu ayarlar px, pt veya yzde deerleri ile belirtilebilir. Negatif deer kullanlamaz. H1 { PADDING -TOP: 25px; PADDING -BOTTOM: 10px; PADDING -LEFT: 105px; PADDING -RIGHT: 60px } Snrlar kontrol etmek iinse border-top-width, border-bottom-width, border-left-width, border-right-width zellikleri kullanlmaktadr. Genilik belirtmek iin uzunluk birimleri, yzde deerleri ve thin (ince), medium (orta), ve thick (kaln) gibi anahtar kelimeler de kullanlabilir. Tm kenarlarn ayn deere sahip olmas istenirse sadece border-width zelliini kullanmak yeterli olmaktadr. Aadaki rnekteki metin yukardan, aadan, sol ve sa taraftan 10 piksel boluk braklarak grntlenmektedir (ekil 13). H2 { BORDER:1px orange SOLID; BORDER-TOP-WIDTH: 10px; BORDERBOTTOM-WIDTH: 10px; BORDER-LEFT-WIDTH: 10px; BORDER-RIGHTWIDTH: 10px }

    ekil 9 Border zellii Bu zelliklerin yan sra border-color zellii ile snrlarn rengini deitirmek olanakldr. Renk deerleri olarak renk ismi veya RGB deeri tercih edilebilir. Aadaki rnekte snr rengi turuncu ve genilii ise 5 pikseldir. P { BORDER-COLOR: ORANGE; BORDER-WIDTH: 5px } Her kenarn farkl renge sahip olmas istenirse, sras ile renk deerleri aadaki gibi belirtilebilir. Tarayc ilk belirtilen deeri st, ikincisini sa, ncsn alt ve son deeri ise sol taraf iin kullanmaktadr. Snrlarn izgi tipi border-style zellii ile deitirilir. Bu zellik iin anahtar kelimeler solid (kaln), double (ift), dotted (noktal), dashed (izgili) olabilir. Aadaki rnekteki metnin kenarlar izgili ve kenar kalnl ise 5 pikseldir (ekil 14). P { BORDER-STYLE: DOTTED; BORDER-WIDTH: 5px }

    ekil 10 Border style

    10.4 Tablo zellikleri


    HTML ierisinde yaplan tablo CSS ile daha da gelitirilebilir. Tablo zellikleri ile tablonun kenarlarnn ayarlanmas, kenarlarn daraltlmas, tablonun yksekliinin ve geniliinin ayarlanmas, tablo iindeki metnin hizalanmas, tablo kenarlarnn dolgulanmas ve tablo renginin ayarlanmas gibi birok deiiklik yapmak olanakldr. Border zellii : Bu zellik ile CSS ierisinde tablonun kenarlar belirlenebilir. Aadaki rnekte tablonun kenarlar ift olarak ayarlanmtr. Bunun nedeni tablonun ve th ve td elerinin ayr kenarlara sahip olmasdr (ekil 15). <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> TABLE,TH,TD { BORDER:1px SOLID BLACK; } </STYLE> </HEAD> <BODY> ekil 11 Table zellii <TABLE> <TR> <TH>AD</TH> <TH>SOYAD</TH> </TR> <TR> <TD>YASEMN</TD><TD>GLBAHAR</TD> </TR> <TR> <TD>FLZ</TD><TD>KALELOLU</TD> </TR> </TABLE> </BODY> </HTML> Tablonun tek kenara sahip olmas iin border-collapse zelliini kullann. Border-collapse zellii : Bu zellik tablonun kenarlarn daraltmak iin kullanlr. Aadaki rnekte tablonun kenarlar daraltlmtr (ekil 16).

    10

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD"> <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> TABLE { BORDER-COLLAPSE:COLLAPSE;} TABLE, TD, TH { BORDER:1px SOLID BLACK;} </STYLE> </HEAD> <BODY> <TABLE> <TR> <TH>AD</TH> <TH>SOYAD</TH> ekil 12 Border Collapse </TR> <TR><TD>YASEMN</TD><TD>GLBAHAR</TD></TR> <TR><TD>FLZ</TD><TD>KALELOLU</TD></TR> </TABLE> <P><B>NOTE:</B> !DOCTYPE BELRTLMEZSE BORDER-COLLAPSE ZELL IE8 VE DAHA NCEK SRMLERDE STENMEYEN SONULAR RETEBLR. <P> </BODY> </HTML> Width ve Height zellii : Bu zellik ile tablonun genilik ve ykseklii dzenlenir. Tablonun genilii ve yksekliini belirlemek iin uzunluk birimleri ve yzde deerleri kullanlabilir. Aadaki rnekte tablonun ykseklii 50 piksel ve genilii ise %100 olarak ayarlanmtr (ekil 17). <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> TABLE,TD,TH { BORDER:1px SOLID BLACK; } TABLE { WIDTH:100%; } 11 ekil 13 Width ve Height

    TH { HEIGHT:50px; } </STYLE> </HEAD> <BODY> <TABLE> <TR> <TH>AD</TH> <TH>SOYAD</TH> <TH>LG ALANI</TH> </TR> <TR> <TD>YASEMN</TD><TD>GLBAHAR</TD> <TD>HTML</TD> </TR> <TR> <TD>FLZ</TD><TD>KALELOLU</TD> <TD>CSS</TD> </TR> </TABLE> </BODY> </HTML> Text-align ve vertical-align zellii: Tablo ierisinde bulunan metin text-align ve vertical-align zellii ile hizalanabilir. Text-align zellii sola (left), saa (right) ve ortaya (center) doru yatay hizalama yapar. Aadaki rnekte metinler saa doru hizalanmtr (ekil 18). <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> TABLE,TD,TH { BORDER:1px SOLID BLACK; } TABLE { WIDTH:100%; } TH { HEIGHT:50px; } TD { TEXT-ALIGN:RIGHT; } </STYLE> </HEAD> <BODY> <TABLE> <TR> 12 ekil 14 Text-align

    <TH>AD</TH> <TH>SOYAD</TH> <TH>LG ALANI</TH> </TR> <TR> <TD>YASEMN</TD> <TD>GLBAHAR</TD> <TD>HTML</TD> </TR> <TR> <TD>FLZ</TD> <TD>KALELOLU</TD> <TD>CSS</TD> </TR> </TABLE> </BODY> </HTML> Vertical-align zellii ise yukar (top), aa (bottom) ve ortaya (middle) doru dikey olarak hizalama yapar. Aadaki rnekte tablo ierisindeki deerler aaya doru hizalanmtr (ekil 19). <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> TABLE,TD,TH { BORDER:1px SOLID BLACK; } TABLE { WIDTH:100%; } TH { HEIGHT:50px; } TD { HEIGHT:50px; VERTICAL-ALIGN:BOTTOM; } </STYLE> </HEAD> <BODY> <TABLE> <TR> <TH>AD</TH> <TH>SOYAD</TH> <TH>LG ALANI</TH> </TR> <TR> 13

    ekil 15 Vertical align

    <TD>YASEMN</TD><TD>GLBAHAR</TD> <TD>HTML</TD> </TR> <TR> <TD>FLZ</TD><TD>KALELOLU</TD> <TD>CSS</TD> </TR> </TABLE> </BODY> </HTML> Padding zellii: Tablo ierii ile kenar arasndaki boluu ayarlamak th ve td elerine padding zellii uygulanr. Aadaki rnekte tablo kenar arasnda 15 piksel olarak ayarlanmtr (ekil 20).

    <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> TABLE,TD,TH { BORDER:1px SOLID BLACK;} TABLE { WIDTH:100%; } TH { HEIGHT:50px; } TD {PADDING:15px;} </STYLE> </HEAD> ekil 16 Table padding <BODY> <TABLE> <TR><TH>AD</TH><TH>SOYAD</TH><TH>LG ALANI</TH></TR> <TR><TD>YASEMN</TD><TD>GLBAHAR</TD><TD>HTML</TD></TR> <TR><TD>FLZ</TD><TD>KALELOLU</TD><TD>CSS</TD> </TR> </TABLE> </BODY> </HTML> Background-color ve color zellii : Tablonun arka plannn, ierisindeki metnin ve kenar renginin ayarlanmas background-color ve color zellii ile ayarlanr. Aadaki rnekte tablonun background-color ve color zellii yeil olarak deitirilmitir (ekil 21). 14

    <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> TABLE, TD, TH { BORDER:1PX SOLID GREEN; } TH { BACKGROUND-COLOR:GREEN; ekil 17 Table background-color COLOR:WHITE; } </STYLE> </HEAD> <BODY> <TABLE> <TR> <TH>AD</TH><TH>SOYAD</TH><TH>LG ALANI</TH> </TR> <TR> <TD>YASEMN</TD><TD>GLBAHAR</TD><TD>HTML</TD> </TR> <TR> <TD>FLZ</TD><TD>KALELOLU</TD><TD>CSS</TD> </TR> </TABLE> </BODY> </HTML>

    10.5 Pozisyon zellikleri


    CSS pozisyon zellii bir enin sayfa ierisinde konumunu belirlemeye olanak salamaktadr. Ayrca bu zellik bir eyi dier bir enin arkasna yerletirmede de kullanlmaktadr. Bu ilemleri gerekletirmek iin position, left, top, width, height ve visibility zellikleri kullanlabilmektedir. Position zellii: Bu zellik kullanlarak herhangi bir enin (absolute) veya greceli (relative) olarak konumu belirlenebilir. konumlamada HTML eleri birbirinden bamsz konumlandrlmaktadr (ekil 22). Greceli konumlamada ise HTML mutlak Mutlak olarak eleri

    15

    birbirinden etkilenir ve bir nceki eye gre konumlandrlmas gereklemektedir (ekil 23). Mutlak Konumlama <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> H2 { POSITION:ABSOLUTE; LEFT:100px; TOP:150px; } </STYLE> </HEAD> <BODY> <H2>Bu balk Mutlak Konumlandrlmtr. </H2> <P>Mutlak konumlama ile, her e sayfann istenen yerine konumlandrlabilir.</P> </BODY> </HTML> Greceli Konumlama <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> H2 { POSITION:RELATIVE; LEFT:100px; TOP:150px; } </STYLE> </HEAD> <BODY> <H2> Bu balk greceli konumlandrlmtr.</H2> <P> Greceli konumlamada ise HTML eleri birbirinden etkilenir ve bir nceki eye gre konumlandrlmas gereklemektedir.</P> </BODY> </HTML>

    ekil 18Mutlak konumlandrma

    ekil 19 Greceli konumlandrma

    Position zellii ile beraber left ve top zellii de kullanlmaktadr. Left zellii enin tarayc sayfasnn sol kenar arasndaki boluunu 16

    ayarlamada kullanlrken top zellii ise tarayc sayfasnn st kenar arasndaki boluu ayarlamada kullanlmaktadr. Boluk deerlerini belirtmek iin uzunluk birimleri veya yzde deerleri kullanlmaktadr. Ayrca enin width, height ve visibility zellikleri de ayarlanabilir. Width zellii enin geniliini, height zellii enin yksekliini ve visibility zellii ise enin grnrl dzenlemek iin kullanlr. Width zellii sadece mutlak olarak konumlandrlm eler ile alr. Width ve height zellikleri ile uzunluk birimleri veya yzde deerleri kullanlrken, visibility zellii iin eyi grnr yapmak iin visible, grnmez yapmak iin hidden ve grnrl nceki eden almak iin inherit deerleriN kullanlr. Aadaki rnekteki metin soldan 200px ierde, yukardan 20px aada ve genilik deeri 400px verilmitir (ekil 24). <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> DIV { POSITION: ABSOLUTE; LEFT: 200px; TOP: 20px; WIDTH: 400px } </STYLE></HEAD> <BODY> <FONT FAMILY="VERDANA" SIZE="4"> <DIV> <H4>BU METIN SOLDAN 200px IERDE, YUKARIDAN 20px AAIDADIR. GENILIK DEERI 400px VERILMITIR.</H4> </DIV> </FONT> </BODY> </HTML>

    ekil 20 Absolute width

    17

    Katmanlama Eer eler sayfann normal ak dnda konumlandrlrsa, elerin st ste yerlemesi szkonusu olabilir. Bu durumda hangi enin ste geleceini belirlemek iin z-index zellii kullanlr. <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> IMG { POSITION:ABSOLUTE; LEFT:0px; TOP:0px; Z-INDEX:-1; } </STYLE> </HEAD> <BODY> <H1>KATMANLAMA</H1> <IMG SRC="tree.jpg" WIDTH="100" HEIGHT="140" /> <P>Resmin z-index'i -1 olduu iin metnin arkasnda grntlenecektir.P> </BODY> </HTML> IMG HTML esinin z-index deeri -1 olduu iin resim metnin yer alacaktr (ekil 25). Z-index deerleri iin tam saylar kullanlr ve mutlak veya greceli konumlandrlm tm elemanlara uygulanabilir.

    ekil 21 Katmanlama

    18

    10.6 Liste zellikleri


    HTML ierisinde iki trl liste zellii bulunmaktadr : madde imlerinden oluan srasz liste ve rakamlar veya harflerden oluan sral listeler. CSS liste zellii, sral ve srasz listlere farkl madde imleri ve resimler yerletirmeye olanak salamaktadr. List-style-type zellii : Farkl madde imi yapmak iin kullanlr. Circle, square, upper-roman, lower-alpha gibi deerler alr. aadaki rnekte srasz ve sral liste rnekleri grlmektedir (ekil 26). <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> UL.A {LIST-STYLE-TYPE:CIRCLE;} UL.B {LIST-STYLE-TYPE:SQUARE;} OL.C {LIST-STYLE-TYPE:UPPER-ROMAN;} OL.D {LIST-STYLE-TYPE:LOWER-ALPHA;} </STYLE> </HEAD> <BODY> <P>SIRASIZ LISTE RNEI</P> <UL CLASS="A"> <LI>KAHVE</LI> <LI>AY</LI> <LI>COCA COLA</LI> </UL> <UL CLASS="B"> <LI>KAHVE</LI> <LI>AY</LI> <LI>COCA COLA</LI> </UL> <P>SIRALI LISTE RNEI:</P> <OL CLASS="C"> <LI>KAHVE</LI> <LI>AY</LI> <LI>COCA COLA</LI> </OL> <OL CLASS="D"> <LI>KAHVE</LI> <LI>AY</LI> <LI>COCA COLA</LI> </OL> </BODY></HTML> 19

    ekil 22 Sral ve Srasz liste

    List-style-image zellii : Madde imi olarak resim eklemek istendiinde kullanlr. Aadaki rnekte srasz listenin elerine resim eklenmitir (ekil 28). <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> UL { LIST-STYLEIMAGE:URL('BULLET.GIF'); } </STYLE> </HEAD> <BODY> <UL> <LI>KAHVE</LI> <LI>AY</LI> <LI>COCA COLA</LI> </UL> </BODY> </HTML>

    ekil 23 List-style-image

    List-style-position zellii : Bu zellik ile listelerin konumunu metin akna gre dzenlenebilir. Inside (ieride), outside (darda) ve inherit deerlerini alr. Inside deeri listelerin metin akna gre ieride konumlanmasn salarken outside deeri ise darda konumlanmasn salar. Inherit deeri ise ana enin zelliini kaltsal olarak alr. Aadaki rnekte listelerin ierideki ve dardaki konumlar grlmektedir (ekil 28). <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> UL.A {LIST-STYLE-POSITION:INSIDE;} UL.B {LIST-STYLE-POSITION:OUTSIDE;} </STYLE> </HEAD> <BODY> <P>LIST-STYLE-POSITION: INSIDE:</P> <UL CLASS="A"> <LI>KAHVE</LI> <LI>AY</LI> <LI>COCA COLA</LI> 20

    </UL> <P>LIST-STYLE-POSITION: OUTSIDE:</P> <UL CLASS="B"> <LI>KAHVE</LI> <LI>AY</LI> <LI>COCA COLA</LI> </UL> <P>"LIST-STYLE-POSITION: OUTSIDE" VARSAYILAN DEERDR.</P> </BODY> </HTML>

    ekil 24 List Style Position List Shorthand zellii: Tm liste zelliini tek bir satrda belirmek olanakldr. Ksaltma zellii kullanldnda deerlerin sras list-styletype, list-style-position ve list-style-image biimindedir. Eer bu deerlerden biri eksik yazlrsa dier zellikler belirtilen srada verildii srece tarayc sorun yaratmayacaktr.

    21

    You might also like