CSS (Style Sheet) Hazırlamak


Tasarımınızda yazı tipi, yazının kalınlığı vb. gibi birçok veriyi tek bir değerle biçimlendirmek demektir. Ister CSS dosyasına verilerinizi girersiniz, isterseniz de html belgenizin içinde HEAD Tagı içinde yer verirsiniz. Kullanımına aşağıda yer verdik. Ama öncelikle Stil dosyamızda kullanacağımız nesneleri öğrenelim.


Bilgi: Stil yazarken ({) ve (}) karakterleri arasına başına stilin adı gelecek şekilde yazılır. Ayrıca her stil öğesinden sonra noktalı virgül ( konulur. Aşağıda tanıttığımız değerlerin tamamı { ... } arasına konulmalıdır.


Yazı Şekillendirmesinde Kullanılan Nesneler:


font-family


Yazı Tipinin belirtilmesi. Birden çok belirtebilirsiniz. Örneğin:



Yazı Tipinin boyutunun belirtilmesi. Değerin yanına boşluk bırakılmadan 'pt' mutlaka eklenmelidir. Örneğin:


Yazı Tipinin rengini belirlemek. Girdiğiniz değer 16'lık renk değeridir. Renk Kodlarını grafik programlarından öğrenebilirsiniz (Paint Shop Pro, Photo Shop vs.) Örneğin:



Tek bir kullanım şekli vardır. Yazımızın kalın olması için kullanırız. Örneğin:



Yazının sağa (right), sola (left) ya da ortalanmış (center) olarak görünmesinin belirlenmesini sağlar. Örneğin:



Karakterlerde değişiklik yapar. 'uppercase' tamamını büyük, 'lowercase' tamamını küçük, 'capitalize' baş harf büyük olacak şekilde ayarlamanızı sağlar. Örneğin:



Yazıyı alt çizgi koyacak şekilde yazmamızı sağlar. Örneğin:



Satırlar arasındaki yüksekliktir. Örneğin:





Tablo Şekillendirmesinde Kullanılan Değişkenler:


background-color


Arkaplan rengi seçmemize yarar. Örneğin:



Tablo kenarlarındaki boşlukları belirlemek için kullanılır. Sadece <TD> tagı şekillendirirken kullanılır. Belirtilen değerin sonuna boşluksuz (px) yazarız. Bu piksel olarak değeri ifade ettiğimizi anlatır. padding tüm kenarlar için geçerliyken, padding-left sol, padding-right sağ, padding-top üst, padding-bottom alt boşlukları ayrı ayrı biçimlendirmemizi sağlar. Örneğin:



Tablo kenarlarındaki çerçeve ile ilgili değişiklik yapmamızı sağlar. Sadece <TD> tagı şekillendirirken kullanılır. Değer belirtirken Boyut-Renk-Görünürlük olarak değeri gireriz. border tüm kenarlar için geçerliyken, border-left sol, border-right sağ, border-top üst, border-bottom alt kenarları şekillendirir. Örneğin:




Div Şekillendirirken Kullanılanlar:


position


Sanki katmanlar kullanıyormuş gibi HTML belgemize veri yazmamızı sağlar. Kullanım:



Eğer position absolute olarak belirlenmişse bu değişkenleri kullanabiliriz demektir. Bunlar piksel olarak sayfanın neresinde görüneceğini belirlemektir. left sol, right sağ, top üst, bottom alttan ne kadar boşluk verileceğidir. Örneğin:



Bu örnekte soldan 20px, yukardan 30px noktasında yazımızı yazdıracaktır.


Scroll Bar (Kaydırma Çubuğu) Şekillendirmek:


Aşağıda bir örnek görüyorsunuz. Olduğu gibi kopyalayıp renk değerlerini değiştirerek farklı şekillerde kullanmanız mümkün.



Yukardaki örnekte face genel renk, track arkaplan, darkshadow koyu gölge, arrow ok yönü, shadow gölge, highlight gelen ışık rengi (daha açık) ve 3d-light ise 3D efektindeki ışıma.


Isimlendirme:


BODY


Eğer isim BODY olursa stilin bu tema belirtilmemişse kullanılacak ana temadır. Örneğin:



Bir tablo odacığı için geçerli olacak stil belirtirken adın başına TD. koymalıyız. Örneğin:




Link Stilleri


Linklerin nasıl görüneceklerini yani linkler için atadığımız otomatik stil diyebiliriz. Aşağıda A normal link, A:visited ziyaret edilmiş link, A:active aktif link, A:hover fare linkin üstüne geldiğinde olacak stili ifade eder.






Hazırladığımız Stili Yerleştirmek (Tanıtmak)


2 şekilde yerleştirebiliriz: HTML belgemizin HEAD tagı içine gömerek ya da Stil Dosyası (Css) yazarak ve HEAD tagı içinde LINK vererek.


CSS Dosyasına Kaydetmek


Bir not defteri açarız. Hazırladığımız stilleri yazarız ve bir isim vererek tabi uzantısı css olacak şekilde kaydederiz (Bizim kaydettiğimizin adı style.css olsun). Sonra HTML belgemizin içine LINK tagı ile belirtiriz dosyayı. Örneği inceleyin:





Stil dosyamız html belgemiz ile aynı yerde ise direk adını, eğer bir klasörün içindeyse klasor/style.css şeklinde ya da alt dizindeyse style.css gibi yazarız. Bu şekilde artık stillerimiz hazır.


HTML içinde Kullanmak


Eğer dosyaya keydetmek istemiyorsanız HTML belgemizin içinde de kullanabilirsiniz. Bu diğer bir yol:




Bu örnekte HEAD içinde stilllerimizi tanıttık.


Ve Kullanma Zamanı


DIV, SPAN gibi değişkenler içinde 'CLASS=stil' şeklinde kullanabiliriz:





Linkler otomatik stilini bulacaktır. Tablo içinde kullanırken şekillendirmeyi TD. kısmını yazmadan yazsak da olur: