CSS (Cascading Style Sheet)
Pazartesi, Mayıs 4th, 2009
CSS HTML’ E göre daha çok stil
özelliğine sahip ve yazması daha kolay dökümanlarımızın stilini
ayarlayabileceğimiz bir stil şablonu dilidir.
css in yapısı
p {
color:red;
background:yellow
}
bu dizimde p seçicidi {} arasıda koddur.Yani
seçtiğimiz html nesnesine uygulanacak kod.Şimdi önce seçicilerden sonra da kod
kısmından bahsetmek istiyorum.
seçiciler hmtl elementkerini 1-class
2-id
tanımlamarından seçebilirler.Ama bundan önce
genel seçicilerden bahsedeyim
p,h3{
font-size:3;
font-wieght:bold;
}
bu tabir ile bütün paragraf ve h3
balşlıklarını seçmiş ve büyüklüğünü 3 türünüde kalın yaptık.
*{
color:red;
}
bu kodla classlı veya id ile tanımlanmış
bütün elemanların rengini kırmızı yaptık
class seçiciler
aşağıdaki kodları notdefterine yapıştırıp
cssdeneme.html olarak kaydedelim ve çalıştıralım
<html>
<head>
</head>
<style type=”text/css”>
.mavi{
background:blue;
}
.kirmizi{
background:red;
}
</style>
<body>
<p class=”mavi”><b>bu renk
mavidir</b></p>
<p class=”kirmizi”><b>bu renk
kırmızıdır</b></p>
</body>
</html>
gördüğümüz gibi class ı mavi olan paragraf
elementini .mavi şeklinde seçtik
class seçiciler önlerine “.” alarak
tanımlama yapılır.
id seçiciler
aynı örneğin id seçiler ile yapılışı
aşşağıda;
<html>
<head>
<style type=”text/css”>
#mavi{
background:blue;
}
#kirmizi{
background:red;
}
</style>
</head>
<body>
<p id=”mavi”><b>bu renk
mavidir</b></p>
<p id=”kirmizi”><b>bu renk
kırmızıdır</b></p>
</body>
</html>
burda da id seçerken başına # koyarız vve
tanımlamamızı yaparız.
CSS’in sayfaya
eklenmesi
1-
kod içinde in-line;
css tanımlaması html tagları içerisinde
tanımlama yapılabilir
<div
style=”color:red”>deneme</div>
2-
style elementi kullanılarak;
<style type=”text/css”>
div{
color:red;
}
</style>
3-
dışardan import ederek.
<style type=”text/css”>
@import “ornek.css”;
</style>
burda aynı dizindeki ornek.css i çağırdık.Ben
en çok 3. seçeneği tercih ediyorum yani css çalıştığım sayfamla html sayfamı
ayırıyorum.
Bu konu şimdilik giriş için yeterli.Seçici
kısmını tanıdığımıza göre artık özellik kısmına yani kod kısmına
geçebiliriz.Bidaha ki yazıda bu özelliklerden bahsedicem.
