![Alt Başlık](http://www.logomatik.net/image.png?fsize=18&font=QuigleyWiggly.TTF&text=Forum09%20Se%C3%A7ilen%20Kodlar&mirror=yes&color=&vcolor=&bgcolor=&alpha=Yes&output=png&spacing=5&shadow=no&transparent=no&icon=no&iconic=&top_spacing=5&left_spacing=6&icon_size=48")
webders13
CSS'ye GirişCSS (Cascading Style Sheets) web tasarımcılarının işini oldukça kolaylaştırmaktadır. CSS HTML'den ayrı yeni bir dil değil, HTML'in önemli bir parçasıdır. CSS ile web sayfasındaki araçların görünümleri genelleştirilir.
HTML derslerinde style="..." parametresini görmüştük. Bu parametre ile tanımlanan kodun özelliklerini değiştirmiştik. CSS style özelliklerinin tüm sayfa için tanımlanmasıdır. Hem Navigator 4.0 hem de Internet Explorer 4.0 browserlar ve daha gelişmiş olanları CSS'yi destekliyor. Fazla uzatmadan konuya girmek daha iyi olur sanırım.
HTML derslerinde geçen ama üzerinde pek durmadığımız style parametresi üzerinde açıklama yapmam gerekiyor. style parametresi <p>, <div>, <h1>, <a>, <font>, <li> gibi birçok kod için kullanılabilir:
| Kod: |
| <p style="text-align:left; font-size:12pt; color:red">...</p> |
Yukarıda HTML derslerinden tanıdığımız, paragraf oluşturan <p> koduna style parametresi atanmıştır. Böylece paragrafın sola yaslanmasını, 12pt (point:nokta) font büyüklüğündeki harflerden oluşmasını, harflerin renginin kırmızı olmasını sağlıyoruz. style parametresinde birden fazla özellik tanımlanacaksa, örnekte olduğu gibi her özellikler arasına ";" işareti konur.
_________________
Gercek bir hacker olmak icin hacklemeniz lazim. Oturup text dosyalari okuyarak hacker olunmaz..
İyi bir hacker’san, ismini herkes bilir. Ama büyük bir hacker’san kimse kim olduğunu bilmez.
______________________________________________________________________________
Nesne Özelliklerini Genelleştirme
Bu uygulamanın aynısını <style> koduyla aşağıdaki şekilde yapabiliriz:
Şimdi geldik "N'aptık?" köşesine. İlk uygulamada <p>, <h1> ve <h4> kodlarını style="..." parametresi ile bu kodlara bazı özellikler atandı. Örneğin <p>...</p> arasındaki metinin sayfanın iki yanına yaslanması, renginin bordo olması ve font büyüklüğünün 12pt olması sağlandı. İkinci uygulamada ise her koda style="..." parametresi atamak yerine, tüm stil özellikleri kodların başında ;<head>...</head> bölümünde, <style>...</style> kodları arasında kod kod tanımlanmıştır. Bu iki uygulama ile aynı sonuca ulaşıyoruz. İlk uygulamanın daha kısa sürdüğü görünüyor, ancak bunun nedeni stil özellikleri tanımlanan kodların birer tane olması. Mesela sayfada <p> kodu çok sayıda yeralsaydı, CSS ile kod sayfası çok daha kısa olacaktı. Bununla birlikte, stil özelliklerini değiştirmek istediğimizde hiç zorlanmayacağız. Ayrıca hata yapma olasılığımız CSS genelleştirmesi ile azalacaktır. CSS'nin yapısı; uygulamamızdan da görüleceği üzere, şöyledir: KOD {ÖZELLİK: değer}. Eğer koda birden fazla özellik atayacaksak, tıpkı style="..." parametresinde olduğu gibi stil özellikleri arasına ";" işareti konur: KOD {ÖZELLİK1: değer1; ÖZELLİK2: değer2; ÖZELLİK3: değer3} gibi. Stil özelliklerini yanyana yazabileceğiniz gibi, uygulamada olduğu gibi altalta da yazabilirsiniz: KOD
Ayrıca aynı stil özelliklerini taşıyacak olan kodları gruplayabilirsiniz: KOD1, KOD2, KOD3, KOD4, KOD5
_________________ Gercek bir hacker olmak icin hacklemeniz lazim. Oturup text dosyalari okuyarak hacker olunmaz.. ________________________________________________________________________________________________________
Dışkenar Boşluğu Bir önceki sayfada nesnelerin sınır çizgilerini CSS ile şekillendirmeyi öğrenmiştik. Şimdi bu sınır çizgilerin dışkenar boşluklarını şekillendirmeyi göreceğiz. HTML'de nesnelerin diğer nesnelere olan konumunu, dışkenar boşlukları ile belirleyebiliriz. Her nesnenin bir sınır çizgisi olduğu gibi, sınır çizgisinin dışında bir boşluk da vardır; ancak bu boşluğun varsayılan değeri sıfırdır. Bu dersimizde bu boşluğu margin özelliği ile ifade edeceğiz. Dışkenar Boşluk Değeri margin özelliğine vereceğimiz değerler şu şekillerde olabilir: auto Dışkenar boşluğunu gözatıcı (browser) otomatik olarak belirler. margin: auto birim Dışkenar boşluğunun CSS birimleriyle ifade edilmesidir. margin: 12px, margin:1cm, vb. yüzde oranı Dışkenar boşluğunun, sayfa büyüklüğüne olan yüzde oranıyla belirlenmesidir. margin: 20% Eğer margin özelliğine tek değer verirsek, tüm dışkenar boşlukları bu değeri alır. Eğer iki değer verirsek, üst ve alt dışkenar boşlukları ilk değeri, sol ve sağ dışkenar boşlukları ikinci değeri alır. Eğer üç değer verirsek, üst dışkenar boşluğu ilk değeri, sol ve sağ dışkenar boşlukları ikinci değeri, alt dışkenar boşluğu üçüncü değeri alır. Eğer dört değer verirsek, üst dışkenar boşluğu ilk değeri, sağ dışkenar boşluğu ikinci değeri, alt dışkenar boşluğu üçüncü değeri, sol dışkenar boşluğu dördüncü değeri alır. <html> <head> <title>Dışkenar boşlukları,</title> </head> <body> <p>Dışkenar boşlukları:</p> <p style="border-style: solid; border-width: 2px; margin: 1cm">Tek değer.</p> <p style="border-style: solid; border-width: 2px; margin: 1cm 20px">İki değer.</p> <p style="border-style: solid; border-width: 2px; margin: 1cm 20px 10%">Üç değer.</p> <p style="border-style: solid; border-width: 2px; margin: 1cm 20px 10% auto">Dört değer.</p> </body> </html> Öğretici uygulamamızda dışkenar boşluklarının daha iyi gözlenebilmesi amacıyla, sınır çizgileri 2px (piksel) kalınlıkta tasarlandı. (Sınır çizgilerini belirtmek gibi bir zorunluluk yoktur.) Uygulamamızda görüldüğü üzere, ilk nesnemizin dışkenar boşluğu 1 cm. İkinci nesnemizin üst ve alt dışkenar boşluklar 1 cm, sol ve sağ dışkenar boşluklar 20 piksel. Üçüncü nesnemizin üst dışkenar boşluğu yine 1 cm, sol ve sağ dışkenar boşluğu 20 piksel, alt dışkenar boşluğu ise sayfanın onda biri (10%) kadar. Son nesnemizin üst dışkenar boşluğu 1 cm, sağ dışkenar boşluğu 20 piksel, alt dışkenar boşluğu sayfanın onda biri kadar ve sol dışkenar boşluğu ise gözatıcının (browser'ın) atadığı otomatik değer kadardır. CSS'de üst, alt, sol ve sağ dışkenar boşluklarını ayrı ayrı ifade etmek de mümkündür. Bu özelliklere de aynı şekilde değer verilir. Aşağıda bu özellikler ve açıklamaları görülmektedır: margin-top Üst dışkenar boşluğunu ifade eder. margin-top: 15% margin-left Sol dışkenar boşluğunu ifade eder. margin-left: 25mm margin-bottom Alt dışkenar boşluğunu ifade eder. margin-top: auto margin-right Sağ dışkenar boşluğunu ifade eder. margin-top: 30px _________________ İçkenar Boşluğu Bu sayfa bir önceki sayfanın tekrarı gibi olacak. Her nesnenin dışkenar boşluğu olduğu gibi, sınır çizgisiyle nesne arasında bulunan içkenar boşluğu da vardır. Bu sayfadaki konumuz bu içkenar boşluklarını CSS ile şekillendirmek. İçkenar Boşluk Değeri Özellikle tablolarda içkenar boşluklarının ayarlanması, tablo düzeni için önemli bir işlemdir. CSS'de dışkenar boşluklarını ifade etmek için padding özelliğinden yararlanırız. padding özelliğine vereceğimiz değerler şu şekillerde olabilir: birim İçkenar boşluğunun CSS birimleriyle ifade edilmesidir. padding: 12px, margin:1cm, vb. yüzde oranı İçkenar boşluğunun, sayfa büyüklüğüne olan yüzde oranıyla belirlenmesidir. padding: 20% Eğer padding özelliğine tek değer verirsek, tüm içkenar boşlukları bu değeri alır. Eğer iki değer verirsek, üst ve alt içkenar boşlukları ilk değeri, sol ve sağ içkenar boşlukları ikinci değeri alır. Eğer üç değer verirsek, üst içkenar boşluğu ilk değeri, sol ve sağ içkenar boşlukları ikinci değeri, alt içkenar boşluğu üçüncü değeri alır. Eğer dört değer verirsek, üst içkenar boşluğu ilk değeri, sağ içkenar boşluğu ikinci değeri, alt içkenar boşluğu üçüncü değeri, sol içkenar boşluğu dördüncü değeri alır. <html> <head> <title>İçkenar boşlukları,</title> </head> <body> <p>İçkenar boşlukları:</p> <p style="background-color: red; padding: 1cm">Tek değer.</p> <p style="background-color: red; padding: 1cm 20px">İki değer.</p> <p style="background-color: red; padding: 1cm 20px 10%">Üç değer.</p> <p style="background-color: red; padding: 1cm 20px 10% auto">Dört değer.</p> </body> </html> Öğretici uygulamamızda içkenar boşluklarının daha iyi gözlenebilmesi amacıyla, nesnemize (paragrafa) arkaplan rengi verildi. Uygulamamızda görüldüğü üzere, ilk nesnemizin içkenar boşluğu 1 cm. İkinci nesnemizin üst ve alt içkenar boşlukları 1 cm, sol ve sağ içkenar boşlukları 20 piksel. Üçüncü nesnemizin üst içkenar boşluğu yine 1 cm, sol ve sağ içkenar boşlukları 20 piksel, alt içkenar boşluğu ise sayfanın onda biri (10%) kadar. Son nesnemizin üst içkenar boşluğu 1 cm, sağ içkenar boşluğu 20 piksel, alt dışkenar boşluğu sayfanın onda biri kadar ve sol içkenar boşluğu ise gözatıcının (browser'ın) atadığı otomatik değer kadardır. CSS'de üst, alt, sol ve sağ içkenar boşluklarını ayrı ayrı ifade etmek de mümkündür. Bu özelliklere de aynı şekilde değer verilir. Aşağıda bu özellikler ve açıklamaları görülmektedır: padding-top Üst içkenar boşluğunu ifade eder. padding-top: 15% padding-left Sol içkenar boşluğunu ifade eder. padding-left: 25mm padding-bottom Alt içkenar boşluğunu ifade eder. padding-top: auto padding-right Sağ içkenar boşluğunu ifade eder. padding-top: 30px _________________ Listeleme Bu sayfayı okumadan önce, HTML'de öğrendiğimiz listeleme kodlarını birkez gözden geçirmenizi tavsiye ederim. Bu sayfanın konusu listeleme kodlarını CSS ile şekillendirmektir. Maddeleme İşaretleri HTML'de anlatıldığı üzere, iki tür listeleme vardır: sıralı listeleme, sırasız listeleme. Sıralı listelemeyi type="..." parametresine "1", "a", "A", "I", "i" gibi değerler vererek şekillendiriyorduk. Aynı şekilde sırasız listelemeyi type="..." parametresine "disc", "circle", "square" gibi değerlerle şekillendiriyorduk. CSS'de type="..." parametresinin işlevini list-style-type özelliği üstlenmiştir. Bu özelliğin aldığı özellikler de aşağı yukarı aynı: none Maddelerin önüne işaret koymaz. list-style-type: none disc Maddelerin önüne disk şeklinde işaret koyar. list-style-type: disc circle Maddelerin önüne çember şeklinde işaret koyar. list-style-type: circle square Maddelerin önüne kare şeklinde işaret koyar. list-style-type: square decimal Maddelerin önüne sıralı rakam koyar koyar. (1, 2, 3, 4, 5...) list-style-type: decimal decimal Maddelerin önüne sıralı rakam koyar. (1, 2, 3, 4, 5...) list-style-type: lower-roman decimal Maddelerin önüne sıralı küçük roma rakamı koyar. (i, ii, iii, iv, v...) list-style-type: lower-roman upper-roman Maddelerin önüne sıralı büyük roma rakamı koyar. (I, II, III, IV, V...) list-style-type: upper-roman lower-alpha Maddelerin önüne sıralı küçük harf koyar. (a, b, c, d, e...) list-style-type: lower-alpha upper-alpha Maddelerin önüne sıralı büyük harf koyar. (A, B, C, D, E...) list-style-type: upper-alpha Bu özellikleri sadece ol, ul ve li kodlarına atayabiliyoruz. (Çünkü diğerleri sıralama kodu değil.) Resim Nesnelerini Maddeleme İşareti Yapma Tabi maddelerin önüne sadece bu işaretleri koymakla veya hiçbir şey koymamakla sınırlandırılmış değiliz. list-style-image özelliğine url(...) adres değeri vererek, maddelerin önüne dosya adresi verilen görüntü elemanının gelmesini sağlayabiliriz: list-style-image: url(ok.gif) gibi. <html> <head> <title>Resimli maddeleme,</title> </head> <body> <p>CSS Dersleri</p> <ul style="list-style-image: url(top.gif)"> <li>CSS'ye Giriş</li> <li>Metin Formatı</li> <li>Font Formatı</li> <li>Arkaplan Formatı</li> <li>Sınır Çizgisi</li> <li>Dışkenar Boşluğu</li> <li>İçkenar Boşluğu</li> <li>Listeleme</li> <li>Konumlandırma</li> <li>Sınıflandırma</li> </ul> </body> </html> Listeleme Boşluğu ol, ul gibi listeleme kodlarında, listelenen maddeler sayfanın solunda belli bir mesafe bırakmaktadır. Bu mesafeyi artırmanın yolu list-style-position özelliğine inside değeri vermektir. outside değerini verirsek, maddeler sayfa solunda eskisi kadar boşluk bırakacaktır. Bana inanmıyorsanız, aşağıdaki örneğe inanın. Not: Netscape gözatıcısı bu özelliği desteklemiyor. <html> <head> <title>Listeleme Düzeni,</title> </head> <body> <p>list-style-position: Inside</p> <ul style="list-style-type: square; list-style-position: inside"> <li>Madde1</li> <li>Madde2</li> <li>Madde3</li> </ul> <p>list-style-position: Outside</p> <ul style="list-style-type: square; list-style-position: outside"> <li>Madde1</li> <li>Madde2</li> <li>Madde3</li> </ul> <p>Varsayılan değer</p> <ul style="list-style-type: square"> <li>Madde1</li> <li>Madde2</li> <li>Madde3</li> </ul> </body> </html> Listeleme Özelliklerini Tek Kodla İfade Etme Şimdi bu özelliklerin hepsini taşıyan, klasik ders sonu özelliğimize geçelim: list-style. Bu özellik şöyle ifade edilir: list-style: (list-style-type değeri) (list-style-position değeri) veya list-style: (list-style-position değeri) (list-style-image değeri). Not: Bu özelliği Netscape gözatıcıları desteklemiyor. _________________ Gercek bir hacker olmak icin hacklemeniz lazim. Oturup text dosyalari okuyarak hacker olunmaz.. İyi bir hacker’san, ismini herkes bilir. Ama büyük bir hacker’san kimse kim olduğunu bilmez. Konumlandırma Bu sayfada HTML nesnelerinin CSS ile sayfa içinde nasıl konumlandırılacağını göreceğiz. Nesne Yüzdürme İlk özelliğimiz: float. Bu özellik ile HTML nesnelerinin sayfada veya herhangi bir HTML elemanının içinde konumlandırmaya yarar. Bu işleme yüzdürme diyoruz. Örneğin bir resim nesnesinin metin içindeki konumunu düşünün, bu resim nesnesini hizalayarak bu nesneyi metin denizi içinde yüzdürmüş oluyoruz. Eğer float özelliğine right özelliği verirsek nesne sağda, left özelliği verirsek solda, none özelliğini verirsek yazıldığı yerde konumlandırılır. <html> <head> <title>Nesne Konumlandırma,</title> </head> <body> <p style="text-align: justify">Augustus sonunda kararını verdi: Dünyayı gezip dolaşacak, insanlara şu ya da bu şekilde yardım elini uzatabileceği ve kendilerine duyduğu sevgiyi açıkça ortaya koyabileceği bir yer bulup orada kalacaktı. <img src="volkan.gif" style="float: right"> Yüzünü kimsenin görmek istememesine alışmıştı çaresiz; avurtları çökmüş, gözleri çukura gömülmüştü; sırtındaki giysileri, ayağındaki ayakkabıları gören, onu dilenci sanırdı; sesi ve yürüyüşü de bir zaman herkesin işitip görmekten haz duyduğu, herkesi büyüleyip hayran bırakan ses ve yürüyüş olmaktan çıkmıştı. Taranmamış bakımsız ak sakalı çocukları korkutuyordu; şık giyimli beyler ve hanımlar ondan kaçıyor, yanında bulunmaktan rahatsızlık duyarak kendilerini adeta pisliğe bulanmış hissediyorlardı; dilenciler ise ellerindeki birkaç lokma yiyeceğe göz dikmiş bir yabancı sanarak ona kuşkuyla bakıyorlardı. Bütün bunlar da Augustos'un insanlara istediği gibi hizmet edebilmesini güçleştirmekteydi. <img src="volkan.gif" style="float: left"> Ne var ki, her gün yeni bir şey öğreniyor, asla yılgınlığa kapılmıyordu. Bütün bunlar da Auustus'un insanlara istediği gibi hizmet edebilmesini güçleştirmekteydi. Ne var ki, her gün yeni bir şey öğreniyor, asla yılgınlığa kapılmıyordu. Diyelim bir fırının önünde bir çocuk gördü de çocuğun boyu minik eliyle uzanıp kapının tokmağını çevirmeye yetmiyor, koşup yardım ediyordu hemen. Karşısına kendisinden de çaresiz durumda biri çıktıkça, örenğin bir dilenci ya da sakat biriyle karşılaştıkça, yolda bir süre ona eşlik edip yardımcı oluyordu; bunu yapamadı diyelim, cebindeki birkaç kuruşu seve seve eline tutuşturuyor, iyilik taşan pırıl pırıl bir bakışı, kardeşçe bir selamı, kendisini anlayıp derdine ortak olduğunu gösteren bir jesti böyle bir kimseden esirgemiyordu. Gezip dolaştıkça, insanların yüzüne bakar bakmaz onların kendisinden neler beklediğini, yüksek sesle vereceği giler yüzlü bir selamın mı yoksa sessiz bir bakışının mı ya da hiç yanlarına sokulmayıp uzaktan geçmesinin mi onları memnun bırakacağını anlamaya başlamıştı. <img src="volkan.gif" style="float: right"> Dünyadaki onca sefalete karşın yine de sızlanıp şikayet etmeksizin yaşayıp giden insanlara rastladıkça şaşmadan duramıyordu. Her acıyı neşeli bir kahkahanın, her ölüm yasını neşeli bir çocuk şarkısının izlediğini, her sıkıntının, her bayalığın yanında bir güzelliğin, bir esprinin, bir tesellinin, bir gülümsemenin yer aldığını hayranlıkla görüyor, bunu da harikûlade buluyordu.</p> </body> </html> Nesne Boyutları Konumlandırılan HTML nesnesinin büyüklüğünün belirtilmesi de çok önemlidir. Nesnelerin boyutlarını belirlemek için width (en) ve height (boy) özellikleri kullanılır. Bu özelliklere şu şekillerde değerler verilir: auto Nesnenin boyutlarını gözatıcı otomatik olarak belirler. width: auto; height: auto birimsel değer Nesnenin boyutlarının CSS birimleriyle ifade edilmesidir. width: 20px; height: 1cm yüzde oran Nesnenin boyutlarını, sayfaya olan yüzde oranıyla belirler. width: 50%; height: 25% <html> <head> <title>Nesne Boyutları,</title> </head> <body> <img src="volkan.gif" style="width: 8cm; height: 10cm"> </body> </html> Not: width ve height özelliklerini Netscape desteklemiyor. Nesne Konumlandırma Bundan önceki iki sayfada nesneyi konumlandırmak için dışkenar veya içkenar boşluklarından yararlanıyorduk. Bu özellikler her ne kadar sınır çizgisine olan mesafeyi belirliyorlarsa da, sınır çizgisinin kullanılmadığı zamanlarda pekala konumlandırma aracı olarak da kullanılabilir. Veya sırf konumlandırmak için kullanılan top ve left özelliklerinden yararlanabiliriz. top özelliği nesnenin üstünde bırakılacak boşluğu, left özelliği ise nesnenin solunda bırakılacak boşluğu belirler. Bu özelliklere şu şekilde değerler verebiliriz: auto Nesnenin bırakacağı boşluğu gözatıcı otomatik olarak belirler. top: auto; left: auto birimsel değer Nesnenin bırakacağı boşluğun CSS birimleriyle ifade edilmesidir. top: 20px; left: 1cm yüzde oran Nesnenin bırakacağı boşluğun sayfaya olan yüzde oranıyla belirler. top: 50%; left: 25% Konumlandırma Türleri Ancak bu özelliklerin kullanılabilmesi için position (konum) özelliğine değer vermemiz gerekir. Eğer position özelliğinin değeri absolute ise, verilen top ve left değerleri sayfaya veya içinde bulunulan elemana göre konumlandırır: <html> <head> <title>Top ve left özellikleri,</title> <style> <!-- p {position: absolute; top: 200px; left: 100px} h1 {position: absolute; top: 100px; left: 100px} --> </style> </head> <body> <h1>Halikarnas Balıkçısı,</h1> <p>Balıkçılar, sünger avcıları, dalgıçlar, gemiciler... Halikarnas Balıkçısı'nın hikâye ve romanlarıyla gelen bu tipler, sadece edebiyata ilk kez geldikleri için ilginç değillerdir. Balıkçı, denize bağlı olarak, güzelliği, özgürlüğü, başkaldırıyı, insanoğlunun geçmişteki ve gelecekteki arayışlarını, kayıplarını, bunalımlarını, korkularını, ışığı kırar gibi kendiliğinden alabildiğine etkin bir anlatımla ortaya koyarak, çağdaş insancıl bakışla eski uygarlıklar arasındaki bağları göstermiştir.</p> </body> </html> Eğer position koduna relative (bağıl) değerini verirsek, top ve left değerleri kendisinden önce tanımlanan nesneye göre konumlandırır: <html> <head> <title>Top ve left özellikleri,</title> <style> <!-- p {position: relative; top: 200px; left: 100px} h1 {position: relative; top: 100px; left: 100px} --> </style> </head> <body> <h1>Halikarnas Balıkçısı,</h1> <p>Balıkçılar, sünger avcıları, dalgıçlar, gemiciler... Halikarnas Balıkçısı'nın hikâye ve romanlarıyla gelen bu tipler, sadece edebiyata ilk kez geldikleri için ilginç değillerdir. Balıkçı, denize bağlı olarak, güzelliği, özgürlüğü, başkaldırıyı, insanoğlunun geçmişteki ve gelecekteki arayışlarını, kayıplarını, bunalımlarını, korkularını, ışığı kırar gibi kendiliğinden alabildiğine etkin bir anlatımla ortaya koyarak, çağdaş insancıl bakışla eski uygarlıklar arasındaki bağları göstermiştir.</p> </body> </html> Yukarıdaki iki uygulama arasındaki farkı görebildiniz mi? positon: absolute olan örnekte başlığın tepe çizgisi, sayfanın başından 100 piksel aşağıda; paragrafın tepe çizgisi ise sayfanın başından 200 piksel aşağıda. positon: relative olan örnekte yine başlık aynı konumda ama paragraf sayfa başından değil, başlıktan itibaren 200 piksel aşağıda. Yani sayfa başından 300 piksel aşağıda yer alıyor. Nesneleri width, height left ve top özellikleriyle kesin olarak konumlandırabilir ve boyutlandırabiliriz. Not1: position özelliğini kullanmayı unutmayın. Not2: Netscape gözatıcılarının width ve height özelliklerini desteklemediğini unutmayın. <html> <head> <title>Top ve left özellikleri,</title> <style> <!-- p { position: absolute; top: 200px; left: 100px; width: 400px; height: 250px; background-color: red } h1 { position: absolute; top: 100px; left: 100px; width: 400px; height: 30px; background-color: blue } --> </style> </head> <body> <h1>Halikarnas Balıkçısı,</h1> <p>Balıkçılar, sünger avcıları, dalgıçlar, gemiciler... Halikarnas Balıkçısı'nın hikâye ve romanlarıyla gelen bu tipler, sadece edebiyata ilk kez geldikleri için ilginç değillerdir. Balıkçı, denize bağlı olarak, güzelliği, özgürlüğü, başkaldırıyı, insanoğlunun geçmişteki ve gelecekteki arayışlarını, kayıplarını, bunalımlarını, korkularını, ışığı kırar gibi kendiliğinden alabildiğine etkin bir anlatımla ortaya koyarak, çağdaş insancıl bakışla eski uygarlıklar arasındaki bağları göstermiştir.</p> </body> </html> Görünürlük Şimdi değil ama ileride görünmez nesneler de koymak isteyeceğiz. (DHTML derslerinde mesela.) Bir nesnenin görünür olup olmamasını visibility (görünürlük) özelliğine visible (görünür) veya hidden (gizli, görünmez) değerleri vererek sağlarız. Not: Bu özelliği Netscape gözatıcıları desteklemiyor. <html> <head> <title>Görünürlük,</title> <style> <!-- p {visibility: visible} h1 {visibility: hidden} --> </style> </head> <body> <h1>Halikarnas Balıkçısı,</h1> <p>Balıkçılar, sünger avcıları, dalgıçlar, gemiciler... Halikarnas Balıkçısı'nın hikâye ve romanlarıyla gelen bu tipler, sadece edebiyata ilk kez geldikleri için ilginç değillerdir. Balıkçı, denize bağlı olarak, güzelliği, özgürlüğü, başkaldırıyı, insanoğlunun geçmişteki ve gelecekteki arayışlarını, kayıplarını, bunalımlarını, korkularını, ışığı kırar gibi kendiliğinden alabildiğine etkin bir anlatımla ortaya koyarak, çağdaş insancıl bakışla eski uygarlıklar arasındaki bağları göstermiştir.</p> </body> </html> HTML'de nesneleri konumlandırırken, herkesin sizinle aynı gözatıcıyı (browser'ı) kullanmadığını, herkesin sizinle aynı çözünürlük ve pencere büyüklüğünde çalışmadığını aklınızda tutun. |
|||||||||||||||||||||
Fare İmleci
Fare İmlecini Seçmek
Fare imlecinin sembolünü değiştirmek de sizin elinizde. Bunun için cursor özelliğini kullanıyoruz. cursor özelliği aşağıdaki değerleri alabilir:
url Bu değer ile kendi tasarladığımız .cur uzantılı imleci tanımlayabiliyoruz. --
default Varsayılan değer bildiğimiz ok şekli imleç. Değiştirdiğimiz imleçten varsayılan değere dönmek için sıkça kullanılır.
hand Genellikle link izlenimi veren el şekilli bu imleç, ziyaretçiyi sol tıklamaya güdüler.
crosshair Ziyaretçiyi bir noktayı belirlemesi (nişan alması) yönünde güdüler.
pointer Ziyaretçiyi bir noktayı göstermeye güdüler.
move Ziyaretçiyi bir şeyi tutup hareket ettirmeye güdüler.
e-resize Herhangi bir nesneyi doğuya doğru genişletmek için kullanılır.
ne-resize Herhangi bir nesneyi kuzey doğuya doğru genişletmek için kullanılır.
nw-resize Herhangi bir nesneyi kuzey batıya doğru genişletmek için kullanılır.
n-resize Herhangi bir nesneyi kuzeye doğru genişletmek için kullanılır.
se-resize Herhangi bir nesneyi güney doğuya doğru genişletmek için kullanılır.
sw-resize Herhangi bir nesneyi güney batıya doğru genişletmek için kullanılır.
s-resize Herhangi bir nesneyi güneye doğru genişletmek için kullanılır.
w-resize Herhangi bir nesneyi batıya doğru genişletmek için kullanılır.
text Ziyaretçiyi yazı yazmaya güdüler.
wait Ziyaretçiye "bekle" der.
help Ziyaretçiyi yardım almak için tıklamasını güdüler.
İnternetten indirdiğiniz veya imleç yapan yazılımlar kullanarak yapacağınız bir .cur uzantılı dosyayı fare imleci haline getirebilirsiniz. Aşağıdaki örnekte sat.cur isimli bir dosya ile imleci değiştiriyoruz. cursor özelliğinde url desteği vermeyen imleçlere karşı alternativ imleçler tanımlayabiliyoruz. (Örnekte var.)
| Kod: |
| <html> <head> <title>Nesne Konumlandırma,</title> </head> <body> <center> <table cellpadding="0" cellspacing="0" border="0" bgcolor="green" width="350" height="200" style="cursor:url('sat.cur'),pointer,hand;"> <tr><td><p>Fareyle bu bölgeye geldiğinizde imleç değişecektir.</p></td></tr> </table> </center> </body> </html> |