yazgelistir.com
  Ana Sayfa   Forumlar   Blog  Hakkımızda
  
Loading... Yükleniyor. Lütfen bekleyin ...
 Kategoriler
ASP.NET
ADO.NET
Visual Basic .NET
Visual C# .NET
Visual Studio ve Araçlar
Windows Server System
Office System
.NET Framework
SQL Server
XML Web Servisleri
Yazılım Güvenliği
Yazılım Mühendisliği
Mobil Teknolojileri
Dynamics
Smart Client
Expression Studio
Silverlight
Kod Parçaları
Açık Kaynak Kodlu Uygulamalar
İş Zekası

    0
Çıkış Yap
Üyelik Bilgilerimi Güncelle
Seminerlerim
Favorilerim
Ajanım

 Yazgeliştir
Yazar olmak ister misiniz?
Forumlar
Kitap Önerileri
Haberler
Röportajlar
Yazarlar
İpuçları
Görüşleriniz
Hakkımızda

  İstatistikler
En son kayıt olan üye:
garavi

Şuanki online üyeler ( 7 ) :
iakademi , bekcom , stronger_ht , enderkuyumcu , cuneyt_20 , ssener , mirmiga
 

DorukNet 
     ASP.NET Kategorisi  » CSS ile web sayfası oluşturma    

CSS ile web sayfası oluşturma

Print Versiyonu


 
Yazar: Mehmet Eren ARSU

Tarih:22.01.2008

Puan:4 (Oy Kullanan:10)

Okuma Sayısı:665

  Makaleyi İşaretle


Makale Özeti
Bu makalemizde Css (Cascading Style Sheets) ile tablo kullanmadan web sayfası hazırlamayı inceleyeceğiz.


Makale
Merhabalar,

Makalemizde Css ile tablo kullanmadan web sayfası oluşturmayı inceleyeceğiz.

Bildiğimiz gibi web teknolojilerinin gelişimi ile paralel olarak karmaşık web sitelerinin ortaya çıkması, tasarımların daha hayata geçmeden
değişmesi, tablolu html yapısını içinden çıkılamaz hale, Css'i ise kahramanımız haline gelmiştir.

O zaman bir örnekle kahramanımızı tanımaya başlayalım.

İlk olarak Visual Studio 2005 programımızda File -> New -> WebSite diyerek yeni bir proje oluşturuyoruz.
Sonrasında projemizi sağ tıklayarak Add New Item diyoruz ve bir StyleSheet belgesi seçtikten sonra add buttonuna basıyoruz.
Artık boş css belgemiz hazır.Şimdi yapmamız gereken aşağıda açıklamalı olarak yazdığımız css kodlarını belgemize aktarmak.


/*gövdemizin font,renk ve hizalamalarını yapıyoruz*/

BODY

{

      background: #202328;

      font: 75%/160% Verdana, Arial, sans-serif;

      color: #ffffff;

      text-align: center;

}

           

           

/*linklerimize ait csslerimizi yazıyoruz.*/

/*Linkimizin rengi*/

A

{

      color: #b0dfff;

}

           

/*linkimizin ziyaret edildikten sonraki rengi*/

A:visited

{

      color: #b0dfff;

}

           

/*linkimizin üzerine geldiğimizde aldığı renk*/

A:hover

{

      color: #ffffff;

}

           

/*elemanımızın tuş girdilerini algılamaya başladığı andaki rengi*/

A:focus

{

      color: #33ff33;

}

           

/*fare düğmesine kullanıcının basması ile bırakması arasında geçen sürede linkin aldığı renk*/

A:active

{

      color: #b0dfff;

}

           

           

/*büyük başlığımızın rengi ve fontu*/

H1

{

      color: #ff00ff;

      font-family: Arial, sans-serif;

}

           

/*küçük başlığımızın rengi ve fontu*/

H2

{

      color: #b0dfff;

      font-family: Arial, sans-serif;

}

           

           

/*html kısımında ana adlı div içinde kalan kodların kullanacağı style'ları yazıyoruz*/

/*padding yazıların border'dan ne kadar mesafe uzaklıkta başlayacağını belirtir.*/

/*text-align yazıların hangi yöne dayalı olacağını belirtir.*/

#ana

{

      padding-right: 10px;

      padding-left: 10px;

      padding-bottom: 10px;

      padding-top: 10px;

      text-align: left;

}

           

/*margin sayfanın verilen yöne olan uzaklığını belirtir*/

/*display: block kullandığımız nesnelerin alt alta sıralanmasını sağlar.*/

/*overflow: hidden kutu dışına taşan yazıları gizler.ScrollBar çıkmasını engeller.*/

/*position: relative göreceli konum öğesidir.Öğenin soluna 20px boşluk ekler*/

H1

{

      margin-top: 0px;

      display: block;

      font-size: 180%;

      overflow: hidden;

      width: 172px;

      position: relative;

      height: 36px;

}

/*html kısımında icerik adlı div içinde kalan kodların kullanacağı style'ları yazıyoruz*/

/*margin borderın dışındaki bir nesnemizdir.Margine vereceğimiz değerler ile borderımızın*/

/*olduğu kısmı sayfa kenarlarından istediğimiz kadar uzaklaştırabiliriz.*/

/*margin:  20px 100px 20px 200px değerler sırası ile üst-sağ-alt-sol kenarlardan olan uzaklıkları belirtir.*/

#icerik

{

      margin: 20px 100px 20px 200px;

}

           

/*html kısımında alt adlı div içinde kalan kodların kullanacağı style'ları yazıyoruz*/

/*alt adlı div içinde kalan nesne