Zeki Can - WordPress

  CSS

CSS Stillerimizi Ekleme

  CSS    10 Ekim 2016
Yorum Yok

Web sitesi açıldığı zaman ilk olarak stilleri tarayıcı okur ve o stilin kullanıldığı HTML elementlerini belirtilen özelliklere göre tarayıcı web sitesini şekillendirir.

Web sitemizdeki sayfalarımıza stillerimizi eklemizin üç yolu vardır. Bunları şu şekilde sıralayabiliriz.

  • Stillerimizi CSS Dosyasından Çağırmak
  • HTML Sayfamıza CSS Yazmak
  • HTML Elementlerimizin İçerisinde Stil Belirtmek

İlk olarak stillerimizi CSS dosyamızdan nasıl çağırdığımıza bakalım.

Şimdi sizden not derfteriniz açmanızı ve içerisine şu kodları yazmanızı isteyeceğim. (Note defteri yerine diğer css düzenleyici başka programınız varsa onu kullanabilirsiniz. Masa üstüne sağ tıklayıp yeni- metin belgesi yolunu izleyerek yeni bir not defteri açabilirsiniz)

CSS kod yapımızın nasıl yazılacağını önceki derslerimizde incelemiştik hatırlatma amaçlı o dersimizi tekrar gözden geçirebilirsiniz. CSS kod yapısı.

<html>
   <head>
      <title>CSS Öğreniyorum</title>
      <link href="stildosyam.css" type="text/css" rel="stylesheet"/>
   </head>
   <body>
      <p>Bugün yeni bir bilgi öğrendim.</p>
   </body>
   </html>

HTML Sayfanızdaki  <head> ile </head> arasında yer alan

<link href=”stildosyam.css” type=”text/css” rel=”stylesheet”/>

bizim stil dosyamız çağırmaya yarayan kodlarımızın yer aldığı bölüm. Burda

href=”stil dosyam.css” ile belirttiğimiz yerde bizim kaydettiğimiz dosyamzın adı (yani stildosyam) yer almalı ve HTML sayfamız ile CSS dosyamızın aynı klasörde bulunmalıdır. Farklı bir klasörde de bulunabilir tabi. Ama bunu href de belirtmemiz gerekir bu sefer. Başka klasörde kullanmak istiyorsak HTML sayfasına göre konumu yazmalıyız.

Dosyamızın da adını yazdıysak artık CSS dosyamızı HTML sayfamıza bağladık demektir. Yani CSS dosyamızdaki stilleri rahatlıkla HTML sayfamızda kullanabiliriz.

İkinci olarak HTML sayfasında CSS yazmaya bakalım

HTML sayfamızda HEAD elementlerinin arasında STYLE elementi kullanarak stillerimizi tanımlayacağız.

Aşağıdaki örneğe baktığımızda daha iyi anlayacağız.

<html>
   <head>
      <title>Başlığımız</title>
      <style type="text/css">
         body { background-color:blue; color:black; }
         p { font-family: Tahoma, Verdana; font-size: 20px; }
      </style>
   </head>
   <body>
      <p>Yeni bir bilgi öğrendim bugün.</p>
   </body>
   </html>

Fark ettiğiniz üzere yine <head> ile </head> etiketleri arasına stillerimizi tanımladık.

<style type=”text/css”> ile tanımlamaya başladık ve </style> ile kapattık. Böylelikle dosyamızda belirttiğimiz stiller ilk örnekte gösterdiğimiz gibi dışarıdan bir dosyaya bağlı değil ve bağlı olmaksızın kullanılabilir durumdalar.

Son olarak HTML dosyamızın içerisinde Stil belirlemeye bakalım.

Alttaki örneği inceleyelim.

<p style="font-family: Tahoma; font-size: 14px;">
         Yeni bir bilgi öğrendim bugün. ZekiCan.Net sitesinde.
      </p>

Burada yazımızı yazmadan önce stilini tanımlıyoruz. Hızlı çözümler üretmek için bu kullanımdan yararlanılabilir. Ama en iyi kullanım şekli birinci yöntemdir.


Etiketler : , , , , , ,


  Benzer Yazılar


  Yorumlar

Bir Cevap Yazın

E-posta hesabınız yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu yazıya henüz yorum yapılmamıştır, yazı hakkındaki düşüncelerinizi paylaşmaktan çekinmeyin.