logo

CSS Nedir?

css nedir?

Cascadind Style Sheet, kelimelerinin kısaltılmasıdır. Anlamı, Basamaklı yada Geçişli Biçim Sayfası'dır. Aslında bu dosya html web sayfasının klavuz dosyasıdır. Detaya girmeden, hemen örnek uygulamaya geçerek, bu klavuz dosyanın Web Tasarımında bize sağladığı kolaylıkları görelim. Örnekten sonra hem Div'in ne olduğunu, hem de klavuz dosyanın ne işe yaradığını anlayacağız.

 

Önce belgelerim klasöründe css adıyla bir klasör açalım. Sonra bu klasörün içinde iki tane html tabanlı web sayfası oluşturalım. Web sayfalarını not defterini kullanarak yapabilirsiniz. Not defterinde yeni bir belge açın ve aşağıdaki kodları yazın.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>CSS Uygulamaları 1</title>
</head>
<body>
<div id="ust-div">Burası Üst Div Alanı</div>
<div id="orta-div">Burası Orta Div Alanı</div>
<div id="alt-div">Burası Alt Div Alanı</div>
</body>
</html>

 

Bu kodları yazdıktan sonra css-uygulamalari-1.html olarak kaydedin. İnternet tarayıcınız ile kontrol edin. Bunun gibi bir sayfa görüyor olmalısınız. Alt alta üç cümleden oluşan anlamsız bir web sayfası gibi duruyor. Çünkü henüz klavuz dosyasını oluşturmadık. Bu dosyayı oluşturduğumuzda web sayfamız daha anlamlı bir şekle bürünecek.

 

Not defterinde tekrar yeni bir belge açarak yukarıdaki kodları yazın. Bu kodları yazdıktan sonra css-uygulamalari-2.html olarak kaydedin. Yukarıdaki kodlardan <title>CSS Uygulamaları 1</title> kodunu da <title>CSS Uygulamaları 2</title> olarak değiştirin. İnternet tarayıcınızda kontrol edin. Aynı sayfayı görüyor olmalısınız. Bunun gibi.

 

Şu anda elimizde html tabanlı iki adet web sayfamız var. Her iki web sayfamızda üç adet Div'den oluşuyor.

Ancak biz şu anda bu Div'leri farkedemiyoruz. Çünkü Div'lerimiz henüz biçimlendirilmedi.

Div'leri biçimlendirmek için ayrıca bir klavuz dosyası hazırlayıp, Divlerin nasıl biçimlendirildiğini göreceğiz.

 

Bu dosyayı yapmak için de yine Not Defterini kullanıyoruz.

Yeri gelmişken söyleyelim. Biz burada konuyu en basit haliyle anlatmaya çalışıyoruz.

Eğer siz Dreamweaver programını kullanmayı biliyorsanız, bu işlemleri çok daha kolay yapabilirsiniz. Biz kafalar karışmasın diye şimdilik Not Defterini kullanıyoruz.

 

Not defterinde yeni bir sayfa açalım. Altta gördüğünüz kodları yazalım.

#body {background-color: #FFFFFF;}
#ust-div {height:200px; width: 500px; border:thin solid #000000;}
#orta-div {height:200px; width: 500px; border:thin solid #000000;}
#alt-div {height:200px; width: 500px; border:thin solid #000000;}

Kodları yazdıktan sonra belgeyi css-uygulama.css olarak, web sayfalarının olduğu klasörün içine kaydedelim.

Artık klavuz belgemiz de hazır. Ancak bunu hazırlamış olduğumuz web sayfalarına tanıtmamız gerekiyor.

 

Şimdi elimizde iki adet web sayfamız ve bir klavuz dosyamız var. Bundan sonra yapacağımız işlem web sayfalarına, bu dosyanın yolunu göstermek. Bu işlemden sonra web sayfaları açılırken, adresini verdiğimiz klavuz dosyasına bakacak, o dosyada tanımlanan biçimleri görecek ve biçimlendirmesini yapacaktır.

Şimdi web sayfalarına yolu gösterelim. Web sayfalarını Not Defteri ile açalım. Yazmış olduğumuz kodların arasına, aşağıda gördüğünüz altı çizili olarak belirtilen kodu ilave edelim.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>CSS Uygulamaları 1</title>
<link href="css-uygulama.css" rel="stylesheet" type=text/css" />
</head>
<body>
<div id="ust-div">Burası Üst Div Alanı</div>
<div id="orta-div">Burası Orta Div Alanı</div>
<div id="alt-div">Burası Alt Div Alanı</div>
</body>
</html>

 

Yaptığımız bu değişiklikten sonra Kaydet diyelim ve web sayfalarını kontrol edelim. Şöyle bir sayfa görüyor olmalısınız. Üç bölüme ayrılmış bir web sayfası. Bu bölümlerin içine, fotoğraf ta koyabilirsiniz, yazı da yazabilirsiniz. Bundan sonra sayfalarda yapacağımız biçim değişikliklerini klavuz dosyasından tanımlıyoruz.

 

Klavuz belgesinde yapacağımız değişiklik, her iki web sayfası tarafından uygulanacaktır. Burada biz örnek olarak iki web sayfası kullandık. Web sayfalarının sayısı, siteye göre on sayfa da olabilir, yüz sayfa da olabilir. İşte klavuz dosyasının kolaylığı burada ortaya çıkıyor. Bu dosyada yapacağımız tek bir değişiklik, isterse yüz sayfa olsun, hepsi tarafından uygulanır. Biçim değişikliği için yüz sayfa ile ayrı ayrı uğraşmak zorunda kalmaz, sadece bu dosyadaki biçim değişikliği ile, tüm sayfaların biçimlerini değiştirebiliriz.

#body {
background-color: #FFFFFF;
}

Yukarıda görülen body tagındaki, background-color değerini #0000FF yaptığınızda, her iki web sayfasının fon renginin mavi olduğunu göreceksiniz. Başka bir biçimlendirme daha yapalım.

#ust-div {
height: 200px;
width: 500px;
border: thin solid #000000;
}

Üst Div'in yükseklik ve genişlik ayarlarını değiştirelim. Bunun için height değerini 400px ve width değerini de 1000px yapalım. Her iki web sayfasının Üst Div ayarlarının değiştiğini göreceksiniz. Diğer Div'lerin de ayarlarını aynı değerlere getirdiğinizde, her iki web sayfasındaki Div'lerin aynı boyutlara geldiğini göreceksiniz.

 

Sanırım CSS'nin ne olduğunu anladık ve bize sağlamış olduğu kolaylığı kavradık. Klavuz sayfasında yapabileceğimiz biçimlendirmeler burada örnek olarak verdiklerimiz ile sınırlı değil. Verdiğimiz örnekler, anlaşılması için verilen çok basit örneklerdir.

 

Bu dosya ile Div'lerin içindeki yazı fontundan, rengine, boyutuna, sola, sağa ve ortaya olmak üzere her türlü biçimlendirmeyi yapabilirsiniz. Yine bu dosya kullanılarak, Div'lerin fon rengini, boyutlarını, sağ, sol veya ortaya konumunu ayarlayabilirsiniz.

 

Bu arada Div kullanımında dikkat edilmesi gereken bir iki konuyu belirtelim. Gerektiğinde Div içinde ayrı bir Div oluşturabilirsiniz. Oluşturduğunuz ikinci Div'in içinde de ayrı bir Div oluşturabilirsiniz. Ama bu Div içinde Div işini abartmamanız gerekir. Aksi takdirde Div'lerin yönetimi zorlaşacaktır.

 

Diğer önemli bir konu ise; Div'lerin isimleridir. Div isimlerinde Türkçe karakter kullanmayın. Yine Div isimlerini sadece numaralardan oluşturmayın. #ust-div1 ismini verebilirsiniz ama sadece #1 ismini veremezsiniz. Peki kullanırsanız sorun çıkar mı? Sorun çıkmaz ama W3C standartlarına uygun olmaz. W3C standartları Div'lerin isminin 1 veya 2 gibi numaralardan oluşmasını istemiyor. Biz burada Div isimlerini verirken anlaşılması için #ust-div adını verdik. Buna aldanarak mutlaka ismin sonuna Div gelecek şeklinde algılamayın. İsmi #ust olarak ta kullanabilirdik.

 

Div isimlerinde yine dikkat etmemiz gereken bir nokta da, hem klavuz dosyasındaki hem de web sayfasındaki Div isimlerinin aynı olması gerektiğidir. Web sayfasındaki Div'in ismini değiştirdiğinizde, bu işlemi klavuz dosyasında da yapmalısınız.

 

Yukarıda W3C standartlarından bahsettik. Nedir bu W3C? derseniz, bu konuyu W3C Nedir? sayfamızda anlattık.

Copyright © 2013 | Site Gezgini.Com