ONBİNRENK - Bilgi Arşivi

css1

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:

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>

<!--

{

font-size:12pt;

color:crimson;

text-align:justify

}

{

font-size:18pt;

color:blue;

text-align:left

}

{

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:

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:

{

font-size:12pt;

color:crimson;

text-align:justify

}

{

font-size:18pt;

color:blue;

text-align:left

}

{

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>

</head>

<body>

<h1>AĞIR ROMAN</h1>

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