CSS Dersleri

Lanet · 1 Ağustos 2010

Merhaba IyiNET kullanicilari,
İlk CSS dersimize hosgeldiniz

CSS Nedir?
Bu terimi Google üzerinde aradığınızda bir ortak sonuca varırsınız. Uzun yazılışı "Cascading Style Sheets" ve Türkçe çevirisi "Stil Şablonları" aslında buradan bi fikir sahibi olmanız mümkün değil.

Uzun açıklıyışı ve bence açıklanışı şöyle olmalıdır;
CSS(bence) tasarımda olmazsa olmazdır. Tasarım dendiğinde program olarak Photoshop/Coreldraw/İllustrator geliyorsa, dil olarak CSS gelmelidir. Çünkü CSS ile herşeyi yapmanız mümkün. Herşeyi derken tasarim manasinda herşeyi yapabilirsiniz evet. Bir yazı yazmak istersiniz, yazdığınız yazıda her paragraftaki her harf büyük olur, yazı gölgeli olur, yazı mavi olur. Bunu HTML ile de yapabilirsiniz ama CSS ile yaptığınızda daha kolay ve W3C uyumlu olur.

CSS'te arkaplanı, arkaplan resmini, onun tekrarlanıp tekrarlanmayacağını, link şekillerini, link hoverları yani mouse ile üzerine gelindiğindeki aksiyonlarına kadar herşeyi belirleyebilirsiniz.

CSS dersimizin ilk bölümü tamamlanmıştır.
Bir sonraki dersimizde "CSS'e başlangıç/HTML sayfa içinde CSS" dersini göreceğiz.

Lanet · 2 Ağustos 2010

Şimdi CSS derslerimizin 2.bölümüne geçelim.
Bu bölümde önceden söylediğim gibi CSS'e başlangıç/HTML sayfa içinde CSS dersini göreceğiz.

CSS'e başlangıç icin bir dosya olusturup adını "style.css" olarak kaydedelim, o dosyamız açık kalsın ve yeni bi dosya açık index.html olarak kaydedelim.
Şimdi index.html dosyamızın içine şu kodu yazalım;

<link rel="stylesheet" type="text/css" href="style.css" />

Artik style.css, index.html'in bi ürünü oldu

İlk olarak "<body>" taglarimizin ozelliklerini belirleyelim. Bunun icin css dosyamizi su sekilde baslatmamiz gerekli.

body { kodlar buraya gelecek }

Bu iki parantezi unutmayın, her belirlediğimiz elementten sonra ve kodların sonunda bu köşeli parantezi açıp kapatacağız, diğer türlü çalışmıyor.

Ben diyorum ki, arka planımız siyah olsun, siyah asaletin rengi değil mi ne de olsa.

body { background-color: #000; }

Şimdi burada dikkat edeceğiniz 2 nokta var. İkisini de bold olarak belirttim, birisi : diğeri de ;
Bu iki noktaya mutlaka dikkat edin belirlediğimiz bi elementin özelliklerini girmek için her özellikten sonra ":" işaretini koyuyoruz. Özellik bittikten sonra başka bi özellik belirleyebilmemiz için ";" açık kapı bırakıyoruz ki bi sonraki özelliği belirlediğimizde css onu otomatik olarak tanımlasın.

<body> .. </body> taglari arasi artik tamamen siyah oldu. Yani sayfamızın arkaplanı siyah. Şimdi diyelim ki, arkaplanım siyah ama, yazılarım beyaz olsun ki görünebilsin değil mi?

body { background-color: #000; }
.yazi { color: #fff; }

Gördüğünüz gibi yeni bi yazı elementi oluşturduk, şimdi HTML kodlarımızı şöyle düzenliyoruz;

<html>
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<div class="yazi">
yazimiz buraya
</div>
</body>
</html>

Gördüğünüz gibi istediğimiz sonuca ulaşmışızdır. Herneyse şimdi arkadaşlar ben size burada üç şey öğrettim;
1) HTML'e CSS sayfa okutmayı,
2) BODY gibi elementlerin özelliklerini değiştirmeyi,
3) YENİ element yapıp, buna özellik vermeyi.

Yeni bi element yaratacağınızda CSS'te elementin başına "." veya "#" işaretlerinden birisini koyuyorsunuz.

Eğer ki direk css özelliklerini html sayfanızda girmek isterseniz(uzun css dosyası olanlar için tavsiye etmiyorum) şu kodu html sayfanızda kullanıyorsunuz;

<style type="text/css">
css kodları
</style>

2. dersimizde bu kadar, bi dahaki dersimizde css ile kullanılabilen element özelliklerini özet geçmeye çalışacağım.
Sağlıcakla kalın.

abuz89 · 2 Ağustos 2010

teşekküler.

Lanet · 2 Ağustos 2010

Ben teşekkür ederim. Aynaya anlatmak gibisi de yok zaten

Silence- · 2 Ağustos 2010

Teşekkür ederiz canım benim.Eline sağlık

CSS Dersleri

Lanet

1

Lanet

1

abuz89

0

Lanet

1

Silence-

0

Backlink ve Tanıtım Yazısı için iletişime geçmek için Skype Adresimiz: .cid.1580508955483fe5