Yeni Bir CSS Stil Yaratmak ve CSS Stil Türleri
Dreamweaver ile kendi CSS stillerimizi tan?mlamaya ba?l?yoruz. Öncelikle bir CSS stil tan?mlamak için neler yapmam?z gerekti?inden ve bunlara en iyi nas?l hükmedebilece?imizden bahsedip alternatif kullan?mlar? gözden geçirece?iz
Yeni bir CSS tan?mlarken mutlaka Dreamweaver kullanaca??z diye bir kaide yok biz sadece DW'?n bizlere sundu?u ola?anüstü görsel ortam? kullan?p gayet konforlu bir biçimde CSS tan?mlamalar?m?z? yapaca??z. Bir arkada??m "Abi CSS yazmak kadar zevkli bir ?ey yok" demi?ti bir keresinde. Gerçekten de kendi kodunu yazanlar için en zevkli k?s?md?r CSS kodlamak ama art?k kod yazmaya gerek yok. DW bizim için bunu rahatl?kla yap?yor zaten.
Yeni bir CSS yaratmak
?imdi DW içerisinde nas?l yeni bir CSS stili yarataca??m?z? görece?iz. Öncelikle doküman?n?z? kaydetmelisiniz. Window / CSS styles menüsü ile e?er aç?k de?ilse "CSS Styles" paneline ula??yoruz.
CSS styles paneli liste görünümü
Panelin sa? üst kö?esindeki seçenekler menüsüne ula?mam?z? sa?layan dü?meye bir kez t?kl?yoruz. Aç?lan menüden "New ..." seçene?i ile yeni bir stil yaratmaya ba?layabiliriz.
CSS styles paneli menüsünden New diyerek yeni bir stil tan?mlamaya ba?layabilirsiniz
Bir ileti?im kutusu aç?lacakt?r. Burada yeni yaratt???m?z stilimize dair ön ayarlar? yap?yoruz. Bu ön ayarlar;
Yeni stil yarat ileti?im penceresi
Selector Type: Bu k?s?m i?in beklide en önemli noktalar?ndan biri diyebiliriz. Stilimizin türünü belirtiyoruz.
Class (can apply to any tag)
Bu seçenek özel stiller (class) tan?mlamam?za yar?yor. Bunlar genelde bizim istedi?imiz özelliklerde kendi isimlendirmemizi yapabilece?imiz stiller anlam?na geliyor. Bunlar?n aktif hale geçebilmesi için seçili bir nesneye uygulanmas? gerekiyor.
Tag (redefines the look of the specific tags)
Bunlar i?leri büyük ölçüde kolayla?t?ran HTML taglar?n? tekrar biçimlendirmenize yar?yor. Yani <P>, <TEXTAREA> veya <BODY> gibi taglar? istedi?iniz gibi biçimlendirebilirsiniz. Bunlar?n aktif olabilmesi için ise bir seçim ve uygulama i?lemini yapman?za gerek yoktur.
CSS ile HTML etiketlerini tekrardan biçimlendirebilirsiniz
?öyle ki; e?er bir <TD> tag?n? biçimlendirirseniz bunu herhangi bir yere uygulamak gerekmez. Bu bütün <TD>'leri (tablo hücrelerini) kapsar. Bu ?ekilde bir <BODY> tag? tan?mlayarak her paragrafa veya metne ayr? ayr? stil uygulamaktan kurtulabilirsiniz. (BODY tag? için arka fon rengi tan?mlamas? yaparsan?z sayfan?z?n arka fon rengi de de?i?ecektir.)
Bu ?ekilde bir <BODY> tan?mlarsan?z Modify / Page Properties ile yapt???n?z ayarlar? yapman?za gerek kalmadan <BODY> yi biçimlendirmi? olursunuz. Böylece W3C standartlar?na uygun ve hatas?z bir sayfaya sahip olabilirsiniz.Advanced (IDs, pseudo-class selectors)
Nesnelere özel ID ile ili?kili stiller veya yalanc? stiller olarak tabir edilen stiller yaratmam?z? sa?lar. Örne?in ID'si "UstTaraf" olan bir DIV için #UstTaraf isimli bir stil yarat?rsak bu stil sadece "UstTaraf" ID'sine sahip nesneleri yani ilgili DIV'imizi kapsayacakt?r
Bu seçenek ayn? zamanda Web'de s?kça gördü?ümüz "Rollover text linkler" in temel mant???n? te?kil eden <A> tag? üzerinde oynamalar yapmam?za da olanak sa?l?yor.
Advanced seçene?i ile yeni bir stil tan?mlamak
Name / Tag / Selector: Bu k?s?mda stilimize geçerli bir isim verece?iz. Bu isimler alt tire (_) ve bo?luk içermeyip rakamla ba?lamayan isimler olmas? gerekiyor. Seçti?imiz türe göre "Name" k?sm? da "Tag" veya "Selector" olarak de?i?ecektir.
Define in: Bu özellik yaratt???m?z stili tan?mlayaca??m?z ortam? belirtiyor. Yani harici bir ".css" uzant?l? dosya yaratarak doküman?m?z ile bu .css dosyas?n? ili?kilendirmek "New Style Sheet File" seçili olmal?d?r.
E?er önceden bir stil tan?mlam?? ve bu seçene?i i?aretlemi? olsayd?k yaratt???m?z dosya(örne?in stillerim.css) burada "stillerim.css" ?eklinde görünecekti. E?er tan?mlad???n?z CSS stilin sadece bu dokümana özgü olmas?n? istiyorsan?z "This Document Only" seçene?ini i?aretleyerek; yarat?lan CSS'in bu doküman?n <HEAD> taglar? aras?na bir STYLE tan?mlamas? yap?lmas?n? sa?layabilirsiniz. Fakat yapt???m?z stil sitedeki tüm dokümanlarda kullan?lacak ise bunu stillerim.css gibi bir isimle harici olarak kaydedip daha sonra kullanmak istedi?imiz dokümanlara "Attach Style Sheet...." Menüsü ile ba?laman?z daha mant?kl? bir çözüm olacakt?r. Bir stildeki herhangi bir de?i?ikli?in di?er dokümanlar? da otomatik olarak etkilemesi için bu yöntem daha uygun olacakt?r.
OK dedi?imiz anda stilimiz için as?l biçimsel tan?mlamalar? yapaca??m?z Diyalog Penceresine ula??yoruz. Bu pencerenin ba?l??? ?u ?ekilde olacakt?r: "CSS rule Definition for .KucukKirmizi in stillerim.css"
CSS stil tan?mlarken bu makalede bahsi geçen tüm özellikleri kullanacaks?n?z diye bir ?art yok. Zaten bunlar?n hepsini kullanman?z da imkâns?z. Hemen belirtelim ki çok özellik tan?mlanan bir CSS stil taray?c?ya da bir o kadar ek yük getirecek ve sayfay? a??rla?t?racakt?r. Sadece Type ve Background bölümleri bile ço?u zaman i?inizi fazlas? ile görece?inden di?er bölümler sadece özel stiller tan?mlad???n?z zamanlarda i?inize yarayacakt?r.
Burada yaz? türü ve ona benzer tan?mlamalar? yap?yoruz;
Stil yaratma penceresi, Type gölümü
- Font: Yaz? tipini buradan seçiyoruz.
- Size: Yaz? tipimizin büyüklü?ünü belirliyoruz.
- Style: Yaz?m?z?n e?ik olmas?n? sa?lar.
- Line Height: Sat?r yüksekli?ini belirtir. Size'den 2 piksel fazla olmas? ideal bir seçimdir.
- Weight: Kal?n yazmak ve bunun derecelerini belirtmemize yarar.
- Case: Variant ile hemen hemen ayn? i?i görür, yat?lar?n büyük ya da küçük harf ile yaz?lmas?n? ya da sadece ilk harflerini büyük olmas?n? sa?lar.
- Decoration: Altçizgi ve benzeri etkileri buradan ayarl?yoruz.
- Color: Renk seçimini buradan yap?yoruz.
Bazen stilimiz için arka fon ayarlar? da yapmam?z icap edebilir Bu ayarlar? da buradan yap?yoruz.
Stil yaratma penceresi, Background bölümü
- Background Color: Arka fon için istedi?iniz rengi seçebilir ya da renk kodunu yap??t?rabilirsiniz.
- Background Image: Arka fon için renk de?il ama bir resim dosyas? kullanmak istedi?inizde buradan resmi seçiyoruz.
- Repeat: Bu ise seçti?imiz resim dosyas?n?n tekrar etmesini ayarlamam?za yar?yor. Yani resim dosyas? çok küçük ise yaz?n?n kaplad??? tüm alan? kaplatabilir ya da sadece x veya y ekseni boyunca tekrar yapmas?n? sa?layabiliriz.
- Attachment: Burada resim dosyas? Scroll esnas?nda sabit kalabilir (Fixed) ya da oda scroll ile kayar (scroll), gibi iki seçenek mevcut.
- Horizontal Position: Yatay pozisyonu belirtir.
- Vertical Position: Dikey pozisyonu belirtir.
Daha çok paragraflara özgü ayarlar? belirtir. Gazetelerde oldu?u gibi sütunlar (block da denir) yaparak site tasar?m? yap?yorsan?z i?inize çok yarayacak ayarlard?r.
Stil yaratma penceresi, block bölümü
- Word Spacing: Kelimeler aras? bo?lu?u belirtir.
- Letter Spacing: Karakterler aras? bo?lu?u belirtir.
- Vertical Alignment: Dikey hizalama.
- Text Align: Temel metin hizalamay? belirtir.
- Text Indent: Indent ile bir sekme içeri al?nm?? metinlerin sekme de?erini piksel veya di?er birimler cinsinden belirlemenizi sa?lar.
- Whitespace: Beyaz bo?lular da denen bo?luklar?n geni?li?ine dair ayarlar.
- Dsiplay: Görünümün ne türde olaca??n? belirler. Örne?in bir DIV'i gizlemek istersen "none" seçmemiz yeterli olacakt?r.
CSS Box Model standartlar? ve kutu modeli tasar?mlar? için kulland???m?z k?s?md?r. Özellikle DIV'lerin biçimlendirilmesinde kullan?l?r.
Stil yaratma penceresi, Box bölümü
- Witdh: Kutu (box) geni?li?i.
- Height: Kutu yüksekli?i.
- Float: Kutu hizalamas?n?. Örne?in bir nesneyi sa?a hizalamak isterseniz bunu "right" seçmeniz yeterli olacakt?r. Float ve "Block" bölümünde geçen "text-align" seçeneklerinin birbiri ile kar??t?rmamak gerekir. Zira "float" oldu?u gibi nesnenin kendisinin konum hizalamas?n? belirtirken "text-align" ise nesne içeri?inin hizalamas?n? belirtir. Örne?in sa?a hizalanm?? (float: right;) bir DIV'in içeri?i ortalanm?? (text-align: center;) olabilir.
- Clear: Daha çok katmanlar ve DIV'ler ile ilgili bir ayar. Nesneler aras? hizalama ne temas seçeneklerini belirtir.
- Padding: Üst, alt ve yanlardan olan içerik uzakl???n? belirtir.
- Margin: Kutunun çevresindeki di?er nesnelere olan uzakl???n? belirtir.
Border, (baz?lar? bordür der ?) stiliniz için çerçeve tan?m? yapman?z? sa?lar. Textarea'lar gibi form elementlerinde çok güzel sonuçlar verebiliyor.
Stil yaratma penceresi, Border bölümü
- Style: Çerçevenin türünü belirtir. Her kenar için ayr? ayr? ayarlayabilece?iniz gibi standartlar? da kullanabilirsiniz.
- Width: Çerçeve kal?nl???n? belirtir.
- Color: Çerçeve rengini belirtir.
Liste ö?eleri için stil tan?mlamalar? burada yer al?yor.
Stil yaratma penceresi, List bölümü
- Type: Buradan standart tan?ml? madde imlerinden birini seçebilirsiniz.
- Bullet Image: Madde imleri için kendi seçti?iniz bir resim dosyas?n? da kullanman?z mümkün.
- Psition: Liste olarak belirlenmi? metinlerin di?er paragraflara göre konumunu belirtir.
Nesneler ve özellikle katmanlar pozisyon ve görüntülenme ayarlar? buradan yap?l?yor.
Stil yaratma penceresi, Position bölümü
- Type: Konumland?rma türü.
- Widht: Geni?lik.
- Height: Yükseklik.
- Placement: Taray?c?da sayfan?n neresinde bulunmas?n? istiyorsak buradan de?erleri girmeliyiz.
- Clip: Bu daha çok JavaScript kullan?larak yap?lm?? kaybolma efektlerinde kullan?lmas? gereken bir seçenek.
- Visibility: Görünürlü?ü buradan ayarl?yoruz.
- Overflow: CSS katmanlar için içeri?in katman içerisindeki görüntülenme ?eklini belirtir. Örne?in Overflow: scroll seçene?i ile katman içeri?inin iFramelerde oldu?u gibi kayd?r?lmas?n? sa?layabilirsiniz.
Bu k?s?mda ilginizi çekebilecek bölümler ?unlar:
Stil yaratma penceresi, Extenmsions bölümü
- Page Break Before / After: Internet Explorer için geçerli bir tan?mlama seçene?i. Nesneler aras? ili?kilerle alakal? bir olay san?r?m.
- Cursor: Bu stilin uyguland??? metinler için; fare imleci, bu stil ile biçimlendirilmi? nesne üzerine geldi?inde üzerine geldi?inde nas?l bir ?ekil alac???n? belirler. Baz? sitelerde gördü?ümüz linklerin üzerine gidince kursör'in + ?eklini almas? buradan yap?l?yor.
- Filters: Bu özellik ise çok ilginç ve bir o kadar da kullan??l?. Buradan belirleyece?iniz bir filtre için ilgili de?erleri de girmek suretiyle resim dosyalar?na uygulayaca??n?z bu stil sayesinde, sadece CSS stil ile resmi siyah beyaz hale getirebilir, kontrast ayar?n? de?i?tirebilir yada resmi ters çevirebilirsiniz. Sadece resimler de?il nesnelerin görsel özellikleri üzerine çe?itli efektleri de bu k?s?mdan yapabilirsiniz. Fakat taray?c?lar taraf?ndan tam olarak desteklenmeyen bir özellik oldu?undan kullan?rken bunu göz ard? etmemeniz gerekmektedir.
CSS Stillerin ba?l?ca ayarlar? bunlar. Bu ayarlar?n hepsini yapmak genelde pek sa?l?kl? sonuçlar vermez. Bir metin için CSS tan?ml?yorsan?z sadece "Type" k?sm? i?inizi fazlas?yla görecektir.
?stedi?iniz tüm ayarlar? yapt???n?za göre OK diyebilirsiniz. Stilinizi ekledi?iniz anda CSS Styles panelinde, verdi?iniz isimde bir stil görünecektir.