HTML Tasarımlarda CSS Stil Dosyası Kullanma

HTML Tasarımlarda CSS Stil Dosyası Kullanma

Daha önceden hazırladığımız sayfalarda biçimlendirme bilgilerini dosyamızın içine yazıyorduk. Bu adımda ise tüm biçimlendirme bilgilerini buradan alarak oluşturacağımız dosyasının içine koyacağız. dosyalarını kullanarak web site tasarımınıza istediğiniz görüntüyü verebilirsiniz. Şimdi bir dosyası nasıl oluşturulur ona bir bakalım…

Adobe Dreamweaver’ın File menüsünden New seçeneğine tıklayarak karşımıza çıkan pencereden CSS seçeneğine tıklıyoruz. Dreamweaver karşımıza boş bir CSS dosyası getiriyor. Aslında bu işlemi Not Defteri’nde boş bir belge hazırlayarak da gerçekleştirebiliriz.

Önceki adımlarda DIV etiketinin içine STYLE parametresiyle biçimlendirme bilgileri yazıyorduk. Şimdiyse STYLE yerine CLASS parametresini kullanarak şekillendirmek istediğimiz DIV’imize bir CLASS atıyoruz.

DIV etiketimize CLASS=“ilkbolum” ifadesini ekledikten sonra “ilkbolum” isimli class’ı CSS dosyamızın içinde tanımlamamız gerekiyor. Daha önce STYLE parametresinin içine yazdığımız biçimlendirme bilgilerini yukarıdaki şekilde CSS dosyamıza yazıyoruz.

Artık CSS dosyamıza bir isim vererek onu kaydetmeliyiz. CSS dosyamızı kaydettiğimiz yer büyük önem taşıyor. Çünkü bir sonraki adımda HTML belgemizde bu CSS dosyasının nerede olduğunu belirtmemiz gerekecek.

HTML dosyamızın <HEAD> ile </HEAD> etiketleri arasında kalan bölümüne Stil.CSS dosyamızın bulunduğu konumu belirten <LINK REL=“stylesheet” HREF=“Stil.CSS” /> satırını giriyoruz ve CSS dosyamız kullanıma girmiş oluyor.

Facebook'ta Paylaş
Whatsapp'ta Paylaş
Facebook'ta Paylaş
Whatsapp'ta Paylaş
Yorumlar

Yorumunuzu Yazın

E-posta adresiniz yayınlanmayacaktır.


Son Yorumlar

  • Alpay:Ard arda 7542 şifresini deneyin oluyo...
  • metehan:f9 tuşu windows ta ne işe yarıyor...
  • Melisa:Whatsappa girebiliyor mu ?...
  • Ada:Acaba olabilirm I bende eçok kötüyüm hastalık dedi...
  • Kadir:Hocam vardır bir çözümü derken sizi buldum, çok te...
  • erhan:makale için faydalandım.teşekkürler......
  • ybk:güzel açıklanmış...
  • Seckin taş:İki feisburk hesabım var öncekine nasıl dönüş yapa...
  • inci alp:çok teşekkürler, o kadar kolay hallettim ki ben bi...

Sponsorlarımız

Minecraft Apk indir