Bu yazımızda CSS yazım kuralları ( söz dizimi ) nasıl olduğunu ve yazarken nelere dikkat etmemiz gerektiğini öğreneceğiz. Bunları örnekler vererek daha iyi kavrayacağız. Css Ekleme Yöntemleri ne göre bu kuralları inceleyelim.
1- CSS kodları sayfa içerisinde satır içi (inline) kullanılıyor ise mutlaka “style” attribute içerisinde yazılmalıdır. “style” global özelliğine özellik ve değerlerini yazarız. Her özellikten sonra iki nokta üst üste (:) ve özelliğin değerini yazdıktan sonra noktalı virgül (;) yazılmalıdır. Tek özellik yazıldığında değerden sonra ve birden fazla özelliğe değer yazıldığında son özelliğe değer yazdıktan sonra noktalı virgül yazılmayabilir. Kod Kısmı:
<p style="özellik1:değer1;özellik2:değer2;">Deneme</p> Örnek Kod:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="color:red">Deneme</p> <!-- Tek özelliğe değer verirsek değer sonuna noktalı virgül olmasada olur -->
<p style="color:red;">Deneme</p> <!-- Tek özelliğe değer verirsek değer sonuna noktalı virgül konalabilir-->
<p style="color:blue;background-color:yellow">Deneme</p> <!-- Birden fazla özellik kullanımı. Son özeliğe değer verdikten sonra noktalı virgul yazılmayabilir.-->
<p style="color:blue;background-color:yellow;">Deneme</p> <!-- Birden fazla özellik kullanımı. Son özeliğe değer verdikten sonra noktalı virgul yazılabilir.-->
</body>
</html>Sonuc:
2- CSS Kodları İç Stil Kodları Şeklinde Yazılırsa: Kodlar mutlaka <style> etiketi (tag) içine yazılmalıdır. <style> etiketi <head> etiketi içine yazılır. Biçimlendirmek istediğimizi seçiçi ile seçeriz ve {} (süslü parantez) içerisinde özelliklerimizi ve değerlerini yazarız. Her özellikten sonra iki nokta üst üste ve değerden sonra da noktalı virgül(;) kullanılır. Kod Kısmı:
<head>
<style>
seçiçi{
özellik1:değer1;
özellik2:değer2;
}
</style>
</head>Örnek kod:
<!DOCTYPE html>
<html>
<head>
<style>
p{ /* seçiçi- p etiketini seçiyoruz */
color:red; /*özellik1 - rengini değiştiriyoruz*/
background-color:yellow; /*özellik2 - arkaplan rengini değiştiriyoruz */
}
</style>
</head>
<body>
<p> deneme </p>
</body>
</html>Sonuc:
Aynı anda birden fazla seçiçinin özelliklerini değiştirebiliriz. Bunun için yapmamız gereken seçiçiler arasına virgül koyarız.
<head>
<style>
seçiçi1, seçiçi2, seçiçi3{ /* bu şekilde arasına virgül koyarız */
özellik1:değer1;
özellik2:değer2;
}
</style>
</head>Örnek Kod;
<!DOCTYPE html>
<html>
<head>
<style>
p,h1{ /* p ve h1 seçiliyor. */
color:blue;
background-color:yellow;
}
</style>
</head>
<body>
<h1> Deneme Başlık </h1>
<p> Deneme Paragraf</p>
</body>
</html>Sonuc:
3- Dış CSS Dosyası Yöntemi Kullandığımızda: Dosyalarımızı link değeri ile ekleme yaparız. Kodlarımızı .css uzantılı dosyamızda yazarız. Css dosyası içinde kodlarımızı yazarken <style> etiketi içine yazılmaz. Kodlarımızı direk yazarız. Seçiçi ile seçimi yapıp değerlerimizi veririz.
Örnek Html Kod Kısmı:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stilim.css">
</head>
<body>
<h1> Deneme Başlık </h1>
<p> Deneme Paragraf</p>
</body>
</html>Örnek Css Kod Kısmı(stilim.css dosyası içindeki kodlar):
p,h1{
color:white;
background-color:black;
}Sonuc:
Yukarıda gördüğümüz gibi dış css dosyasındaki ile iç css kodları arasında fark, iç css kodlarının style etiketi içine yazılmasıdır. Dış css kodlarında style etiketi kullanılmaz, kullanılırsa hata verir.
Diger kurallar aynıdır. seçiçi ile seçip {} (süslü parantez) içine alıp özellik ve değerlerimizi yazıyoruz.
Css yazım kuralları ( söz dizimi ) genel olarak bunlardır. İlerleyen css derslerimiz takip ettiğinizde CSS’i daha iyi anlamış olacaksınız.
Başka bir yazımızda görüşmek üzere…
