[Ders] Daha iyi tasarımlar için CSS ... (2. sayfa)

[Ders] Daha iyi tasarımlar için CSS ... - Sayfa 2

MetaLiaZ · 2007-01-25T18:45:13.0000000+03:00

Merhaba arkadaşlar, DH de üyelerin CSS hakkında takıldığı, sorunlar yaşadığını gözlemledim, Ben bu arkadaşlar için kendi kalemimden bir döküman hazırladım... Umarım herkes için faydalı olur :) [ Örnek 1 - Css dosyası oluşturmak ] Anasayfa (index.htm) 'nın bulunduğu dizine boş bir style.css oluşturuyoruz. (Bunu "sağ tık > yeni metin belgesi oluştur" diyerek dosya uzantısını css yazarakta oluşturabilirsiniz.) [ Örnek 2 - Css'yi sayfanızda çalıştırmak ] Anasayfanızı (index.htm) açıp kodlama bölüamünden en üstüne ; " " aşağıdaki örnekteki gibi ekliyoruz... [color=#CC0000] [/color] New Page 1 [ Örnek 2.1 -Css index sayfanızda çalıştırmak..! ] Eğer Css'yi bir dosyadan değilde sayfa içerisinde dosyaya ihtiyaç duymadan çalıştırmak istiyorsanız index.htm 'yi bir editör ile açın ve aşağıdaki kodları gerekli yere (örnekte "head" dan sonra...) yapıştırmanız yeterli olacaktır... [color=#CC0000] [i]Class (css style) komutlar buraya[/i] [/color] [ Örnek 2.2 -Style komutları sadece istediğiniz yerde kullanmak ; ] CSS ye sadece bir yerde ihtiyaç duyuyorsanız css dosyasına vs. hiç gerek yok... Style komutları işimizi görecektir, şöyle bir yol izliyoruz :) ; Bir tablomuz var diyelim... Bu tabloyu sağa,sola yukarıya doğru hizalayacağız ve bir mesafe bırakacağız. [color=#CC0000] [/color] Tablo hizalandı... [color=#CC0000] [/color] Gördüğünüz gibi tablomuzun başına ve sonuna kırmızı ile gösterdiğimiz komutları getirdik. Böylece Tablomuz sayfa kenarlarına doğru hizalanmış oldu. Bunu aynı şekilde tablo içindeki ders 3 teki kutucuk içinde yapabilirsiniz. Tablo çerçevelerine göre rahat bir şekilde hizalayabilirsiniz :) [ Örnek 3 - Tablo kullanmadan kutular yaratmak ] Bunu özellikte forumdan biri için hazırladım... Tablo kullanmadan mükemmel kutular, kutucuklar yapabilirsiniz... Bu olayı anlatmakla birlikte kullanabileceğiniz bir kaç alternatifte vereceğim... İlk önce style.css 'yi açıyoruz (Dreamweaver tavsiye ederim). Karşımızda bomboş bir sayfa var, biz buraya gerekli komutları kodları yazacağız ki işimiz görülsün :) Açtık dosyamızı ve aşağıdaki kodları olduğu gibi C/P yapıyoruz; .kutu { background-color:#F4F4F4; border:1pt solid #CFCFCF; margin:4px 4px 4px 4px; padding:2px; } .kutubaslik { background-color:#CFCFCF; font-size:100%; font-weight:bold; COLOR: #ffffff; } Burada kutu için ; background-color : Kutucuğun arkaplan rengi, border : Kutucuğun çerçeve kalınlığı (karşısında yazanı " dashed " (çizgili), " dotted " noktalı ya da " solid " düz çizgi olarak ayarlayabilirsiniz), margin : Kutucuğun sağa sola yukarıya ve aşağıya olan mesafesi, padding : Mesafe/sağa sola hiza.. kutubaslik için ; background-color : Başlığın arkaplan rengi, font-size : Başlığa yazılacak yazının font büyüklüğü, font-weight : Başlık yazısını kalın (bold) , italik (italic) gibi olmasını ayarlayabilirsiniz, color : Yazının rengi... [ Örnek 3.1 - Şimdi sıra geldi bunu sayfada uygulamaya ... ] Şimdi index.htm 'yi editörümüzde açıyoruz. Sayfada herhangi bir yere (ister tablo içinde kullanın (tavsiyemdir) ister kullanmayın) aynen aşağıdaki kodları ekliyoruz ; [color=#CC0000]MetaLiaZ[/color] [color=#CC0000]Bu DH üyelerine Özel bir CSS Kullanım Örneğidir.[/color] Önizleme; [ Örnek 3.2 - Kutumuzun başlığına resim ekleyelim..!! - Örneği indirmek için tıklayınız...! ] Bir kutu yapmıştık 3. dersimizde... Şimdi bu kutumuzun başlığına resim ekleyelim ki şekil olsun görsellik açısından... Şimdi şöyle bir yol izleyeceğiz bunun için, style.css 'mizi tekrar açıyoruz aynen aşağıdaki kodu C/P yapıyoruz; .kutu { background-image:url([color=#CC0000]ornek.jpg[/color]); background-repeat: repeat-x; background-color:#F4F4F4; border:1pt solid #CFCFCF; margin:5px 5px 5px 5px; padding:5px; } .kutubaslik { font-size:100%; font-weight:bold; COLOR: #000000; } ornek.jpg ; istediğiniz herhangi bir resim olabilir, Kayıt edip çıkıyoruz... Ve index.htm 'yi editörümüzle açıp 3.1 deki kodumuzu tekrar yapıştırıyoruz; [color=#CC0000]MetaLiaZ[/color] [color=#CC0000]Bu DH üyelerine Özel bir CSS Kullanım Örneğidir.[/color] Önizleme; Bu dersimizde kullandığımız şimdiye kadarki işlediklerimizden farklı olan; background-repeat : Bu resmimizin nasıl ne kadar tekrarlamasını belirler, mesela repeat-x; (x yönünde) , repeat-y; (y yönünde) , no-repeat; (tekrar etme) gibi... Gördüğünüz gibi 1 tablo bile kullanmadan değeri tablodan daha yüksek bir kutu oluşturduk :)) [ Örnek 4 - Sayfanızın default (varsayılan) font'u, rengi vs... ] Aşağıda vereceğim kodu yine style.css dosyanıza C/P yapmanız yeterli olacaktır... Açıklamayı kodun hemen altında yapacağım, TD { FONT-WEIGHT: normal; COLOR: #000000; FONT-SIZE: 70%; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; } font-weight : Yukarıdaki derste de belirttiğim gibi yazının kalın (bold) , italik (italic) ya da normal (ne kalın ne italic ne de alt çizgili) gibi olmasını sağlayabilirsiniz, color : Yazının rengi... font-size : Font boyutu, font-family : Açıklamaya gerek var mı? :)) [ Örnek 5 - Güzel text'ler textarea'lar ve submit butonlar oluşturmak için ; ] Çerçeve ve iç rengi ile oynayabileceğimiz, rengini boyutunu vs. değiştirebileceğimiz bir Style kodu örneği vericem bugün. Bunlar başlıkta belirttiğim gibi kutucuklarınızı dilediğiniz gibi şekillendirebilirsiniz(renk, boyut vs..). İlk olarak style.css dosyasımızı açıyoruz ve aşağıdaki kodu C/P yapıyoruz; .metaliaz { font-family: Arial; font-size: 8pt; border: 2px dashed #c0c0c0; padding: 1; background-color: #F9F9F9 } Sonra index.htm 'mizi açıyoruz ve aşağıdaki kodu yine C/P yapıyoruz ; MetaLiaZ TextArea type="submit" class="metaliaz"> Ve sonuç (Önizleme); [ Örnek 6 - Resimli Başlıklar ] Önizleme ; Önizlemedeki gibi Kategori yanında bulunan, başlıkların önüne resim ekleyebilmek için aşağıdaki kodu style.css’e yapıştırıp, .baslik { background: #fff url(baslikdosya_metaliaz.jpg) no-repeat; font-weight: bold; padding-left:20px; height:16px; font-size:11px; } Ve bunun başlık önünde görülebilmesi için ise index.htm de konu başlıklarını aşağıdaki kod içine almanız gerekmekte Konu Başlığı MetaLiaZ Tümü tarafımdan yazılmıştır ve hazırlanmıştır... Şimdilik benden bu kadar devamı gelecektir, Bir teşekkür yeter :) Saygılarımla

Sıcak Fırsatlarda Tıklananlar

Editörün Seçtiği Fırsatlar

Bu Konudaki Kullanıcılar:

1 Misafir - 1 Masaüstü

5 sn

58
Cevap

0
Favori

2.296
Tıklama

Daha Fazla
İstatistik

Konu İstatistikleri Yükleniyor

Konuya Özel

Öne Çıkar

0 oy

Sayfa:

önceki 1 2 3

Giriş

Mesaj

oldboi

Yarbay

3513 Mesaj