Free Web Hosting Provider - Web Hosting - E-commerce - High Speed Internet - Free Web Page

Bu bölümde Css(Cascading stylesheet=üstüste yapılanan biçim şablonları) hakkında bilgi vereceğim.Öncelikle Css nedir ve neden sorusuna cevap verelim.Css; html'eni n web sayfa tasarımında dolduramadığı boşlukları yok etmek için yapılmış bir dil daha desek doğru olur.Html text yazılarında font tagı ile gösterişli bir metin oluşturmakta oldukça kullanışı zor ve uzundur bu eksi puanı kapatmak için Css doğmuştur.Css sayesinde oldukça esnek web sayfa tasarımları yapabilir ve sayfa yazımındaki karışıklığı bir nebzede olsa da bu özellik sayesinde toplayabiliriz.Css; bence en önemli özelliklerinden birisi tablo (table) komutu kullanımına asırı kolaylık getirmesi bir digeri ise html sayfasına dışardan entegre edilerek bizi uzun html kodları yazmak zorunda kalmaktan bizi kurtarıyor olması.Şimdi bunlar nasıl oluyormuş görelim;

Html içinde css tanımlanmasını <head> tagları arasında <style type="text"/css"> ve </style> taglarını kullanarak belirtiriz.Şimdi basit bir text örneği yazıp bunun açıklamasını yapalım;

<html>
<head>
<title>İlk Css Denemem</title>
<style type="text"/css">
<!- p {font-size: 16 pt}.yesil {color: green} ->
</style>
</head>
<body>
<p>Sayfada görüne yazı 16 puntodur</p>
<p class=yesil >Bu yazı ise 16 punto ve kırmızıdır çünkü css komutları üstüste yapılandırılır </p>
</body>
</html>

Sizde bunu notepadinizi açıp deneyin.Şimdi burda kullandığımız komutlardan bahsedelim <head> tagına css komutunu (<style type="text"/css"> ) yerleştirdik sonra sayfa içerisinde yapması gereken görevleri adresleri ile belirtik.Dikkat ederseniz verdigimiz bu komutlar sadece <p> yani paragraf tagı ile kullanıldığında gerçeklesir çünkü biz bunun böyle olmasını <!- p {font-size: 146 pt}.yesil {color: red} -> komutuyla sağladık eger bu komut içerisinde "p" yerine "h1" yazsaydık bu sefer sadece h1 tagı içerisinde yazdığımız yazılar 16 punto olacaktı. Eger bu tag içerisinde yeşil sınıfınıda belirtirsek ( <p class=yesil > seklinde ) bu sefer yazı 16 punto ve yeşil bir şekilde görünür dikkat ettiyseniz komutların gerçekleşmesi için üstüste veriyoruz.

Uyarı:Dikkat ettiyseniz css'de yazı karekterlerinin boyutları html'den farklı olarak gercek degerlerinde belirtilirler.

Küme parantezleri içerisinde birden çok tanımlama yapmamız mümkündür buda Css' in esneklendiğinden kaynaklanır.Örneğin bir komutu birden çok tag içerisinde kullanmamız mümkün "p" nin yanına virgülle h1,h2.. yazarsak yazdığımız bu taglarda da verdiğimiz komutlar geçerli olur örneğin; <!- p ,h1,h2,h3 {font-size: 16 pt}.yesil {color: green} -> gibi ve tabi küme içerisine farklı değerlerde girebiliriz örneğin; .farklı {font-size: 20; color: red; font-weigth: bold } (Burda dikkat edilmesi gereken en önemli unsurlardan birisi htmlde = işareti yerine : işareti kullanmamız = işaretini kullanmamız farklı browserlarda görünümü değiştirebiliyor)

Bu komut sayesinde tag öncelikle kırmızı olur daha sonra dir ,ul ile 14 puntoluk yeni ibr şablon oluşturur.

Bu komut <p> tag'ını mavi sınıfı ile sabit olarak ilişkenleştirir.Dokümanda sadece <p class=mavi>ifadeleri geçtiğinde metin bu renkte yazılır. <hl class=mavi> ifadeleri girildiğinde yazımız varsayılan renkle gösterilicektir (eger body tagı içerisinde belirtilmemişse siyah olarak atanır).

Css'de font karekterini font-family komutuyla saglarız bunu icin bir ornek verelim;

Yukarıdaki komutta fontu "comic sans ms" olarak belirdik ama eger kullanıcının bilgisayarında bu font yoksa bu sefer "arial" eger o da yoksa "tahoma" fontunu deneyecektir.Sizde bu komutu kullanırken olabilecek boyle hataları dusunun ve birden cok font karekteri degeri girin.

Şimdiye kadar iyi kotu bir kac komutun nasıl kullanılacagını gorduk simdide biraz daha detaya inelim ve html'deki <i> ve <b> komutlarının CSS'deki uygulamalarını gorelim.

Kalın ve italik yazmayı gorduk şimdi bu yazdıklarımızı nasıl saga ,sola ve ortaya yerleştirecegimizi gorelim.Bunu yapmak icin sadece text-align komutunu kullanıyoruz bu komutu kullanırken right ,left ve center parametrelerini kullanabilirz.Basit bir ornekle yazımızı ortalamyı ornekleyelim;

Bu konudada biraz ayrıntıya girelim ve metnimiz her iki yana dayayan parametreleri ogrenelim.Bu parametre degerleri ise "justify" ve "blok" komutlarıdır.Gordugunuz gibi bunlarıda ogrendik.Ne mutlu bize.

Css'in en guzel ozelliklerinde biride herhangi bir yazının arka planının rengini degistirmek icin htmldeki gib uzun uzun table tagını kullanmak zorunda kalmıyor olmamız.Yazımızın arakplan rengini degistirmek icin vermemiz gereken backgroundcolor parametresidir.Ornekleyelim;

Tabi burda yazının arkaplanına resim yerlestirmemiz de mümkün bunu icine kullanacagımız parametre ve degeri ise;

Yukardaki ornekte arkaplana "resminiz.gif" isminde bir resim yerlestirdik sizde burda "resminiz.gif" yerine size ait arkaplan resminizi yerleştirebilirsiniz.

Şimdide body tagıyla kulanacagımız arkaalanın rengini degiştirme ,arkaalana resim koyma ve şablonlarda duzeni nasıl saglayacagımızı gorelim

Body tagıyla arkaplanın rengini degiştirmek icin asagıdaki örnekteki gibi yapıyoruz;

Sayfa duzenini saglamak icinde body tagı içerisnde margin-right (sag kenar) , margin-left(sol kenar) ,margin-top (üst kenar) ve margin-bottom (alt kenar) degerlerini kullanabiliriz.Bu degerlere verilen uzunluklar sayısal (pixel cinsiden) veya % degeri olabilir.Buna bir ornek verelim;

Örnekte ben sadece marginleft ve margin-rgth degerlerini kullandım ama diger degerleri vererek sayfa hazırlamak size kalmış ayrıca uzunluklara da % de bir deger verdim bunu sebebi ise browser uyumunu dusundugumuz zaman en mantıklısının % degerler vermek olmasıdır.

Stylesheet komutlarını htm dosayası içinde iki farklı şeklde adepte edebiliriz.Birincisi direk sayfa icine koymak diger ve cok kullanışlı olduguna inadığım dışardan eklememiz.Şimdi bunları sırayla görelim;

Direk eklemeyi isterseniz bir örnekle açıklayayım (istemesenizde öyle açıklayacagım ama canımsaolsun :))

Burda komutu kendi içerisinde kapatıyoruz ( </p> ) boylece bu komuttaki degerler diger yazı veya resimlerde gecerli olmuyor.

Arkadaşlar stylesheet dışardan eklemeyi görmeden önce buraya kadar geldigimiz safhayı kapsayan bir örnekle pekiştirelim eminim bu örnek sayesinde yukarda verdigimiz bir cok parametre kullanımı daha iyi göreceksiniz;

<html>
<head><title>Ornek css kullanımı</title>
<style type="text/css">
body {background: orange; }
p {font-family: "comic sans ms","tahoma" ;
font-size: 12pt;
text-align: center ;
background-color: red;}
.italik {font-style:italic}
.kalin {font-weight: bold}
</style>
</head>
<body>
<p>Bu normal bir metindir ,<span class=italik>bu italik,</span><span class=kalin>bu ise kalindir</span></p>
</body>
</html>

Yukardaki örnekte öncelikle <head > tagı aktında kullancağımız özellikleri belirledik daha sonra bunları <span > tagı ile <body> içerisinde kullancagımız yerde belirttik.

<html><head>
<title>Test</title>
<link rel= stylesheethref="/style/standard.css"type="text/css">
<head><body>
...
..

Web Browser bu örnekte bu snucunun Root (ana) dizisinde style alt dizisini ve bunun içinde de standard. css dosyasını arar. bu dosya

ACII form2atında CSS komutlarını içerir. Sayfada başka şablonlara da ihtiyacınız varsa bunları da <link> tag'ından hemen sonra ekleyin bu durumda da şablonlar üst üste oluşturulur.