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. 
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
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ı
İç 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 
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
|
.. Katlandığınız İçin Teşekkür Ederim.. 
BS Forumda Evhollow
