Daha iyi tasarımlar için CSS anlatımı

[CRUEL]

Merhaba arkadaşlar,

Benimde kendi kendime kurcalayarak öğrendiğim CSS bilgimi paylaşmak istedim. Umarım herkes için faydalı olur :)



[Ders 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



[Ders 2 - Css'yi sayfanızda çalıştırmak]
Anasayfanızı
(index.htm) açıp kodlama bölümünden en üstüne ; "href="style.css" rel="stylesheet">" aşağıdaki örnekteki gibi
ekliyoruz...


kod:










[Ders 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...



kod:









[Ders 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.


kod:

Tablo hizalandı...

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 :)



[Ders 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;


kod:


.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...



[Ders 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 ;



kod:

MetaLiaZ

Bu DH üyelerine Özel bir CSS Kullanım Örneğidir.

Önizleme;




[Ders 3.2 - Kutumuzun başlığına resim ekleyelim..!! - http://www.rapidshare.com/files/134...nek.zip.html]
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;



kod:


.kutu {
background-image:url(ornek.jpg);
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;



kod:

MetaLiaZ

Bu DH üyelerine Özel bir CSS Kullanım Örneğidir.

Ö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 :))



[Ders 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,


kod:


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ı? :))



[Ders 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;


kod:


.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 ;


kod:



type="text" class="metaliaz">

MetaLiaZ<br />TextArea

type="submit" class="metaliaz">



Ve sonuç (Önizleme);




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
Kaynak : http://metaliaz.com/?p=3