Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj01.08.2008, 14:23 (UTC)    
Mesaj konusu: CSS Hakkında Herşey !

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.


HTMLde de olduğu gibi CSSde de style="..." parametresi yer alır. Bu parametre ile tanımlanan kodun özellikleri değiştirilir. 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.

Şimdi style parametresi üzerinde açıklama yapalım. style parametresi <p>, <div>, <h1>, <a>, <font>, <li> gibi birçok kod için kullanılabilir:

<p style="text-align:left; font-size:12pt; color:red">...</p>

Yukarıda HTML den 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.


Nesne Özelliklerini Genelleştirme

Sayfa tasarımında CSS'den yararlanacaksak style="..." parametresini kullanmamız şart değil,sayfa özelliklerini <style>...</style> kodları arasında da tanımlayabiliriz.<style>...</style> kodları <head>...<head> bölümünde; bir fonksiyonmuşcasına yer alır.

CSS kullanımını anlatabilmek için aşağıdaki iki örneği inceleyelim. İlk örnekte style="..." parametresi kullanılıyor. İkincisinde ise <style>...</style> kodları kullanılmaktadır.

Kod:
<html>
<head>
  <title>Style parametresi ile...</title>
</head>
<body>
  <h1 style="font-size:18pt; color:blue; text-align:left">AĞIR ROMAN</h1>
  <p style="font-size:12pt; color:crimson; text-align:justify">Güneş buluttan sıyrılırken Kolera'nın âlemci kadınları bir omuz darbesinde yıkılacakmış gibi duran evlerinin önünde oto tamircileriyle, marangozlarla, tornacılarla aslanlar gibi muhabbete koyuldular. Bir yandan da kaynak yaparken elleri titreyen ustalara esrarı daha kallavi içmeleri için zıvana hazırlamaya başladılar. Köylü kadınlar, kocalarının mahalle hakkında anlattıkları korku hikâyelerinden tırstıklarından mahkûmlar gibi camdan bakıyorlardı.</p>
  <h4 style="font-size:8pt; color:black; text-align:right">Metin Kaçan</h1>
</body>
</html>



Bu uygulamanın aynısını <style> koduyla aşağıdaki şekilde yapabiliriz:

Kod:
<html>
<head>
<title>Style kodu ile...</title>
<style>
<!--
p
{
font-size:12pt;
color:crimson;
text-align:justify
}
h1
{
font-size:18pt;
color:blue;
text-align:left
}
h4
{
font-size:8pt;
color:black;
text-align:right
}
-->
</style>
</head>
<body>
<h1>AĞIR ROMAN</h1>

<p>Güneş buluttan sıyrılırken Kolera'nın âlemci kadınları bir omuz darbesinde yıkılacakmış gibi duran evlerinin önünde oto tamircileriyle, marangozlarla, tornacılarla aslanlar gibi muhabbete koyuldular. Bir yandan da kaynak yaparken elleri titreyen ustalara esrarı daha kallavi içmeleri için zıvana hazırlamaya başladılar. Köylü kadınlar, kocalarının mahalle hakkında anlattıkları korku hikâyelerinden tırstıklarından mahkûmlar gibi camdan bakıyorlardı.</p>

<h4>Metin Kaçan</h1>

</body>
</html>


Ş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
{
ÖZELLİK1:değer1;
ÖZELLİK2:değer2;
ÖZELLİK3:değer3
}



Ayrıca aynı stil özelliklerini taşıyacak olan kodları gruplayabilirsiniz:

KOD1, KOD2, KOD3, KOD4, KOD5
{
ÖZELLİK1:değer1;
ÖZELLİK2:değer2;
ÖZELLİK3:değer3
}



CSS'yi Dış Dosya ile Tanımlama

CSS araçlarını HTML kodlarına atamanın bir başka yolu daha vardır: CSS özelliklerini .css uzantılı bir dosyaya yazmak ve web sayfasından bu dosyayla bağlantı kurmak. Herhangi bir metin editöründe oluşturduğumuz; <style>...</style> kodları arasına yazdığımız CSS özelliklerini içeren, bir dosyayı .css kök ismi ile kaydedin. Web sayfamızın <head>...</head> kısmına aşağıdaki kodlarla .css uzantılı dosyanızla bağlantı kurun; mesela dosyanın ismi diaz.css olsun:

<link rel="stylesheet"
type="text/css"
href="diaz.css">


Daha önce style parametresi ve style kodları ile yaptığımız AĞIR ROMAN isimli sayfayı, bu sefer yeni öğrendiğimiz dış dosya yöntemiyle yapalım. (Yine aynı sayfayı yapacağız.) Tabi önce .css isimli dosyayı oluşturacağız. Aşağıdaki sayfayı tarz.css ismiyle kaydettim:

Kod:
p
{
font-size:12pt;
color:crimson;
text-align:justify
}
h1
{
font-size:18pt;
color:blue;
text-align:left
}
h4
{
font-size:8pt;
color:black;
text-align:right
}


Bu sayfayı "tarz.css" ismiyle kaydettikten sonra, web sayfasını şöyle oluştururum:


Kod:
<html>
<head>
  <title>Dış dosya yolu ile...</title>
  <link rel="stylesheet" type="text/css" href="tarz.css">
</head>
<body>
  <h1>AĞIR ROMAN</h1>
  <p>Güneş buluttan sıyrılırken Kolera'nın âlemci kadınları bir omuz darbesinde yıkılacakmış gibi duran evlerinin önünde oto tamircileriyle, marangozlarla, tornacılarla aslanlar gibi muhabbete koyuldular. Bir yandan da kaynak yaparken elleri titreyen ustalara esrarı daha kallavi içmeleri için zıvana hazırlamaya başladılar. Köylü kadınlar, kocalarının mahalle hakkında anlattıkları korku hikâyelerinden tırstıklarından mahkûmlar gibi camdan bakıyorlardı.</p>
  <h4>Metin Kaçan</h4>
</body>
</html>


Özellikle aynı formatta çok fazla sayfa içeren siteler için dış dosya yöntemini kullanmanızı tavsiye ederim. Böylece her sayfa için aynı kodları yazıp durmanız gerekmez. Ayrıca sayfaların formatını değiştirmek istediğinizde ".css" uzantılı dosyanızı değiştirmeniz yeterli olacaktır. CSS'nin yapısını böylece tanımış olduk..


Metin Biçimi

HTML kodlarına atanan parametreler, metin formatı konusunda çok yetersiz kalmaktadır. En basiti metni iki yana yaslayamıyorduk. HTMLde de olduğu gibi, align="..." parametresi ile metni sağa (right), sola (left) ve merkeze (center) yaslamak mümkün. Ancak göze hoş gelen iki yana yaslama biçimini bu parametreyle gerçekleştiremiyorduk.

Metin Hizalama

CSS'de metni yaslamak için text-align özelliğinden yararlanıyoruz. Bu özelliğe verebileceğimiz değerler:left (sol), right (sağ), center (orta) ve justify (iki yana yasla). Aşağıdaki uygulamamıza bakalım:

Kod:
<html>
<head>
<title>Text-align özelliği</title>
<style>
<!--
p
{
text-align:justify
}
h1
{
text-align:center
}
h3
{
text-align:left
}
h4
{
text-align:right
}
-->
</style>
</head>
<body>
<br> <h4>Ankara, Kasım 1996</h4><br>
<h1>Anadolu'da Bronz Çağı Kentleri</h1>
<p>Kentler, endüstri toplumunda olduğu gibi endüstri öncesi toplumlarda da tarih boyunca en devingen öğe oldu, toplum yaşantısında belirgin izler bıraktı. Anadolu'da kent ve kentleşme tarihi üzerinde yapılmış çeşitli araştırmaların sonuçlarını bir araya getirip bunlardan yeni sentezler üretti. Anadolu kentlerinde mekânsal yapı değişimi ile bu yapıyı belirleyen sosyo-ekonomik süreçler arasındaki nedensellik ilişkilerinin irdelendiği bu kitap, araştırmacılar, özellikle kent plancıları için önemli bir kaynak.</p>
<h3>Sevgi Aktüre</h3>
</body>
</html>


Uygulamamızda yer alan <p>, <h1>, <h3> ve <h4> kodların hepsi align="..." parametresini destekleyen kodlardır. Bu parametreyi desteklemeyen <code>, <address> gibi kodlar pek tabi ki text-align özelliğini de desteklemezler.

Metinler ve Çizgiler

Metin formatı için kullandığımız bir başka özellik: text-decoration. Bu özelliğin aldığı değerler şunlardır:

overline Yazıların üstünün çizili olmasını sağlar.
text-decoration: overline

line-through Yazıların üzerinin çizili olmasını sağlar.
text-decoration: line-through

underline Yazıların altının çizili olmasını sağlar.
text-decoration: underline

none Yazıların çizgisiz olmasını sağlar.
text-decoration: none


Bu özelliği web tasarımcıları daha çok hiperlinkler için kullanırlar. Bildiğiniz gibi <a href="..."> kod ve parametresiyle oluşturduğumuz hiperlinkler, mavi renkli altı çizili yazılardır. Eğer hiperlinklerin altı çizili olmasını istemiyorsak CSS dosyamızda şu özelliği kullanırız: text-decoration: none. (Tabii forumumuzda linklerin altı çizili olmaması için kodlar da mevcut)Aşağıdaki hiperlink çeşitlerine bakalım:

Kod:
<html>
<head>
<title>Text-align özelliği</title>
</head>
<body>
<br>

<a href="derscss1.html" style="text-decoration:overline">Metin Formatı</a><br>

<a href="derscss2.html" style="text-decoration:line-through">Font Formatı</a><br>

<a href="derscss3.html" style="text-decoration:underline">Arkaplan Formatı</a><br>

<a href="derscss4.html" style="text-decoration:none">Tablo Formatı</a><br>

<a href="derscss5.html">Sınıflandırma</a><br>

</body>
</html>


Tabi text-decoration özelliğini başka bir menüde de kullanabiliriz. Örneğin başlık yapmaya yarayan <h1>...<h6> kodlarına bu özelliği atayarak, altı çizili alt başlıklar oluşturabiliriz.

Metin Renkleri

Metnin renk özelliklerini tanımlamak için color aracından yararlanırız. Bu özelliğin aldığı değerler İngilizce renk ismi olarak tanımlanabileceği gibi, hekzadesimal (onaltılık sistem) rgb kodları veya ondalık rgb kodları halinde de tanımlanabilir.

Kod:
h1
{
color:crimson;
}
h2
{
color:#8b008b;
}
h3
{
color:rgb(139,0,139)
}
h4
{
color:rgb(54%,0%,54%)
}



Satır Arası Yükseklik

Metnin hizalamayı, metnin çizgi formatını ayarlamayı ve metnin rengini belirlemeyi öğrendik. Metnin satırları arasıdaki mesafeyi belirlemek şimdiki konumuz. Bunun için line-height özelliğini kullanıyoruz. Eğer metnin line-height özelliğine normal değerini verirsek, satır arası yükseklik varsayılan değerini alır. Tabi biz bu özellik üzerinde şu değerlerle oynayabiliriz.


sayı Satır arası yüksekliğini verilen sayıya göre belirler.
line-height: 1.5

birim Satır arası yüksekliğini px, cm gibi girilen birimlere göre belirler.
line-height: 10mm veya line-height: 15px

yüzde Satır arası yüksekliği yüzde oranı cinsininden belirler.
line-height: 150%


Sayfayı fazla uzatıp, okuyucuyu sıkmamak için uygulama yapmıyorum, sizler <p> koduna bu özellikleri atayarak istediğiniz satır aralığında paragraflar oluşturabilirsiniz. Başka kodlarla da denemeniz faydalı olacaktır.


Harfler Arası Boşluk

Metin formatı için öğreneceğimiz diğer bir özellik: harfler arasındaki mesafeyi ayarlamak. Bunun için letter-spacing aracından yararlanacağız. (NOT:NN browserını kullananlar bu özelliği göremez.) Bu özelliğe vereceğimiz değerler cm, mm gibi veya px (piksel) gibi birimlerle tanımlanmalı. Vereceğimiz değer negatif olursa, harfler arasındaki boşluk normalden daha az olur. Değer pozitif olursa; anlaşılacağı üzere, harfler arasındaki mesafe normale göre daha fazla olur. Matematiği süper olan okuyucularımız, bu değerin sıfır olması halinde nasıl sonuç alınacağını hemen anlamıştır: Birşey değişmez.

Kod:
<html>
<head>
<title>Harfler arası mesafeyi ayarlamak...</title>
<style>
<!--
h1 {letter-spacing:-3px}
h2 {letter-spacing:1 cm}
h3 {letter-spacing:0 cm}
h4 {letter-spacing:5mm}
-->
</style>
</head>
<body>
<br>
<h1>Büyük Altay!</h1><br>
<h2>Büyük Altay!</h2><br>
<h3>Büyük Altay!</h3><br>
<h4>Büyük Altay!</h4><br>
</body>
</html>


IE kullanan okuyucularımız bu uygulamayla letter-spacing özelliğini daha iyi kavramışlardır. Uygulamada 5mm yazılan yere 0.5cm de yazabilirdik pekalâ. İngiliz matematiğinde ondalık sayıların "." ile, Türk matematiğinde ise "," ile ayrıldığını unutmayalım.


Satırbaşı Boşluğu

Sayfa uzuyor ama biz halâ metin formatını bitiremiyoruz. Bir başka özellik de satır başı tanımlamak. HTMLde de olduğu gibi <p> kodu ile satır başı yapmaksızın, üst ve alt satırları boş bırakılan paragraflar elde ediyorduk. Aslında bu format standartlaştı ama eski format; yani satırbaşı bırakma geleneğini de bir çırpıda silemeyiz. Satır başı bırakabilmek için text-indent özelliğinden yararlanıyoruz. Bir önceki özellik de olduğu gibi, bu özelliğe de cm, px gibi birimlerle tanımlanmış değerler verebiliyoruz ve yine negatif değerler atanabiliyor. Eğer değer pozitifse, bildiğimiz anlamda satır başı bırakılmış oluyor, eğer negatif ise paragrafın ilk satırı diğer satırların solunda kalıyor. Diğer özelliğin aksine, bu özelliği NN 4.0 ve daha üstü browser'lar da destekliyor; desteklemeyenleri ayrıca belirtiyorum zaten.

Kod:
<html>
<head>
<title>Satır başı bırakma</title>
<style>
<!--
p {text-indent:1cm}
-->
</style>
</head>
<body>
<br>
<p>İşte o günden sonra, biz eşek milleti, konuşmasını, söyleşmesini unutmuşuz; her duygumuzu, her düşüncemizi, anırtıyla anlatmaya başlamışız. O eski kuşaktan eşek, tehlike kuyruk altına girinceye dek, kendini avutup, kandırmamış olsaydı, bizler de konuşmasını bilecektik.</p>
<em>Ah Biz Eşekler, Aziz Nesin</em>
</body>
</html>



Büyük Harf, Küçük Harf

Diğer özelliğimiz: text-transform. Bu özelliğe değerler vererek metnin büyük harflerle yazılı olmasını (uppercase), küçük harflerle yazılı olmasını (lowercase) veya sözcüklerin ilk harflerinin büyük olmasını (capitalize) sağlayabiliyoruz. Uygulamamız ile neler dediğimi daha iyi anlayacaksınız:

Kod:
<html>
<head>
<title>Büyük harf, küçük harf sorunsalı,</title>
<style>
<!--
h2 {text-transform:lowercase}
h3 {text-transform:uppercase}
h4 {text-transform:capitalize}
-->
</style>
</head>
<body>
<br>
<h2>BüYüK AlTaY!</h2><br>
<h3>BüYüK AlTaY!</h3><br>
<h4>BüYüK AlTaY!</h4><br>
</body>
</html>


Metin formatı için kullanacağımız son özellik: vertical-align (düşey-hizalama). Bu özellikle araçların düşey olarak nasıl hizalanacağını belirleriz. Yine HTML den Tanıdığımız <img> komutunun, resim nesnesinin yazıya göre nasıl hizalanacağını align="..." parametresiyle biliyoruz... Bu sefer hizalamayı CSS özellikleriyle yapıyoruz. vertical-align özelliğinin aldığı değerler şunlardır:

baseline Nesne ana elemanın taban hattına yerleşir.
vertical-align: baseline

sub Nesne alt simgeymiş gibi hizalanır.
vertical-align: sub

super Nesne üst simgeymiş gibi hizalanır.
vertical-align: super

top Nesne satırdaki en yüksek elemanın yüksekliğini tepe hattı alacak şekilde hizalanır.
vertical-align: top

text-top Nesne metnin yüksekliğini tepe hattı alacak şekilde hizalanır.
vertical-align: text-top

middle Nesne ana elemanı ortalayacak şekilde hizalanır.
vertical-align: middle

bottom Nesne satırdaki en aşağıdaki elemanın seviyesini taban hattı alacak şekilde hizalanır.
vertical-align: bottom

text-bottom Nesne metnin tabanını taban hattı alacak şekilde hizalanır.
vertical-align: text-bottom

yüzde oranı Nesne satır hattına göre yüzde oranı ile hizalanır; negatif değerler geçerlidir.
vertical-align: 5%

Bu özellik NN 4.0 ve üzeri browser'larda sadece <img> kodu için geçerlidir.


Font Biçimi


Yukarıdaki anlatımda metin özelliklerini CSS ile tanımlamayı görmüştük. Şimdiki dersimizde ise yazı fontlarının özellikleri ile oynayacağız..

Font Türü

Önce font seçmeyi öğrenelim. HTMLden <font> kodu ve face="..." parametresi ile yazı fontunu belirliyorduk. CSS'de ise bu işi font-family özelliği ile yaparız:

Kod:
h1
{
font-family:Arial
}
h2
{
font-family:Courier
}
h3
{
font-family:Comic Sans MS
}
h4
{
font-family:Verdana
}



Font Büyüklüğü

HTMLde fontların büyüklüğünü belirlemek için <font> kodunu ve size="..." parametresini kullanıyorduk. CSS'de ise font-size özelliğine değerler veririz. Verilen değer yüzde oranı (%şeklinde olabilir veya pt (point) birimi cinsinden olabilir. Bunların yanı sıra xx-large, x-large, large, medium, small, x-small, xx-small gibi gömlek ölçülerini de kullanabiliyoruz. Veya smaller (yürürlükteki değerden bir küçük), larger (yürürlükteki değerden bir büyük) gibi değerler de kullanabiliyoruz:

Kod:
h1
{
font-size:xxlarge
}
h2
{
font-size:160%
}
h3
{
font-size:larger
}
h4
{
font-size:10pt
}



Font Eğikliği

Fontların dik stilde mi, yoksa yana eğik stilde mi görüntüleneceğini font-style özelliğine değerler vererek belirleriz. Eğer fontların normal (dik stilde) olmasını istiyorsak normal değerini, eğik olmasını istiyorsak italic veya oblique değerini veririz:

Kod:
h1
{
font-style:normal
}
h2
{
font-style:italic
}
h3
{
font-style:oblique
}



Büyük Harf, Küçük Harf

Eğer fontların tamamının büyük harflerle yazılmasını istiyorsak (BÜYÜK HARF; boyutça büyük değil) font-variant: small-caps özellik ve değerini kullanırız. Eğer bunu istemiyorsak normal değerini veririz:

Kod:
h1
{
font-variant:small-caps
}
p
{
font-variant:normal
}



Font Kalınlığı

Eğer fontlarımızın kalın (bold) olmasını istiyorsak, font-weight özelliğinden yararlanırız. Bunun için font-weight özelliğine normal, bold (kalın), bolder (yürürlükteki kalınlıktan bir değer daha kalın), lighter (yürürlükteki kalınlıktan bir değer ince) gibi standart değerler verebiliriz. Veya 100, 200,...,800,900 gibi sayısal değerler de verebiliriz. 400 sayısal değeri, normal font değerini verir. 700 sayısal değeri ise kalın (bold) font değerini verecektir.

Kod:
h1
{
font-size:14pt;
font-weight:900
}
h2
{
font-size:14pt;
font-weight:bold
}
h3
{
font-size:14pt;
font-weight:500
}
h4
{
font-size:14pt;
font-weight:normal
}
h5
{
font-size:14pt;
font-weight:lighter
}
h6
{
font-size:14pt;
font-weight:200
}



Font Özelliklerini Tek Kodla Tanımlama

Font formatı konumuzda öğreneceğimiz son özellik: font. Bu özellik fontların tüm özelliklerini aynı anda belirtmeye yarıyor. font özelliği üç standart tip değer alıyor:

font: (font-style değeri) (font-weight değeri)
font: (font-style değeri) (font-variant değeri) (font-weight değeri) (font-size değeri) (font-family değeri)
font: (font-style değeri) (font-variant değeri) (font-weight değeri) (font-size değeri)/(line-height değeri) (font-family değeri)

Not: line-height özelliğini metin formatı sayfasında görmüştük.

Kod:
code
{
font: italic bolder
}
p, h3, td, pre
{
font: italic normal bold 12px arial
}
blockquote, sub, sup, strong
{
font: oblique small-caps 900 10px/12px courier
}



Font formatı konumuz da bu kadar. Bu konudaki özelliklerin CSS formatında nasıl yer alacağını gösterdim ama örnek çözmedim. Çünkü HTML'de işlenen konuyla paralel gidildiği için, okuyucuların yazılanları kolaylıkla anladığını düşünüyorum. Tabi sizlerin birkaç örnek çözmenizde fayda var. Benim verdiğim yazım şekillerinde h1-h6, p gibi kodları kullandım ama siz yapacağınız örneklerde çeşitli kodların özellikleri üzerinde oynayabilirsiniz.



Arkaplan Biçimi

HTMLde sayfanın arkaplanını değiştirmek için <body> komutuna bgcolor="..." parametresini atanıyor. Bu parametre tablolar veya diğer kodlar (h1-h6, marquee,vb...)için de geçerliydi.

Arkaplan Rengi

CSS'de ise bu kodların background-color özelliğine renk değerleri veriyoruz.

Kod:
body
{
background-color: yellow
}
td
{
background-color: #ffffcc
}
h1
{
background-color: rgb(100%,100%,85%)
}
div
{
background-color: rgb(255, 255, 217)
}



Arkaplan Resmi

HTML'de arkaplana resim koymak için background="..." parametresinden yararlanıyorduk. CSS'de arkaplan resmi yerleştirmek için background-image (arkaplan görüntüsü) özelliğine url(...) şeklinde adres değeri veririz. Eğer arkaplana resim koymak istemiyorsak none değeri veririz.
Not:Arkaplan resmi istemezseniz, hiç bu özelliği yazmazsınız, olur biter. Wink

Kod:
body
{
background-image: url(duvar.gif)
}
td
{
background-image: url(c:\kaplamalar\tiles.gif)
}
div
{
background-image: url(http://geocities.com/selnur/resimler/newworld.jpg)
}
span
{
background-image: none
}



Arkaplan Resmini Döşeme

HTML'de arkaplan resimleri kendisini tekrarlıyordu. Oysa biz arkaplan resimlerinin her zaman döşenmesini (kendisini tekrar etmesini) istemeyiz. CSS'de bunun için çok güzel bir özellik var: background-repeat. Bu özelliğin alacağı değerler şöyle:

repeat Arkaplan resmini hem yatay hem de düşey olarak döşer (tekrarlar).
background-repeat: repeat

repeat-x Arkaplan resmini sadece yatay olarak döşer.
background-repeat: repeat-x

repeat-y Arkaplan resmini sadece düşey olarak döşer.
background-repeat: repeat-y

no-repeat Arkaplan resmini döşemeden, tek bir resim halinde gösterir.
background-repeat:no-repeat


Kod:
body
{
background-image: url(duvar.gif);
background-repeat: repeat
}
td
{
background-image: url(c:\kaplamalar\tiles.gif);
background-repeat: repeat-x
}
div
{
background-image: url(http://geocities.com/selnur/resimler/newworld.jpg);
background-repeat: repeat-y
}
span
{
background-image: url(manzara.bmp);
background-repeat: no-repeat
}



Arkaplan Resminin Konumu

Sayfamızın arkaplanında tek bir resim yer alacaksa, bu resmin sayfa üzerindeki konumunu belirlemeliyiz. Bunun için CSS'nin background-position özelliğinden yararlanırız. Bu özellik iki değer birden alır, ilk değer resmin sayfaya göre düşey konumunu, ikinci değer ise resmin sayfaya göre yatay konumunu ifade eder. background-position: (düşey konum değeri) (yatay konum değeri). Bu değerleri aşağıdaki biçimlerde yazabiliriz.
Not: Bu özelliği NN gözatıcıları (browser) desteklemiyor.

background-position: top left
background-position: top center
background-position: top right
background-position: center left
background-position: center center
background-position: center right
background-position: bottom left
background-position: bottom center
background-position: bottom right
background-position: (yüzde değer) (yüzde değer)
background-position: (birim değer) (birim değer)


Kod:
body
{
background-image: url(monalisa.jbg);
background-repeat: no-repeat;
background-position: 100px 60px
}
td
{
background-image: url(c:\kaplamalar\tiles.gif);
background-repeat: no-repeat;
background-position: top left
}
div
{
background-image: url(http://geocities.com/selnur/resimler/newworld.jpg);
background-repeat: no-repeat;
background-position: center center
}
span
{
background-image: url(manzara.bmp);
background-repeat: no-repeat;
background-position: 35% 35%
}



Arkaplan Resmini Sabitleme

Netscape gözatıcılarının tanımadığı bir diğer özellik de background-attachment. Bu özellikle arkaplan resminin sayfayla beraber kayıp kaymayacağını belirliyoruz. Eğer bu özelliğe scroll değerini verirsek, sayfamızla beraber arkaplan resmi de scrollbar ile beraber kayar. Eğer fixed değerini verirsek arkaplan resminin konumu scrollbara göre değişmez, sabit kalır.

Kod:
body
{
background-image: url(monalisa.jbg);
background-repeat: no-repeat;
background-position: 100px 60px;
background-attachment: fixed
}
td
{
background-image: url(c:\kaplamalar\tiles.gif);
background-repeat: no-repeat;
background-position: top left;
background-attachment: scroll
}
div
{
background-image: url(http://geocities.com/selnur/resimler/newworld.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed
}
span
{
background-image: url(manzara.bmp);
background-repeat: no-repeat;
background-position: 35% 35%;
background-attachment: scroll
}



Arkaplan Resim Özelliklerini Tek Kodla İfade Etme

Bir arkaplan resmini CSS'de ifade etmek için; son uygulamamızda olduğu gibi, dört özellikten yararlanmamız şart değil. Bu özelliklerin hepsini background özelliğinde toplayabiliriz: background: (background-color değeri) (background-image değeri) (background-repeat değeri) (background-attachment değeri) (background-position değeri).

Kod:
body
{
background: #ffffcc url(monalisa.jbg) no-repeat fixed 100px 60px
}
td
{
background-image: crimson url(c:\kaplamalar\tiles.gif) no-repeat scroll top left
}
div
{
background-image: rgb(100%, 100%, 85%) url(http://geocities.com/selnur/resimler/newworld.jpg) no-repeat fixed center center
}
span
{
background-image: rgb(255, 255, 217) url(manzara.bmp) no-repeat scroll 35% 35%
}



Burada Netscape gözatıcısı kullananlar bu kodun daha önce belirttiğim background-positon, background-attachment bölümlerini göremezler ama geri kalan kısımlarını görürler. Bu kod bir önceki Font Formatı konusunda font koduna benziyor değil mi? Herşey bir yana, iki kod da kendi sayfalarının sonunda yer alıyor.



Sınır Çizgisi

Sınır Çizgi Şekilleri

CSS'de sınır çizgilerinin şeklini belirlemek için border-style özelliğinden yararlanırız. Bu özelliğin değerleri şunlardır: none, dotted, dashed, solid, double, groove, ridge, inset, ve outset. Aşağıdaki uygulama bu değerlerin nasıl sonuç verdiğini gösteriyor.
NOT: Bu özelliği Netscape desteklemiyor.

Kod:
<html>
<head>
<title>Sınır çizgi şekilleri,</title>
</head>
<body>

<p style="border-style: none">none</p>
<p style="border-style: dotted">dotted</p>
<p style="border-style: dashed">dashed</p>
<p style="border-style: solid">solid</p>
<p style="border-style: double">double</p>
<p style="border-style: groove">groove</p>
<p style="border-style: ridge">ridge</p>
<p style="border-style: inset">inset</p>
<p style="border-style: outset">outset</p>

</body>
</html>



Uygulamada sonuçlarını gördüğümüz bu özellik değerlerinin listesini aşağıda bulabilirsiniz.

none Sınır çizgisinin olmamasını sağlar.
border-style: none

dotted Sınır çizgisini noktalı formatta gösterir. Çoğu gözatıcıda (browser'da) katı formatta çıkar.
border-style: dotted

dashed Sınır çizgisini kesikli formatta gösterir. Çoğu gözatıcıda (browser'da) katı formatta çıkar.
border-style: dashed

solid Sınır çizgisini katı formatta gösterir.
border-style: solid

solid Sınır çizgisini katı formatta gösterir.
border-style: double

solid Sınır çizgisini çift çizgili formatta gösterir.
border-style: double

groove Sınır çizgisini oluk formatında gösterir.
border-style: groove

ridge Sınır çizgisini tümsek formatında gösterir.
border-style: ridge

inset Sınır çizgisini 3D basılmış düğme formatında gösterir.
border-style: inset

outset Sınır çizgisini 3D düğme formatında gösterir.
border-style: outset


Bunların yanısıra dilersek birkaç değeri birden yazarak melez sınır çizgileri de oluşturabiliriz: border-style: değer1 değer2 değer3.


Sınır Çizgi Rengi

Sınır çizgilerinin rengini belirlemek için border-color özelliğine renk değerleri veririz. Eğer border-color özelliğine tek bir renk değeri verirsek, sınır çizgisi o renkte olur. Eğer iki renk değeri verirsek, sınırın üst ve alt çizgileri ilk rengi, sınırın sol ve sağ çizgileri ikinci rengi alırlar. Eğer özelliğe üç renk değeri verirsek, üst sınır çizgisi ilk rengi, sol ve sağ çizgiler ikinci rengi, alt çizgi üçüncü rengi alır. Eğer özelliğe dört renk değeri atarsak, üst çizgi ilk rengi, sağ çizgi ikinci rengi, alt çizgi üçüncü rengi ve sol çizgi dördüncü rengi alır.

NOT: Bu özelliği Netscape desteklemiyor.


Kod:
<html>
<head>
<title>Sınır çizgi renkleri,</title>
</head>
<body>

<p style="border-style: solid; border-color:red">Tek renk</p>
<p style="border-style: solid; border-color:red blue">İki renk</p>
<p style="border-style: solid; border-color:red blue green">Üç renk</p>
<p style="border-style: solid; border-color:red blue green yellow">Dört renk</p>

</body>
</html>



Sınır Çizgi Kalınlığı

Sınır çizgisinin kalınlığını border-width özelliği ifade eder. Bu özelliğe thick (kalın), medium (orta kalın), thin (ince) gibi standart değerler verebileceğimiz gibi, birimsel değerler de verebiliriz. Eğer tek bir değer verilmişse, sınır çizgisinin her yanı o değeri alır. Eğer iki değer verilmişse, üst ve alt çizgiler ilk değeri, sol ve sağ çizgiler ikinci değeri alır. Eğer üç değer verilmişse, üst çizgi ilk değeri, sol ve sağ çizgiler ikinci değeri, alt çizgi üçüncü değeri alır. Eğer dört değer verilmişse, üst çizgi ilk değeri, sağ çizgi ikinci değeri, alt çizgi üçüncü değeri alır, sol çizgi dördüncü değeri alır.

Kod:
<html>
<head>
<title>Sınır çizgi kalınlığı,</title>
</head>
<body>

<p style="border-style: solid; border-width: thick">Tek kalınlık değeri</p>
<p style="border-style: solid; border-width: thin thick">İki kalınlık değeri</p>
<p style="border-style: solid; border-width: 5px 10px 1px">Üç kalınlık değeri</p>
<p style="border-style: solid; border-width: 5px 10px 1px medium">Dört kalınlık değeri</p>

</body>
</html>



border-width özelliğine değerler vererek, sınır çizgilerinin dört tarafına değerler verebileceğimiz gibi, aşağıdaki özelliklerle sınır çizgisinin tek bir tarafına da değerler verebiliyoruz.

border-top-width Üst sınır çizgisinin kalınlığını ifade eder.
border-top-width: thin

border-right-width Sağ sınır çizgisinin kalınlığını ifade eder.
border-right-width: 1 cm

border-left-width sol sınır çizgisinin kalınlığını ifade eder.
border-left-width: thick

border-bottom-width Alt sınır çizgisinin kalınlığını ifade eder.
border-bottom-width: 20px


Sınır Çizgi Özelliklerini Tek Kodla İfade Etme

Konunun finalinde, yine bütün bu özellikleri aynı anda barındıran bir özellik sunuyoruz: border.
Bu özelliğe şu şekilde değer veririz: border: (border-width değeri) (border-style değeri) (border-color değeri). Bu özelliğin sınır kenarlarına indirgendiği aşağıdaki özellikleri de kullanabilirsiniz.

border-top Üst sınır çizgisinin özelliklerini ifade eder.
border-top: thin outset green

border-right Sağ sınır çizgisinin özelliklerini ifade eder.
border-right: 12px solid rgb(100%, 20%, 20%)

border-left Sol sınır çizgisinin özelliklerini ifade eder.
border-left: thick dotted #ccffff

border-bottom Alt sınır çizgisinin özelliklerini ifade eder.
border-bottom: 1cm double rgb(218, 97, 255)


Bu konu bu kadar Wink




Dışkenar Boşluğu

Bir önceki konuda 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.


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


Bu konuda anlatılacak başka bir şey kalmadı Wink



İç Kenar Boşluğu

Bu konu bir önceki konunun 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.Şimdiki 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.


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


Bı konu da bitti Smile


Aşağıdan Devam Ediyoruz...
______________
www.ironarchives.tr.gg


En son ironarchives tarafından 01.08.2008 14:27:45 tarihinde değiştirildi, toplam 1 kere değiştirildi
Mesaj01.08.2008, 14:28 (UTC)    
Mesaj konusu:

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

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


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

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




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...
______________
www.ironarchives.tr.gg
Mesaj03.08.2008, 06:06 (UTC)    
Mesaj konusu:

eklemeler yapayım:

nesneismi {
özellik1: değer1 değer2 değer3;
özellik2: değer1
}

şeklinde de yazılabilir yani:

background-color:
background:image:

diye ayrı ayrı yazmak yerine:

background: black url(resimadresi)

şeklinde yazılabilir.


ayrıca en başta belirtildiği gibi <h1> <div> vb. birçok kodda kullanılabilir demiş.
<abcdef> olan herşey için kullanılabilir Wink
yani:
<a>
<b>
<i>
<u>
<span>
<html>
<body>
<p>
<table>
<td>
<tr>
<div>
<h1>
<h2>
<h3>
<h4>
...
<ul>
<li>
<ol>
...
<input>
<textarea>
...
aklınıza gelebilecek tüm html tagleri yani.
eklenebilecek bi dünya şey var belki ama aklıma geldikçe yazarım ve zaten bi dünya kadar da yazılmış.
______________


Mesaj03.08.2008, 06:08 (UTC)    
Mesaj konusu:

seonet yazmış:
eklemeler yapayım:

Kod:
nesneismi {
özellik1: değer1 değer2 değer3;
özellik2: değer1
}


şeklinde de yazılabilir yani:

Kod:
background-color:
background:image:


diye ayrı ayrı yazmak yerine:

Kod:
background: black url(resimadresi)


şeklinde yazılabilir.


ayrıca en başta belirtildiği gibi <h1> <div> vb. birçok kodda kullanılabilir demiş.
<abcdef> olan herşey için kullanılabilir Wink
yani:
Kod:
<a>
<b>
<i>
<u>
<span>
<html>
<body>
<p>
<table>
<td>
<tr>
<div>
<h1>
<h2>
<h3>
<h4>
...
<ul>
<li>
<ol>
...
<input>
<textarea>

...
aklınıza gelebilecek tüm html tagleri yani.
eklenebilecek bi dünya şey var belki ama aklıma geldikçe yazarım ve zaten bi dünya kadar da yazılmış.


code butonuna basarak yaparsanız daha iyi olur..
______________
Mesaj03.08.2008, 06:09 (UTC)    
Mesaj konusu:

Paylaşım İçin Saol Çok Faydalı bir paylaşım
______________

Sen Yorum Göndermiyorsan Demekki 1 Kişi Eksiğiz..

http://www.bedava-sitem.com/forum/viewtopic.php?t=54704
Mesaj03.08.2008, 06:09 (UTC)    
Mesaj konusu:

@ironarchives

tesekkürler paylaşımın için...

______________
Mesaj03.08.2008, 07:30 (UTC)    
Mesaj konusu:

@seonet
<h1><div> vs. Birçok Kodda Kullanılır..
Hepsinde Değil Wink

@siteturka
@sanalyavuz

Rica Ederim...
______________
www.ironarchives.tr.gg
Mesaj03.08.2008, 10:45 (UTC)    
Mesaj konusu:

ironarchives yazmış:
@seonet
<h1><div> vs. Birçok Kodda Kullanılır..
Hepsinde Değil Wink

@siteturka
@sanalyavuz

Rica Ederim...


<h1> ve <div> her kodda kullanılabilir Wink
Mesaj03.08.2008, 11:20 (UTC)    
Mesaj konusu:

ironarchives yazmış:
@seonet
<h1><div> vs. Birçok Kodda Kullanılır..
Hepsinde Değil Wink

@siteturka
@sanalyavuz

Rica Ederim...


hangisinde kullanılmıyomuş ki?
benim bildiğim tüm taglerde css kullanabilirsin
<font> tagini hiç denemedim belki o olmaz(kendisi zaten stilize tagi olduğu için)
______________




En son seonet tarafından 03.08.2008 11:21:19 tarihinde değiştirildi, toplam 1 kere değiştirildi
Mesaj03.08.2008, 12:11 (UTC)    
Mesaj konusu:

ÇOK GÜZEL ANLATMIŞSIN SAĞOL
______________
Gazeteleri-Oku.Tr.GG Artık Forumda Yoqq !! Banned!!
Mesaj03.08.2008, 12:26 (UTC)    
Mesaj konusu:

@gazeteleri-oku ;
Rica Ederim..

Diğer Arkadaşalar Lütfen Konuyu Uzatmayalım..
En İyisi Kim Ne Biliyorsa Onu Yapsın..
Farklı Kaynaklara da Bakabilirsiniz ; <h1> ve <div> Tagları Çoğu Kodda Yer Alır Ama Hepsinde Yer Aldığı Söylenemez..
______________
www.ironarchives.tr.gg
Mesaj14.08.2008, 13:30 (UTC)    
Mesaj konusu:

Çok fazla işime yarayacak ve çok aradğım kodları tesadüf eseri burada buldum. Çok teşekkürler. Laughing
______________

Arrow BS Forumda Evhollow Arrow Evhollow'u Yorumla
Mesaj14.08.2008, 13:35 (UTC)    
Mesaj konusu:

Evhollow ;

Rica Ederim Wink
______________
www.ironarchives.tr.gg
Mesaj14.08.2008, 23:02 (UTC)    
Mesaj konusu:

bişey söyliycem: şimdi farkettim ben bunları başka sitede de görmüştüm Exclamation Confused Question
______________


Mesaj15.08.2008, 05:35 (UTC)    
Mesaj konusu:

Merhaba,

@seonet ;

Bu Gayet Normal Bir Şey Wink

İyi Eğlenceler.. Wink
______________
www.ironarchives.tr.gg
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu