Ayrıntılı Konu Bilgileri
Sayfa BaşlığıKonu: Css dosyası oluşturmak
Mesaj SayısıMesaj Sayısı: 1 cevap var
OkumaGösterim: 7773
Google Özel Arama

Gönderen Konu: Css dosyası oluşturmak  (Okunma sayısı 7773 defa)

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

    sevdaligul

  • Administrator
  • *

  • İleti: 13121
  • Nerden: Konya
  • Rep: +6511/-0
  • Cinsiyet: Bay
  • GüLe SeVDaLı Bir GeNç
    • MSN Messenger - sevdaligul@gmail.com
    • Profili Görüntüle GüLe SeVDaLı BiR GeNçLiK
  • Çevrimdışı
Css dosyası oluşturmak
« : 02 Haziran 2007, 16:28: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 Resimlerin Görüntülenmesine İzin Verilmiyor. Üye Ol ya da Giriş Yap ;

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 Resimlerin Görüntülenmesine İzin Verilmiyor. Üye Ol ya da Giriş Yap


--------------------------------------------------------------------------------


[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 Resimlerin Görüntülenmesine İzin Verilmiyor. Üye Ol ya da Giriş Yap
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 Resimlerin Görüntülenmesine İzin Verilmiyor. Üye Ol ya da Giriş Yap)


--------------------------------------------------------------------------------


[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ı? Resimlerin Görüntülenmesine İzin Verilmiyor. Üye Ol ya da Giriş Yap)


--------------------------------------------------------------------------------


[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
Aklımdaki sensin
Fikrimdeki Sen
Sen tekderdimsin
Gülüm Benim

    Teknohosting

  • Yeni Üye
  • *
  • Avatar Yok

  • İleti: 1
  • Nerden: esfaseg
  • Rep: +0/-0
  • Cinsiyet: Bay
    • Profili Görüntüle
  • Çevrimdışı
Css dosyası oluşturmak
« Yanıtla #1 : 05 Ocak 2009, 17:18:34 »
teşekkürler bu dökümanı ben yazmıştım  Resimlerin Görüntülenmesine İzin Verilmiyor. Üye Ol ya da Giriş Yap


Paylaş delicious Paylaş digg Paylaş facebook Paylaş furl Paylaş linkedin Paylaş myspace Paylaş reddit Paylaş stumble Paylaş technorati Paylaş twitter
 

Benzer Konular

  Konu / Başlatan Yanıt Son İleti
0 Yanıt
1064 Gösterim
Son İleti 17 Ağustos 2008, 12:28:10
Gönderen: sevdaligul
0 Yanıt
650 Gösterim
Son İleti 02 Ekim 2010, 17:02:48
Gönderen: sevdaligul
0 Yanıt
524 Gösterim
Son İleti 21 Aralık 2010, 20:01:04
Gönderen: nullsix
0 Yanıt
516 Gösterim
Son İleti 16 Haziran 2013, 12:46:23
Gönderen: sevdaligul
0 Yanıt
17 Gösterim
Son İleti 13 Kasım 2017, 22:39:30
Gönderen: alpacino0092

web hosting Domain Web
İçerik sağlayacı paylaşım sitelerinden biri olan sevdaligul.com forum sitemizde 5651 Sayılı Kanun’un 8. Maddesine ve T.C.K’nın 125. Maddesine göre TÜM ÜYELERİMİZ yaptıkları paylaşımlardan sorumludur. sevdaligul.com hakkında yapılacak tüm hukuksal Şikayetler sevdaligul@gmail.com  adresi ile iletişime geçilmesi halinde ilgili kanunlar ve yönetmelikler çerçevesinde en geç 1 (Bir) Hafta içerisinde sevdaligul.com  yönetimi olarak tarafımızdan gereken işlemler yapılacak ve size dönüş yapacaktır.