CSS'e BAŞLARKEN

CSS Nedir sayfamızda verilen resimli anlatımı burada biraz detay olarak açmak faydalı olacak kanaatindeyim, hatırlamak için resimli anlatıma tekrar bir atınız,
Oluşturmak istediğimiz web sayfasının biçim (hücreler, sutunlar,satırlar yazı ve artalan renkleri, yazı özellikleri vs. vs.) özellikleri için iki yöntem vardır,

ilk yöntem CSS etiketlerini HTML sayfasında <BODY> ... </BODY> bölümünde yazarak,
İkinci yöntem ise CSS etiketlerini ayrı bir sayfaya yazarak CSS uzantılı bir dosyada kaydederiz, ve daha sonra bu CSS dosyasını HTML dosyasında <HEAD>... </HEAD> bölümünde link referans vererek,
Web sayfamızı biçim verebiliriz.

İlk yöntemde CSS etiketleri sadece o HTML sayfası için geçerlidir, bu şekilde oluşturacağınız her HTML sayfasında aynı etiket yazılımlarını eklememiz gerekir, İkinci yöntemde ise bir CSS dosyası ile aynı sitil ve özelliklerde bir çok sayfada kullanabilirsiniz. HTML dosyasında bir değişiklik/güncelleme yapmanız gerektiğinde CSS dosyasında yapılan bir değişiklik referans verilmiş tüm HTML sayfalarında güncellenecektir.

Sizde hak vereceksiniz ki bir web sayfasını tıklayan ziyaretçiler her sayfası ayrı bir biçim ve formda karmaşık bir siteyi tercih etmezler, web siteleri basit anlaşılır ve standardizasyona uygun tasarlanmış siteleri tercih ederler. Bu nedenle anlatmaya çalıştığım gibi standartizasyon olarak tasarlanmış bir web sitesinde ikinci uygulamamız vazgeçilmez olacaktır.

DİV NEDİR ?

"div" tagı html dökümanındaki division'ı (bölüm) temsil eder. Html elemanlarını bloklayarak, gruplayarak stil vermede kullanılır.
"div" tagı tüm modern browserlarda çalışır.(ie, firefox, opera, chrome, safari) Html ve xhtml deki kullanımı aynıdır.
Bu teknik tanımdan sonra "div" basit bir anlatımla şöyledir, CSS'den önce web sayfası tasarlanırken objelerin sayfadaki konumlarında bozulmadan istem dışı yer değiştirmeden sabit durmaları için tablolar oluşturulur ve bu objeler bu tablonun hücrelerine yerleştirilirdi, artık CSS sayesinde tablo yapmaya gerek kalmadı ve CSS sayesinde oluşturulan hücrelere "DİV" diyoruz. yani benzetmek istersek tablolarda bulunan hücre kümelerinin yerine kullanılan alan diyebiliriz. zaten uygulamalara başlayınca "div" tagının ne olduğunu daha iyi kavrayacaksınız.

CSS ETİKETLERİ VE PARAMETRELER

Öncelikle şu konuyu tekrar belirteyim, CSS kodları ister HTML sayfasında olsun, ister ayrı bir CSS dosyasında olup, HTML sayfasına referans linki ile eklensin, her iki durumda sonuç alınabilir, tercih sizindir. ancak div tagı HTML sayfasında olmalıdır.
Aşağıda tek bir div için kullanılan belli başlı etiketleri belirtelim,


width; divin enine genişliğini belirtir.
height; divin yüksekliğini belirtir.
line-height; div içerisindeki element konumunu dikey ortalamak için kullanılır.
background-color; divin arkaplan rengini belirtir.
backgraund:url(resim adresi) div için arkapalan resmi belirtir.
font-family; div içindeki yazının karakterini belirler.
font-size; div içindeki yazının puntosunu belirler.
font-weight; div içindeki yazının biçimini (bold, italitik.normal) belirler.
color; div içindeki yazının rengini belirler.
position; div içindeki objenin konumunu (left, center, right) belirler.
margin; divin ekran konumunu (left, center, right) belirler.

Bir CSS kodu: #div ismi_div {...Biçim etiket ve parametreleri buraya yazılır...} bu formatda yazılır.

Bir DİV tagı ise;<div id="div ismi_div">...div içeriği buraya yazılır...</div> bu formatta yazılır.

Bu kadar ön bilgiden sonra CSS ve DIV uygulamaları için bir sonraki sayfaya geçebiliriz.

  

Copyright © 2018 Hüseyin Tepe