CSS Giriş

CSS (Cascading Style
Sheets ) web tasarımcılarının işini oldukça kolaylaştırmaktadır. CSS
HTMLden ayrı yeni bir dil değil, HTMLin önemli bir parçasıdır. CSS ile
web sayfasındaki araçların görünümleri genelleştirilir.

HTML derslerinde style="..." parametresini görmüştük. Bu parametre
ile tanımlanan kodun özelliklerini değiştirmiştik. CSS style
özelliklerinin tüm sayfa için tanımlanmasıdır. Hem Navigator 4.0 hem de
Internet Explorer 4.0 browserlar ve daha gelişmiş olanları CSSyi
destekliyor. Fazla uzatmadan konuya girmek daha iyi olur sanırım.

HTML derslerinde geçen ama üzerinde pek durmadığımız style
parametresi üzerinde açıklama yapmam gerekiyor. style parametresi
<p>, <div>, <h1>, <a>, <font>, <li>
gibi birçok kod için kullanılabilir:

Yukarıda HTML derslerinden tanıdığımız, paragraf oluşturan <p>
koduna style parametresi atanmıştır. Böylece paragrafın sola
yaslanmasını, 12pt (point:nokta ) font büyüklüğündeki harflerden
oluşmasını, harflerin renginin kırmızı olmasını sağlıyoruz. style
parametresinde birden fazla özellik tanımlanacaksa, örnekte olduğu gibi
her özellikler arasına ";" işareti konur.

Nesne Özelliklerini Genelleştirme
Sayfa tasarımında CSSden 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.
(Fonksiyonları JavaScript ve VBScript derslerinde ayrıntılı olarak
göreceğiz.

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 Alanı:<html>
<head>
<title>Style parametresi ile...</title>
</head>
<body>
<h1 style="font-size:18pt; color:blue; text-align:left">HANCI</h1>
<p style="font-size:12pt; color:crimson;
text-align:justify">Bir Numaralı Webmaster Forumu</p>
<h4 style="font-size:8pt; color:black; text-align:right">Hakan</h1>
</body>
</html>

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

Kod Alanı:<html>
<head>
<title>Style kodu ile...</title>
<style>

</style>
</head>
<body>
<h1>HANCI</h1>

<p>Güneş buluttan sıyrılırken Koleranı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>Hakan</h1>

</body>
</html>

Şimdi geldik "Naptı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.

CSSnin 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
}
CSSyi 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:

Kod Alanı: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 Alanı:<html>
<head>
<title>Dış dosya yolu ile...</title>
<link rel="stylesheet" type="text/css" href="tarz.css">
</head>
<body>
<h1>HANCI</h1>
<p>Bir Numaralı Webmaster Forumu</p>
<h4>Hakan</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. CSSnin yapısını böylece tanımış olduk.

Favorilerine al ya da arkadaşlarınla paylaş: