GüLe SeVDaLi BiR GeNçLiK
WEBMASTER SAHASI => Webmaster Kaynaşma Yeri => Webmaster Sorunları => Konuyu başlatan: sevdaligul - 02 Haziran 2007, 17:10:40
-
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 ; "<link href="style.css" rel="stylesheet">" aşağıdaki örnekteki gibi ekliyoruz...
kod:
<link href="style.css" rel="stylesheet">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>New Page 1</title>
</head>
--------------------------------------------------------------------------------
[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:
<head>
<style type="text/css">
Class (css style) komutlar buraya
</style>
</head>
--------------------------------------------------------------------------------
[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:
<div style="padding:10;">
<table width="308">
<tr>
<td>
Tablo hizalandı...
</td>
</tr>
</table></div>
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:
<div class="kutu"><div class="kutubaslik">MetaLiaZ</div>
Bu DH üyelerine Özel bir CSS Kullanım Örneğidir.
</div>
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:
<div class="kutu"><div class="kutubaslik">MetaLiaZ</div>
Bu DH üyelerine Özel bir CSS Kullanım Örneğidir.
</div>
Ö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:
<input type="text" value="MetaLiaZ Text" class="metaliaz">
<font face="Tahoma"><span style="font-size: 8pt"><input type="text" class="metaliaz"></span></font><p>
<font face="Tahoma">
<textarea class="metaliaz" rows="4" cols="37">MetaLiaZ TextArea</textarea><span style="font-size: 8pt"><textarea></textarea></span></font><p>
<font face="Tahoma">
<input type="submit" value="MetaLiaZ Submit Buton" class="metaliaz"><span style="font-size: 8pt"><input
type="submit" class="metaliaz"></span></font>
<input type="text" value="MetaLiaZ Text" class="metaliaz">
<font face="Tahoma"><span style="font-size: 8pt"><input type="text" class="metaliaz"></span></font><p>
<font face="Tahoma">
<textarea class="metaliaz" rows="4" cols="37">MetaLiaZ TextArea</textarea><span style="font-size: 8pt"><textarea></textarea></span></font><p>
<font face="Tahoma">
<input type="submit" value="MetaLiaZ Submit Buton" class="metaliaz"><span style="font-size: 8pt"><input
type="submit" class="metaliaz"></span></font>
alıntıdır
-
teşekkürler bu dökümanı ben yazmıştım ;)