Zone Bs Yardım - Zone Medya - Css Hakkında Herşey 2

Css Hakkında Herşey 2

Listeleme

Bu skonuyu okumadan önce, HTML'deki 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ığı gibi, 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.

Kod:

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

Not: Netscape gözatıcısı bu özelliği desteklemiyor.

Kod:

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

Bu konu da bitti Smile

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.

Kod:

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

Kod:

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

Kod:

<html>
<head>
<title>Top ve left özellikleri,</title>
<style>

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

Kod:

<html>
<head>
<title>Top ve left özellikleri,</title>
<style>

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

Kod:

<html>
<head>
<title>Top ve left özellikleri,</title>
<style>

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

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.

Kod:

<html>
<head>
<title>Görünürlük,</title>
<style>

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

Mouse (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:

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

Evet Arkadaşlar CSS yi Bitirdik Razz

.. Katlandığınız İçin Teşekkür Ederim.. Wink

Saygılarımla...

1>2

Burada Yapılan Anlatımlar Bu Siteye Aittir.. İzin Alınmadan Yayınlanması, Kaynak Göstermeksizin Yayınlamak Kesinlikle Yasaktır.. Aksi Taktirde Hakkınızda Yasal İşlem Başlatılacaktır...Copyright©
İronarchives arkadaşımız böyle yazmış kaynak belirtiyirorum
www.ironarchives.tr.gg Teşekkürler