Bu Başlığı Değerlendirin

Dahili CSS

Posted 22-02-2007 at 07:42 by Lizard King
Updated 10-04-2008 at 10:34 by Lizard King

Bir sayfa dizaynı yaparken iki tarz CSS yöntemi izleyebiliriz.

CSS'yi kodun içine gömmek
Harici CSS dosyası kullanmak

Burada kodun içine gömdüğümüz css üzerine örnekler göstericem.

Normalde css kullanmadan dizayn yaptığımızda div kullanırsak şu şekilde birşey çıkar karşımıza

HTML Kod:

<div>Test</div>

Sadece "Test" yazısı çıkarken aşağıda Css kullanarak hazırlanmış örneğimizde karşımıza

HTML Kod:

<div style="width: 200px; height: 100px; border: 4px solid red;">
Test
</div>

200 piksel genişliğinde çevresinde 4 piksel kırmızı çizgi çekilmiş bir kutu içerisine yazılmış "Test" yazısı çıkar.

Bunun haricinde yazdığımız bir sayfaya direk css kodunu ekleyebiliriz. Şeklinde hazırlarsak görebileceğiniz gibi

HTML Kod:

<style type="text/css">
[color="Red"]CSS DEĞERLERİ[/color]
</style>

Belirleyerek sayfa içerisinde kullanacağımız tüm değerleri belirleyebiliriz. Buna bir örnek vermemiz gerekirse

HTML Kod:

<html> <head> <style type="text/css">
div {color: white;width: 200px;height: 100px; border: 4px solid red; }
body {background-color: black; }
</style> </head> <body> <div>Test</div> 
</body > </html>

Görünümü yukarıdaki ikinci "Test" örneği ile aynı olacaktır. Ancak burada dikkat etmeniz gereken önemli nokta style içerisinde div'e bir değer belirledikten sonra kodun içerisinde kullanacağıız her div aynı değere sahip olacaktır.

Style hazırlarken birden fazla değeri aynı elemente kullanabiliriz ki bu tarz bir durumda her elementi birbirinden ; kullanarak ayırmalıyız.