Öğretmenler Forumu

Lütfen giriş yapın veya üye olun.

Kullanıcı adınızı, şifrenizi ve aktif kalma süresini giriniz
Gelişmiş Arama  

Haberler:

Gönderen Konu: Css kullanımı  (Okunma sayısı 9099 defa)

Rindâne

  • Y
  • Tam
  • *****
  • Çevrimdışı Çevrimdışı
  • İleti: 228
    • Öğretmenler Forumu
Css kullanımı
« : 15 Kasım 2009, 15:46:49 »

Bir önceki sayfamızda HTML ile sayfa yapımının ilk giriş bilgilerini öğrenmiştik ama sayfamızın arka planı beyaz, yazılar ise siyah olarak oluştu. Çünkü biz sayfamızın arkaplan rengi ve yazıların rengi için bir tanımlama yapmamıştık. HTML sayfalarda bu tür tanımlar yapılabilir, örneğin;

<html>

<head>
<title>Bu benim ilk web sayfam</title>
<meta name="description" content="Bu bölüm sayfanız ile ilgili açıklayıcı bir cümlenin yer aldığı bölüm" />
</head>

<body bgcolor="#e5e5e5">
<p><font color="384e88">Html öğrenmeye başladım, sonunda ben de bir web sayfası yapmayı öğreneceğim, belki önceleri basit sayfalar yapacağım ama dersler ilerledikçe çok daha zor ama çok daha güzel sayfalar yapabileceğim.</font></p>
</body>

</html>

 Yukarıda gördüğünüz gibi <body> etiketini <body bgcolor="#e5e5e5"> şekline getirerek bir arka plan rengi atadık, <p> etiketinin içine ise <font color="#384e88"> </font> etiketlerini ekleyerek yazılara da bir renk atadık, #e5e5e5 gri rengi, #384e88 ise lacivert rengin Hexadesimal kodlarıdır, renk kodları için http://tr.wikipedia.org/wiki/Web_renkleri sayfasından yararlanabilirsiniz.

 Renk, yazı tipi, yazı boyutu gibi tanımlamaları bu şekilde de yapabiliriz fakat mesela her paragrafta renk tanımlaması yapmamız gerekir, eğer HTML ile birlikte CSS kullanmayı da öğrenirsek işimiz çok daha kolaylaşır.

 Şimdi çaktırmadan CSS konusuna dalalım, CSS sayfada kullanılacak renk, büyüklük gibi tanımlamaları bir defa kullanarak tüm sayfaya etki etmesi temeline dayanır. Bir kaç şekilde kullanılabilir, örneğin her sayfada <head> </head> etiketleri arasına
<style type="text/css">
CSS KODLARI
</style>


şeklinde yapabiliriz, ama çok daha sağlıklısı harici bir css dosyası oluşturup bu harici css dosyasını html sayfamıza bağlamaktır. Böyle yaparsak diyelim ki 1000 sayfalık bir web sitemiz var ve biz yazı renklerini değiştirmek istiyoruz, işte bu harici CSS dosyamızda yapacağımız küçük bir değişiklik ile tüm sayfalarda bir anda tüm yazı renklerimizi değiştirebiliriz.

 Öncelikle .css uzantılı dosyamızı hazırlamalıyız, yine yukarıdaki örnekten yola çıkarak çok basit bir css dosyası hazırlayalım, sadece sayfa arka plan rengini ve yazı renklerini tanımlayalım

Yine not defterini açalım ve aşağıdaki kodları yazalım;

Kod: [Seç]
body {
background:#e5e5e5;
color: #384e88;
}

sol üst köşeden dosya sekmesine tıklayalım, farklı kaydet seçeneğini seçelim ve dosya uzantısını .css olacak şekilde web klasörümüzün içine kaydedelim, örnek olarak bukalemun.css olarak kaydedelim, evet css dosyamız hazır ama bu dosyayı html sayfamıza bağlamamız lazım, peki bunu nasıl yapacağız, html sayfamızı açıp üzerine sağ tıklayacağız ve kaynağı göster linkine tıklayarak kodları görüntüleyeceğiz ve <head> </head> etiketleri arasına

<link rel="stylesheet" href="bukalemun.css" type="text/css"> kodlarını ekleyerek css dosyamızı html sayfamıza bağlayacağız.

 Şimdi, masaüstündeki web adlı klasörümüzün içinde index.html sayfası, bukalemun.css dosyası ve resimler adlı klasör var (tabii şimdilik), index.html sayfamızın kodları ise aşağıdakı gibi oldu.

Kod: [Seç]
<html>

<head>
<title>Bu benim ilk web sayfam</title>
<meta name="description" content="Bu bölüm sayfanız ile ilgili açıklayıcı bir cümlenin yer aldığı bölüm" />
<link rel="stylesheet" href="bukalemun.css" type="text/css">
</head>

<body>
<p>Html öğrenmeye başladım, sonunda ben de bir web sayfası yapmayı öğreneceğim, belki önceleri basit sayfalar yapacağım ama dersler ilerledikçe çok daha zor ama çok daha güzel sayfalar yapabileceğim.</p>
</body>

</html>

 Html sayfamızın içinde arkaplan rengi ,yazı rengi gibi tanımlamalar olmadığı halde sayfamızın arka planı gri, yazılar ise lacivert oldu değil mi? İşte bunu sağlayan bukalemun.css adlı dosyamızdır. Tabii ki bu kullanım çok basit bir kullanım şeklidir, derslerimiz ilerleyince daha neler neler yapacağız. Buraya kadar olan anlatım sadece işin mantığını anlayabilmeniz içindi, daha web tasarımı yapmaya başlamadık:))

Şimdi de Link Özellikleri neymiş ona bir bakalım...
Kayıtlı
Öğretmenler, yeni nesil sizlerin eseri olacaktır.
Mustafa Kemal ATATÜRK

gemici

  • Acemi
  • **
  • Çevrimdışı Çevrimdışı
  • İleti: 71
    • Safranbolu Hasan Gemici Eğitim Uygulam Okulu
Ynt: Css kullanımı
« Yanıtla #1 : 16 Kasım 2009, 15:55:35 »

İlgiyle takip ediyorum. Benim bulunduğum seviyeye geldikten sonra sanırım soru sormaya başlayacağım. Bulunduğum yere gelmen çok uzun sürmeyecek :))
Kayıtlı

Rindâne

  • Y
  • Tam
  • *****
  • Çevrimdışı Çevrimdışı
  • İleti: 228
    • Öğretmenler Forumu
Ynt: Css kullanımı
« Yanıtla #2 : 16 Kasım 2009, 16:57:44 »

Siz artık bu işleri biliyorsunuz hocam. Bundan sonra anlattıklarım da size yabancı gelmeyecektir eminim. CSS kullanarak inanılmaz güzellikte tasarımlar yapılabiliyor. Web teknikleri ile ilgili bir şeyler öğrenmek isteyenlerin en çok zorlandıkları nokta başlangıç noktası. O yüzden CSS kullanımı ve HML hakkında hiç bir şey bilmeyen kişileri göz önünde bulundurarak en basitinden başladım. Umarım birilerine faydamız dokunur.
Kayıtlı
Öğretmenler, yeni nesil sizlerin eseri olacaktır.
Mustafa Kemal ATATÜRK